refactoring of mermaid support WIP

src/public/app/entities/note_short.js

@@ -16,7 +16,7 @@ const NOTE_TYPE_ICONS = {
     "relation-map": "bx bx-map-alt",
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
-    "mermaid": "bx bx-network-chart"
+    "mermaid": "bx bx-water"
 };
 
 /**

src/public/app/services/tree_context_menu.js

@@ -32,7 +32,8 @@ class TreeContextMenu {
             { title: "Relation Map", command: command, type: "relation-map", uiIcon: "map-alt" },
             { title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
             { title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
-            { title: "Book", command: command, type: "book", uiIcon: "book" }
+            { title: "Book", command: command, type: "book", uiIcon: "book" },
+            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "water" }
         ];
     }
 

src/public/app/widgets/note_detail.js

@@ -21,7 +21,6 @@ import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
 import NoneTypeWidget from "./type_widgets/none.js";
 import attributeService from "../services/attributes.js";
 import NoteMapTypeWidget from "./type_widgets/note_map.js";
-import MermaidTypeWidget from "./type_widgets/mermaid.js"
 
 const TPL = `
 <div class="note-detail">

src/public/app/widgets/type_widgets/mermaid.js

@@ -1,136 +0,0 @@
-import libraryLoader from "../../services/library_loader.js";
-import TypeWidget from "./type_widget.js";
-import froca from "../../services/froca.js";
-
-const TPL = `<div>
-    <style>
-    .note-detail-code-editor {
-        min-height: 50px;
-    }
-
-    .spacer {
-        height: 20px;
-    }
-    </style>
-
-    <div class="mermaid-error alert alert-warning">
-        <p><strong>The diagram could not displayed.</strong></p>
-        <p class="error-content">Rendering diagram...</p>
-    </div>
-
-    <div class="mermaid-render"></div>
-
-    <div class="spacer"></div>
-
-    <div class="note-detail-code note-detail-printable">
-        <div class="note-detail-code-editor"></div>
-    </div>
-</div>`;
-
-export default class MermaidTypeWidget extends TypeWidget {
-    static getType() { return "mermaid"; }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$display = this.$widget.find('.mermaid-render');
-        this.$errorContainer = this.$widget.find(".mermaid-error");
-        this.$errorMessage = this.$errorContainer.find(".error-content");
-
-        this.$editor = this.$widget.find('.note-detail-code-editor');
-
-
-
-        this.initialized = Promise.all( [this.initRenderer(), this.initEditor()]);
-
-        super.doRender();
-    }
-
-    async initRenderer() {
-        await libraryLoader.requireLibrary(libraryLoader.MERMAID);
-
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        const mermaidTheme = documentStyle.getPropertyValue('--mermaid-theme');
-
-        mermaid.mermaidAPI.initialize({ startOnLoad: false, theme: mermaidTheme.trim() });
-    }
-
-    async initEditor() {
-        await libraryLoader.requireLibrary(libraryLoader.CODE_MIRROR);
-
-        CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
-        CodeMirror.keyMap.default["Tab"] = "indentMore";
-
-        // these conflict with backward/forward navigation shortcuts
-        delete CodeMirror.keyMap.default["Alt-Left"];
-        delete CodeMirror.keyMap.default["Alt-Right"];
-
-        CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
-
-        this.codeEditor = CodeMirror(this.$editor[0], {
-            value: "",
-            viewportMargin: Infinity,
-            indentUnit: 4,
-            matchBrackets: true,
-            matchTags: {bothTags: true},
-            highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false},
-            lint: true,
-            gutters: ["CodeMirror-lint-markers"],
-            lineNumbers: true,
-            tabindex: 300,
-            // we linewrap partly also because without it horizontal scrollbar displays only when you scroll
-            // all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
-            lineWrapping: true,
-            dragDrop: false // with true the editor inlines dropped files which is not what we expect
-        });
-
-        this.codeEditor.on('change', () => {
-            this.spacedUpdate.scheduleUpdate();
-
-            this.updateRender(this.codeEditor.getValue() || "");
-        });
-    }
-
-    async doRefresh(note) {
-        const noteComplement = await froca.getNoteComplement(note.noteId);
-
-        await this.spacedUpdate.allowUpdateWithoutChange(() => {
-            this.updateRender(noteComplement.content || "");
-
-            this.codeEditor.setValue(noteComplement.content || "");
-            this.codeEditor.clearHistory();
-        });
-
-        this.show();
-    }
-
-    show() {
-        this.$widget.show();
-
-        if (this.codeEditor) { // show can be called before render
-            this.codeEditor.refresh();
-        }
-    }
-
-    getContent() {
-        return this.codeEditor.getValue();
-    }
-
-    async updateRender(graph) {
-        const updateWithContent = (content) => {
-            this.$display.html(content);
-        }
-
-        this.$display.empty();
-
-        this.$errorMessage.text('Rendering diagram...');
-
-        try {
-            mermaid.mermaidAPI.render('graphDiv', graph, updateWithContent);
-
-            this.$errorContainer.hide();
-        } catch (e) {
-            this.$errorMessage.text(e.message);
-            this.$errorContainer.show();
-        }
-    }
-}