@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/src/toolbar/icons.tsx

@@ -1,13 +1,50 @@
 /**
- * SVG icon components for the rich text editor toolbar
+ * Icon components for the rich text editor toolbar (web).
  *
- * All icons use currentColor for fill/stroke to inherit text color.
+ * LC-16 / census #20: glyphs come from `@phosphor-icons/react` — the house
+ * icon standard — so toolbar icons share stroke weight and optical size with
+ * every other surface. Only the color-state icons (TextColorIcon /
+ * HighlightIcon) stay hand-rolled: they render the currently selected color
+ * as a functional swatch bar, which no static icon set provides.
+ *
+ * Native uses `icons.native.tsx` (text glyphs; phosphor stays out of the
+ * native bundle).
  */
 
+import {
+  ArrowsInSimpleIcon,
+  ArrowsOutSimpleIcon,
+  ArrowUUpLeftIcon,
+  ArrowUUpRightIcon,
+  CodeIcon,
+  CodeSimpleIcon,
+  ImageIcon as PhosphorImageIcon,
+  LinkIcon as PhosphorLinkIcon,
+  ListBulletsIcon,
+  ListChecksIcon,
+  ListNumbersIcon,
+  MinusIcon,
+  QuotesIcon,
+  TextAlignCenterIcon,
+  TextAlignJustifyIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
+  TextBIcon,
+  TextItalicIcon,
+  TextStrikethroughIcon,
+  TextSubscriptIcon,
+  TextSuperscriptIcon,
+  TextTSlashIcon,
+  TextUnderlineIcon,
+} from "@phosphor-icons/react";
+import { useDirection } from "@multiplatform.one/components";
+import type { ReactNode } from "react";
 import { Text, styled } from "tamagui";
 
+const ICON_SIZE = 16;
+
 // ===========================================================================
-// SVG Wrapper
+// SVG Wrapper (used by the color-state icons below)
 // ===========================================================================
 
 const SvgWrapper = styled(Text, {
@@ -21,384 +58,136 @@ const SvgWrapper = styled(Text, {
 // Text Style Icons
 // ===========================================================================
 
-export const BoldIcon = styled(Text, {
-  fontWeight: "bold",
-});
+// These historically rendered a styled letter child (`<BoldIcon>B</BoldIcon>`);
+// the phosphor glyphs replace the letter, so children are accepted and ignored.
 
-export const ItalicIcon = styled(Text, {
-  fontStyle: "italic",
-});
+export function BoldIcon(_props: { children?: ReactNode }) {
+  return <TextBIcon size={ICON_SIZE} />;
+}
 
-export const UnderlineIcon = styled(Text, {
-  textDecorationLine: "underline",
-});
+export function ItalicIcon(_props: { children?: ReactNode }) {
+  return <TextItalicIcon size={ICON_SIZE} />;
+}
 
-export const StrikeIcon = styled(Text, {
-  textDecorationLine: "line-through",
-});
+export function UnderlineIcon(_props: { children?: ReactNode }) {
+  return <TextUnderlineIcon size={ICON_SIZE} />;
+}
+
+export function StrikeIcon(_props: { children?: ReactNode }) {
+  return <TextStrikethroughIcon size={ICON_SIZE} />;
+}
 
 // ===========================================================================
-// SVG Icons
+// Toolbar Icons (phosphor)
 // ===========================================================================
 
+// Undo/redo arrows encode travel through history (back/forward), so the
+// glyph pair swaps under RTL (useDirection pattern); alignment icons below
+// stay physical — they depict the literal alignment they produce.
 export function UndoIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="1 4 1 10 7 10" />
-        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
-      </svg>
-    </SvgWrapper>
-  );
+  const isRTL = useDirection() === "rtl";
+  return isRTL ? <ArrowUUpRightIcon size={ICON_SIZE} /> : <ArrowUUpLeftIcon size={ICON_SIZE} />;
 }
 
 export function RedoIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="23 4 23 10 17 10" />
-        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-      </svg>
-    </SvgWrapper>
-  );
+  const isRTL = useDirection() === "rtl";
+  return isRTL ? <ArrowUUpLeftIcon size={ICON_SIZE} /> : <ArrowUUpRightIcon size={ICON_SIZE} />;
 }
 
 export function AlignLeftIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="3" y1="6" x2="21" y2="6" />
