@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/src/toolbar/FixedToolbar.native.tsx

@@ -14,6 +14,10 @@ import { NATIVE_SUPPORTED_COMMANDS } from "../constants";
 import { ToolbarFrame } from "../styled";
 import { ToolbarButton } from "./ToolbarButton";
 import { ToolbarGroup } from "./ToolbarGroup";
+import { TextColorPicker, HighlightColorPicker } from "./ColorPicker";
+import { LinkDialog } from "./LinkDialog";
+import { ImageDialog } from "./ImageDialog";
+import { t } from "../shared/t";
 import {
   UndoIcon,
   RedoIcon,
@@ -27,10 +31,6 @@ import {
   AlignJustifyIcon,
   BlockquoteIcon,
   ClearFormattingIcon,
-  LinkIcon,
-  ImageIcon,
-  TextColorIcon,
-  HighlightIcon,
 } from "./icons";
 
 // ===========================================================================
@@ -46,6 +46,16 @@ export interface FixedToolbarProps {
   sections?: ToolbarSection[];
   /** Whether the toolbar has an error state */
   hasError?: boolean;
+  /**
+   * Which edge the toolbar docks to (default: "top"). "bottom" flips the
+   * hairline to the top edge -- used by the fullscreen modal where the
+   * toolbar rides above the keyboard.
+   */
+  docked?: "top" | "bottom";
+  /** Interface parity with web (native fullscreen is the modal; no toggle button) */
+  fullscreen?: boolean;
+  /** Interface parity with web (ignored on native) */
+  onFullscreenToggle?: () => void;
 }
 
 // ===========================================================================
@@ -82,6 +92,7 @@ export function FixedToolbar({
   state = defaultEditorState,
   sections,
   hasError,
+  docked = "top",
 }: FixedToolbarProps) {
   const executeCommand = useCallback(
     (command: EditorCommand, payload?: any) => {
@@ -130,7 +141,14 @@ export function FixedToolbar({
   const clearVisible = visible("clear") && isNativeSupported("clearFormatting");
 
   return (
-    <ToolbarFrame hasError={hasError}>
+    <ToolbarFrame
+      hasError={hasError}
+      {...(docked === "bottom" && {
+        borderBottomWidth: 0,
+        borderTopWidth: 1,
+        borderTopColor: hasError ? "$red10" : ("$color6" as any),
+      })}
+    >
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -143,7 +161,7 @@ export function FixedToolbar({
               <ToolbarButton
                 disabled={!state.canUndo}
                 onPress={() => executeCommand("undo")}
-                aria-label="Undo"
+                aria-label={t("Undo")}
               >
                 <UndoIcon />
               </ToolbarButton>
@@ -152,7 +170,7 @@ export function FixedToolbar({
               <ToolbarButton
                 disabled={!state.canRedo}
                 onPress={() => executeCommand("redo")}
-                aria-label="Redo"
+                aria-label={t("Redo")}
               >
                 <RedoIcon />
               </ToolbarButton>
@@ -165,7 +183,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isBold}
                 onPress={() => executeCommand("bold")}
-                aria-label="Bold"
+                aria-label={t("Bold")}
               >
                 <BoldIcon>B</BoldIcon>
               </ToolbarButton>
@@ -174,7 +192,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isItalic}
                 onPress={() => executeCommand("italic")}
-                aria-label="Italic"
+                aria-label={t("Italic")}
               >
                 <ItalicIcon>I</ItalicIcon>
               </ToolbarButton>
@@ -183,7 +201,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isUnderline}
                 onPress={() => executeCommand("underline")}
-                aria-label="Underline"
+                aria-label={t("Underline")}
               >
                 <UnderlineIcon>U</UnderlineIcon>
               </ToolbarButton>
@@ -192,7 +210,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isStrike}
                 onPress={() => executeCommand("strike")}
-                aria-label="Strikethrough"
+                aria-label={t("Strikethrough")}
               >
                 <StrikeIcon>S</StrikeIcon>
               </ToolbarButton>
@@ -201,7 +219,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isCode}
                 onPress={() => executeCommand("code")}
-                aria-label="Code"
+                aria-label={t("Code")}
               >
                 <Text>{"</>"}</Text>
               </ToolbarButton>
@@ -209,25 +227,15 @@ export function FixedToolbar({
             {/* subscript and superscript are NOT supported on native -- hidden entirely */}
           </ToolbarGroup>
 
-          {/* Color */}
+          {/* Color — must open a picker; bare textColor/highlight with no
+              payload is a no-op at best and historically wiped Tentap content
+              when ColorBridge received an undefined setColor. */}
           <ToolbarGroup visible={colorVisible}>
             {isNativeSupported("textColor") && (
-              <ToolbarButton
-                active={!!state.textColor}
-                onPress={() => executeCommand("textColor")}
-                aria-label="Text Color"
-              >
-                <TextColorIcon color={state.textColor} />
-              </ToolbarButton>
+              <TextColorPicker editorRef={editorRef} state={state} />
             )}
             {isNativeSupported("highlight") && (
-              <ToolbarButton
-                active={!!state.highlightColor}
-                onPress={() => executeCommand("highlight")}
-                aria-label="Highlight Color"
-              >
-                <HighlightIcon color={state.highlightColor} />
-              </ToolbarButton>
+              <HighlightColorPicker editorRef={editorRef} state={state} />
             )}
           </ToolbarGroup>
 
@@ -237,7 +245,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isHeading1}
                 onPress={() => executeCommand("heading1")}
-                aria-label="Heading 1"
+                aria-label={t("Heading 1")}
               >
                 <Text fontWeight="700">H1</Text>
               </ToolbarButton>
@@ -246,7 +254,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isHeading2}
                 onPress={() => executeCommand("heading2")}
-                aria-label="Heading 2"
+                aria-label={t("Heading 2")}
               >
                 <Text fontWeight="600">H2</Text>
               </ToolbarButton>
@@ -255,7 +263,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isHeading3}
                 onPress={() => executeCommand("heading3")}
-                aria-label="Heading 3"
+                aria-label={t("Heading 3")}
               >
                 <Text fontWeight="600">H3</Text>
               </ToolbarButton>
@@ -268,7 +276,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.textAlign === "left"}
                 onPress={() => executeCommand("alignLeft")}
-                aria-label="Align Left"
+                aria-label={t("Align Left")}
               >
                 <AlignLeftIcon />
               </ToolbarButton>
@@ -277,7 +285,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.textAlign === "center"}
                 onPress={() => executeCommand("alignCenter")}
-                aria-label="Align Center"
+                aria-label={t("Align Center")}
               >
                 <AlignCenterIcon />
               </ToolbarButton>
@@ -286,7 +294,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.textAlign === "right"}
                 onPress={() => executeCommand("alignRight")}
-                aria-label="Align Right"
+                aria-label={t("Align Right")}
               >
                 <AlignRightIcon />
               </ToolbarButton>
@@ -295,7 +303,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.textAlign === "justify"}
                 onPress={() => executeCommand("alignJustify")}
-                aria-label="Justify"
+                aria-label={t("Justify")}
               >
                 <AlignJustifyIcon />
               </ToolbarButton>
@@ -308,7 +316,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isBulletList}
                 onPress={() => executeCommand("bulletList")}
