react(quick_edit): set up empty dialog

apps/client/src/layouts/layout_commons.tsx

@@ -22,16 +22,8 @@ import RevisionsDialog from "../widgets/dialogs/revisions.js";
 import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
 import InfoDialog from "../widgets/dialogs/info.js";
 import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
-import PopupEditorDialog from "../widgets/dialogs/popup_editor.js";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import NoteIconWidget from "../widgets/note_icon";
-import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
+import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
-import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -57,16 +49,6 @@ export function applyModals(rootContainer: RootContainer) {
         .child(<ConfirmDialog />)
         .child(<PromptDialog />)
         .child(<IncorrectCpuArchDialog />)
-        .child(new PopupEditorDialog()
+        .child(<PopupEditorDialog />)
-                .child(new FlexContainer("row")
-                    .class("title-row")
-                    .css("align-items", "center")
-                    .cssBlock(".title-row > * { margin: 5px; }")
-                    .child(<NoteIconWidget />)
-                    .child(<NoteTitleWidget />))
-                .child(<StandaloneRibbonAdapter component={FormattingToolbar} />)
-                .child(new PromotedAttributesWidget())
-                .child(<NoteDetail />)
-                .child(<NoteList media="screen" displayOnlyCollections />))
         .child(<CallToActionDialog />);
 }

apps/client/src/widgets/dialogs/PopupEditor.css

@@ -0,0 +1,62 @@
+/** Reduce the z-index of modals so that ckeditor popups are properly shown on top of it. */
+body.popup-editor-open > .modal-backdrop { z-index: 998; }
+body.popup-editor-open .popup-editor-dialog { z-index: 999; }
+body.popup-editor-open .ck-clipboard-drop-target-line { z-index: 1000; }
+
+body.desktop .modal.popup-editor-dialog .modal-dialog {
+    max-width: 75vw;
+}
+
+.modal.popup-editor-dialog .modal-header .modal-title {
+    font-size: 1.1em;
+}
+
+.modal.popup-editor-dialog .modal-header .title-row {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+}
+
+.modal.popup-editor-dialog .modal-header .title-row > * {
+    margin: 5px;
+}
+
+.modal.popup-editor-dialog .modal-body {
+    padding: 0;
+    height: 75vh;
+    overflow: auto;
+}
+
+.modal.popup-editor-dialog .note-detail-editable-text {
+    padding: 0 1em;
+}
+
+.modal.popup-editor-dialog .title-row,
+.modal.popup-editor-dialog .modal-title,
+.modal.popup-editor-dialog .note-icon-widget {
+    height: 32px;
+}
+
+.modal.popup-editor-dialog .note-icon-widget {
+    width: 32px;
+    margin: 0;
+    padding: 0;
+}
+
+.modal.popup-editor-dialog .note-icon-widget button.note-icon,
+.modal.popup-editor-dialog .note-title-widget input.note-title {
+    font-size: 1em;
+}
+
+.modal.popup-editor-dialog .classic-toolbar-widget {
+    position: sticky;
+    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    background: var(--modal-background-color);
+    z-index: 998;
+}
+
+.modal.popup-editor-dialog .note-detail-file {
+    padding: 0;
+}

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

@@ -0,0 +1,31 @@
+import { useState } from "preact/hooks";
+import Modal from "../react/Modal";
+import "./PopupEditor.css";
+import { useTriliumEvent } from "../react/hooks";
+import NoteTitleWidget from "../note_title";
+import NoteIcon from "../note_icon";
+
+export default function PopupEditor() {
+    const [ shown, setShown ] = useState(false);
+
+    useTriliumEvent("openInPopup", () => {
+        setShown(true);
+    });
+
+    return (
+        <Modal
+            title={(
+                <div className="title-row">
+                    <NoteIcon />
+                    <NoteTitleWidget />
+                </div>
+            )}
+            className="popup-editor-dialog"
+            size="lg"
+            show={shown}
+            onHidden={() => setShown(false)}
+        >
+            Body goes here
+        </Modal>
+    )
+}

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

@@ -4,82 +4,6 @@ import { openDialog } from "../../services/dialog.js";
 import BasicWidget, { ReactWrappedWidget } from "../basic_widget.js";
 import Container from "../containers/container.js";
 
-const TPL = /*html*/`\
-<div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog">
-    <style>
-        /** Reduce the z-index of modals so that ckeditor popups are properly shown on top of it. */
-        body.popup-editor-open > .modal-backdrop { z-index: 998; }
-        body.popup-editor-open .popup-editor-dialog { z-index: 999; }
-        body.popup-editor-open .ck-clipboard-drop-target-line { z-index: 1000; }
-
-        body.desktop .modal.popup-editor-dialog .modal-dialog {
-            max-width: 75vw;
-        }
-
-        .modal.popup-editor-dialog .modal-header .modal-title {
-            font-size: 1.1em;
-        }
-
-        .modal.popup-editor-dialog .modal-body {
-            padding: 0;
-            height: 75vh;
-            overflow: auto;
-        }
-
-        .modal.popup-editor-dialog .note-detail-editable-text {
-            padding: 0 1em;
-        }
-
-        .modal.popup-editor-dialog .title-row,
-        .modal.popup-editor-dialog .modal-title,
-        .modal.popup-editor-dialog .note-icon-widget {
-            height: 32px;
-        }
-
-        .modal.popup-editor-dialog .note-icon-widget {
-            width: 32px;
-            margin: 0;
-            padding: 0;
-        }
-
-        .modal.popup-editor-dialog .note-icon-widget button.note-icon,
-        .modal.popup-editor-dialog .note-title-widget input.note-title {
-            font-size: 1em;
-        }
-
-        .modal.popup-editor-dialog .classic-toolbar-widget {
-            position: sticky;
-            top: 0;
-            inset-inline-start: 0;
-            inset-inline-end: 0;
-            background: var(--modal-background-color);
-            z-index: 998;
-        }
-
-        .modal.popup-editor-dialog .note-detail-file {
-            padding: 0;
-        }
-    </style>
-
-    <div class="quick-edit-dialog-wrapper">
-        <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <div class="modal-title">
-                        <!-- This is where the first child will be injected -->
-                    </div>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-
-                <div class="modal-body">
-                    <!-- This is where all but the first child will be injected. -->
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-`;
-
 export default class PopupEditorDialog extends Container<BasicWidget> {
 
     private noteContext: NoteContext;
@@ -110,10 +34,6 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
     }
 
     async openInPopupEvent({ noteIdOrPath }: EventData<"openInPopup">) {
-        const $dialog = await openDialog(this.$widget, false, {
-            focus: false
-        });
-
         await this.noteContext.setNote(noteIdOrPath, {
             viewScope: {
                 readOnlyTemporarilyDisabled: true

apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx

@@ -41,6 +41,7 @@ export default function CKEditorWithWatchdog({ containerRef: externalContainerRe
     const [ editor, setEditor ] = useState<CKTextEditor>();
     const { parentComponent, ntxId } = useNoteContext();
 
+    console.log("Register with ntxId", ntxId);
     useKeyboardShortcuts("text-detail", containerRef, parentComponent, ntxId);
 
     useImperativeHandle(editorApi, () => ({