converted markdown import dialog to new pattern

src/public/app/dialogs/markdown_import.js

@@ -1,62 +0,0 @@
-import libraryLoader from "../services/library_loader.js";
-import toastService from "../services/toast.js";
-import utils from "../services/utils.js";
-import appContext from "../services/app_context.js";
-
-const $dialog = $('#markdown-import-dialog');
-const $importTextarea = $('#markdown-import-textarea');
-const $importButton = $('#markdown-import-button');
-
-async function convertMarkdownToHtml(text) {
-    await libraryLoader.requireLibrary(libraryLoader.COMMONMARK);
-
-    const reader = new commonmark.Parser();
-    const writer = new commonmark.HtmlRenderer();
-    const parsed = reader.parse(text);
-
-    const result = writer.render(parsed);
-
-    appContext.triggerCommand('executeWithTextEditor', {
-        callback: textEditor => {
-            const viewFragment = textEditor.data.processor.toView(result);
-            const modelFragment = textEditor.data.toModel(viewFragment);
-
-            textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
-
-            toastService.showMessage("Markdown content has been imported into the document.");
-        },
-        ntxId: this.ntxId
-    });
-}
-
-export async function importMarkdownInline() {
-    if (appContext.tabManager.getActiveContextNoteType() !== 'text') {
-        return;
-    }
-
-    if (utils.isElectron()) {
-        const {clipboard} = utils.dynamicRequire('electron');
-        const text = clipboard.readText();
-
-        convertMarkdownToHtml(text);
-    }
-    else {
-        utils.openDialog($dialog);
-    }
-}
-
-async function sendForm() {
-    const text = $importTextarea.val();
-
-    $dialog.modal('hide');
-
-    await convertMarkdownToHtml(text);
-
-    $importTextarea.val('');
-}
-
-$importButton.on('click', sendForm);
-
-$dialog.on('shown.bs.modal', () => $importTextarea.trigger('focus'));
-
-utils.bindElShortcut($dialog, 'ctrl+return', sendForm);

src/public/app/layouts/desktop_layout.js

@@ -67,6 +67,7 @@ import CloneToDialog from "../widgets/dialogs/clone_to.js";
 import MoveToDialog from "../widgets/dialogs/move_to.js";
 import ImportDialog from "../widgets/dialogs/import.js";
 import ExportDialog from "../widgets/dialogs/export.js";
+import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -208,6 +209,7 @@ export default class DesktopLayout {
             .child(new CloneToDialog())
             .child(new MoveToDialog())
             .child(new ImportDialog())
-            .child(new ExportDialog());
+            .child(new ExportDialog())
+            .child(new MarkdownImportDialog());
     }
 }

src/public/app/services/glob.js

@@ -23,11 +23,7 @@ function setupGlobs() {
     window.glob.treeCache = froca; // compatibility for CKEditor builds for a while
 
     // for CKEditor integration (button on block toolbar)
-    window.glob.importMarkdownInline = async () => {
+    window.glob.importMarkdownInline = async () => appContext.triggerCommand("importMarkdownInline");
-        const dialog = await import("../dialogs/markdown_import.js");
-
-        dialog.importMarkdownInline();
-    };
 
     window.glob.SEARCH_HELP_TEXT = `
     <strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>

src/public/app/services/root_command_executor.js

@@ -13,7 +13,7 @@ export default class RootCommandExecutor extends Component {
     }
 
     pasteMarkdownIntoTextCommand() {
-        import("../dialogs/markdown_import.js").then(d => d.importMarkdownInline());
+        import("../widgets/dialogs/markdown_import.js").then(d => d.importMarkdownInline());
     }
 
     editReadOnlyNoteCommand() {

src/public/app/widgets/dialogs/markdown_import.js

@@ -0,0 +1,92 @@
+import libraryLoader from "../../services/library_loader.js";
+import toastService from "../../services/toast.js";
+import utils from "../../services/utils.js";
+import appContext from "../../services/app_context.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="markdown-import-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Markdown import</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+
+                <textarea class="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="markdown-import-button btn btn-primary">Import <kbd>Ctrl+Enter</kbd></button>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class MarkdownImportDialog extends BasicWidget {
+    constructor() {
+        super();
+
+        this.lastOpenedTs = 0;
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$importTextarea = this.$widget.find('.markdown-import-textarea');
+        this.$importButton = this.$widget.find('.markdown-import-button');
+
+        this.$importButton.on('click', () => this.sendForm());
+
+        this.$widget.on('shown.bs.modal', () => this.$importTextarea.trigger('focus'));
+
+        utils.bindElShortcut(this.$widget, 'ctrl+return', () => this.sendForm());
+    }
+
+    async convertMarkdownToHtml(text) {
+        await libraryLoader.requireLibrary(libraryLoader.COMMONMARK);
+
+        const reader = new commonmark.Parser();
+        const writer = new commonmark.HtmlRenderer();
+        const parsed = reader.parse(text);
+
+        const result = writer.render(parsed);
+
+        const textEditor = await appContext.tabManager.getActiveContext().getTextEditor();
+
+        const viewFragment = textEditor.data.processor.toView(result);
+        const modelFragment = textEditor.data.toModel(viewFragment);
+
+        textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
+
+        toastService.showMessage("Markdown content has been imported into the document.");
+    }
+
+    async importMarkdownInlineEvent() {
+        if (appContext.tabManager.getActiveContextNoteType() !== 'text') {
+            return;
+        }
+
+        if (utils.isElectron()) {
+            const {clipboard} = utils.dynamicRequire('electron');
+            const text = clipboard.readText();
+
+            this.convertMarkdownToHtml(text);
+        }
+        else {
+            utils.openDialog(this.$widget);
+        }
+    }
+
+    async sendForm() {
+        const text = this.$importTextarea.val();
+
+        this.$widget.modal('hide');
+
+        await this.convertMarkdownToHtml(text);
+
+        this.$importTextarea.val('');
+    }
+}

src/views/desktop.ejs

@@ -17,7 +17,6 @@
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
-<%- include('dialogs/markdown_import.ejs') %>
 <%- include('dialogs/note_revisions.ejs') %>
 <%- include('dialogs/options.ejs') %>
 <%- include('dialogs/protected_session_password.ejs') %>

src/views/dialogs/markdown_import.ejs

@@ -1,20 +0,0 @@
-<div id="markdown-import-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Markdown import</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
-
-                <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
-            </div>
-            <div class="modal-footer">
-                <button id="markdown-import-button" class="btn btn-primary">Import <kbd>Ctrl+Enter</kbd></button>
-            </div>
-        </div>
-    </div>
-</div>