@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/src/toolbar/TableBubble.tsx

@@ -7,64 +7,35 @@ import { useState } from "react";
 import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ColumnsPlusRightIcon, RowsPlusBottomIcon, TrashIcon } from "@phosphor-icons/react";
 import { Popover, Text, XStack, YStack } from "tamagui";
 import { DropdownMenuItemFrame, ToolbarSeparatorFrame } from "../styled";
+import { getBlockVirtualElement } from "../editor/blockAnchor";
 import { ToolbarButton, ToolbarDropdownButton } from "./ToolbarButton";
-
-function RowPlusIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  );
-}
-
-function TrashIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <polyline points="3 6 5 6 21 6" />
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-    </svg>
-  );
-}
+import { t } from "../shared/t";
 
 interface TableAction {
-  label: string;
+  label: () => string;
   action: (editor: Editor) => void;
 }
 
 const ROW_ACTIONS: TableAction[] = [
-  { label: "Add row above", action: (e) => e.chain().focus().addRowBefore().run() },
-  { label: "Add row below", action: (e) => e.chain().focus().addRowAfter().run() },
-  { label: "Delete row", action: (e) => e.chain().focus().deleteRow().run() },
+  { label: () => t("Add row above"), action: (e) => e.chain().focus().addRowBefore().run() },
+  { label: () => t("Add row below"), action: (e) => e.chain().focus().addRowAfter().run() },
+  { label: () => t("Delete row"), action: (e) => e.chain().focus().deleteRow().run() },
 ];
 
 const COL_ACTIONS: TableAction[] = [
-  { label: "Add column before", action: (e) => e.chain().focus().addColumnBefore().run() },
-  { label: "Add column after", action: (e) => e.chain().focus().addColumnAfter().run() },
-  { label: "Delete column", action: (e) => e.chain().focus().deleteColumn().run() },
+  { label: () => t("Add column before"), action: (e) => e.chain().focus().addColumnBefore().run() },
+  { label: () => t("Add column after"), action: (e) => e.chain().focus().addColumnAfter().run() },
+  { label: () => t("Delete column"), action: (e) => e.chain().focus().deleteColumn().run() },
 ];
 
 const TABLE_ACTIONS: TableAction[] = [
-  { label: "Toggle header row", action: (e) => e.chain().focus().toggleHeaderRow().run() },
-  { label: "Merge cells", action: (e) => e.chain().focus().mergeCells().run() },
-  { label: "Split cell", action: (e) => e.chain().focus().splitCell().run() },
-  { label: "Delete table", action: (e) => e.chain().focus().deleteTable().run() },
+  { label: () => t("Toggle header row"), action: (e) => e.chain().focus().toggleHeaderRow().run() },
+  { label: () => t("Merge cells"), action: (e) => e.chain().focus().mergeCells().run() },
+  { label: () => t("Split cell"), action: (e) => e.chain().focus().splitCell().run() },
+  { label: () => t("Delete table"), action: (e) => e.chain().focus().deleteTable().run() },
 ];
 
 export interface TableBubbleProps {
@@ -80,8 +51,13 @@ export function TableBubble({ editor }: TableBubbleProps) {
   return (
     <BubbleMenu
       editor={editor}
+      className="rt-bubble-menu"
       shouldShow={({ editor: e }) => e.isActive("table")}
-      options={{ placement: "top" }}
+      // Anchor to the table rect (not the caret) so the bubble never covers
+      // the first row and holds still while typing in cells (LC-06 spirit:
+      // chrome must not sit on top of the content being edited).
+      getReferencedVirtualElement={() => getBlockVirtualElement(editor, "table")}
+      options={{ placement: "top-start", offset: 6 }}
     >
       <XStack
         backgroundColor="$background"
@@ -95,30 +71,33 @@ export function TableBubble({ editor }: TableBubbleProps) {
       >
         <ToolbarButton
           onPress={() => editor.chain().focus().addRowAfter().run()}
-          aria-label="Add row"
-          tooltip="Add row below"
+          aria-label={t("Add row")}
+          tooltip={t("Add row below")}
         >
-          <RowPlusIcon />
+          <RowsPlusBottomIcon size={14} />
         </ToolbarButton>
 
         <ToolbarButton
           onPress={() => editor.chain().focus().addColumnAfter().run()}
-          aria-label="Add column"
-          tooltip="Add column after"
+          aria-label={t("Add column")}
+          tooltip={t("Add column after")}
         >
-          <Text fontSize={11} fontWeight="700">
-            +Col
-          </Text>
+          <ColumnsPlusRightIcon size={14} />
         </ToolbarButton>
 
         <Popover open={menuOpen} onOpenChange={setMenuOpen} placement="bottom">
           <Popover.Trigger asChild>
-            <ToolbarDropdownButton onPress={() => setMenuOpen(true)} aria-label="Table options">
-              <Text fontSize={12}>Table</Text>
+            <ToolbarDropdownButton
+              onPress={() => setMenuOpen(true)}
+              aria-label={t("Table options")}
+            >
+              <Text fontSize={12}>{t("Table")}</Text>
             </ToolbarDropdownButton>
           </Popover.Trigger>
           <Popover.Content
-            {...knobProps.panelPadding}
+            // SP-EDGE: container owns only its border — items own all padding.
+            padding={0}
+            overflow="hidden"
             backgroundColor="$background"
             borderWidth={1}
             borderColor="$borderColor"
@@ -128,18 +107,21 @@ export function TableBubble({ editor }: TableBubbleProps) {
             exitStyle={{ opacity: 0, y: -5 }}
           >
             <YStack gap="$0.5" minWidth={180}>
-              {ROW_ACTIONS.map((a) => (
-                <DropdownMenuItemFrame
-                  key={a.label}
-                  onPress={() => {
-                    a.action(editor);
-                    setMenuOpen(false);
-                  }}
-                  aria-label={a.label}
-                >
-                  <Text fontSize={13}>{a.label}</Text>
-                </DropdownMenuItemFrame>
-              ))}
+              {ROW_ACTIONS.map((a) => {
+                const label = a.label();
+                return (
+                  <DropdownMenuItemFrame
+                    key={label}
+                    onPress={() => {
+                      a.action(editor);
+                      setMenuOpen(false);
+                    }}
+                    aria-label={label}
+                  >
+                    <Text fontSize={13}>{label}</Text>
+                  </DropdownMenuItemFrame>
+                );
+              })}
               <XStack paddingVertical="$0.5">
                 <ToolbarSeparatorFrame
                   vertical={false}
@@ -148,18 +130,21 @@ export function TableBubble({ editor }: TableBubbleProps) {
                   marginHorizontal={0}
                 />
               </XStack>
-              {COL_ACTIONS.map((a) => (
-                <DropdownMenuItemFrame
-                  key={a.label}
-                  onPress={() => {
-                    a.action(editor);
-                    setMenuOpen(false);
-                  }}
-                  aria-label={a.label}
-                >
-                  <Text fontSize={13}>{a.label}</Text>
-                </DropdownMenuItemFrame>
-              ))}
+              {COL_ACTIONS.map((a) => {
+                const label = a.label();
+                return (
+                  <DropdownMenuItemFrame
+                    key={label}
+                    onPress={() => {
+                      a.action(editor);
+                      setMenuOpen(false);
+                    }}
+                    aria-label={label}
+                  >
+                    <Text fontSize={13}>{label}</Text>
+                  </DropdownMenuItemFrame>
+                );
+              })}
               <XStack paddingVertical="$0.5">
                 <ToolbarSeparatorFrame
                   vertical={false}
@@ -168,28 +153,31 @@ export function TableBubble({ editor }: TableBubbleProps) {
                   marginHorizontal={0}
                 />
               </XStack>
-              {TABLE_ACTIONS.map((a) => (
-                <DropdownMenuItemFrame
-                  key={a.label}
-                  onPress={() => {
-                    a.action(editor);
-                    setMenuOpen(false);
-                  }}
-                  aria-label={a.label}
-                >
-                  <Text fontSize={13}>{a.label}</Text>
-                </DropdownMenuItemFrame>
-              ))}
+              {TABLE_ACTIONS.map((a) => {
+                const label = a.label();
+                return (
+                  <DropdownMenuItemFrame
+                    key={label}
+                    onPress={() => {
+                      a.action(editor);
+                      setMenuOpen(false);
+                    }}
+                    aria-label={label}
+                  >
+                    <Text fontSize={13}>{label}</Text>
+                  </DropdownMenuItemFrame>
+                );
+              })}
             </YStack>
           </Popover.Content>
         </Popover>
 
         <ToolbarButton
           onPress={() => editor.chain().focus().deleteTable().run()}
-          aria-label="Delete table"
-          tooltip="Delete table"
+          aria-label={t("Delete table")}
+          tooltip={t("Delete table")}
         >
-          <TrashIcon />
+          <TrashIcon size={14} />
         </ToolbarButton>
       </XStack>
     </BubbleMenu>

package/src/toolbar/ToolbarButton.native.tsx

@@ -19,6 +19,8 @@ export interface ToolbarButtonProps {
   onPress: () => void;
   children: ReactNode;
   "aria-label": string;
+  /** Marks the button as a toggle; reflects the pressed state to AT */
+  "aria-pressed"?: boolean;
   tooltip?: string;
   size?: SizeTokens;
   compact?: boolean;
@@ -45,21 +47,27 @@ export function ToolbarButton({
   children,
   size: sizeProp,
   compact: compactProp,
+  "aria-pressed": ariaPressed,
   ...props
 }: ToolbarButtonProps) {
   const ctx = RichEditorContext.useStyledContext();
   const size = sizeProp ?? (ctx.size as SizeTokens);
   const compact = compactProp ?? ctx.compact;
   const isDisabled = disabled ?? ctx.disabled;
+  const pressed = ariaPressed ?? (active !== undefined ? !!active : undefined);
 
   return (
     <Button
       chromeless
       size={size}
       compact={compact}
-      disabled={isDisabled}
-      onPress={onPress}
+      // DG-ST-03: aria-disabled explain, mirroring ToolbarButton.tsx —
+      // focusable, state announced, press swallowed, chrome dimmed.
+      aria-disabled={isDisabled || undefined}
+      onPress={isDisabled ? undefined : onPress}
+      opacity={isDisabled ? 0.5 : 1}
       paddingHorizontal="$2"
+      {...(pressed !== undefined ? { "aria-pressed": pressed } : undefined)}
       {...(active ? { theme: "active" } : undefined)}
       {...props}
     >
@@ -91,8 +99,10 @@ export function ToolbarDropdownButton({
       chromeless
       size={size}
       compact={compact}
-      disabled={isDisabled}
-      onPress={onPress}
+      // DG-ST-03: aria-disabled explain (see ToolbarButton above).
+      aria-disabled={isDisabled || undefined}
+      onPress={isDisabled ? undefined : onPress}
+      opacity={isDisabled ? 0.5 : 1}
       {...(active ? { theme: "active" } : undefined)}
       {...props}
     >

package/src/toolbar/ToolbarButton.tsx

@@ -1,18 +1,29 @@
 /**
  * Toolbar button primitives for the rich text editor.
  *
- * ToolbarButton: square icon button (fixed aspect ratio)
- * ToolbarDropdownButton: button with trailing caret (variable width, fixed height)
+ * ToolbarButton: square icon button; ToolbarDropdownButton: button with a
+ * trailing caret (variable width).
+ *
+ * Axiom 12 LEGIBLE FLOOR: the pressable/focusable element is a 44x44
+ * transparent target (same split as the forms RadioGroup/Checkbox fix);
+ * the visible chrome (hover/press/active surface) is the inner glyph box,
+ * so visual density survives while the touch target is floored.
+ *
+ * Toggle semantics: when `active` is provided the button reports
+ * `aria-pressed` so assistive tech reads format state.
  */
 
 import type { ReactNode } from "react";
-import { XStack, View } from "tamagui";
+import { XStack, View, styled } from "tamagui";
 import { Button } from "@multiplatform.one/forms";
 import { Tooltip } from "@multiplatform.one/components";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { RichEditorContext } from "../context";
 
-const BUTTON_SIZE = 30;
+/** WCAG / Axiom 12 pressable floor */
+const TARGET_SIZE = 44;
+/** Visible chrome box inside the target */
+const VISUAL_SIZE = 30;
 
 // ===========================================================================
 // Types
@@ -24,6 +35,8 @@ export interface ToolbarButtonProps {
   onPress: () => void;
   children: ReactNode;
   "aria-label": string;
+  /** Marks the button as a toggle; reflects the pressed state to AT */
+  "aria-pressed"?: boolean;
   tooltip?: string;
 }
 
@@ -35,6 +48,44 @@ export interface ToolbarDropdownButtonProps {
   "aria-label": string;
 }
 
+// ===========================================================================
+// Inner chrome box (the visible button surface)
+// ===========================================================================
+
+const ChromeBox = styled(View, {
+  name: "ToolbarButtonChrome",
+  alignItems: "center",
+  justifyContent: "center",
+  width: VISUAL_SIZE,
+  height: VISUAL_SIZE,
+  borderRadius: "$2",
+
+  hoverStyle: {
+    backgroundColor: "$color4",
+  },
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color5",
+      },
+    },
+    stretch: {
+      true: {
+        width: "auto",
+        paddingHorizontal: "$2",
+      },
+    },
+    // An aria-disabled control must not light up on hover like a pressable
+    // one (DG-ST-03 / LC-40 washed chrome).
+    unavailable: {
+      true: {
+        hoverStyle: { backgroundColor: "transparent" },
+      },
+    },
+  } as const,
+});
+
 // ===========================================================================
 // ToolbarButton (square)
 // ===========================================================================
@@ -45,30 +96,48 @@ export function ToolbarButton({
   onPress,
   children,
   tooltip,
+  "aria-pressed": ariaPressed,
   ...props
 }: ToolbarButtonProps) {
   const ctx = RichEditorContext.useStyledContext();
   const isDisabled = disabled ?? ctx.disabled;
+  const pressed = ariaPressed ?? (active !== undefined ? !!active : undefined);
 
   const button = (
     <Button
       chromeless
-      disabled={isDisabled}
-      onPress={onPress}
-      width={BUTTON_SIZE}
-      height={BUTTON_SIZE}
+      // DG-ST-03: an unavailable action (undo with no history, …) is never
+      // bare-`disabled` — it stays focusable, reports `aria-disabled`,
+      // swallows presses, and dims. The icon strip has no room for Button's
+      // visible `disabledReason` text, so aria state + washed chrome is the
+      // toolbar-idiom explain.
+      aria-disabled={isDisabled || undefined}
+      onPress={isDisabled ? undefined : onPress}
+      cursor={isDisabled ? "not-allowed" : undefined}
+      opacity={isDisabled ? 0.5 : 1}
+      width={TARGET_SIZE}
+      height={TARGET_SIZE}
+      minWidth={TARGET_SIZE}
+      minHeight={TARGET_SIZE}
       padding={0}
+      borderWidth={0}
+      backgroundColor="transparent"
+      hoverStyle={{ backgroundColor: "transparent" }}
+      pressStyle={{ backgroundColor: "transparent" }}
       borderRadius="$2"
+      {...(pressed !== undefined ? { "aria-pressed": pressed } : undefined)}
       {...(active ? { theme: "active" } : undefined)}
       {...props}
     >
-      <View alignItems="center" justifyContent="center" width="100%" height="100%">
+      <ChromeBox active={!!active} unavailable={!!isDisabled}>
         {children}
-      </View>
+      </ChromeBox>
     </Button>
   );
 
-  if (tooltip) {
+  // DG-OVL-05: no hover tooltip on a disabled control — the shortcut hint
+  // returns with availability.
+  if (tooltip && !isDisabled) {
     return (
       <Tooltip content={tooltip} placement="bottom" delay={400}>
         {button}
@@ -96,19 +165,29 @@ export function ToolbarDropdownButton({
   return (
     <Button
       chromeless
-      disabled={isDisabled}
-      onPress={onPress}
-      height={BUTTON_SIZE}
-      paddingHorizontal="$2"
+      // DG-ST-03: aria-disabled explain (see ToolbarButton above).
+      aria-disabled={isDisabled || undefined}
+      onPress={isDisabled ? undefined : onPress}
+      cursor={isDisabled ? "not-allowed" : undefined}
+      opacity={isDisabled ? 0.5 : 1}
+      height={TARGET_SIZE}
+      minHeight={TARGET_SIZE}
+      paddingHorizontal={0}
       paddingVertical={0}
+      borderWidth={0}
+      backgroundColor="transparent"
+      hoverStyle={{ backgroundColor: "transparent" }}
+      pressStyle={{ backgroundColor: "transparent" }}
       borderRadius="$2"
       {...(active ? { theme: "active" } : undefined)}
       {...props}
     >
-      <XStack alignItems="center" gap="$1">
-        {children}
-        <CaretDownIcon size={10} />
-      </XStack>
+      <ChromeBox active={!!active} stretch unavailable={!!isDisabled}>
+        <XStack alignItems="center" gap="$1">
+          {children}
+          <CaretDownIcon size={10} />
+        </XStack>
+      </ChromeBox>
     </Button>
   );
 }

package/src/toolbar/bubbleToolbar.spec.tsx

@@ -3,7 +3,8 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { RichEditorContext } from "../context";
 import { defaultEditorState } from "../types";
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"

package/src/toolbar/fixedToolbar.spec.tsx

@@ -4,7 +4,8 @@ import { RichEditorContext } from "../context";
 import { defaultEditorState } from "../types";
 import type { ToolbarSection } from "../types";
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -18,7 +19,8 @@ vi.mock("@multiplatform.one/forms", () => ({
   ),
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));