feat(ckeditor/watchdog): improve dialog size

apps/client/src/components/app_context.ts

@@ -34,6 +34,7 @@ import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
 import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
+import type { InfoProps } from "../widgets/dialogs/info.jsx";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -124,7 +125,7 @@ export type CommandMappings = {
         isNewNote?: boolean;
     };
     showPromptDialog: PromptDialogOptions;
-    showInfoDialog: ConfirmWithMessageOptions;
+    showInfoDialog: InfoProps;
     showConfirmDialog: ConfirmWithMessageOptions;
     showRecentChanges: CommandData & { ancestorNoteId: string };
     showImportDialog: CommandData & { noteId: string };

apps/client/src/services/dialog.ts

@@ -3,6 +3,7 @@ import appContext from "../components/app_context.js";
 import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
+import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 
 export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true, config?: Partial<Modal.Options>) {
     if (closeActDialog) {
@@ -37,8 +38,8 @@ export function closeActiveDialog() {
     }
 }
 
-async function info(message: MessageType) {
-    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res }));
+async function info(message: MessageType, extraProps: InfoExtraProps) {
+    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { ...extraProps, message, callback: res }));
 }
 
 /**

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

@@ -1,11 +1,15 @@
 import { EventData } from "../../components/app_context";
-import Modal from "../react/Modal";
+import Modal, { type ModalProps } from "../react/Modal";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import { useRef, useState } from "preact/hooks";
 import { RawHtmlBlock } from "../react/RawHtml";
 import { useTriliumEvent } from "../react/hooks";
 import { isValidElement } from "preact";
+import { ConfirmWithMessageOptions } from "./confirm";
+
+export type InfoExtraProps = Partial<Pick<ModalProps, "size">>;
+export type InfoProps = ConfirmWithMessageOptions & InfoExtraProps;
 
 export default function InfoDialog() {
     const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
@@ -19,7 +23,7 @@ export default function InfoDialog() {
 
     return (<Modal
         className="info-dialog"
-        size="sm"
+        size={opts?.size ?? "sm"}
         title={t("info.modalTitle")}
         onHidden={() => {
             opts?.callback?.();

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

@@ -14,7 +14,7 @@ interface CustomTitleBarButton {
     onClick: () => void;
 }
 
-interface ModalProps {
+export interface ModalProps {
     className: string;
     title: string | ComponentChildren;
     customTitleBarButtons?: (CustomTitleBarButton | null)[];
@@ -164,7 +164,7 @@ export default function Modal({ children, className, size, title, customTitleBar
                                     onClick={titleBarButton.onClick}>
                             </button>
                         ))}
-                        
+
                         <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")}></button>
 
                     </div>

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

@@ -311,7 +311,9 @@ function useWatchdogCrashHandling() {
                                 <p>{t("editable_text.editor_crashed_details_intro")}</p>
                                 <h3>{t("editable_text.editor_crashed_details_title")}</h3>
                                 <pre>{formattedCrash}</pre>
-                            </>);
+                            </>, {
+                                size: "lg"
+                            });
                         }
                     }
                 ]