-        <line x1="3" y1="12" x2="15" y2="12" />
-        <line x1="3" y1="18" x2="21" y2="18" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextAlignLeftIcon size={ICON_SIZE} />;
 }
 
 export function AlignCenterIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="3" y1="6" x2="21" y2="6" />
-        <line x1="6" y1="12" x2="18" y2="12" />
-        <line x1="3" y1="18" x2="21" y2="18" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextAlignCenterIcon size={ICON_SIZE} />;
 }
 
 export function AlignRightIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="3" y1="6" x2="21" y2="6" />
-        <line x1="9" y1="12" x2="21" y2="12" />
-        <line x1="3" y1="18" x2="21" y2="18" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextAlignRightIcon size={ICON_SIZE} />;
 }
 
 export function AlignJustifyIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="3" y1="6" x2="21" y2="6" />
-        <line x1="3" y1="12" x2="21" y2="12" />
-        <line x1="3" y1="18" x2="21" y2="18" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextAlignJustifyIcon size={ICON_SIZE} />;
 }
 
 export function LinkIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-      </svg>
-    </SvgWrapper>
-  );
-}
-
-export function TextColorIcon({ color }: { color?: string | null }) {
-  return (
-    <SvgWrapper>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-        <text x="12" y="14" textAnchor="middle" fontSize="14" fontWeight="bold" fill="currentColor">
-          A
-        </text>
-        <rect x="4" y="18" width="16" height="3" rx="1" fill={color || "currentColor"} />
-      </svg>
-    </SvgWrapper>
-  );
-}
-
-export function HighlightIcon({ color }: { color?: string | null }) {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M12 20h9" />
-        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-        {color && <rect x="2" y="18" width="8" height="4" rx="1" fill={color} stroke="none" />}
-      </svg>
-    </SvgWrapper>
-  );
+  return <PhosphorLinkIcon size={ICON_SIZE} />;
 }
 
 export function HorizontalRuleIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="3" y1="12" x2="21" y2="12" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <MinusIcon size={ICON_SIZE} />;
 }
 
 export function ClearFormattingIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M4 7h6.5l-2.5 9h-4" />
-        <path d="M13.5 7l-2.5 9" />
-        <path d="M17 7h3" />
-        <line x1="4" y1="20" x2="20" y2="4" strokeWidth="2.5" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextTSlashIcon size={ICON_SIZE} />;
 }
 
 export function SubscriptIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M4 5l8 8" />
-        <path d="M12 5l-8 8" />
-        <text x="18" y="20" fontSize="10" fontWeight="bold" fill="currentColor" stroke="none">
-          2
-        </text>
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextSubscriptIcon size={ICON_SIZE} />;
 }
 
 export function SuperscriptIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M4 11l8 8" />
-        <path d="M12 11l-8 8" />
-        <text x="18" y="10" fontSize="10" fontWeight="bold" fill="currentColor" stroke="none">
-          2
-        </text>
-      </svg>
-    </SvgWrapper>
-  );
+  return <TextSuperscriptIcon size={ICON_SIZE} />;
 }
 
 export function BulletListIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="9" y1="6" x2="20" y2="6" />
-        <line x1="9" y1="12" x2="20" y2="12" />
-        <line x1="9" y1="18" x2="20" y2="18" />
-        <circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none" />
-        <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none" />
-        <circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <ListBulletsIcon size={ICON_SIZE} />;
 }
 
 export function OrderedListIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="10" y1="6" x2="20" y2="6" />
-        <line x1="10" y1="12" x2="20" y2="12" />
-        <line x1="10" y1="18" x2="20" y2="18" />
-        <text x="4" y="8" fontSize="8" fontWeight="bold" fill="currentColor" stroke="none">
-          1
-        </text>
-        <text x="4" y="14" fontSize="8" fontWeight="bold" fill="currentColor" stroke="none">
-          2
-        </text>
-        <text x="4" y="20" fontSize="8" fontWeight="bold" fill="currentColor" stroke="none">
-          3
-        </text>
-      </svg>
-    </SvgWrapper>
-  );
+  return <ListNumbersIcon size={ICON_SIZE} />;
 }
 
 export function TaskListIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <line x1="10" y1="6" x2="20" y2="6" />