-                aria-label="Bullet List"
+                aria-label={t("Bullet List")}
               >
                 <Text>{"•"}</Text>
               </ToolbarButton>
@@ -317,7 +325,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isOrderedList}
                 onPress={() => executeCommand("orderedList")}
-                aria-label="Ordered List"
+                aria-label={t("Ordered List")}
               >
                 <Text>{"1."}</Text>
               </ToolbarButton>
@@ -326,7 +334,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isTaskList}
                 onPress={() => executeCommand("taskList")}
-                aria-label="Task List"
+                aria-label={t("Task List")}
               >
                 <Text>{"[ ]"}</Text>
               </ToolbarButton>
@@ -339,7 +347,7 @@ export function FixedToolbar({
               <ToolbarButton
                 active={state.isBlockquote}
                 onPress={() => executeCommand("blockquote")}
-                aria-label="Blockquote"
+                aria-label={t("Blockquote")}
               >
                 <BlockquoteIcon />
               </ToolbarButton>
@@ -347,29 +355,21 @@ export function FixedToolbar({
             {/* codeBlock and horizontalRule are NOT supported on native -- hidden entirely */}
           </ToolbarGroup>
 
-          {/* Link */}
+          {/* Link (modal dialog -- a bare "link" command has no href and is a no-op) */}
           <ToolbarGroup visible={linkVisible}>
-            <ToolbarButton
-              active={state.isLink}
-              onPress={() => executeCommand("link")}
-              aria-label="Link"
-            >
-              <LinkIcon />
-            </ToolbarButton>
+            <LinkDialog editorRef={editorRef} state={state} />
           </ToolbarGroup>
 
-          {/* Image */}
+          {/* Image (modal dialog -- a bare "image" command has no src and is a no-op) */}
           <ToolbarGroup visible={imageVisible} showSeparator={!clearVisible}>
-            <ToolbarButton onPress={() => executeCommand("image")} aria-label="Insert Image">
-              <ImageIcon />
-            </ToolbarButton>
+            <ImageDialog editorRef={editorRef} />
           </ToolbarGroup>
 
           {/* Clear formatting (not supported on native -- hidden entirely) */}
           <ToolbarGroup visible={clearVisible} showSeparator={false}>
             <ToolbarButton
               onPress={() => executeCommand("clearFormatting")}
-              aria-label="Clear Formatting"
+              aria-label={t("Clear Formatting")}
             >
               <ClearFormattingIcon />
             </ToolbarButton>

package/src/toolbar/FixedToolbar.tsx

@@ -29,6 +29,8 @@ import {
   StrikeIcon,
   BlockquoteIcon,
   CodeBlockIcon,
+  ExpandIcon,
+  CompressIcon,
 } from "./icons";
 import { TextColorPicker, HighlightColorPicker } from "./ColorPicker";
 import { HeadingPicker } from "./HeadingPicker";
@@ -37,6 +39,8 @@ import { LinkDialog } from "./LinkDialog";
 import { ImageDialog } from "./ImageDialog";
 import { MoreDropdown } from "./MoreDropdown";
 import { SHORTCUTS } from "./shortcuts";
+import { useRovingFocus } from "./useRovingFocus";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -51,6 +55,16 @@ export interface FixedToolbarProps {
   sections?: ToolbarSection[];
   /** Whether the toolbar has an error state */
   hasError?: boolean;
+  /** Whether the editor is in fullscreen mode */
+  fullscreen?: boolean;
+  /** Shows a fullscreen toggle at the toolbar's right end when provided */
+  onFullscreenToggle?: () => void;
+  /** Native only: which edge the toolbar docks to (ignored on web) */
+  docked?: "top" | "bottom";
+  /** Controlled link-dialog open state (Mod+K wiring; internal when omitted) */
+  linkDialogOpen?: boolean;
+  /** Called when the link-dialog open state changes */
+  onLinkDialogOpenChange?: (open: boolean) => void;
 }
 
 // ===========================================================================
@@ -71,11 +85,17 @@ export function FixedToolbar({
   state = defaultEditorState,
   sections,
   hasError,
+  fullscreen,
+  onFullscreenToggle,
+  linkDialogOpen,
+  onLinkDialogOpenChange,
 }: FixedToolbarProps) {
   const scrollerRef = useRef<HTMLDivElement>(null);
   const { arrowLeft, arrowRight, arrowScrollDirRef, updateArrows } = useHorizontalScrollArrows();
 
   useHorizontalScroll(scrollerRef);
+  // WAI-ARIA toolbar pattern: one tab stop, arrows move between controls
+  useRovingFocus(scrollerRef);
 
   useEffect(() => {
     const el = scrollerRef.current;
@@ -125,14 +145,20 @@ export function FixedToolbar({
         visible={arrowLeft}
         arrowScrollDirRef={arrowScrollDirRef}
       />
-      <div ref={scrollerRef} className="toolbar-scroller">
+      <div
+        ref={scrollerRef}
+        className="toolbar-scroller"
+        role="toolbar"
+        aria-label={t("Formatting toolbar")}
+        aria-orientation="horizontal"
+      >
         <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
           {/* History */}
           <ToolbarGroup visible={visible("history")}>
             <ToolbarButton
               disabled={!state.canUndo}
               onPress={() => executeCommand("undo")}
-              aria-label="Undo"
+              aria-label={t("Undo")}
               tooltip={SHORTCUTS.undo}
             >
               <UndoIcon />
@@ -140,7 +166,7 @@ export function FixedToolbar({
             <ToolbarButton
               disabled={!state.canRedo}
               onPress={() => executeCommand("redo")}
-              aria-label="Redo"
+              aria-label={t("Redo")}
               tooltip={SHORTCUTS.redo}
             >
               <RedoIcon />
@@ -152,7 +178,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isBold}
               onPress={() => executeCommand("bold")}
-              aria-label="Bold"
+              aria-label={t("Bold")}
               tooltip={SHORTCUTS.bold}
             >
               <BoldIcon>B</BoldIcon>
@@ -160,7 +186,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isItalic}
               onPress={() => executeCommand("italic")}
-              aria-label="Italic"
+              aria-label={t("Italic")}
               tooltip={SHORTCUTS.italic}
             >
               <ItalicIcon>I</ItalicIcon>
@@ -168,7 +194,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isUnderline}
               onPress={() => executeCommand("underline")}
-              aria-label="Underline"
+              aria-label={t("Underline")}
               tooltip={SHORTCUTS.underline}
             >
               <UnderlineIcon>U</UnderlineIcon>
@@ -176,7 +202,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isStrike}
               onPress={() => executeCommand("strike")}
-              aria-label="Strikethrough"
+              aria-label={t("Strikethrough")}
               tooltip={SHORTCUTS.strike}
             >
               <StrikeIcon>S</StrikeIcon>
@@ -204,7 +230,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isBlockquote}
               onPress={() => executeCommand("blockquote")}
-              aria-label="Blockquote"
+              aria-label={t("Blockquote")}
               tooltip={SHORTCUTS.blockquote}
             >
               <BlockquoteIcon />
@@ -212,7 +238,7 @@ export function FixedToolbar({
             <ToolbarButton
               active={state.isCodeBlock}
               onPress={() => executeCommand("codeBlock")}
-              aria-label="Code Block"
+              aria-label={t("Code Block")}
               tooltip={SHORTCUTS.codeBlock}
             >
               <CodeBlockIcon />
@@ -221,7 +247,12 @@ export function FixedToolbar({
 
           {/* Link */}
           <ToolbarGroup visible={visible("link")}>
-            <LinkDialog editorRef={editorRef} state={state} />
+            <LinkDialog
+              editorRef={editorRef}
+              state={state}
+              open={linkDialogOpen}
+              onOpenChange={onLinkDialogOpenChange}
+            />
           </ToolbarGroup>
 
           {/* Image */}
@@ -247,6 +278,19 @@ export function FixedToolbar({
         visible={arrowRight}
         arrowScrollDirRef={arrowScrollDirRef}
       />
+      {onFullscreenToggle && (
+        <XStack alignItems="center" paddingHorizontal="$1">
+          <ToolbarButton
+            active={fullscreen}
+            onPress={onFullscreenToggle}
+            aria-label={t("Fullscreen")}
+            aria-pressed={!!fullscreen}
+            tooltip={fullscreen ? t("Exit fullscreen (Esc)") : t("Fullscreen")}
+          >
+            {fullscreen ? <CompressIcon /> : <ExpandIcon />}
+          </ToolbarButton>
+        </XStack>
+      )}
     </ToolbarFrame>
   );
 }

package/src/toolbar/HeadingPicker.tsx

@@ -2,12 +2,12 @@
  * Heading picker dropdown for selecting heading levels
  */
 
-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 { Text } from "tamagui";
 import type { EditorCommand, EditorState, RichEditorRef } from "../types";
-import { DropdownMenuItemFrame } from "../styled";
 import { ToolbarDropdownButton } from "./ToolbarButton";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -28,7 +28,8 @@ export interface HeadingPickerProps {
 
 interface HeadingOption {
   label: string;
-  description: string;
+  /** Lazy so t() resolves at render time, not module import */
+  description: () => string;
   command: EditorCommand;
   stateKey: keyof EditorState;
   fontSize: string;
@@ -38,7 +39,7 @@ interface HeadingOption {
 const HEADING_OPTIONS: HeadingOption[] = [
   {
     label: "H1",
-    description: "Heading 1",
+    description: () => t("Heading 1"),
     command: "heading1",
     stateKey: "isHeading1",
     fontSize: "$5",
@@ -46,7 +47,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "H2",
-    description: "Heading 2",
+    description: () => t("Heading 2"),
     command: "heading2",
     stateKey: "isHeading2",
     fontSize: "$4",
@@ -54,7 +55,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "H3",
-    description: "Heading 3",
+    description: () => t("Heading 3"),
     command: "heading3",
     stateKey: "isHeading3",
     fontSize: "$3",
@@ -62,7 +63,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "H4",
-    description: "Heading 4",
+    description: () => t("Heading 4"),
     command: "heading4",
     stateKey: "isHeading4",
     fontSize: "$2",
@@ -70,7 +71,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "H5",
-    description: "Heading 5",
+    description: () => t("Heading 5"),
     command: "heading5",
     stateKey: "isHeading5",
     fontSize: "$1",
@@ -78,7 +79,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "H6",
-    description: "Heading 6",
+    description: () => t("Heading 6"),
     command: "heading6",
     stateKey: "isHeading6",
     fontSize: "$1",
@@ -86,7 +87,7 @@ const HEADING_OPTIONS: HeadingOption[] = [
   },
   {
     label: "P",
-    description: "Paragraph",
+    description: () => t("Paragraph"),
     command: "paragraph",
     stateKey: "isParagraph",
     fontSize: "$3",
@@ -120,50 +121,57 @@ function isAnyHeadingActive(state: EditorState): boolean {
 }
 
 export function HeadingPicker({ editorRef, state, disabled }: HeadingPickerProps) {
-  const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
+  const selectedRef = useRef(false);
 
   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={isAnyHeadingActive(state)}
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Heading"
+          aria-label={t("Heading")}
         >
           <Text fontWeight="600">{getActiveHeadingLabel(state)}</Text>
         </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={200}
+        // Toolbar menus must not steal focus back to the trigger on
+        // select-close: the user expects to keep typing, so focus returns
+        // to the editor. 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={140}>
-          {HEADING_OPTIONS.map((option) => (
-            <DropdownMenuItemFrame
+        {HEADING_OPTIONS.map((option) => {
+          const description = option.description();
+          return (
+            <DropdownMenu.Item
               key={option.command}
-              active={state[option.stateKey] as boolean}
-              onPress={() => {
+              closeOnSelect={false}
+              backgroundColor={state[option.stateKey] ? "$color4" : undefined}
+              aria-label={description}
+              onSelect={() => {
+                selectedRef.current = true;
                 editorRef.current?.executeCommand(option.command);
                 setOpen(false);
               }}
-              aria-label={option.description}
             >
               <Text fontWeight={option.fontWeight as any} fontSize={option.fontSize as any}>
                 {option.label}
               </Text>
-              <Text color="$color11">{option.description}</Text>
-            </DropdownMenuItemFrame>
-          ))}
-        </YStack>
-      </Popover.Content>
-    </Popover>
+              <Text color="$color11"> {description}</Text>
+            </DropdownMenu.Item>
+          );
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 }