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 import {tableEditing} from "prosemirror-tables";
   5
   6 import {DOMParser} from "prosemirror-model";
   7
   8 import schema from "./schema";
   9 import menu from "./menu";
  10 import nodeViews from "./node-views";
  11 import {stateToHtml} from "./util";
  12 import {columnResizing} from "./plugins/table-resizing";
  13
  14 class ProseMirrorView {
  15     constructor(target, content) {
  16
  17         // Build DOM from content
  18         const renderDoc = document.implementation.createHTMLDocument();
  19         renderDoc.body.innerHTML = content;
  20
  21         this.view = new EditorView(target, {
  22             state: EditorState.create({
  23                 doc: DOMParser.fromSchema(schema).parse(renderDoc.body),
  24                 plugins: [
  25                     ...exampleSetup({schema, menuBar: false}),
  26                     menu,
  27                     columnResizing(),
  28                     tableEditing(),
  29                 ]
  30             }),
  31             nodeViews,
  32         });
  33
  34         // Fix for native handles (Such as table size handling) in some browsers
  35         document.execCommand("enableObjectResizing", false, "false")
  36         document.execCommand("enableInlineTableEditing", false, "false")
  37     }
  38
  39     get content() {
  40         return stateToHtml(this.view.state);
  41     }
  42
  43     focus() {
  44         this.view.focus()
  45     }
  46
  47     destroy() {
  48         this.view.destroy()
  49     }
  50 }
  51
  52 export default ProseMirrorView;