From a9c0bf5982224e99f9129b8f71dbd7df33be7dfe Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 5 May 2021 23:10:45 +0200
Subject: [PATCH] add a generateJSON utility to the HTML package

---
 .../Guide/Content/GenerateJSON/index.vue      |  5 +++-
 docs/src/docPages/api/utilities/html.md       | 11 +++----
 docs/src/docPages/guide/output.md             |  2 +-
 packages/html/src/example.js                  | 24 ---------------
 packages/html/src/generateHTML.ts             | 10 +++++++
 packages/html/src/generateJSON.ts             | 13 +++++++++
 packages/html/src/index.ts                    | 12 ++------
 .../integration/core/generateHTML.spec.ts     |  2 +-
 .../integration/html/generateHTML.spec.ts     | 29 +++++++++++++++++++
 .../integration/html/generateJSON.spec.ts     | 29 +++++++++++++++++++
 10 files changed, 95 insertions(+), 42 deletions(-)
 delete mode 100644 packages/html/src/example.js
 create mode 100644 packages/html/src/generateHTML.ts
 create mode 100644 packages/html/src/generateJSON.ts
 create mode 100644 tests/cypress/integration/html/generateHTML.spec.ts
 create mode 100644 tests/cypress/integration/html/generateJSON.spec.ts

diff --git a/docs/src/demos/Guide/Content/GenerateJSON/index.vue b/docs/src/demos/Guide/Content/GenerateJSON/index.vue
index 4ecf7034..aff6599d 100644
--- a/docs/src/demos/Guide/Content/GenerateJSON/index.vue
+++ b/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'
diff --git a/docs/src/docPages/api/utilities/html.md b/docs/src/docPages/api/utilities/html.md
index 13de12e7..1b1d76fd 100644
--- a/docs/src/docPages/api/utilities/html.md
+++ b/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"/>
diff --git a/docs/src/docPages/guide/output.md b/docs/src/docPages/guide/output.md
index 9771ec3b..e2adc190 100644
--- a/docs/src/docPages/guide/output.md
+++ b/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.
diff --git a/packages/html/src/example.js b/packages/html/src/example.js
deleted file mode 100644
index 80ac7078..00000000
--- a/packages/html/src/example.js
+++ /dev/null
@@ -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(),
-])
diff --git a/packages/html/src/generateHTML.ts b/packages/html/src/generateHTML.ts
new file mode 100644
index 00000000..d47e9c06
--- /dev/null
+++ b/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)
+}
diff --git a/packages/html/src/generateJSON.ts b/packages/html/src/generateJSON.ts
new file mode 100644
index 00000000..d55af414
--- /dev/null
+++ b/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()
+}
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index a9ec036a..754f4da9 100644
--- a/packages/html/src/index.ts
+++ b/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'
diff --git a/tests/cypress/integration/core/generateHTML.spec.ts b/tests/cypress/integration/core/generateHTML.spec.ts
index 1cf1a467..e1eb4030 100644
--- a/tests/cypress/integration/core/generateHTML.spec.ts
+++ b/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'
diff --git a/tests/cypress/integration/html/generateHTML.spec.ts b/tests/cypress/integration/html/generateHTML.spec.ts
new file mode 100644
index 00000000..e1eb4030
--- /dev/null
+++ b/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>')
+  })
+})
diff --git a/tests/cypress/integration/html/generateJSON.spec.ts b/tests/cypress/integration/html/generateJSON.spec.ts
new file mode 100644
index 00000000..c7817280
--- /dev/null
+++ b/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',
+        }],
+      }],
+    }))
+  })
+})