@rapidmx/web-client 0.29.0 → 0.31.0

package/dist/apps/shared/components/mail/MenuButton.js

@@ -1,215 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useRef, useState } from "react";
-import { HiCheck, HiChevronDown, HiChevronLeft, HiChevronRight, HiMinus } from "react-icons/hi2";
-import PopoverPortal from "../../../../lib/components/overlays/PopoverPortal.js";
-// `PopoverPortal` positions a fixed-size box (it has no auto-height mode), so the menu's height is
-// computed from its own contents rather than measured - from whichever level is *shown*, so a submenu
-// isn't left standing in the parent menu's taller box. These are the exact heights the classes below
-// render at, so the box is never short enough to clip its last row: an item is `h-9`, a group label
-// `h-6`, a note as many `leading-4` lines as it wraps to, a separator a 1px rule inside `my-1`, and the
-// list itself `py-1`.
-const ITEM_HEIGHT = 36;
-const ITEM_DESCRIPTION_HEIGHT = 16;
-const GROUP_LABEL_HEIGHT = 24;
-const NOTE_LINE_HEIGHT = 16;
-const NOTE_PADDING = 4;
-/** A note wraps, so its height depends on how much of it fits a line: `text-xs` averages a little over 6px
- * a character, and the note sits inside the list's `px-3`. Rounded so the estimate is never *under* the
- * lines the browser actually draws - a box a few pixels too tall shows blank space, one too short clips. */
-const NOTE_CHAR_WIDTH = 6.4;
-const NOTE_PADDING_X = 24;
-const SEPARATOR_HEIGHT = 9;
-const LIST_PADDING = 8;
-const MENU_MAX_HEIGHT = 460;
-const DEFAULT_MENU_WIDTH = 248;
-/** How tall `note` renders at `width`, wrapped. */
-function noteHeight(note, width) {
-    const charsPerLine = Math.max(1, Math.floor((width - NOTE_PADDING_X) / NOTE_CHAR_WIDTH));
-    return Math.ceil(note.length / charsPerLine) * NOTE_LINE_HEIGHT + NOTE_PADDING;
-}
-/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
-export function menuHeight(sections, width = DEFAULT_MENU_WIDTH) {
-    let height = LIST_PADDING;
-    sections.forEach((section, index) => {
-        if (index > 0) {
-            height += SEPARATOR_HEIGHT;
-        }
-        if (section.label) {
-            height += GROUP_LABEL_HEIGHT;
-        }
-        for (const item of section.items) {
-            height += ITEM_HEIGHT + (item.description ? ITEM_DESCRIPTION_HEIGHT : 0);
-        }
-        if (section.note) {
-            height += noteHeight(section.note, width);
-        }
-    });
-    return Math.min(height, MENU_MAX_HEIGHT);
-}
-/**
- * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
- * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
- * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
- *
- * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
- * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
- * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
- * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
- * semantics, roving focus and keyboard handling are this component's own.
- */
-export default function MenuButton({ label, iconOnly = false, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
-    const [open, setOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(0);
-    // The key of the item whose submenu is showing, or `null` at the top level. Held as a key, not as the
-    // item itself, because `sections` is rebuilt on every render.
-    const [submenuKey, setSubmenuKey] = useState(null);
-    const triggerRef = useRef(null);
-    const itemRefs = useRef([]);
-    // State, not a ref: `PopoverPortal` renders nothing at all until its own positioning effect has run, so
-    // the rows don't exist yet when this component's effects first fire. Keying the focus effect on the
-    // menu node itself makes it run again once they do.
-    const [menuNode, setMenuNode] = useState(null);
-    const openSubmenu = sections
-        .flatMap((section) => section.items)
-        .find((item) => item.key === submenuKey && !!item.submenu);
-    /** The row that leaves a submenu again - synthesized rather than asked of the caller, so every submenu
-     * has the same way back however it was built. */
-    const backItem = {
-        key: "__back",
-        label: `Back to ${ariaLabel}`,
-        keepOpen: true,
-        onSelect: () => leaveSubmenu(),
-    };
-    const shownSections = openSubmenu
-        ? [{ key: "__back", items: [backItem] }, ...openSubmenu.submenu]
-        : sections;
-    const items = shownSections.flatMap((section) => section.items);
-    const enabledIndexes = items.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-    /** The row focus starts on: the current choice where there is one, else the first row that can take focus. */
-    function initialActiveIndex(within) {
-        const checked = within.findIndex((item) => item.checked === true && !item.disabled);
-        const enabled = within.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-        return checked === -1 ? (enabled[0] ?? 0) : checked;
-    }
-    function openMenu() {
-        setSubmenuKey(null);
-        setActiveIndex(initialActiveIndex(sections.flatMap((section) => section.items)));
-        setOpen(true);
-        onOpenChange?.(true);
-    }
-    function closeMenu(returnFocus) {
-        setOpen(false);
-        setSubmenuKey(null);
-        onOpenChange?.(false);
-        if (returnFocus) {
-            triggerRef.current?.focus();
-        }
-    }
-    function enterSubmenu(item) {
-        setSubmenuKey(item.key);
-        const rows = item.submenu.flatMap((section) => section.items);
-        // Past the Back row, onto the first row of the submenu itself - or, when none of them can take focus (every row is unavailable right now), onto
-        // the Back row, so the keyboard still has a place to be.
-        setActiveIndex(rows.some((row) => !row.disabled) ? 1 + initialActiveIndex(rows) : 0);
-    }
-    function leaveSubmenu() {
-        // Back on the row the submenu was opened from.
-        const parentIndex = sections.flatMap((section) => section.items).findIndex((item) => item.key === submenuKey);
-        setSubmenuKey(null);
-        setActiveIndex(parentIndex);
-    }
-    /** What a row does when it is chosen: open its submenu, or run it and close unless it asked to stay. */
-    function selectItem(item) {
-        if (item.submenu) {
-            enterSubmenu(item);
-            return;
-        }
-        item.onSelect();
-        if (!item.keepOpen) {
-            closeMenu(true);
-        }
-    }
-    // Roving focus: only the active row is tabbable, and it takes DOM focus whenever it changes, so the
-    // arrow keys move the screen reader's cursor too rather than only a visual highlight.
-    useEffect(() => {
-        if (open && menuNode) {
-            // A disabled row can't take focus, so a menu with nothing enabled focuses its own container -
-            // otherwise the keys it handles would go to whatever had focus before it opened.
-            if (enabledIndexes.length === 0) {
-                menuNode.focus();
-            }
-            else {
-                itemRefs.current[activeIndex]?.focus();
-            }
-        }
-        // `submenuKey` too: drilling in or out can land on the same index in the other level's list, and
-        // the row that index *means* is a different button, which the effect must move focus to.
-    }, [open, activeIndex, submenuKey, menuNode]);
-    function moveActive(delta) {
-        if (enabledIndexes.length === 0) {
-            return;
-        }
-        const position = enabledIndexes.indexOf(activeIndex);
-        setActiveIndex(enabledIndexes[(position + delta + enabledIndexes.length) % enabledIndexes.length]);
-    }
-    function handleMenuKeyDown(e) {
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            moveActive(1);
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            moveActive(-1);
-        }
-        else if (e.key === "Home") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[0] ?? 0);
-        }
-        else if (e.key === "End") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? 0);
-        }
-        else if (e.key === "ArrowRight" && items[activeIndex]?.submenu) {
-            e.preventDefault();
-            enterSubmenu(items[activeIndex]);
-        }
-        else if ((e.key === "ArrowLeft" || e.key === "Escape") && openSubmenu) {
-            // ARIA's own submenu behaviour: Escape leaves the submenu for its parent menu rather than
-            // dismissing the whole thing.
-            e.preventDefault();
-            leaveSubmenu();
-        }
-        else if (e.key === "Escape" || e.key === "Tab") {
-            e.preventDefault();
-            closeMenu(true);
-        }
-    }
-    function handleTriggerKeyDown(e) {
-        if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-            e.preventDefault();
-            openMenu();
-        }
-    }
-    let itemIndex = -1;
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, className: iconOnly
-                    ? className
-                    : [
-                        // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
-                        // whatever sits beside it in the toolbar off the edge of a 384px list column.
-                        "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
-                        className,
-                    ].join(" "), children: [icon, !iconOnly && _jsx("span", { className: "truncate", children: label }), !iconOnly && _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
-                                itemIndex += 1;
-                                const index = itemIndex;
-                                const role = item.role ?? "menuitem";
-                                return (_jsxs("button", { ref: (node) => {
-                                        itemRefs.current[index] = node;
-                                    }, type: "button", role: role, disabled: item.disabled, title: item.title, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
-                                        ? {}
-                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: item.icon })), item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
-                            }), section.note && _jsx("p", { className: "px-3 py-1 text-xs leading-4 text-text-muted", children: section.note })] }, section.key))) }) }))] }));
-}
+// `MenuButton` lives in `lib/components/menus` so shared form components (`ImageEditBadge`) can use it; this keeps the mail components' import path working.
+export { default, menuHeight } from "../../../../lib/components/menus/MenuButton.js";

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -48,7 +48,7 @@ import LabelMenuButton from "./labelMenu.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import EncryptedBody from "./reading/EncryptedBody.js";
 import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./reading/EncryptedPreview.js";
