add getSchema & getHtml utility functions to generate HTML from a ProseMirror/tiptap document, without an Editor instance

This commit is contained in:
Hans Pagel
2020-09-03 16:22:08 +02:00
parent 7988be813b
commit e94714a345
5 changed files with 112 additions and 1 deletions

View File

@@ -8,4 +8,7 @@ export { default as Node } from './src/Node'
export { default as Mark } from './src/Mark'
export { default as markInputRule } from './src/inputRules/markInputRule'
export { default as markPasteRule } from './src/pasteRules/markPasteRule'
export { default as markPasteRule } from './src/pasteRules/markPasteRule'
export { default as getSchema } from './src/utils/getSchema'
export { default as generateHtml } from './src/utils/generateHtml'

View File

@@ -0,0 +1,21 @@
import Extension from '../Extension'
import Node from '../Node'
import Mark from '../Mark'
import getSchema from './getSchema'
import { Node as ProseMirrorNode, DOMSerializer } from "prosemirror-model"
export default function generateHtml(doc: object, extensions: (Extension | Node | Mark)[]): string {
const schema = getSchema(extensions)
let contentNode = ProseMirrorNode.fromJSON(schema, doc)
let temporaryDocument = document.implementation.createHTMLDocument()
const div = temporaryDocument.createElement('div')
const fragment = DOMSerializer
.fromSchema(schema)
.serializeFragment(contentNode.content)
div.appendChild(fragment)
return div.innerHTML
}

View File

@@ -0,0 +1,35 @@
import Extension from '../Extension'
import Node from '../Node'
import Mark from '../Mark'
import { Schema } from 'prosemirror-model'
import collect from 'collect.js'
export default function getSchema(extensions: (Extension | Node | Mark)[]): Schema {
return new Schema({
topNode: getTopNodeFromExtensions(extensions),
nodes: getNodesFromExtensions(extensions),
marks: getMarksFromExtensions(extensions),
})
}
function getNodesFromExtensions(extensions: (Extension | Node | Mark)[]): any {
return collect(extensions)
.where('extensionType', 'node')
.mapWithKeys((extension: Node) => [extension.name, extension.schema()])
.all()
}
function getTopNodeFromExtensions(extensions: (Extension | Node | Mark)[]): any {
const topNode = collect(extensions).firstWhere('topNode', true)
if (topNode) {
return topNode.name
}
}
function getMarksFromExtensions(extensions: (Extension | Node | Mark)[]): any {
return collect(extensions)
.where('extensionType', 'mark')
.mapWithKeys((extension: Mark) => [extension.name, extension.schema()])
.all()
}