-        <line x1="10" y1="12" x2="20" y2="12" />
-        <line x1="10" y1="18" x2="20" y2="18" />
-        <rect x="3" y="4" width="4" height="4" rx="0.5" />
-        <rect x="3" y="10" width="4" height="4" rx="0.5" />
-        <rect x="3" y="16" width="4" height="4" rx="0.5" />
-        <path d="M4 12l1 1 2-2" strokeWidth="1.5" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <ListChecksIcon size={ICON_SIZE} />;
 }
 
 export function ImageIcon() {
-  return (
-    <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-        <circle cx="8.5" cy="8.5" r="1.5" />
-        <polyline points="21 15 16 10 5 21" />
-      </svg>
-    </SvgWrapper>
-  );
+  return <PhosphorImageIcon size={ICON_SIZE} />;
 }
 
 export function BlockquoteIcon() {
+  return <QuotesIcon size={ICON_SIZE} />;
+}
+
+export function CodeBlockIcon() {
+  return <CodeIcon size={ICON_SIZE} />;
+}
+
+export function InlineCodeIcon() {
+  return <CodeSimpleIcon size={ICON_SIZE} />;
+}
+
+export function ExpandIcon() {
+  return <ArrowsOutSimpleIcon size={ICON_SIZE} />;
+}
+
+export function CompressIcon() {
+  return <ArrowsInSimpleIcon size={ICON_SIZE} />;
+}
+
+// ===========================================================================
+// Color-state icons — genuinely custom (LC-16 kept-with-reason)
+//
+// Both render the CURRENT color as a swatch bar under the glyph, a functional
+// state display no static icon set carries. currentColor keeps the glyph on
+// the text color; the bar takes the live selection.
+// ===========================================================================
+
+export function TextColorIcon({ color }: { color?: string | null }) {
   return (
     <SvgWrapper>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M3 6h18" />
-        <path d="M3 12h18" />
-        <path d="M3 18h18" />
-        <rect x="2" y="4" width="2" height="16" rx="1" fill="currentColor" stroke="none" />
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+        <text x="12" y="14" textAnchor="middle" fontSize="14" fontWeight="bold" fill="currentColor">
+          A
+        </text>
+        <rect x="4" y="18" width="16" height="3" rx="1" fill={color || "currentColor"} />
       </svg>
     </SvgWrapper>
   );
 }
 