-import { rememberDecrypted } from "../../mail/decryptedMessages.js";
+import { mapWithConcurrency, rememberDecrypted } from "../../mail/decryptedMessages.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
 import MessageMoreMenu from "./reading/MessageMoreMenu.js";
@@ -210,6 +210,8 @@ function subjectCore(subject) {
 function sameSubject(subject, threadSubject) {
     return subjectCore(subject) === subjectCore(threadSubject);
 }
+/** How many earlier messages of a conversation are loaded at once when printing it. */
+const PRINT_CONCURRENCY = 4;
 function formatBytes(bytes) {
     if (bytes >= 1000000)
         return `${(bytes / 1000000).toFixed(1)} MB`;
@@ -779,10 +781,11 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         (verifiedOrSealed || security.state === "encrypted" || security.state === "encrypted_unverified_signer" || security.state === "signature_failed")
         ? security.attachments
         : undefined;
-    // Any state that involves a signature shows the address actually signed for (the protected From when the message
+    // Any state with a valid signature shows the address actually signed for (the protected From when the message
     // carries one - it equals the outer From's address, or verification would have failed) next to the badge, never a
-    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com.
-    const signatureShown = security !== null && security.state !== "unprotected" && security.state !== "encrypted";
+    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com. A failed
+    // signature vouches for nothing, so its message shows the outer address like an unsigned one.
+    const signatureShown = security !== null && (verifiedOrSealed || UNVERIFIED_SIGNER_STATES.has(security.state));
     const senderAddress = (signatureShown ? extractAddresses(security.protectedHeaders?.from)[0] : undefined) ?? message.from.address;
     const senderName = message.from.displayName;
     const senderNameCheck = checkSenderName(senderName, senderAddress);
@@ -841,11 +844,12 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         try {
             const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
             const older = await olderConversationMessages(message, client).catch(() => []);
-            const earlier = await Promise.all(older.map((other) => printableOlderMessage(other).catch(() => ({
+            // A few at a time: a long conversation is hundreds of messages, each of them several requests.
+            const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) => printableOlderMessage(other).catch(() => ({
                 subject: other.subject || "(no subject)",
                 headers: printHeaders(other, formatMailAddress(other.from)),
                 content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
-            }))));
+            })));
             const printable = buildConversationPrintDocument(shownSubject, [
                 {
                     subject: shownSubject,

package/dist/apps/shared/components/mail/SwipeRow.d.ts

@@ -8,6 +8,8 @@ export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
     onArchive: () => Promise<boolean>;
     /** Left to right. The row comes back at once, and this asks where to (a prompt for the folder). */
     onMove: () => void;
+    /** A finger held on the row (see `useLongPress()`) - the phone's way into select mode. Heard whether or not swipes are `enabled`; absent, the row has none. */
+    onLongPress?: () => void;
     children: ReactNode;
 }
 /**
@@ -18,5 +20,7 @@ export interface SwipeRowProps extends HTMLAttributes<HTMLElement> {
  *
  * Only a swipe that starts out horizontal counts (see `useSwipe()`), so scrolling the list is untouched, and it is an addition
  * to, never the only way of, archiving and moving: the selection bar and the reading pane do the same.
+ *
+ * The row is also where a press and hold is heard (`onLongPress`), which shares the finger with the swipe: a hold gives way to the first drag.
  */
-export default function SwipeRow({ as: Tag, enabled, onArchive, onMove, children, className, style, ...rest }: SwipeRowProps): React.JSX.Element;
+export default function SwipeRow({ as: Tag, enabled, onArchive, onMove, onLongPress, children, className, style, ...rest }: SwipeRowProps): React.JSX.Element;

package/dist/apps/shared/components/mail/SwipeRow.js

@@ -5,9 +5,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArchiveBox, HiOutlineFolder } from "react-icons/hi2";
+import { useLongPress } from "../../gestures/useLongPress.js";
 import { useSwipe } from "../../gestures/useSwipe.js";
 /** How long the row takes to leave, or come back - `motion-reduce` skips it. */
 const SLIDE = "transform 150ms ease-out";
+/** Both hooks' handlers for one touch event; `useSwipe()` has none while swipes are off. */
+function both(first, second) {
+    return (event) => {
+        first(event);
+        second?.(event);
+    };
+}
 /**
  * A row of a list of mail that slides with a finger: right to left it takes the row away to Archive (a green panel with the
  * archive icon follows the row in), left to right it comes back and asks for a folder to move it to (a blue panel with a
@@ -16,8 +24,10 @@ const SLIDE = "transform 150ms ease-out";
  *
  * Only a swipe that starts out horizontal counts (see `useSwipe()`), so scrolling the list is untouched, and it is an addition
  * to, never the only way of, archiving and moving: the selection bar and the reading pane do the same.
+ *
+ * The row is also where a press and hold is heard (`onLongPress`), which shares the finger with the swipe: a hold gives way to the first drag.
  */
-export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, children, className, style, ...rest }) {
+export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove, onLongPress, children, className, style, ...rest }) {
     const [offset, setOffset] = useState(0);
     const [width, setWidth] = useState(0);
     /** The row is on its way out (or waiting for the server to confirm it), so a finger can't drag it. */
@@ -56,15 +66,19 @@ export default function SwipeRow({ as: Tag = "div", enabled, onArchive, onMove,
             });
         },
     });
