converted include note dialog to new pattern

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

@@ -0,0 +1,109 @@
+import treeService from '../../services/tree.js';
+import noteAutocompleteService from '../../services/note_autocomplete.js';
+import utils from "../../services/utils.js";
+import froca from "../../services/froca.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="include-note-dialog modal 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">Include note</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form class="include-note-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="include-note-autocomplete">Note</label>
+                        <div class="input-group">
+                            <input class="include-note-autocomplete form-control" placeholder="search for note by its name">
+                        </div>
+                    </div>
+
+                    Box size of the included note:
+
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="include-note-box-size" value="small">
+                            small (~ 10 lines)
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="include-note-box-size" value="medium" checked>
+                            medium (~ 30 lines)
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <label class="form-check-label">
+                            <input class="form-check-input" type="radio" name="include-note-box-size" value="full">
+                            full (box shows complete text)
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Include note <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>`;
+
+export default class IncludeNoteDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$form = this.$widget.find(".include-note-form");
+        this.$autoComplete = this.$widget.find(".include-note-autocomplete");
+        this.$form.on('submit', () => {
+            const notePath = this.$autoComplete.getSelectedNotePath();
+
+            if (notePath) {
+                this.$widget.modal('hide');
+
+                this.includeNote(notePath);
+            }
+            else {
+                logError("No noteId to include.");
+            }
+
+            return false;
+        })
+    }
+
+    async showIncludeNoteDialogEvent({textTypeWidget}) {
+        this.textTypeWidget = textTypeWidget;
+
+        await this.refresh();
+
+        utils.openDialog(this.$widget);
+    }
+
+    async refresh(widget) {
+        this.$autoComplete.val('');
+
+        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
+            hideGoToSelectedNoteButton: true,
+            allowCreatingNotes: true
+        });
+        noteAutocompleteService.showRecentNotes(this.$autoComplete);
+    }
+
+    async includeNote(notePath) {
+        const noteId = treeService.getNoteIdFromNotePath(notePath);
+        const note = await froca.getNote(noteId);
+
+        const boxSize = $("input[name='include-note-box-size']:checked").val();
+
+        if (note.type === 'image') {
+            // there's no benefit to use insert note functionlity for images
+            // so we'll just add an IMG tag
+            this.textTypeWidget.addImage(noteId);
+        }
+        else {
+            this.textTypeWidget.addIncludeNote(noteId, boxSize);
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+import appContext from "../../services/app_context.js";
+import BasicWidget from "../basic_widget.js";
+import utils from "../../services/utils.js";
+
+const TPL = `
+<div class="note-source-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <style>
+        .note-source-dialog .note-source {
+            height: 98%;
+            width: 100%;
+            min-height: 500px;
+            overflow: scroll;
+            line-height: 0.7;
+        }
+    </style>
+
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Note source</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <textarea readonly="readonly" class="note-source"></textarea>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class NoteSourceDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$noteSource = this.$widget.find(".note-source");
+    }
+
+    async refresh() {
+        const noteCompletement = await appContext.tabManager.getActiveContext().getNoteComplement();
+
+        this.$noteSource.text(this.formatHtml(noteCompletement.content));
+    }
+
+    formatHtml(str) {
+        const div = document.createElement('div');
+        div.innerHTML = str.trim();
+
+        return this.formatNode(div, 0).innerHTML.trim();
+    }
+
+    formatNode(node, level) {
+        const indentBefore = new Array(level++ + 1).join('  ');
+        const indentAfter  = new Array(level - 1).join('  ');
+        let textNode;
+
+        for (let i = 0; i < node.children.length; i++) {
+            textNode = document.createTextNode('\n' + indentBefore);
+            node.insertBefore(textNode, node.children[i]);
+
+            this.formatNode(node.children[i], level);
+
+            if (node.lastElementChild === node.children[i]) {
+                textNode = document.createTextNode('\n' + indentAfter);
+                node.appendChild(textNode);
+            }
+        }
+
+        return node;
+    }
+
+    async openNoteSourceDialogEvent() {
+        await this.refresh();
+
+        utils.openDialog(this.$widget);
+    }
+}

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

@@ -278,7 +278,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
     }
 
     addIncludeNoteToTextCommand() {
-        import("../../dialogs/include_note.js").then(d => d.showDialog(this));
+        this.triggerCommand("showIncludeNoteDialog", {textTypeWidget: this});
     }
 
     addIncludeNote(noteId, boxSize) {