Merge pull request #1273 from ueberdosis/feature/generate-json-from-html

New Feature: Generate JSON from HTML

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'

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'