@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/src/toolbar/ListPicker.tsx

@@ -2,13 +2,12 @@
  * List picker dropdown for selecting list types
  */
 
-import { useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, YStack } from "tamagui";
+import { useRef, useState } from "react";
+import { DropdownMenu } from "@multiplatform.one/components";
 import type { EditorCommand, EditorState, RichEditorRef } from "../types";
-import { DropdownMenuItemFrame } from "../styled";
 import { ToolbarDropdownButton } from "./ToolbarButton";
 import { BulletListIcon, OrderedListIcon, TaskListIcon } from "./icons";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -28,7 +27,8 @@ export interface ListPickerProps {
 // ===========================================================================
 
 interface ListOption {
-  label: string;
+  /** Lazy so t() resolves at render time, not module import */
+  label: () => string;
   command: EditorCommand;
   stateKey: keyof EditorState;
   icon: React.FC;
@@ -36,19 +36,19 @@ interface ListOption {
 
 const LIST_OPTIONS: ListOption[] = [
   {
-    label: "Bullet List",
+    label: () => t("Bullet List"),
     command: "bulletList",
     stateKey: "isBulletList",
     icon: BulletListIcon,
   },
   {
-    label: "Ordered List",
+    label: () => t("Ordered List"),
     command: "orderedList",
     stateKey: "isOrderedList",
     icon: OrderedListIcon,
   },
   {
-    label: "Task List",
+    label: () => t("Task List"),
     command: "taskList",
     stateKey: "isTaskList",
     icon: TaskListIcon,
@@ -70,52 +70,56 @@ function isAnyListActive(state: EditorState): boolean {
 }
 
 export function ListPicker({ editorRef, state, disabled }: ListPickerProps) {
-  const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
+  const selectedRef = useRef(false);
   const ActiveIcon = getActiveListIcon(state);
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
-      <Popover.Trigger asChild>
+    <DropdownMenu open={open} onOpenChange={setOpen} placement="bottom-start">
+      <DropdownMenu.Trigger asChild>
         <ToolbarDropdownButton
           active={isAnyListActive(state)}
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Lists"
+          aria-label={t("Lists")}
         >
           <ActiveIcon />
         </ToolbarDropdownButton>
-      </Popover.Trigger>
-      <Popover.Content
-        {...knobProps.panelPadding}
-        backgroundColor="$background"
-        borderWidth={1}
-        borderColor="$borderColor"
-        borderRadius={knobProps.borderRadius.borderRadius}
-        elevation={knobProps.elevation}
-        enterStyle={{ opacity: 0, y: -5 }}
-        exitStyle={{ opacity: 0, y: -5 }}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        minWidth={150}
+        // Toolbar menus must not steal focus back to the trigger on
+        // select-close: focus returns to the editor so typing continues.
+        // Escape still restores the trigger via the menu's own close().
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (selectedRef.current) {
+            selectedRef.current = false;
+            editorRef.current?.focus();
+          }
+        }}
       >
-        <YStack gap="$1" minWidth={150}>
-          {LIST_OPTIONS.map((option) => {
-            const Icon = option.icon;
-            return (
-              <DropdownMenuItemFrame
-                key={option.command}
-                active={state[option.stateKey] as boolean}
-                onPress={() => {
-                  editorRef.current?.executeCommand(option.command);
-                  setOpen(false);
-                }}
-                aria-label={option.label}
-              >
-                <Icon />
-                <Text>{option.label}</Text>
-              </DropdownMenuItemFrame>
-            );
-          })}
-        </YStack>
-      </Popover.Content>
-    </Popover>
+        {LIST_OPTIONS.map((option) => {
+          const Icon = option.icon;
+          const label = option.label();
+          return (
+            <DropdownMenu.Item
+              key={option.command}
+              icon={<Icon />}
+              closeOnSelect={false}
+              backgroundColor={state[option.stateKey] ? "$color4" : undefined}
+              aria-label={label}
+              onSelect={() => {
+                selectedRef.current = true;
+                editorRef.current?.executeCommand(option.command);
+                setOpen(false);
+              }}
+            >
+              {label}
+            </DropdownMenu.Item>
+          );
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 }

package/src/toolbar/MathBubble.tsx

@@ -0,0 +1,140 @@
+/**
+ * Bubble menu shown when an inline math node is selected.
+ * Displays the TeX source with edit (live validation) and remove actions —
+ * the editing surface GitLab gives dollar math in its content editor.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
+import { Input, Text, XStack, YStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import { renderKatexHtml } from "../editor/lazyKatex";
+import { ToolbarButton } from "./ToolbarButton";
+import { t } from "../shared/t";
+
+export interface MathBubbleProps {
+  editor: Editor | null;
+}
+
+export function MathBubble({ editor }: MathBubbleProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [editing, setEditing] = useState(false);
+  const [latex, setLatex] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  // Live TeX validation while editing (KaTeX is already loaded by the
+  // rendered node; the first call lazy-loads it)
+  useEffect(() => {
+    if (!editing) return undefined;
+    if (!latex.trim()) {
+      setError(null);
+      return undefined;
+    }
+    let cancelled = false;
+    void renderKatexHtml(latex).then((result) => {
+      if (!cancelled) setError(result.ok ? null : result.error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [latex, editing]);
+
+  const handleEdit = useCallback(() => {
+    if (!editor) return;
+    setLatex(editor.getAttributes("inlineMath").latex ?? "");
+    setError(null);
+    setEditing(true);
+  }, [editor]);
+
+  const handleSave = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().updateInlineMath({ latex: latex.trim() }).run();
+    setEditing(false);
+  }, [editor, latex]);
+
+  const handleRemove = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setEditing(false);
+  }, [editor]);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      className="rt-bubble-menu"
+      shouldShow={({ editor: e }) => e.isActive("inlineMath")}
+      options={{ placement: "top", offset: 6 }}
+    >
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1.5"
+        gap="$1.5"
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        {editing ? (
+          <YStack gap="$1.5">
+            <Input
+              size="$2"
+              placeholder="x^2 + y^2"
+              value={latex}
+              onChangeText={setLatex}
+              onSubmitEditing={handleSave}
+              aria-label={t("TeX expression")}
+              autoFocus
+              minWidth={220}
+              fontFamily="$mono"
+            />
+            {error ? (
+              <Text color="$red11" fontSize={11} maxWidth={260} role="alert">
+                {error}
+              </Text>
+            ) : null}
+            <XStack gap="$1" justifyContent="flex-end">
+              <Button size="$2" onPress={() => setEditing(false)} aria-label={t("Cancel")}>
+                {t("Cancel")}
+              </Button>
+              <Button size="$2" theme="active" onPress={handleSave} aria-label={t("Save math")}>
+                {t("Save")}
+              </Button>
+            </XStack>
+          </YStack>
+        ) : (
+          <>
+            <Text
+              fontSize={12}
+              fontFamily="$mono"
+              maxWidth={220}
+              numberOfLines={1}
+              color="$color11"
+            >
+              {editor.getAttributes("inlineMath").latex || t("empty")}
+            </Text>
+            <ToolbarButton
+              onPress={handleEdit}
+              aria-label={t("Edit math")}
+              tooltip={t("Edit math")}
+            >
+              <PencilSimpleIcon size={14} />
+            </ToolbarButton>
+            <ToolbarButton
+              onPress={handleRemove}
+              aria-label={t("Remove math")}
+              tooltip={t("Remove math")}
+            >
+              <TrashIcon size={14} />
+            </ToolbarButton>
+          </>
+        )}
+      </XStack>
+    </BubbleMenu>
+  );
+}

package/src/toolbar/MoreDropdown.tsx

@@ -4,11 +4,10 @@
  */
 
 import type React from "react";
-import { useState } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, XStack, YStack } from "tamagui";
+import { DotsThreeIcon } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+import { DropdownMenu } from "@multiplatform.one/components";
 import type { EditorCommand, EditorState, RichEditorRef } from "../types";
-import { DropdownMenuItemFrame, ToolbarSeparatorFrame } from "../styled";
 import { ToolbarButton } from "./ToolbarButton";
 import {
   SubscriptIcon,
@@ -21,6 +20,7 @@ import {
   ClearFormattingIcon,
 } from "./icons";
 import { SHORTCUTS } from "./shortcuts";
+import { t } from "../shared/t";
 
 export interface MoreDropdownProps {
   editorRef: React.RefObject<RichEditorRef | null>;
@@ -29,7 +29,8 @@ export interface MoreDropdownProps {
 }
 
 interface MoreItem {
-  label: string;
+  /** Lazy so t() resolves at render time, not module import */
+  label: () => string;
   command: EditorCommand;
   payload?: any;
   icon: React.FC;
@@ -38,13 +39,13 @@ interface MoreItem {
 
 const INLINE_ITEMS: MoreItem[] = [
   {
-    label: SHORTCUTS.subscript,
+    label: () => SHORTCUTS.subscript,
     command: "subscript",
     icon: SubscriptIcon,
     isActive: (s) => s.isSubscript,
   },
   {
-    label: SHORTCUTS.superscript,
+    label: () => SHORTCUTS.superscript,
     command: "superscript",
     icon: SuperscriptIcon,
     isActive: (s) => s.isSuperscript,
@@ -53,25 +54,25 @@ const INLINE_ITEMS: MoreItem[] = [
 
 const ALIGN_ITEMS: MoreItem[] = [
   {
-    label: SHORTCUTS.alignLeft,
+    label: () => SHORTCUTS.alignLeft,
     command: "alignLeft",
     icon: AlignLeftIcon,
     isActive: (s) => s.textAlign === "left",
   },
   {
-    label: SHORTCUTS.alignCenter,
+    label: () => SHORTCUTS.alignCenter,
     command: "alignCenter",
     icon: AlignCenterIcon,
     isActive: (s) => s.textAlign === "center",
   },
   {
-    label: SHORTCUTS.alignRight,
+    label: () => SHORTCUTS.alignRight,
     command: "alignRight",
     icon: AlignRightIcon,
     isActive: (s) => s.textAlign === "right",
   },
   {
-    label: SHORTCUTS.alignJustify,
+    label: () => SHORTCUTS.alignJustify,
     command: "alignJustify",
     icon: AlignJustifyIcon,
     isActive: (s) => s.textAlign === "justify",
@@ -80,29 +81,20 @@ const ALIGN_ITEMS: MoreItem[] = [
 
 const BLOCK_ITEMS: MoreItem[] = [
   {
-    label: SHORTCUTS.horizontalRule,
+    label: () => SHORTCUTS.horizontalRule,
     command: "horizontalRule",
     icon: HorizontalRuleIcon,
   },
   {
-    label: SHORTCUTS.clearFormatting,
+    label: () => SHORTCUTS.clearFormatting,
     command: "clearFormatting",
     icon: ClearFormattingIcon,
   },
 ];
 
 function MoreIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-      <circle cx="5" cy="12" r="2" />
-      <circle cx="12" cy="12" r="2" />
-      <circle cx="19" cy="12" r="2" />
-    </svg>
-  );
-}
-
-function preventFocusTheft(e: React.MouseEvent) {
-  e.preventDefault();
+  // LC-16: shared phosphor glyph (same as every other overflow trigger).
+  return <DotsThreeIcon size={16} weight="bold" />;
 }
 
 function ItemSection({
@@ -118,17 +110,20 @@ function ItemSection({
     <>
       {items.map((item) => {
         const Icon = item.icon;
+        const label = item.label();
         return (
-          <DropdownMenuItemFrame
+          <DropdownMenu.Item
             key={item.command}
-            active={item.isActive?.(state)}
-            onMouseDown={preventFocusTheft}
-            onPress={() => onSelect(item.command, item.payload)}
-            aria-label={item.label}
+            icon={<Icon />}
+            // Toggle-style rows keep the menu open (only hr/clear close it,
+            // handled by the parent's onSelect).
+            closeOnSelect={false}
+            backgroundColor={item.isActive?.(state) ? "$color4" : undefined}
+            aria-label={label}
+            onSelect={() => onSelect(item.command, item.payload)}
           >
-            <Icon />
-            <Text fontSize={13}>{item.label}</Text>
-          </DropdownMenuItemFrame>
+            {label}
+          </DropdownMenu.Item>
         );
       })}
     </>
@@ -136,50 +131,48 @@ function ItemSection({
 }
 
 export function MoreDropdown({ editorRef, state, disabled }: MoreDropdownProps) {
-  const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
+  const selectedRef = useRef(false);
 
   const handleSelect = (command: EditorCommand, payload?: any) => {
     editorRef.current?.executeCommand(command, payload);
     if (command === "horizontalRule" || command === "clearFormatting") {
+      selectedRef.current = true;
       setOpen(false);
     }
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom-end">
-      <Popover.Trigger asChild>
+    <DropdownMenu open={open} onOpenChange={setOpen} placement="bottom-end">
+      <DropdownMenu.Trigger asChild>
         <ToolbarButton
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="More formatting options"
-          tooltip="More"
+          aria-label={t("More formatting options")}
+          tooltip={t("More")}
         >
           <MoreIcon />
         </ToolbarButton>
-      </Popover.Trigger>
-      <Popover.Content
-        {...knobProps.panelPadding}
-        backgroundColor="$background"
-        borderWidth={1}
-        borderColor="$borderColor"
-        borderRadius={knobProps.borderRadius.borderRadius}
-        elevation={knobProps.elevation}
-        enterStyle={{ opacity: 0, y: -5 }}
-        exitStyle={{ opacity: 0, y: -5 }}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        minWidth={200}
+        // Toolbar menus must not steal focus back to the trigger on
+        // select-close: focus returns to the editor so typing continues.
+        // Escape still restores the trigger via the menu's own close().
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (selectedRef.current) {
+            selectedRef.current = false;
+            editorRef.current?.focus();
+          }
+        }}
       >
-        <YStack gap="$1" minWidth={200}>
-          <ItemSection items={INLINE_ITEMS} state={state} onSelect={handleSelect} />
-          <XStack paddingVertical="$1">
-            <ToolbarSeparatorFrame vertical={false} width="100%" height={1} marginHorizontal={0} />
-          </XStack>
-          <ItemSection items={ALIGN_ITEMS} state={state} onSelect={handleSelect} />
-          <XStack paddingVertical="$1">
-            <ToolbarSeparatorFrame vertical={false} width="100%" height={1} marginHorizontal={0} />
-          </XStack>
-          <ItemSection items={BLOCK_ITEMS} state={state} onSelect={handleSelect} />
-        </YStack>
-      </Popover.Content>
-    </Popover>
+        <ItemSection items={INLINE_ITEMS} state={state} onSelect={handleSelect} />
+        <DropdownMenu.Separator />
+        <ItemSection items={ALIGN_ITEMS} state={state} onSelect={handleSelect} />
+        <DropdownMenu.Separator />
+        <ItemSection items={BLOCK_ITEMS} state={state} onSelect={handleSelect} />
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 }

package/src/toolbar/StatusBar.tsx

@@ -5,6 +5,7 @@
 import { XStack, Text } from "tamagui";
 import { RichEditorContext } from "../context";
 import type { EditorMode, EditorState } from "../types";
+import { t } from "../shared/t";
 
 export interface StatusBarProps {
   state: EditorState;
@@ -24,7 +25,7 @@ function ModeButton({
   return (
     <Text
       fontSize={11}
-      color={active ? "$color12" : "$color9"}
+      color={active ? "$color12" : "$color11"}
       fontWeight={active ? "600" : "400"}
       cursor="pointer"
       onPress={onPress}
@@ -50,25 +51,29 @@ export function StatusBar({ state, mode, onModeChange }: StatusBarProps) {
     >
       <XStack gap="$1.5" alignItems="center">
         <ModeButton
-          label="Rich text"
+          label={t("Rich text")}
           active={mode === "richtext"}
           onPress={() => onModeChange("richtext")}
         />
-        <Text fontSize={11} color="$color7">
+        <Text fontSize={11} color="$color8">
           |
         </Text>
         <ModeButton
-          label="Markdown"
+          label={t("Markdown")}
           active={mode === "markdown"}
           onPress={() => onModeChange("markdown")}
         />
       </XStack>
       <XStack gap="$3">
-        <Text fontSize={11} color="$color9">
-          {state.wordCount} {state.wordCount === 1 ? "word" : "words"}
+        <Text fontSize={11} color="$color11">
+          {state.wordCount === 1
+            ? t("{{count}} word", { count: state.wordCount })
+            : t("{{count}} words", { count: state.wordCount })}
         </Text>
-        <Text fontSize={11} color="$color9">
-          {state.characterCount} {state.characterCount === 1 ? "character" : "characters"}
+        <Text fontSize={11} color="$color11">
+          {state.characterCount === 1
+            ? t("{{count}} character", { count: state.characterCount })
+            : t("{{count}} characters", { count: state.characterCount })}
         </Text>
       </XStack>
     </XStack>