Can I convert a random HTML into Prosemirror JSON/doc

hanspagel · August 25, 2021, 9:38pm

Have a look at the generateJSON utility we wrote for tiptap:

ueberdosis/tiptap/blob/main/packages/html/src/generateJSON.ts

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

It’s using hostic-dom, which based on some Vue 3 internals.

It takes a string and outputs JSON, the opposite way (generateHTML) can be found in the same folder. Works in the browser context and in Node.js.

Hope that helps!