feat(html): switch from zeed-dom to happy-dom-without-node

.changeset/quick-days-matter.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/html": major
+---
+
+Replace `zeed-dom` with `happy-dom-without-node` for broader compatibility of the HTML parser. The only difference you should see is that `happy-dom-without-node` will output `xmlns="http://www.w3.org/1999/xhtml"` on root elements, which makes it compliant with the HTML5 specification.

demos/src/GuideContent/GenerateHTML/React/index.spec.js

@@ -6,6 +6,6 @@ context('/src/GuideContent/GenerateHTML/React/', () => {
   it('should render the content as an HTML string', () => {
     cy.get('pre code').should('exist')
 
-    cy.get('pre code').should('contain', '<p>Example <strong>Text</strong></p>')
+    cy.get('pre code').should('contain', '<p xmlns="http://www.w3.org/1999/xhtml">Example <strong>Text</strong></p>')
   })
 })

demos/src/GuideContent/GenerateHTML/Vue/index.spec.js

@@ -6,6 +6,6 @@ context('/src/GuideContent/GenerateHTML/Vue/', () => {
   it('should render the content as an HTML string', () => {
     cy.get('pre code').should('exist')
 
-    cy.get('pre code').should('contain', '<p>Example <strong>Text</strong></p>')
+    cy.get('pre code').should('contain', '<p xmlns="http://www.w3.org/1999/xhtml">Example <strong>Text</strong></p>')
   })
 })

demos/src/GuideContent/StaticRenderHTML/Vue/index.spec.js

@@ -1,6 +1,6 @@
-context('/src/GuideContent/GenerateHTML/Vue/', () => {
+context('/src/GuideContent/StaticRenderHTML/Vue/', () => {
   before(() => {
-    cy.visit('/src/GuideContent/GenerateHTML/Vue/')
+    cy.visit('/src/GuideContent/StaticRenderHTML/Vue/')
   })
 
   it('should render the content as an HTML string', () => {

packages/html/package.json

@@ -39,7 +39,7 @@
     "@tiptap/pm": "^3.0.0-next.1"
   },
   "dependencies": {
-    "zeed-dom": "^0.15.1"
+    "happy-dom-without-node": "^14.12.3"
   },
   "repository": {
     "type": "git",

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 as HappyDOMWindow } from 'happy-dom-without-node'
 
 /**
  * Generates a JSON object from the given HTML string and converts it into a Prosemirror node with content.
@@ -16,7 +16,10 @@ 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
 
-  return DOMParser.fromSchema(schema).parse(dom, options).toJSON()
+  const parseInstance = window ? new window.DOMParser() : new HappyDOMParser(new HappyDOMWindow())
+
+  return DOMParser.fromSchema(schema)
+    .parse(parseInstance.parseFromString(html, 'text/html').body as Node, 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-without-node'
 
 /**
  * Returns the HTML string representation of a given document node.
@@ -23,10 +23,14 @@ 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 browserWindow = window || new Window()
 
-  return zeedDocument.render()
+  const fragment = DOMSerializer.fromSchema(schema).serializeFragment(doc.content, {
+    document: browserWindow.document as unknown as Document,
+  })
+
+  const serializer = new browserWindow.XMLSerializer()
+
+  return serializer.serializeToString(fragment as any)
 }