@rapidmx/web-client 0.20.0 → 0.21.0

package/apps/shared/components/mail/compose/RichTextEditor.tsx

@@ -1,147 +1,147 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { TextStyleKit } from "@tiptap/extension-text-style";
-import TextAlign from "@tiptap/extension-text-align";
-import Highlight from "@tiptap/extension-highlight";
-import Image from "@tiptap/extension-image";
-import { TableKit } from "@tiptap/extension-table";
-import Placeholder from "@tiptap/extension-placeholder";
-import ComposeToolbar from "./ComposeToolbar.js";
-
-export interface RichTextEditorProps {
-    value: string;
-    onChange: (value: string) => void;
-    height?: string;
-    /** When true, the editor fills its parent's height via flexbox instead of a fixed `height` — for
-     * embedding inside a flex-column container of variable height (the floating Compose window) where
-     * a literal pixel height can't be computed up front. `height` is ignored when this is set. */
-    fill?: boolean;
-    /** Passed straight through to `ComposeToolbar` — see its own doc comment on this prop. */
-    onUploadImage: (file: File) => Promise<string | null>;
-    /** Focuses the editor with the caret at the very start of the document once it mounts - a reply or forward, whose
-     * body starts with an empty paragraph above the signature and quote, so typing goes above them. Only read when
-     * the editor is created. */
-    autoFocusStart?: boolean;
-    /** Called once the editor is ready, with `value` as the editor itself serializes it: TipTap drops what its schema
-     * doesn't hold (e.g. a blockquote's `style`) and adds an empty paragraph after a trailing non-paragraph node (a
-     * quote). That normalization happens on the editor's first transaction - even one that only moves the caret -
-     * and isn't reported through `onChange`, so a caller can compare later edits against this instead of `value`. */
-    onInitialized?: (value: string) => void;
-    /**
-     * HTML to add at the end of the document, once, as soon as there is some (it may be undefined when the editor is created and
-     * defined later). A reply opens its editor before the quoted original has been fetched and hands the quote in through this when
-     * it arrives - so whatever has been typed above stays, and the quote lands where it always did, under the signature.
-     */
-    appendHtml?: string;
-    /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
-    onAppended?: (value: string) => void;
-}
-
-/**
- * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
- * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
- * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
- * comment).
- *
- * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
- * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
- * `editor.getHTML()`) through `onChange`.
- *
- * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
- * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
- * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
- * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
- * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
- * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
- * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
- * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
- * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
- * an editor view actually mounts.
- */
-export default function RichTextEditor({
-    value,
-    onChange,
-    height = "360px",
-    fill = false,
-    onUploadImage,
-    autoFocusStart = false,
-    onInitialized,
-    appendHtml,
-    onAppended,
-}: RichTextEditorProps) {
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const onInitializedRef = useRef(onInitialized);
-    onInitializedRef.current = onInitialized;
-    const onAppendedRef = useRef(onAppended);
-    onAppendedRef.current = onAppended;
-    const appendedRef = useRef<string | undefined>(undefined);
-    // Transactions before `create` (the autofocus, and the normalizing one below) aren't edits.
-    const initializedRef = useRef(false);
-    // Held for this editor's lifetime: TipTap focuses a tick after creating the editor, and a re-render passing a
-    // different value in between would replace the option (via `setOptions`) before it's read.
-    const [autofocus] = useState<"start" | false>(autoFocusStart ? "start" : false);
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit.configure({ link: { openOnClick: false } }),
-            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
-            TextAlign.configure({ types: ["heading", "paragraph"] }),
-            Highlight,
-            Image,
-            TableKit.configure({ table: { resizable: true } }),
-            Placeholder.configure({ placeholder: "Write your message…" }),
-        ],
-        content: value,
-        autofocus,
-        immediatelyRender: false,
-        editorProps: {
-            // Ctrl/Cmd+Enter is the compose window's Send. TipTap binds it to a hard break, and a key it handles never reaches the
-            // window's shortcut (which skips what a widget already took), so it inserted a line break and sent nothing. Returning true here
-            // stops ProseMirror handling it without preventing the event, which goes on to the shortcut. Shift+Enter is still the hard break.
-            handleDOMEvents: { keydown: (_view, event) => event.key === "Enter" && (event.ctrlKey || event.metaKey) },
-        },
-        onCreate: ({ editor: created }) => {
-            // An empty transaction runs the schema's append-transaction normalization now, before any edit.
-            created.view.dispatch(created.state.tr);
-            initializedRef.current = true;
-            onInitializedRef.current?.(created.getHTML());
-        },
-        onUpdate: ({ editor: updated }) => {
-            if (initializedRef.current) {
-                onChangeRef.current(updated.getHTML());
-            }
-        },
-    });
-
-    // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
-    useEffect(() => {
-        if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {
-            return;
-        }
-        appendedRef.current = appendHtml;
-        editor.commands.insertContentAt(editor.state.doc.content.size, appendHtml);
-        onAppendedRef.current?.(editor.getHTML());
-    }, [editor, appendHtml]);
-
-    return (
-        <div className={["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" ")}>
-            <ComposeToolbar editor={editor} onUploadImage={onUploadImage} />
-            <EditorContent
-                editor={editor}
-                style={fill ? undefined : { height }}
-                className={[
-                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
-                    fill ? "flex-1 min-h-0" : "",
-                ]
-                    .filter(Boolean)
-                    .join(" ")}
-            />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef, useState } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import { TableKit } from "@tiptap/extension-table";
+import Placeholder from "@tiptap/extension-placeholder";
+import ComposeToolbar from "./ComposeToolbar.js";
+
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    height?: string;
+    /** When true, the editor fills its parent's height via flexbox instead of a fixed `height` — for
+     * embedding inside a flex-column container of variable height (the floating Compose window) where
+     * a literal pixel height can't be computed up front. `height` is ignored when this is set. */
+    fill?: boolean;
+    /** Passed straight through to `ComposeToolbar` — see its own doc comment on this prop. */
+    onUploadImage: (file: File) => Promise<string | null>;
+    /** Focuses the editor with the caret at the very start of the document once it mounts - a reply or forward, whose
+     * body starts with an empty paragraph above the signature and quote, so typing goes above them. Only read when
+     * the editor is created. */
+    autoFocusStart?: boolean;
+    /** Called once the editor is ready, with `value` as the editor itself serializes it: TipTap drops what its schema
+     * doesn't hold (e.g. a blockquote's `style`) and adds an empty paragraph after a trailing non-paragraph node (a
+     * quote). That normalization happens on the editor's first transaction - even one that only moves the caret -
+     * and isn't reported through `onChange`, so a caller can compare later edits against this instead of `value`. */
+    onInitialized?: (value: string) => void;
+    /**
+     * HTML to add at the end of the document, once, as soon as there is some (it may be undefined when the editor is created and
+     * defined later). A reply opens its editor before the quoted original has been fetched and hands the quote in through this when
+     * it arrives - so whatever has been typed above stays, and the quote lands where it always did, under the signature.
+     */
+    appendHtml?: string;
+    /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
+    onAppended?: (value: string) => void;
+}
+
+/**
+ * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
+ * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
+ * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
+ * comment).
+ *
+ * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
+ * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
+ * `editor.getHTML()`) through `onChange`.
+ *
+ * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
+ * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
+ * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
+ * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
+ * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
+ * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
+ * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
+ * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
+ * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
+ * an editor view actually mounts.
+ */
+export default function RichTextEditor({
+    value,
+    onChange,
+    height = "360px",
+    fill = false,
+    onUploadImage,
+    autoFocusStart = false,
+    onInitialized,
+    appendHtml,
+    onAppended,
+}: RichTextEditorProps) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onInitializedRef = useRef(onInitialized);
+    onInitializedRef.current = onInitialized;
+    const onAppendedRef = useRef(onAppended);
+    onAppendedRef.current = onAppended;
+    const appendedRef = useRef<string | undefined>(undefined);
+    // Transactions before `create` (the autofocus, and the normalizing one below) aren't edits.
+    const initializedRef = useRef(false);
+    // Held for this editor's lifetime: TipTap focuses a tick after creating the editor, and a re-render passing a
+    // different value in between would replace the option (via `setOptions`) before it's read.
+    const [autofocus] = useState<"start" | false>(autoFocusStart ? "start" : false);
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({ link: { openOnClick: false } }),
+            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
+            TextAlign.configure({ types: ["heading", "paragraph"] }),
+            Highlight,
+            Image,
+            TableKit.configure({ table: { resizable: true } }),
+            Placeholder.configure({ placeholder: "Write your message…" }),
+        ],
+        content: value,
+        autofocus,
+        immediatelyRender: false,
+        editorProps: {
+            // Ctrl/Cmd+Enter is the compose window's Send. TipTap binds it to a hard break, and a key it handles never reaches the
+            // window's shortcut (which skips what a widget already took), so it inserted a line break and sent nothing. Returning true here
+            // stops ProseMirror handling it without preventing the event, which goes on to the shortcut. Shift+Enter is still the hard break.
+            handleDOMEvents: { keydown: (_view, event) => event.key === "Enter" && (event.ctrlKey || event.metaKey) },
+        },
+        onCreate: ({ editor: created }) => {
+            // An empty transaction runs the schema's append-transaction normalization now, before any edit.
+            created.view.dispatch(created.state.tr);
+            initializedRef.current = true;
+            onInitializedRef.current?.(created.getHTML());
+        },
+        onUpdate: ({ editor: updated }) => {
+            if (initializedRef.current) {
+                onChangeRef.current(updated.getHTML());
+            }
+        },
+    });
+
+    // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
+    useEffect(() => {
+        if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {
+            return;
+        }
+        appendedRef.current = appendHtml;
+        editor.commands.insertContentAt(editor.state.doc.content.size, appendHtml);
+        onAppendedRef.current?.(editor.getHTML());
+    }, [editor, appendHtml]);
+
+    return (
+        <div className={["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" ")}>
+            <ComposeToolbar editor={editor} onUploadImage={onUploadImage} />
+            <EditorContent
+                editor={editor}
+                style={fill ? undefined : { height }}
+                className={[
+                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
+                    fill ? "flex-1 min-h-0" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+            />
+        </div>
+    );
+}

package/apps/shared/components/mail/compose/composeFlushRegistry.ts

@@ -1,60 +1,60 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/** Saves a compose window's unsaved edits (or waits for a save already on the wire), resolving to `false` when
- * something the window holds is still unsaved afterwards (any other value counts as saved). Never rejects. */
-export type ComposeFlush = () => Promise<unknown>;
-
-const flushers = new Set<ComposeFlush>();
-let signingOut = false;
-
-/**
- * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
- * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
- * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
- * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
- */
-export function markSigningOut(): void {
-    signingOut = true;
-}
-
-/** Undoes `markSigningOut()`. */
-export function clearSigningOut(): void {
-    signingOut = false;
-}
-
-/** Whether `markSigningOut()` has been called (and not cleared). */
-export function isSigningOut(): boolean {
-    return signingOut;
-}
-
-/**
- * Registers an open compose window's draft flush, so leaving the app on purpose (Sign Out) can save the
- * last edits still waiting on the autosave debounce before the session ends. Returns the unregister
- * function. Module-level rather than React context: `AppShell` (the sign-out handler) renders the
- * `ComposeProvider` itself, so it can't read that provider's context.
- */
-export function registerComposeFlush(flush: ComposeFlush): () => void {
-    flushers.add(flush);
-    return () => {
-        flushers.delete(flush);
-    };
-}
-
-/**
- * Runs every registered flush and waits for all of them, but no longer than `timeoutMs`. Resolves to `true`
- * only when every window reported its content saved in time (a window whose save failed also shows the user
- * why, with Discard / Keep editing). Never rejects.
- */
-export async function flushComposeDrafts(timeoutMs: number): Promise<boolean> {
-    let timer: ReturnType<typeof setTimeout> | undefined;
-    const timeout = new Promise<boolean>((resolve) => {
-        timer = setTimeout(() => resolve(false), timeoutMs);
-    });
-    const all = Promise.all([...flushers].map((flush) => flush().catch(() => false))).then((results) => results.every((result) => result !== false));
-    const saved = await Promise.race([all, timeout]);
-    clearTimeout(timer);
-    return saved;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** Saves a compose window's unsaved edits (or waits for a save already on the wire), resolving to `false` when
+ * something the window holds is still unsaved afterwards (any other value counts as saved). Never rejects. */
+export type ComposeFlush = () => Promise<unknown>;
+
+const flushers = new Set<ComposeFlush>();
+let signingOut = false;
+
+/**
+ * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
+ * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
+ * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
+ * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
+ */
+export function markSigningOut(): void {
+    signingOut = true;
+}
+
+/** Undoes `markSigningOut()`. */
+export function clearSigningOut(): void {
+    signingOut = false;
+}
+
+/** Whether `markSigningOut()` has been called (and not cleared). */
+export function isSigningOut(): boolean {
+    return signingOut;
+}
+
+/**
+ * Registers an open compose window's draft flush, so leaving the app on purpose (Sign Out) can save the
+ * last edits still waiting on the autosave debounce before the session ends. Returns the unregister
+ * function. Module-level rather than React context: `AppShell` (the sign-out handler) renders the
+ * `ComposeProvider` itself, so it can't read that provider's context.
+ */
+export function registerComposeFlush(flush: ComposeFlush): () => void {
+    flushers.add(flush);
+    return () => {
+        flushers.delete(flush);
+    };
+}
+
+/**
+ * Runs every registered flush and waits for all of them, but no longer than `timeoutMs`. Resolves to `true`
+ * only when every window reported its content saved in time (a window whose save failed also shows the user
+ * why, with Discard / Keep editing). Never rejects.
+ */
+export async function flushComposeDrafts(timeoutMs: number): Promise<boolean> {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const timeout = new Promise<boolean>((resolve) => {
+        timer = setTimeout(() => resolve(false), timeoutMs);
+    });
+    const all = Promise.all([...flushers].map((flush) => flush().catch(() => false))).then((results) => results.every((result) => result !== false));
+    const saved = await Promise.race([all, timeout]);
+    clearTimeout(timer);
+    return saved;
+}