@multiplatform.one/rich-text 6.0.0

package/src/toolbar/icons.tsx

@@ -0,0 +1,417 @@
+/**
+ * SVG icon components for the rich text editor toolbar
+ *
+ * All icons use currentColor for fill/stroke to inherit text color.
+ */
+
+import { Text, styled } from "tamagui";
+
+// ===========================================================================
+// SVG Wrapper
+// ===========================================================================
+
+const SvgWrapper = styled(Text, {
+  name: "SvgWrapper",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+// ===========================================================================
+// Text Style Icons
+// ===========================================================================
+
+export const BoldIcon = styled(Text, {
+  fontWeight: "bold",
+});
+
+export const ItalicIcon = styled(Text, {
+  fontStyle: "italic",
+});
+
+export const UnderlineIcon = styled(Text, {
+  textDecorationLine: "underline",
+});
+
+export const StrikeIcon = styled(Text, {
+  textDecorationLine: "line-through",
+});
+
+// ===========================================================================
+// SVG Icons
+// ===========================================================================
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+export function BlockquoteIcon() {
+  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>
+    </SvgWrapper>
+  );
+}
+
+export function CodeBlockIcon() {
+  return (
+    <SvgWrapper>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+      </svg>
+    </SvgWrapper>
+  );
+}

package/src/toolbar/shortcuts.ts

@@ -0,0 +1,42 @@
+/**
+ * Platform-aware keyboard shortcut labels for toolbar tooltips.
+ */
+
+const isMac =
+  typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform ?? "");
+
+const MOD = isMac ? "⌘" : "Ctrl+";
+const SHIFT = isMac ? "⇧" : "Shift+";
+const ALT = isMac ? "⌥" : "Alt+";
+
+export function shortcut(label: string, keys?: string): string {
+  if (!keys) return label;
+  return `${label} (${keys})`;
+}
+
+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",
+} as const;

