Resolves #4089

.changeset/quick-days-matter.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/html": minor
+---
+
+Replaced zeed-dom with happy-dom

packages/html/package.json

@@ -36,9 +36,6 @@
     "@tiptap/core": "^2.6.4",
     "@tiptap/pm": "^2.6.4"
   },
-  "dependencies": {
-    "zeed-dom": "^0.10.11"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
@@ -47,5 +44,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "npm run clean && rollup -c"
+  },
+  "dependencies": {
+    "happy-dom": "^14.12.3"
   }
 }

packages/html/src/generateJSON.ts

@@ -1,6 +1,6 @@
 import { Extensions, getSchema } from '@tiptap/core'
 import { DOMParser, ParseOptions } from '@tiptap/pm/model'
-import { parseHTML } from 'zeed-dom'
+import { DOMParser as HappyDomParser, Window } from 'happy-dom'
 
 /**
  * Generates a JSON object from the given HTML string and converts it into a Prosemirror node with content.
@@ -16,7 +16,13 @@ import { parseHTML } from 'zeed-dom'
  */
 export function generateJSON(html: string, extensions: Extensions, options?: ParseOptions): Record<string, any> {
   const schema = getSchema(extensions)
-  const dom = parseHTML(html) as unknown as Node
+  const window = new Window()
+  const dom = new HappyDomParser(window).parseFromString(
+    html,
+    'text/html',
+  ).body
 
-  return DOMParser.fromSchema(schema).parse(dom, options).toJSON()
+  return DOMParser.fromSchema(schema)
+    .parse(dom as never, options)
+    .toJSON()
 }

packages/html/src/getHTMLFromFragment.ts

@@ -1,5 +1,5 @@
 import { DOMSerializer, Node, Schema } from '@tiptap/pm/model'
-import { createHTMLDocument, VHTMLDocument } from 'zeed-dom'
+import { Window } from 'happy-dom'
 
 /**
  * Returns the HTML string representation of a given document node.
@@ -23,10 +23,17 @@ export function getHTMLFromFragment(doc: Node, schema: Schema, options?: { docum
     return wrap.innerHTML
   }
 
-  // Use zeed-dom for serialization.
-  const zeedDocument = DOMSerializer.fromSchema(schema).serializeFragment(doc.content, {
-    document: createHTMLDocument() as unknown as Document,
-  }) as unknown as VHTMLDocument
+  // Use happy-dom for serialization.
+  const window = new Window()
 
-  return zeedDocument.render()
+  const fragment = DOMSerializer.fromSchema(schema).serializeFragment(
+    doc.content,
+    {
+      document: window.document as unknown as Document,
+    },
+  )
+
+  const serializer = new window.XMLSerializer()
+
+  return serializer.serializeToString(fragment as never)
 }

tests/cypress/integration/html/generateHTML.spec.ts

@@ -3,7 +3,8 @@
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import { generateHTML } from '@tiptap/html'
+import Youtube from '@tiptap/extension-youtube'
+import { generateHTML, generateJSON } from '@tiptap/html'
 
 describe('generateHTML', () => {
   it('generate HTML from JSON without an editor instance', () => {
@@ -26,4 +27,15 @@ describe('generateHTML', () => {
 
     expect(html).to.eq('<p>Example Text</p>')
   })
+
+  it('can convert from & to html', async () => {
+    const extensions = [Document, Text, Youtube]
+    const html = `<p>Tiptap now supports YouTube embeds! Awesome!</p>
+      <div data-youtube-video>
+        <iframe src="https://www.youtube.com/watch?v=cqHqLQgVCgY"></iframe>
+      </div>`
+    const json = generateJSON(html, extensions)
+
+    expect(generateHTML(json, extensions)).to.equal(html)
+  })
 })