-export function CodeBlockIcon() {
+export function HighlightIcon({ color }: { color?: string | null }) {
   return (
     <SvgWrapper>
       <svg
@@ -409,8 +198,9 @@ export function CodeBlockIcon() {
         stroke="currentColor"
         strokeWidth="2"
       >
-        <polyline points="16 18 22 12 16 6" />
-        <polyline points="8 6 2 12 8 18" />
+        <path d="M12 20h9" />
+        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+        {color && <rect x="2" y="18" width="8" height="4" rx="1" fill={color} stroke="none" />}
       </svg>
     </SvgWrapper>
   );

package/src/toolbar/shortcuts.ts

@@ -1,7 +1,12 @@
 /**
  * Platform-aware keyboard shortcut labels for toolbar tooltips.
+ *
+ * Properties are getters so `t()` resolves at access (render) time -- a
+ * locale catalog loaded after module import still applies.
  */
 
+import { t } from "../shared/t";
+
 const isMac =
   typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform ?? "");
 
@@ -15,28 +20,76 @@ export function shortcut(label: string, keys?: string): string {
 }
 
 export const SHORTCUTS = {
-  bold: shortcut("Bold", `${MOD}B`),
-  italic: shortcut("Italic", `${MOD}I`),
-  underline: shortcut("Underline", `${MOD}U`),
-  strike: shortcut("Strikethrough", `${MOD}${SHIFT}X`),
-  code: shortcut("Code", `${MOD}E`),
-  subscript: "Subscript",
-  superscript: "Superscript",
-  undo: shortcut("Undo", `${MOD}Z`),
-  redo: shortcut("Redo", `${MOD}${SHIFT}Z`),
-  alignLeft: shortcut("Align Left", `${MOD}${SHIFT}L`),
-  alignCenter: shortcut("Align Center", `${MOD}${SHIFT}E`),
-  alignRight: shortcut("Align Right", `${MOD}${SHIFT}R`),
-  alignJustify: shortcut("Justify", `${MOD}${SHIFT}J`),
-  blockquote: shortcut("Blockquote", `${MOD}${SHIFT}B`),
-  codeBlock: shortcut("Code Block", `${MOD}${ALT}C`),
-  bulletList: shortcut("Bullet List", `${MOD}${SHIFT}8`),
-  orderedList: shortcut("Ordered List", `${MOD}${SHIFT}7`),
-  taskList: shortcut("Task List", `${MOD}${SHIFT}9`),
-  link: shortcut("Link", `${MOD}K`),
-  horizontalRule: "Horizontal Rule",
-  image: "Image",
-  textColor: "Text Color",
-  highlight: "Highlight",
-  clearFormatting: "Clear Formatting",
+  get bold() {
+    return shortcut(t("Bold"), `${MOD}B`);
+  },
+  get italic() {
+    return shortcut(t("Italic"), `${MOD}I`);
+  },
+  get underline() {
+    return shortcut(t("Underline"), `${MOD}U`);
+  },
+  get strike() {
+    return shortcut(t("Strikethrough"), `${MOD}${SHIFT}X`);
+  },
+  get code() {
+    return shortcut(t("Code"), `${MOD}E`);
+  },
+  get subscript() {
+    return t("Subscript");
+  },
+  get superscript() {
+    return t("Superscript");
+  },
+  get undo() {
+    return shortcut(t("Undo"), `${MOD}Z`);
+  },
+  get redo() {
+    return shortcut(t("Redo"), `${MOD}${SHIFT}Z`);
+  },
+  get alignLeft() {
+    return shortcut(t("Align Left"), `${MOD}${SHIFT}L`);
+  },
+  get alignCenter() {
+    return shortcut(t("Align Center"), `${MOD}${SHIFT}E`);
+  },
+  get alignRight() {
+    return shortcut(t("Align Right"), `${MOD}${SHIFT}R`);
+  },
+  get alignJustify() {
+    return shortcut(t("Justify"), `${MOD}${SHIFT}J`);
+  },
+  get blockquote() {
+    return shortcut(t("Blockquote"), `${MOD}${SHIFT}B`);
+  },
+  get codeBlock() {
+    return shortcut(t("Code Block"), `${MOD}${ALT}C`);
+  },
+  get bulletList() {
+    return shortcut(t("Bullet List"), `${MOD}${SHIFT}8`);
+  },
+  get orderedList() {
+    return shortcut(t("Ordered List"), `${MOD}${SHIFT}7`);
+  },
+  get taskList() {
+    return shortcut(t("Task List"), `${MOD}${SHIFT}9`);
+  },
+  get link() {
+    return shortcut(t("Link"), `${MOD}K`);
+  },
+  get horizontalRule() {
+    return t("Horizontal Rule");
+  },
+  get image() {
+    return t("Image");
+  },
+  get textColor() {
+    return t("Text Color");
+  },
+  get highlight() {
+    return t("Highlight");
+  },
+  get clearFormatting() {
+    return t("Clear Formatting");
+  },
 } as const;

package/src/toolbar/toolbarPrimitives.spec.tsx

@@ -14,7 +14,8 @@ import {
   ImageIcon,
 } from "./icons";
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -30,6 +31,8 @@ vi.mock("@multiplatform.one/forms", () => ({
 
 vi.mock("@multiplatform.one/components", () => ({
   Tooltip: ({ children }: any) => children,
+  // UndoIcon/RedoIcon mirror through the direction source (RTL glyph swap).
+  useDirection: () => "ltr",
 }));
 
 // Import after mocks
@@ -115,4 +118,29 @@ describe("icons", () => {
     const svgs = container.querySelectorAll("svg");
     expect(svgs.length).toBeGreaterThanOrEqual(8);
   });
+
+  it("mechanical icons render phosphor glyphs (LC-16 census #20)", () => {
+    const { container } = renderWithProviders(<UndoIcon />);
+    // Phosphor icons render a 256-grid viewBox; the old hand-rolled set was 24.
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg!.getAttribute("viewBox")).toBe("0 0 256 256");
+  });
+
+  it("text-style icons accept (and ignore) legacy letter children", () => {
+    const { container } = renderWithProviders(<BoldIcon>B</BoldIcon>);
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+
+  it("color-state icons stay custom and render the current color swatch", () => {
+    const { container } = renderWithProviders(
+      <>
+        <TextColorIcon color="#ff0000" />
+        <HighlightIcon color="#00ff00" />
+      </>,
+    );
+    const rects = Array.from(container.querySelectorAll("rect"));
+    expect(rects.some((r) => r.getAttribute("fill") === "#ff0000")).toBe(true);
+    expect(rects.some((r) => r.getAttribute("fill") === "#00ff00")).toBe(true);
+  });
 });