@multiplatform.one/rich-text 6.0.0

package/src/toolbar/ToolbarButton.native.tsx

@@ -0,0 +1,105 @@
+/**
+ * Native toolbar button — avoids Tooltip (from @multiplatform.one/components)
+ * and CaretDownIcon (from @phosphor-icons/react) which pull in web-only code.
+ */
+
+import type { ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+import { Text, XStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import { RichEditorContext } from "../context";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ToolbarButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+  "aria-label": string;
+  tooltip?: string;
+  size?: SizeTokens;
+  compact?: boolean;
+}
+
+export interface ToolbarDropdownButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+  "aria-label": string;
+  size?: SizeTokens;
+  compact?: boolean;
+}
+
+// ===========================================================================
+// ToolbarButton
+// ===========================================================================
+
+export function ToolbarButton({
+  active,
+  disabled,
+  onPress,
+  children,
+  size: sizeProp,
+  compact: compactProp,
+  ...props
+}: ToolbarButtonProps) {
+  const ctx = RichEditorContext.useStyledContext();
+  const size = sizeProp ?? (ctx.size as SizeTokens);
+  const compact = compactProp ?? ctx.compact;
+  const isDisabled = disabled ?? ctx.disabled;
+
+  return (
+    <Button
+      chromeless
+      size={size}
+      compact={compact}
+      disabled={isDisabled}
+      onPress={onPress}
+      paddingHorizontal="$2"
+      {...(active ? { theme: "active" } : undefined)}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+// ===========================================================================
+// ToolbarDropdownButton
+// ===========================================================================
+
+export function ToolbarDropdownButton({
+  active,
+  disabled,
+  onPress,
+  children,
+  size: sizeProp,
+  compact: compactProp,
+  ...props
+}: ToolbarDropdownButtonProps) {
+  const ctx = RichEditorContext.useStyledContext();
+  const size = sizeProp ?? (ctx.size as SizeTokens);
+  const compact = compactProp ?? ctx.compact;
+  const isDisabled = disabled ?? ctx.disabled;
+
+  return (
+    <Button
+      chromeless
+      size={size}
+      compact={compact}
+      disabled={isDisabled}
+      onPress={onPress}
+      {...(active ? { theme: "active" } : undefined)}
+      {...props}
+    >
+      <XStack alignItems="center" gap="$1">
+        {children}
+        <Text fontSize={10}>{"▼"}</Text>
+      </XStack>
+    </Button>
+  );
+}

package/src/toolbar/ToolbarButton.tsx

@@ -0,0 +1,114 @@
+/**
+ * Toolbar button primitives for the rich text editor.
+ *
+ * ToolbarButton: square icon button (fixed aspect ratio)
+ * ToolbarDropdownButton: button with trailing caret (variable width, fixed height)
+ */
+
+import type { ReactNode } from "react";
+import { XStack, View } 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;
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ToolbarButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+  "aria-label": string;
+  tooltip?: string;
+}
+
+export interface ToolbarDropdownButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  children: ReactNode;
+  "aria-label": string;
+}
+
+// ===========================================================================
+// ToolbarButton (square)
+// ===========================================================================
+
+export function ToolbarButton({
+  active,
+  disabled,
+  onPress,
+  children,
+  tooltip,
+  ...props
+}: ToolbarButtonProps) {
+  const ctx = RichEditorContext.useStyledContext();
+  const isDisabled = disabled ?? ctx.disabled;
+
+  const button = (
+    <Button
+      chromeless
+      disabled={isDisabled}
+      onPress={onPress}
+      width={BUTTON_SIZE}
+      height={BUTTON_SIZE}
+      padding={0}
+      borderRadius="$2"
+      {...(active ? { theme: "active" } : undefined)}
+      {...props}
+    >
+      <View alignItems="center" justifyContent="center" width="100%" height="100%">
+        {children}
+      </View>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip content={tooltip} placement="bottom" delay={400}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+}
+
+// ===========================================================================
+// ToolbarDropdownButton (fixed height, variable width)
+// ===========================================================================
+
+export function ToolbarDropdownButton({
+  active,
+  disabled,
+  onPress,
+  children,
+  ...props
+}: ToolbarDropdownButtonProps) {
+  const ctx = RichEditorContext.useStyledContext();
+  const isDisabled = disabled ?? ctx.disabled;
+
+  return (
+    <Button
+      chromeless
+      disabled={isDisabled}
+      onPress={onPress}
+      height={BUTTON_SIZE}
+      paddingHorizontal="$2"
+      paddingVertical={0}
+      borderRadius="$2"
+      {...(active ? { theme: "active" } : undefined)}
+      {...props}
+    >
+      <XStack alignItems="center" gap="$1">
+        {children}
+        <CaretDownIcon size={10} />
+      </XStack>
+    </Button>
+  );
+}

package/src/toolbar/ToolbarGroup.tsx

@@ -0,0 +1,38 @@
+/**
+ * Toolbar group wrapper with trailing separator and visibility control
+ */
+
+import type { ReactNode } from "react";
+import { ToolbarGroupFrame, ToolbarSeparatorFrame } from "../styled";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ToolbarGroupProps {
+  /** Group content (toolbar buttons) */
+  children: ReactNode;
+  /** Whether the group is visible (hides entire group when false) */
+  visible?: boolean;
+  /** Whether to show the trailing separator (default: true) */
+  showSeparator?: boolean;
+}
+
+// ===========================================================================
+// ToolbarGroup
+// ===========================================================================
+
+export function ToolbarGroup({
+  children,
+  visible = true,
+  showSeparator = true,
+}: ToolbarGroupProps) {
+  if (!visible) return null;
+
+  return (
+    <>
+      <ToolbarGroupFrame>{children}</ToolbarGroupFrame>
+      {showSeparator && <ToolbarSeparatorFrame />}
+    </>
+  );
+}

package/src/toolbar/bubbleToolbar.spec.tsx

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import { defaultEditorState } from "../types";
+
+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,
+}));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: ({ children, editor: _editor }: any) => (
+    <div data-testid="bubble-menu">{children}</div>
+  ),
+}));
+
+const { BubbleToolbar } = await import("./BubbleToolbar");
+
+function withContext(ui: React.ReactElement) {
+  return (
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+describe("BubbleToolbar", () => {
+  it("renders inline formatting buttons only", () => {
+    const editorRef = { current: null };
+    const mockEditor = {} as any;
+
+    const { container } = renderWithProviders(
+      withContext(
+        <BubbleToolbar editor={mockEditor} editorRef={editorRef} state={defaultEditorState} />,
+      ),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    // Inline formatting buttons should be present
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Italic");
+    expect(labels).toContain("Underline");
+    expect(labels).toContain("Strikethrough");
+    expect(labels).toContain("Code");
+    expect(labels).toContain("Subscript");
+    expect(labels).toContain("Superscript");
+    expect(labels).toContain("Text Color");
+    expect(labels).toContain("Highlight Color");
+    expect(labels).toContain("Link");
+  });
+
+  it("does not render heading, list, or alignment controls", () => {
+    const editorRef = { current: null };
+    const mockEditor = {} as any;
+
+    const { container } = renderWithProviders(
+      withContext(
+        <BubbleToolbar editor={mockEditor} editorRef={editorRef} state={defaultEditorState} />,
+      ),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    // Heading, list, alignment, block controls should NOT be present
+    expect(labels).not.toContain("Heading");
+    expect(labels).not.toContain("Lists");
+    expect(labels).not.toContain("Align Left");
+    expect(labels).not.toContain("Align Center");
+    expect(labels).not.toContain("Align Right");
+    expect(labels).not.toContain("Blockquote");
+    expect(labels).not.toContain("Code Block");
+    expect(labels).not.toContain("Horizontal Rule");
+    expect(labels).not.toContain("Clear Formatting");
+    expect(labels).not.toContain("Insert Image");
+    expect(labels).not.toContain("Undo");
+    expect(labels).not.toContain("Redo");
+  });
+});

package/src/toolbar/fixedToolbar.spec.tsx

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import { defaultEditorState } from "../types";
+import type { ToolbarSection } from "../types";
+
+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,
+}));
+
+const { FixedToolbar } = await import("./FixedToolbar");
+
+function withContext(ui: React.ReactElement) {
+  return (
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+describe("FixedToolbar (web)", () => {
+  it("renders primary toolbar groups and the More overflow button", () => {
+    const editorRef = { current: null };
+    const { container } = renderWithProviders(
+      withContext(<FixedToolbar editorRef={editorRef} state={defaultEditorState} />),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    // Primary groups (always visible)
+    expect(labels).toContain("Undo");
+    expect(labels).toContain("Redo");
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Italic");
+    expect(labels).toContain("Underline");
+    expect(labels).toContain("Strikethrough");
+    expect(labels).toContain("Text Color");
+    expect(labels).toContain("Highlight Color");
+    expect(labels).toContain("Heading");
+    expect(labels).toContain("Lists");
+    expect(labels).toContain("Blockquote");
+    expect(labels).toContain("Code Block");
+    expect(labels).toContain("Link");
+    expect(labels).toContain("Insert Image");
+
+    // Overflow items are inside the More dropdown (not directly visible)
+    expect(labels).toContain("More formatting options");
+    expect(labels).not.toContain("Align Left");
+    expect(labels).not.toContain("Clear Formatting");
+  });
+
+  it("sections prop controls visibility of toolbar groups", () => {
+    const editorRef = { current: null };
+    const sections: ToolbarSection[] = ["formatting", "link"];
+    const { container } = renderWithProviders(
+      withContext(
+        <FixedToolbar editorRef={editorRef} state={defaultEditorState} sections={sections} />,
+      ),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    // Visible sections
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Link");
+
+    // Hidden sections
+    expect(labels).not.toContain("Undo");
+    expect(labels).not.toContain("Heading");
+    expect(labels).not.toContain("Insert Image");
+  });
+
+  it("renders with all primary sections visible when sections prop is omitted", () => {
+    const editorRef = { current: null };
+    const { container } = renderWithProviders(
+      withContext(<FixedToolbar editorRef={editorRef} state={defaultEditorState} />),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    expect(labels).toContain("Undo");
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Text Color");
+    expect(labels).toContain("Heading");
+    expect(labels).toContain("Lists");
+    expect(labels).toContain("Blockquote");
+    expect(labels).toContain("Link");
+    expect(labels).toContain("Insert Image");
+    expect(labels).toContain("More formatting options");
+  });
+
+  it("correctly orders groups: History before Formatting before Color", () => {
+    const editorRef = { current: null };
+    const { container } = renderWithProviders(
+      withContext(<FixedToolbar editorRef={editorRef} state={defaultEditorState} />),
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const labels = Array.from(buttons).map((b) => b.getAttribute("aria-label"));
+
+    const undoIdx = labels.indexOf("Undo");
+    const boldIdx = labels.indexOf("Bold");
+    const textColorIdx = labels.indexOf("Text Color");
+    const headingIdx = labels.indexOf("Heading");
+
+    expect(undoIdx).toBeLessThan(boldIdx);
+    expect(boldIdx).toBeLessThan(textColorIdx);
+    expect(textColorIdx).toBeLessThan(headingIdx);
+  });
+});

package/src/toolbar/icons.native.tsx

@@ -0,0 +1,112 @@
+/**
+ * Native icon components for the rich text editor toolbar
+ *
+ * Text-based replacements for the web SVG icons.
+ */
+
+import { Text, styled } from "tamagui";
+
+// ===========================================================================
+// Text Style Icons (same as web)
+// ===========================================================================
+
+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",
+});
+
+// ===========================================================================
+// Text-based icon replacements for native
+// ===========================================================================
+
+const IconText = styled(Text, {
+  fontSize: 13,
+  color: "$color11",
+});
+
+export function UndoIcon() {
+  return <IconText>{"↩"}</IconText>;
+}
+
+export function RedoIcon() {
+  return <IconText>{"↪"}</IconText>;
+}
+
+export function AlignLeftIcon() {
+  return <IconText>{"☰"}</IconText>;
+}
+
+export function AlignCenterIcon() {
+  return <IconText>{"☰"}</IconText>;
+}
+
+export function AlignRightIcon() {
+  return <IconText>{"☰"}</IconText>;
+}
+
+export function AlignJustifyIcon() {
+  return <IconText>{"☰"}</IconText>;
+}
+
+export function LinkIcon() {
+  return <IconText>{"🔗"}</IconText>;
+}
+
+export function TextColorIcon(_props: { color?: string | null }) {
+  return <IconText>{"A"}</IconText>;
+}
+
+export function HighlightIcon(_props: { color?: string | null }) {
+  return <IconText>{"🖊"}</IconText>;
+}
+
+export function HorizontalRuleIcon() {
+  return <IconText>{"―"}</IconText>;
+}
+
+export function ClearFormattingIcon() {
+  return <IconText>{"✕"}</IconText>;
+}
+
+export function SubscriptIcon() {
+  return <IconText>{"X₂"}</IconText>;
+}
+
+export function SuperscriptIcon() {
+  return <IconText>{"X²"}</IconText>;
+}
+
+export function BulletListIcon() {
+  return <IconText>{"•≡"}</IconText>;
+}
+
+export function OrderedListIcon() {
+  return <IconText>{"1."}</IconText>;
+}
+
+export function TaskListIcon() {
+  return <IconText>{"☑"}</IconText>;
+}
+
+export function ImageIcon() {
+  return <IconText>{"🖼"}</IconText>;
+}
+
+export function BlockquoteIcon() {
+  return <IconText>{"❝"}</IconText>;
+}
+
+export function CodeBlockIcon() {
+  return <IconText>{"</>"}</IconText>;
+}