BookStack Code Mirror - bookstack/blob - resources/js/editor/ProseMirrorView.js

   1 import {EditorState} from "prosemirror-state";
   2 import {EditorView} from "prosemirror-view";
   3 import {exampleSetup} from "prosemirror-example-setup";
   4
   5 import {DOMParser, DOMSerializer} from "prosemirror-model";
   6
   7 import schema from "./schema";
   8
   9 class ProseMirrorView {
  10     constructor(target, content) {
  11
  12         // Build DOM from content
  13         const renderDoc = document.implementation.createHTMLDocument();
  14         renderDoc.body.innerHTML = content;
  15
  16         this.view = new EditorView(target, {
  17             state: EditorState.create({
  18                 doc: DOMParser.fromSchema(schema).parse(renderDoc.body),
  19                 plugins: exampleSetup({schema})
  20             })
  21         });
  22     }
  23
  24     get content() {
  25         const fragment = DOMSerializer.fromSchema(schema).serializeFragment(this.view.state.doc.content);
  26         const renderDoc = document.implementation.createHTMLDocument();
  27         renderDoc.body.appendChild(fragment);
  28         return renderDoc.body.innerHTML;
  29     }
  30     focus() { this.view.focus() }
  31     destroy() { this.view.destroy() }
  32 }
  33
  34 export default ProseMirrorView;