From 7feb19eb72d04faf4fc32bb491b54c4b9322c0c6 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 5 May 2021 21:24:24 +0200
Subject: [PATCH 1/5] feature: add generateJSON utility function to generate
 JSON from a HTML string

---
 .../Guide/Content/GenerateJSON/index.spec.js  |  7 +++++
 .../Guide/Content/GenerateJSON/index.vue      | 27 +++++++++++++++++
 docs/src/docPages/api/utilities/html.md       |  4 +++
 docs/src/docPages/guide/output.md             |  6 +++-
 packages/core/src/helpers/generateJSON.ts     | 13 +++++++++
 packages/core/src/index.ts                    |  1 +
 .../integration/core/generateJSON.spec.ts     | 29 +++++++++++++++++++
 7 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/demos/Guide/Content/GenerateJSON/index.spec.js
 create mode 100644 docs/src/demos/Guide/Content/GenerateJSON/index.vue
 create mode 100644 packages/core/src/helpers/generateJSON.ts
 create mode 100644 tests/cypress/integration/core/generateJSON.spec.ts

diff --git a/docs/src/demos/Guide/Content/GenerateJSON/index.spec.js b/docs/src/demos/Guide/Content/GenerateJSON/index.spec.js
new file mode 100644
index 00000000..78d6813c
--- /dev/null
+++ b/docs/src/demos/Guide/Content/GenerateJSON/index.spec.js
@@ -0,0 +1,7 @@
+context('/demos/Guide/Content/GenerateJSON', () => {
+  before(() => {
+    cy.visit('/demos/Guide/Content/GenerateJSON')
+  })
+
+  // TODO: Write tests
+})
diff --git a/docs/src/demos/Guide/Content/GenerateJSON/index.vue b/docs/src/demos/Guide/Content/GenerateJSON/index.vue
new file mode 100644
index 00000000..4ecf7034
--- /dev/null
+++ b/docs/src/demos/Guide/Content/GenerateJSON/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <pre><code>{{ output }}</code></pre>
+</template>
+
+<script>
+import { generateJSON } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Bold from '@tiptap/extension-bold'
+
+const html = '<p>Example <strong>Text</strong></p>'
+
+export default {
+  computed: {
+    output() {
+      return generateJSON(html, [
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        // other extensions …
+      ])
+    },
+  },
+}
+</script>
diff --git a/docs/src/docPages/api/utilities/html.md b/docs/src/docPages/api/utilities/html.md
index de242ae8..13de12e7 100644
--- a/docs/src/docPages/api/utilities/html.md
+++ b/docs/src/docPages/api/utilities/html.md
@@ -9,3 +9,7 @@ The utility helps rendering JSON content as HTML without an editor instance, for
 
 ## Usage
 <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"/>
diff --git a/docs/src/docPages/guide/output.md b/docs/src/docPages/guide/output.md
index 7c587ecd..9771ec3b 100644
--- a/docs/src/docPages/guide/output.md
+++ b/docs/src/docPages/guide/output.md
@@ -117,7 +117,11 @@ If you need to render the content on the server side, for example to generate th
 
 That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance.
 
-<demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48"/>
+<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"/>
 
 ## 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/core/src/helpers/generateJSON.ts b/packages/core/src/helpers/generateJSON.ts
new file mode 100644
index 00000000..ec025f49
--- /dev/null
+++ b/packages/core/src/helpers/generateJSON.ts
@@ -0,0 +1,13 @@
+import { DOMParser } from 'prosemirror-model'
+import getSchema from './getSchema'
+import elementFromString from '../utilities/elementFromString'
+import { Extensions } from '../types'
+
+export default function generateJSON(html: string, extensions: Extensions): Record<string, any> {
+  const schema = getSchema(extensions)
+  const dom = elementFromString(html)
+
+  return DOMParser.fromSchema(schema)
+    .parse(dom)
+    .toJSON()
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 276f58af..a5043d6b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,7 @@ export { default as findChildren } from './helpers/findChildren'
 export { default as findParentNode } from './helpers/findParentNode'
 export { default as findParentNodeClosestToPos } from './helpers/findParentNodeClosestToPos'
 export { default as generateHTML } from './helpers/generateHTML'
+export { default as generateJSON } from './helpers/generateJSON'
 export { default as getSchema } from './helpers/getSchema'
 export { default as getHTMLFromFragment } from './helpers/getHTMLFromFragment'
 export { default as getMarkAttributes } from './helpers/getMarkAttributes'
diff --git a/tests/cypress/integration/core/generateJSON.spec.ts b/tests/cypress/integration/core/generateJSON.spec.ts
new file mode 100644
index 00000000..57f96421
--- /dev/null
+++ b/tests/cypress/integration/core/generateJSON.spec.ts
@@ -0,0 +1,29 @@
+/// <reference types="cypress" />
+
+import { generateJSON } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+describe('generateJSON', () => {
+  it('generate HTML from JSON 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',
+        }],
+      }],
+    }))
+  })
+})

From 90380f207d76b35ac75b1b3b604018021e587aa5 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 5 May 2021 21:33:39 +0200
Subject: [PATCH 2/5] fix typo

---
 tests/cypress/integration/core/generateJSON.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/integration/core/generateJSON.spec.ts b/tests/cypress/integration/core/generateJSON.spec.ts
index 57f96421..d589dc2b 100644
--- a/tests/cypress/integration/core/generateJSON.spec.ts
+++ b/tests/cypress/integration/core/generateJSON.spec.ts
@@ -6,7 +6,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 
 describe('generateJSON', () => {
-  it('generate HTML from JSON without an editor instance', () => {
+  it('generate JSON from HTML without an editor instance', () => {
     const html = '<p>Example Text</p>'
 
     const json = generateJSON(html, [

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 3/5] 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',
+        }],
+      }],
+    }))
+  })
+})

From 3b9578b6ba746b162cc6c06c1162c55fe6f99139 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 5 May 2021 23:14:57 +0200
Subject: [PATCH 4/5] add a test for the core utility

---
 tests/cypress/integration/core/generateHTML.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/integration/core/generateHTML.spec.ts b/tests/cypress/integration/core/generateHTML.spec.ts
index e1eb4030..5a60255b 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 'packages/html/src/index'
+import { generateHTML } from '@tiptap/core'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'

From eda15b982b5f653c776ec39e21f954ab2d1dd79b Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 5 May 2021 23:15:50 +0200
Subject: [PATCH 5/5] use package names for the tests

---
 tests/cypress/integration/html/generateHTML.spec.ts | 2 +-
 tests/cypress/integration/html/generateJSON.spec.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/integration/html/generateHTML.spec.ts b/tests/cypress/integration/html/generateHTML.spec.ts
index e1eb4030..1cf1a467 100644
--- a/tests/cypress/integration/html/generateHTML.spec.ts
+++ b/tests/cypress/integration/html/generateHTML.spec.ts
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { generateHTML } from 'packages/html/src/index'
+import { generateHTML } from '@tiptap/html'
 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/generateJSON.spec.ts b/tests/cypress/integration/html/generateJSON.spec.ts
index c7817280..b3a31e4f 100644
--- a/tests/cypress/integration/html/generateJSON.spec.ts
+++ b/tests/cypress/integration/html/generateJSON.spec.ts
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { generateJSON } from 'packages/html/src/index'
+import { generateJSON } from '@tiptap/html'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'