package/src/toolbar/toolbarPrimitives.spec.tsx

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import { ToolbarGroup } from "./ToolbarGroup";
+import {
+  UndoIcon,
+  RedoIcon,
+  BoldIcon,
+  AlignLeftIcon,
+  LinkIcon,
+  TextColorIcon,
+  HighlightIcon,
+  BulletListIcon,
+  ImageIcon,
+} from "./icons";
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      disabled={props.disabled}
+      onClick={props.onPress}
+      data-active={props.theme === "active" ? "true" : undefined}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+// Import after mocks
+const { ToolbarButton, ToolbarDropdownButton } = await import("./ToolbarButton");
+
+describe("ToolbarButton", () => {
+  it("renders with required aria-label and applies active state", () => {
+    const onPress = vi.fn();
+    const { getByRole } = renderWithProviders(
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <ToolbarButton active onPress={onPress} aria-label="Bold" tooltip="Bold">
+          <BoldIcon>B</BoldIcon>
+        </ToolbarButton>
+      </RichEditorContext.Provider>,
+    );
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Bold");
+  });
+
+  it("reads size/compact from RichEditorContext", () => {
+    const { container } = renderWithProviders(
+      <RichEditorContext.Provider size="$2" compact disabled={false}>
+        <ToolbarButton onPress={() => {}} aria-label="Test Button">
+          Test
+        </ToolbarButton>
+      </RichEditorContext.Provider>,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+});
+
+describe("ToolbarDropdownButton", () => {
+  it("renders with caret icon", () => {
+    const { container } = renderWithProviders(
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <ToolbarDropdownButton onPress={() => {}} aria-label="Heading">
+          H1
+        </ToolbarDropdownButton>
+      </RichEditorContext.Provider>,
+    );
+    // ToolbarDropdownButton renders a caret (CaretDownIcon from phosphor)
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBeGreaterThan(0);
+  });
+});
+
+describe("ToolbarGroup", () => {
+  it("hides children when visible is false", () => {
+    const { container } = renderWithProviders(
+      <ToolbarGroup visible={false}>
+        <span data-testid="child">Should not render</span>
+      </ToolbarGroup>,
+    );
+    expect(container.querySelector("[data-testid='child']")).toBeNull();
+  });
+
+  it("renders children when visible is true", () => {
+    const { container } = renderWithProviders(
+      <ToolbarGroup visible>
+        <span data-testid="child">Should render</span>
+      </ToolbarGroup>,
+    );
+    expect(container.querySelector("[data-testid='child']")).toBeTruthy();
+  });
+});
+
+describe("icons", () => {
+  it("all icon components render without error", () => {
+    const { container } = renderWithProviders(
+      <>
+        <UndoIcon />
+        <RedoIcon />
+        <AlignLeftIcon />
+        <LinkIcon />
+        <TextColorIcon />
+        <HighlightIcon />
+        <BulletListIcon />
+        <ImageIcon />
+      </>,
+    );
+    // Each SVG icon should produce an svg element
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBeGreaterThanOrEqual(8);
+  });
+});

package/src/toolbar/toolbarSubComponents.spec.tsx

@@ -0,0 +1,115 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import { defaultEditorState } from "../types";
+import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants";
+import { normalizeUrl } from "./LinkDialog";
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      disabled={props.disabled}
+      onClick={props.onPress}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+const { TextColorPicker, HighlightColorPicker } = await import("./ColorPicker");
+const { HeadingPicker } = await import("./HeadingPicker");
+const { ListPicker } = await import("./ListPicker");
+const { ImageDialog } = await import("./ImageDialog");
+
+function withContext(ui: React.ReactElement) {
+  return (
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+describe("ColorPicker", () => {
+  it("renders text color picker trigger button", () => {
+    const editorRef = { current: null };
+    const { getByRole } = renderWithProviders(
+      withContext(<TextColorPicker editorRef={editorRef} state={defaultEditorState} />),
+    );
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Text Color");
+  });
+
+  it("renders highlight color picker trigger button", () => {
+    const editorRef = { current: null };
+    const { getByRole } = renderWithProviders(
+      withContext(<HighlightColorPicker editorRef={editorRef} state={defaultEditorState} />),
+    );
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Highlight Color");
+  });
+
+  it("uses TEXT_COLORS and HIGHLIGHT_COLORS from constants", () => {
+    expect(TEXT_COLORS.length).toBeGreaterThan(5);
+    expect(HIGHLIGHT_COLORS.length).toBeGreaterThan(3);
+  });
+});
+
+describe("LinkDialog normalizeUrl", () => {
+  it("auto-prepends https:// to URLs without protocol", () => {
+    expect(normalizeUrl("example.com")).toBe("https://example.com");
+    expect(normalizeUrl("www.test.org/path")).toBe("https://www.test.org/path");
+  });
+
+  it("preserves URLs that already have a protocol", () => {
+    expect(normalizeUrl("https://example.com")).toBe("https://example.com");
+    expect(normalizeUrl("http://example.com")).toBe("http://example.com");
+    expect(normalizeUrl("mailto:user@example.com")).toBe("mailto:user@example.com");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(normalizeUrl("")).toBe("");
+    expect(normalizeUrl("  ")).toBe("");
+  });
+});
+
+describe("HeadingPicker", () => {
+  it("renders H1-H6 plus Paragraph options (7 total) in trigger", () => {
+    const editorRef = { current: null };
+    const { getByRole } = renderWithProviders(
+      withContext(<HeadingPicker editorRef={editorRef} state={defaultEditorState} />),
+    );
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Heading");
+  });
+});
+
+describe("ListPicker", () => {
+  it("renders list picker trigger button", () => {
+    const editorRef = { current: null };
+    const { getByRole } = renderWithProviders(
+      withContext(<ListPicker editorRef={editorRef} state={defaultEditorState} />),
+    );
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Lists");
+  });
+});
+
+describe("ImageDialog", () => {
+  it("renders image dialog trigger button with URL input", () => {
+    const editorRef = { current: null };
+    const { getByRole } = renderWithProviders(withContext(<ImageDialog editorRef={editorRef} />));
+    const button = getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button.getAttribute("aria-label")).toBe("Insert Image");
+  });
+});