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 import menu from "./menu";
   9 import nodeViews from "./node-views";
  10
  11 class ProseMirrorView {
  12     constructor(target, content) {
  13
  14         // Build DOM from content
  15         const renderDoc = document.implementation.createHTMLDocument();
  16         renderDoc.body.innerHTML = content;
  17
  18         this.view = new EditorView(target, {
  19             state: EditorState.create({
  20                 doc: DOMParser.fromSchema(schema).parse(renderDoc.body),
  21                 plugins: [
  22                     ...exampleSetup({schema, menuBar: false}),
  23                     menu,
  24                 ]
  25             }),
  26             nodeViews,
  27         });
  28     }
  29
  30     get content() {
  31         const fragment = DOMSerializer.fromSchema(schema).serializeFragment(this.view.state.doc.content);
  32         const renderDoc = document.implementation.createHTMLDocument();
  33         renderDoc.body.appendChild(fragment);
  34         return renderDoc.body.innerHTML;
  35     }
  36     focus() { this.view.focus() }
  37     destroy() { this.view.destroy() }
  38 }
  39
  40 export default ProseMirrorView;