+    // What `useSwipe()` hands over is `{}` while swipes are off.
+    const swipeTouch = swipe.handlers;
+    const press = useLongPress({ enabled: !!onLongPress, onLongPress: onLongPress });
     if (!enabled) {
-        return (_jsx(Tag, { className: className, style: style, ...rest, children: children }));
+        return (_jsx(Tag, { className: className, style: { ...style, ...press.style }, ...rest, ...press.handlers, children: children }));
     }
     const active = offset !== 0;
-    return (_jsxs(Tag, { ...rest, ...swipe.handlers, ref: (node) => {
+    return (_jsxs(Tag, { ...rest, ...press.handlers, onTouchStart: both(press.handlers.onTouchStart, swipeTouch.onTouchStart), onTouchMove: both(press.handlers.onTouchMove, swipeTouch.onTouchMove), onTouchEnd: both(press.handlers.onTouchEnd, swipeTouch.onTouchEnd), onTouchCancel: both(press.handlers.onTouchCancel, swipeTouch.onTouchCancel), ref: (node) => {
             element.current = node;
         }, className: className, style: {
             ...style,
             ...swipe.style,
+            ...press.style,
             transform: active ? `translateX(${offset}px)` : undefined,
             transition: dragging ? "none" : SLIDE,
         }, "data-swiping": active ? "true" : undefined, children: [children, (active || leaving) && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-swipe-panel": "move", className: "absolute inset-y-0 right-full w-full bg-primary text-white flex items-center justify-end pr-6", children: _jsx(HiOutlineFolder, { size: 24 }) }), _jsx("span", { "aria-hidden": "true", "data-swipe-panel": "archive", style: width ? { width } : undefined, className: "absolute inset-y-0 left-full w-full bg-success text-white flex items-center justify-start pl-6", children: _jsx(HiOutlineArchiveBox, { size: 24 }) })] }))] }));

package/dist/apps/shared/components/mail/compose/ComposeToolbar.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import type { Editor } from "@tiptap/react";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export declare function linkHref(typed: string): string;
 export interface ComposeToolbarProps {
     /** `null` before the editor has mounted client-side (see `RichTextEditor`'s `immediatelyRender: false`
      * doc comment) — every button is disabled in that state rather than the toolbar rendering nothing, so

package/dist/apps/shared/components/mail/compose/ComposeToolbar.js

@@ -6,6 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef, useState } from "react";
 import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
 import GifPicker from "./GifPicker.js";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export function linkHref(typed) {
+    const target = typed.trim();
+    if (/^[a-z][a-z0-9+.-]*:/i.test(target) || /^[/#]/.test(target)) {
+        return target;
+    }
+    return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(target) ? `mailto:${target}` : `https://${target}`;
+}
 /** Loaded when the picker is first opened: the emoji list is a half-megabyte JSON file that nothing else needs. */
 const EmojiPicker = lazy(() => import("./EmojiPicker.js"));
 const FONT_FAMILIES = [
@@ -73,7 +82,7 @@ export default function ComposeToolbar({ editor, onUploadImage }) {
             run((ed) => ed.chain().focus().extendMarkRange("link").unsetLink().run());
         }
         else {
-            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkUrl.trim() }).run());
+            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkHref(linkUrl) }).run());
         }
         setOpenPopup(null);
     }