feat(react): port markdown_import partially

apps/client/src/widgets/dialogs/markdown_import.ts

@@ -1,106 +0,0 @@
-import { t } from "../../services/i18n.js";
-import toastService from "../../services/toast.js";
-import utils from "../../services/utils.js";
-import appContext from "../../components/app_context.js";
-import BasicWidget from "../basic_widget.js";
-import shortcutService from "../../services/shortcuts.js";
-import server from "../../services/server.js";
-import { Modal } from "bootstrap";
-import { openDialog } from "../../services/dialog.js";
-
-const TPL = /*html*/`
-<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">${t("markdown_import.dialog_title")}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("markdown_import.close")}"></button>
-            </div>
-            <div class="modal-body">
-                <p>${t("markdown_import.modal_body_text")}</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">${t("markdown_import.import_button")}</button>
-            </div>
-        </div>
-    </div>
-</div>`;
-
-interface RenderMarkdownResponse {
-    htmlContent: string;
-}
-
-export default class MarkdownImportDialog extends BasicWidget {
-
-    private lastOpenedTs: number;
-    private modal!: bootstrap.Modal;
-    private $importTextarea!: JQuery<HTMLElement>;
-    private $importButton!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.lastOpenedTs = 0;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-        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"));
-
-        shortcutService.bindElShortcut(this.$widget, "ctrl+return", () => this.sendForm());
-    }
-
-    async convertMarkdownToHtml(markdownContent: string) {
-        const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
-
-        const textEditor = await appContext.tabManager.getActiveContext()?.getTextEditor();
-        if (!textEditor) {
-            return;
-        }
-
-        const viewFragment = textEditor.data.processor.toView(htmlContent);
-        const modelFragment = textEditor.data.toModel(viewFragment);
-
-        textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
-        textEditor.editing.view.focus();
-
-        toastService.showMessage(t("markdown_import.import_success"));
-    }
-
-    async pasteMarkdownIntoTextEvent() {
-        await this.importMarkdownInlineEvent(); // BC with keyboard shortcuts command
-    }
-
-    async importMarkdownInlineEvent() {
-        if (appContext.tabManager.getActiveContextNoteType() !== "text") {
-            return;
-        }
-
-        if (utils.isElectron()) {
-            const { clipboard } = utils.dynamicRequire("electron");
-            const text = clipboard.readText();
-
-            this.convertMarkdownToHtml(text);
-        } else {
-            openDialog(this.$widget);
-        }
-    }
-
-    async sendForm() {
-        const text = String(this.$importTextarea.val());
-
-        this.modal.hide();
-
-        await this.convertMarkdownToHtml(text);
-
-        this.$importTextarea.val("");
-    }
-}

apps/client/src/widgets/dialogs/markdown_import.tsx

@@ -0,0 +1,82 @@
+import { useRef, useState } from "preact/compat";
+import appContext from "../../components/app_context";
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
+import server from "../../services/server";
+import toast from "../../services/toast";
+import utils from "../../services/utils";
+import Modal from "../react/Modal";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+
+interface RenderMarkdownResponse {
+    htmlContent: string;
+}
+
+function MarkdownImportDialogComponent() {
+    const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
+    let [ text, setText ] = useState("");  
+
+    async function sendForm() {
+        await convertMarkdownToHtml(text);
+        setText("");
+        closeActiveDialog();
+    }
+
+    return (
+        <Modal
+            className="markdown-import-dialog" title={t("markdown_import.dialog_title")} size="lg"
+            footer={<button className="markdown-import-button btn btn-primary" onClick={sendForm}>{t("markdown_import.import_button")}</button>}
+            onShown={() => markdownImportTextArea.current?.focus()}
+        >
+            <p>{t("markdown_import.modal_body_text")}</p>
+            <textarea ref={markdownImportTextArea} value={text}
+                onInput={(e) => setText(e.currentTarget.value)}
+                style={{ height: 340, width: "100%" }}></textarea>
+        </Modal>
+    )
+}
+
+export default class MarkdownImportDialog extends ReactBasicWidget {
+
+    get component() {
+        return <MarkdownImportDialogComponent />;
+    }
+
+    async importMarkdownInlineEvent() {
+        if (appContext.tabManager.getActiveContextNoteType() !== "text") {
+            return;
+        }
+
+        if (utils.isElectron()) {
+            const { clipboard } = utils.dynamicRequire("electron");
+            const text = clipboard.readText();
+
+            convertMarkdownToHtml(text);
+        } else {
+            openDialog(this.$widget);
+        }
+    }
+
+    async pasteMarkdownIntoTextEvent() {
+        // BC with keyboard shortcuts command
+        await this.importMarkdownInlineEvent();
+    }
+
+}
+
+async function convertMarkdownToHtml(markdownContent: string) {
+    const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
+
+    const textEditor = await appContext.tabManager.getActiveContext()?.getTextEditor();
+    if (!textEditor) {
+        return;
+    }
+
+    const viewFragment = textEditor.data.processor.toView(htmlContent);
+    const modelFragment = textEditor.data.toModel(viewFragment);
+
+    textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
+    textEditor.editing.view.focus();
+
+    toast.showMessage(t("markdown_import.import_success"));
+}

apps/client/src/widgets/react/Modal.tsx

@@ -7,10 +7,11 @@ interface ModalProps {
     title: string;
     size: "lg" | "sm";
     children: ComponentChildren;
+    footer?: ComponentChildren;
     onShown?: () => void;
 }
 
-export default function Modal({ children, className, size, title, onShown }: ModalProps) {
+export default function Modal({ children, className, size, title, footer, onShown }: ModalProps) {
     const modalRef = useRef<HTMLDivElement>(null);
 
     if (onShown) {
@@ -34,6 +35,12 @@ export default function Modal({ children, className, size, title, onShown }: Mod
                     <div className="modal-body">
                         {children}
                     </div>
+
+                    {footer && (
+                        <div className="modal-footer">
+                            {footer}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>