add a generateJSON utility to the HTML package

docs/src/demos/Guide/Content/GenerateJSON/index.vue

@@ -3,7 +3,10 @@
 </template>
 
 <script>
-import { generateJSON } from '@tiptap/core'
+// Option 1: Browser + server-side
+import { generateJSON } from '@tiptap/html'
+// Option 2: Browser-only (lightweight)
+// import { generateJSON } from '@tiptap/core'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'

docs/src/docPages/api/utilities/html.md

@@ -2,14 +2,15 @@
 [![Version](https://img.shields.io/npm/v/@tiptap/html.svg?label=version)](https://www.npmjs.com/package/@tiptap/html)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/html.svg)](https://npmcharts.com/compare/@tiptap/html?minimal=true)
 
-The utility helps rendering JSON content as HTML without an editor instance, for example on the server side. All it needs is a JSON and an array of extensions.
+The utility helps rendering JSON content as HTML, and generating JSON from HTML, without an editor instance, for example on the server side.
+
+All it needs is JSON or a HTML string, and a list of extensions.
 
 ## Source code
 [packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/)
 
-## Usage
+## Generate HTML from JSON
 <demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48"/>
 
-By the way, the other way is possible, too. The below examples shows how to generate JSON from HTML.
-
-<demo name="Guide/Content/GenerateJSON" highlight="6,17-23"/>
+## Generate JSON from HTML
+<demo name="Guide/Content/GenerateJSON" highlight="6-7,18-24"/>

docs/src/docPages/guide/output.md

@@ -121,7 +121,7 @@ That’s what the `generateHTML()` is for. It’s a helper function which render
 
 By the way, the other way is possible, too. The below examples shows how to generate JSON from HTML.
 
-<demo name="Guide/Content/GenerateJSON" highlight="6,17-23"/>
+<demo name="Guide/Content/GenerateJSON" highlight="6-7,18-24"/>
 
 ## Migration
 If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly.

packages/html/src/example.js

@@ -1,24 +0,0 @@
-import { generateHTML } from '@tiptap/html'
-
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-
-// eslint-disable-next-line
-const html = generateHTML({
-  type: 'doc',
-  content: [{
-    type: 'paragraph',
-    attrs: {
-      align: 'left',
-    },
-    content: [{
-      type: 'text',
-      text: 'Example Text',
-    }],
-  }],
-}, [
-  new Document(),
-  new Paragraph(),
-  new Text(),
-])

packages/html/src/generateHTML.ts

@@ -0,0 +1,10 @@
+import { Extensions, getSchema } from '@tiptap/core'
+import { Node } from 'prosemirror-model'
+import getHTMLFromFragment from './getHTMLFromFragment'
+
+export default function generateHTML(doc: object, extensions: Extensions): string {
+  const schema = getSchema(extensions)
+  const contentNode = Node.fromJSON(schema, doc)
+
+  return getHTMLFromFragment(contentNode, schema)
+}

packages/html/src/generateJSON.ts

@@ -0,0 +1,13 @@
+import { DOMParser } from 'prosemirror-model'
+import { getSchema, Extensions } from '@tiptap/core'
+// @ts-ignore
+import { parseHTML } from 'hostic-dom'
+
+export default function generateJSON(html: string, extensions: Extensions): Record<string, any> {
+  const schema = getSchema(extensions)
+  const dom = parseHTML(html)
+
+  return DOMParser.fromSchema(schema)
+    .parse(dom)
+    .toJSON()
+}

packages/html/src/index.ts

@@ -1,10 +1,2 @@
-import { Extensions, getSchema } from '@tiptap/core'
-import { Node } from 'prosemirror-model'
-import getHTMLFromFragment from './getHTMLFromFragment'
-
-export function generateHTML(doc: object, extensions: Extensions): string {
-  const schema = getSchema(extensions)
-  const contentNode = Node.fromJSON(schema, doc)
-
-  return getHTMLFromFragment(contentNode, schema)
-}
+export { default as generateHTML } from './generateHTML'
+export { default as generateJSON } from './generateJSON'

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

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { generateHTML } from '@tiptap/html'
+import { generateHTML } from 'packages/html/src/index'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'

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

@@ -0,0 +1,29 @@
+/// <reference types="cypress" />
+
+import { generateHTML } from 'packages/html/src/index'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+describe('generateHTML', () => {
+  it('generate HTML from JSON without an editor instance', () => {
+    const json = {
+      type: 'doc',
+      content: [{
+        type: 'paragraph',
+        content: [{
+          type: 'text',
+          text: 'Example Text',
+        }],
+      }],
+    }
+
+    const html = generateHTML(json, [
+      Document,
+      Paragraph,
+      Text,
+    ])
+
+    expect(html).to.eq('<p>Example Text</p>')
+  })
+})

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

@@ -0,0 +1,29 @@
+/// <reference types="cypress" />
+
+import { generateJSON } from 'packages/html/src/index'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+describe('generateJSON', () => {
+  it('generate JSON from HTML without an editor instance', () => {
+    const html = '<p>Example Text</p>'
+
+    const json = generateJSON(html, [
+      Document,
+      Paragraph,
+      Text,
+    ])
+
+    expect(JSON.stringify(json)).to.eq(JSON.stringify({
+      type: 'doc',
+      content: [{
+        type: 'paragraph',
+        content: [{
+          type: 'text',
+          text: 'Example Text',
+        }],
+      }],
+    }))
+  })
+})