converted prompt dialog to new pattern

src/public/app/dialogs/options/etapi.js

@@ -1,5 +1,5 @@
 import server from "../../services/server.js";
-import utils from "../../services/utils.js";
+import dialogService from "../../widgets/dialog.js";
 
 const TPL = `
 <h4>ETAPI</h4>
@@ -42,16 +42,14 @@ const TPL = `
     .token-table-button:hover {
         border: 1px solid var(--main-border-color);
     }
-</style>
+</style>`;
-`;
 
 export default class EtapiOptions {
     constructor() {
         $("#options-etapi").html(TPL);
 
         $("#create-etapi-token").on("click", async () => {
-            const promptDialog = await import('../../dialogs/prompt.js');
+            const tokenName = await dialogService.prompt({
-            const tokenName = await promptDialog.ask({
                 title: "New ETAPI token",
                 message: "Please enter new token's name",
                 defaultValue: "new token"
@@ -64,7 +62,7 @@ export default class EtapiOptions {
 
             const {authToken} = await server.post('etapi-tokens', {tokenName});
 
-            await promptDialog.ask({
+            await dialogService.prompt({
                 title: "ETAPI token created",
                 message: 'Copy the created token into clipboard. Trilium stores the token hashed and this is the last time you see it.',
                 defaultValue: authToken
@@ -104,8 +102,7 @@ export default class EtapiOptions {
     }
 
     async renameToken(etapiTokenId, oldName) {
-        const promptDialog = await import('../../dialogs/prompt.js');
+        const tokenName = await dialogService.prompt({
-        const tokenName = await promptDialog.ask({
             title: "Rename token",
             message: "Please enter new token's name",
             defaultValue: oldName

src/public/app/dialogs/prompt.js

@@ -1,59 +0,0 @@
-import utils from "../services/utils.js";
-
-const $dialog = $("#prompt-dialog");
-const $dialogBody = $dialog.find(".modal-body");
-
-let $question;
-let $answer;
-
-const $form = $("#prompt-dialog-form");
-
-let resolve;
-let shownCb;
-
-export function ask({ title, message, defaultValue, shown }) {
-    shownCb = shown;
-
-    $("#prompt-title").text(title || "Prompt");
-
-    $question = $("<label>")
-        .prop("for", "prompt-dialog-answer")
-        .text(message);
-
-    $answer = $("<input>")
-        .prop("type", "text")
-        .prop("id", "prompt-dialog-answer")
-        .addClass("form-control")
-        .val(defaultValue || "");
-
-    $dialogBody.empty().append(
-        $("<div>")
-            .addClass("form-group")
-            .append($question)
-            .append($answer));
-
-    utils.openDialog($dialog, false);
-
-    return new Promise((res, rej) => { resolve = res; });
-}
-
-$dialog.on('shown.bs.modal', () => {
-    if (shownCb) {
-        shownCb({ $dialog, $question, $answer, $form });
-    }
-
-    $answer.trigger('focus').select();
-});
-
-$dialog.on("hidden.bs.modal", () => {
-    if (resolve) {
-        resolve(null);
-    }
-});
-
-$form.on('submit', e => {
-    e.preventDefault();
-    resolve($answer.val());
-
-    $dialog.modal('hide');
-});

src/public/app/layouts/desktop_layout.js

@@ -73,6 +73,7 @@ import NoteRevisionsDialog from "../widgets/dialogs/note_revisions.js";
 import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
 import InfoDialog from "../widgets/dialogs/info.js";
 import ConfirmDialog from "../widgets/dialogs/confirm.js";
+import PromptDialog from "../widgets/dialogs/prompt.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -220,6 +221,7 @@ export default class DesktopLayout {
             .child(new NoteRevisionsDialog())
             .child(new DeleteNotesDialog())
             .child(new InfoDialog())
-            .child(new ConfirmDialog());
+            .child(new ConfirmDialog())
+            .child(new PromptDialog());
     }
 }

src/public/app/widgets/dialog.js

@@ -10,7 +10,13 @@ async function confirm(message) {
         appContext.triggerCommand("showConfirmDialog", {message, callback: res}));
 }
 
+async function prompt(props) {
+    return new Promise(res =>
+        appContext.triggerCommand("showPromptDialog", {...props, callback: res}));
+}
+
 export default {
     info,
-    confirm
+    confirm,
+    prompt
 };

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

@@ -0,0 +1,92 @@
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="prompt-dialog modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <form id="prompt-dialog-form">
+                <div class="modal-header">
+                    <h5 class="prompt-title modal-title mr-auto">Prompt</h5>
+
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                </div>
+                <div class="modal-footer">
+                    <button class="prompt-dialog-ok-button btn btn-primary btn-sm">OK <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>`;
+
+export default class PromptDialog extends BasicWidget {
+    constructor() {
+        super();
+
+        this.resolve = null;
+        this.shownCb = null;
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$dialogBody = this.$widget.find(".modal-body");
+        this.$form = this.$widget.find("#prompt-dialog-form");
+        this.$question = null;
+        this.$answer = null;
+
+        this.$widget.on('shown.bs.modal', () => {
+            if (this.shownCb) {
+                this.shownCb({
+                    $dialog: this.$widget,
+                    $question: this.$question,
+                    $answer: this.$answer,
+                    $form: this.$form
+                });
+            }
+
+            this.$answer.trigger('focus').select();
+        });
+
+        this.$widget.on("hidden.bs.modal", () => {
+            if (this.resolve) {
+                this.resolve(null);
+            }
+        });
+
+        this.$form.on('submit', e => {
+            e.preventDefault();
+            this.resolve(this.$answer.val());
+
+            this.$widget.modal('hide');
+        });
+    }
+
+    showPromptDialogEvent({ title, message, defaultValue, shown, callback }) {
+        this.shownCb = shown;
+        this.resolve = callback;
+
+        this.$widget.find(".prompt-title").text(title || "Prompt");
+
+        this.$question = $("<label>")
+            .prop("for", "prompt-dialog-answer")
+            .text(message);
+
+        this.$answer = $("<input>")
+            .prop("type", "text")
+            .prop("id", "prompt-dialog-answer")
+            .addClass("form-control")
+            .val(defaultValue || "");
+
+        this.$dialogBody.empty().append(
+            $("<div>")
+                .addClass("form-group")
+                .append(this.$question)
+                .append(this.$answer));
+
+        utils.openDialog(this.$widget, false);
+    }
+}

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

@@ -152,8 +152,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
         this.clipboard = null;
 
         this.$createChildNote.on('click', async () => {
-            const promptDialog = await import('../../dialogs/prompt.js');
+            const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
-            const title = await promptDialog.ask({ message: "Enter title of new note",  defaultValue: "new note" });
 
             if (!title.trim()) {
                 return;
@@ -216,8 +215,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
             this.saveData();
         }
         else if (command === "editTitle") {
-            const promptDialog = await import("../../dialogs/prompt.js");
+            const title = await dialogService.prompt({
-            const title = await promptDialog.ask({
                 title: "Rename note",
                 message: "Enter new note title:",
                 defaultValue: $title.text()
@@ -470,8 +468,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
             return;
         }
 
-        const promptDialog = await import("../../dialogs/prompt.js");
+        let name = await dialogService.prompt({
-        let name = await promptDialog.ask({
             message: "Specify new relation name (allowed characters: alphanumeric, colon and underscore):",
             shown: ({ $answer }) => {
                 $answer.on('keyup', () => {

src/views/desktop.ejs

@@ -18,7 +18,6 @@
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
 <%- include('dialogs/options.ejs') %>
-<%- include('dialogs/prompt.ejs') %>
 
 <script type="text/javascript">
     global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */

src/views/dialogs/prompt.ejs

@@ -1,20 +0,0 @@
-<div id="prompt-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <form id="prompt-dialog-form">
-                <div class="modal-header">
-                    <h5 class="modal-title mr-auto" id="prompt-title">Prompt</h5>
-
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-primary btn-sm" id="prompt-dialog-ok-button">OK <kbd>enter</kbd></button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>