feature: add generateJSON utility function to generate JSON from a HTML string

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
+})

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>

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"/>

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.

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()
+}

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'

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