@multiplatform.one/rich-text 6.0.0

package/src/toolbar/ListPicker.tsx

@@ -0,0 +1,121 @@
+/**
+ * List picker dropdown for selecting list types
+ */
+
+import { useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Popover, Text, YStack } from "tamagui";
+import type { EditorCommand, EditorState, RichEditorRef } from "../types";
+import { DropdownMenuItemFrame } from "../styled";
+import { ToolbarDropdownButton } from "./ToolbarButton";
+import { BulletListIcon, OrderedListIcon, TaskListIcon } from "./icons";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ListPickerProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state: EditorState;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+}
+
+// ===========================================================================
+// List Options
+// ===========================================================================
+
+interface ListOption {
+  label: string;
+  command: EditorCommand;
+  stateKey: keyof EditorState;
+  icon: React.FC;
+}
+
+const LIST_OPTIONS: ListOption[] = [
+  {
+    label: "Bullet List",
+    command: "bulletList",
+    stateKey: "isBulletList",
+    icon: BulletListIcon,
+  },
+  {
+    label: "Ordered List",
+    command: "orderedList",
+    stateKey: "isOrderedList",
+    icon: OrderedListIcon,
+  },
+  {
+    label: "Task List",
+    command: "taskList",
+    stateKey: "isTaskList",
+    icon: TaskListIcon,
+  },
+];
+
+// ===========================================================================
+// ListPicker
+// ===========================================================================
+
+function getActiveListIcon(state: EditorState) {
+  if (state.isOrderedList) return OrderedListIcon;
+  if (state.isTaskList) return TaskListIcon;
+  return BulletListIcon;
+}
+
+function isAnyListActive(state: EditorState): boolean {
+  return state.isBulletList || state.isOrderedList || state.isTaskList;
+}
+
+export function ListPicker({ editorRef, state, disabled }: ListPickerProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  const ActiveIcon = getActiveListIcon(state);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
+      <Popover.Trigger asChild>
+        <ToolbarDropdownButton
+          active={isAnyListActive(state)}
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Lists"
+        >
+          <ActiveIcon />
+        </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 }}
+      >
+        <YStack gap="$1" minWidth={150}>
+          {LIST_OPTIONS.map((option) => {
+            const Icon = option.icon;
+            return (
+              <DropdownMenuItemFrame
+                key={option.command}
+                active={state[option.stateKey] as boolean}
+                onPress={() => {
+                  editorRef.current?.executeCommand(option.command);
+                  setOpen(false);
+                }}
+                aria-label={option.label}
+              >
+                <Icon />
+                <Text>{option.label}</Text>
+              </DropdownMenuItemFrame>
+            );
+          })}
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/toolbar/MoreDropdown.tsx

@@ -0,0 +1,185 @@
+/**
+ * "More" overflow dropdown for less-frequently-used toolbar actions.
+ * Groups: Subscript, Superscript | Alignment | Horizontal Rule, Clear Formatting
+ */
+
+import type React from "react";
+import { useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Popover, Text, XStack, YStack } from "tamagui";
+import type { EditorCommand, EditorState, RichEditorRef } from "../types";
+import { DropdownMenuItemFrame, ToolbarSeparatorFrame } from "../styled";
+import { ToolbarButton } from "./ToolbarButton";
+import {
+  SubscriptIcon,
+  SuperscriptIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AlignRightIcon,
+  AlignJustifyIcon,
+  HorizontalRuleIcon,
+  ClearFormattingIcon,
+} from "./icons";
+import { SHORTCUTS } from "./shortcuts";
+
+export interface MoreDropdownProps {
+  editorRef: React.RefObject<RichEditorRef | null>;
+  state: EditorState;
+  disabled?: boolean;
+}
+
+interface MoreItem {
+  label: string;
+  command: EditorCommand;
+  payload?: any;
+  icon: React.FC;
+  isActive?: (state: EditorState) => boolean;
+}
+
+const INLINE_ITEMS: MoreItem[] = [
+  {
+    label: SHORTCUTS.subscript,
+    command: "subscript",
+    icon: SubscriptIcon,
+    isActive: (s) => s.isSubscript,
+  },
+  {
+    label: SHORTCUTS.superscript,
+    command: "superscript",
+    icon: SuperscriptIcon,
+    isActive: (s) => s.isSuperscript,
+  },
+];
+
+const ALIGN_ITEMS: MoreItem[] = [
+  {
+    label: SHORTCUTS.alignLeft,
+    command: "alignLeft",
+    icon: AlignLeftIcon,
+    isActive: (s) => s.textAlign === "left",
+  },
+  {
+    label: SHORTCUTS.alignCenter,
+    command: "alignCenter",
+    icon: AlignCenterIcon,
+    isActive: (s) => s.textAlign === "center",
+  },
+  {
+    label: SHORTCUTS.alignRight,
+    command: "alignRight",
+    icon: AlignRightIcon,
+    isActive: (s) => s.textAlign === "right",
+  },
+  {
+    label: SHORTCUTS.alignJustify,
+    command: "alignJustify",
+    icon: AlignJustifyIcon,
+    isActive: (s) => s.textAlign === "justify",
+  },
+];
+
+const BLOCK_ITEMS: MoreItem[] = [
+  {
+    label: SHORTCUTS.horizontalRule,
+    command: "horizontalRule",
+    icon: HorizontalRuleIcon,
+  },
+  {
+    label: SHORTCUTS.clearFormatting,
+    command: "clearFormatting",
+    icon: ClearFormattingIcon,
+  },
+];
+
+function MoreIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+      <circle cx="5" cy="12" r="2" />
+      <circle cx="12" cy="12" r="2" />
+      <circle cx="19" cy="12" r="2" />
+    </svg>
+  );
+}
+
+function preventFocusTheft(e: React.MouseEvent) {
+  e.preventDefault();
+}
+
+function ItemSection({
+  items,
+  state,
+  onSelect,
+}: {
+  items: MoreItem[];
+  state: EditorState;
+  onSelect: (command: EditorCommand, payload?: any) => void;
+}) {
+  return (
+    <>
+      {items.map((item) => {
+        const Icon = item.icon;
+        return (
+          <DropdownMenuItemFrame
+            key={item.command}
+            active={item.isActive?.(state)}
+            onMouseDown={preventFocusTheft}
+            onPress={() => onSelect(item.command, item.payload)}
+            aria-label={item.label}
+          >
+            <Icon />
+            <Text fontSize={13}>{item.label}</Text>
+          </DropdownMenuItemFrame>
+        );
+      })}
+    </>
+  );
+}
+
+export function MoreDropdown({ editorRef, state, disabled }: MoreDropdownProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (command: EditorCommand, payload?: any) => {
+    editorRef.current?.executeCommand(command, payload);
+    if (command === "horizontalRule" || command === "clearFormatting") {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-end">
+      <Popover.Trigger asChild>
+        <ToolbarButton
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="More formatting options"
+          tooltip="More"
+        >
+          <MoreIcon />
+        </ToolbarButton>
+      </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 }}
+      >
+        <YStack gap="$1" minWidth={200}>
+          <ItemSection items={INLINE_ITEMS} state={state} onSelect={handleSelect} />
+          <XStack paddingVertical="$1">
+            <ToolbarSeparatorFrame vertical={false} width="100%" height={1} marginHorizontal={0} />
+          </XStack>
+          <ItemSection items={ALIGN_ITEMS} state={state} onSelect={handleSelect} />
+          <XStack paddingVertical="$1">
+            <ToolbarSeparatorFrame vertical={false} width="100%" height={1} marginHorizontal={0} />
+          </XStack>
+          <ItemSection items={BLOCK_ITEMS} state={state} onSelect={handleSelect} />
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/toolbar/ResizeHandle.tsx

@@ -0,0 +1,80 @@
+/**
+ * Drag-to-resize handle for the editor container.
+ * Positioned at the bottom-right corner; dragging vertically adjusts editor height.
+ */
+
+import { useCallback, useRef } from "react";
+import { View } from "tamagui";
+
+export interface ResizeHandleProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  minHeight?: number;
+  maxHeight?: number;
+}
+
+function GripIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" opacity={0.4}>
+      <path d="M10 2L2 10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+      <path d="M10 6L6 10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+      <path d="M10 10L10 10" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    </svg>
+  );
+}
+
+export function ResizeHandle({ containerRef, minHeight = 150, maxHeight }: ResizeHandleProps) {
+  const startY = useRef(0);
+  const startHeight = useRef(0);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const el = containerRef.current;
+      if (!el) return;
+
+      startY.current = e.clientY;
+      startHeight.current = el.getBoundingClientRect().height;
+
+      const onMouseMove = (ev: MouseEvent) => {
+        const delta = ev.clientY - startY.current;
+        let newHeight = startHeight.current + delta;
+        if (newHeight < minHeight) newHeight = minHeight;
+        if (maxHeight && newHeight > maxHeight) newHeight = maxHeight;
+        el.style.height = `${newHeight}px`;
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+
+      document.body.style.cursor = "ns-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [containerRef, minHeight, maxHeight],
+  );
+
+  return (
+    <View
+      position="absolute"
+      bottom={0}
+      right={0}
+      width={16}
+      height={16}
+      cursor="ns-resize"
+      alignItems="center"
+      justifyContent="center"
+      opacity={0.6}
+      hoverStyle={{ opacity: 1 }}
+      onMouseDown={onMouseDown as any}
+      aria-label="Resize editor"
+      role="separator"
+    >
+      <GripIcon />
+    </View>
+  );
+}

package/src/toolbar/StatusBar.tsx

@@ -0,0 +1,76 @@
+/**
+ * Status bar footer showing word/character count and a rich-text / markdown toggle.
+ */
+
+import { XStack, Text } from "tamagui";
+import { RichEditorContext } from "../context";
+import type { EditorMode, EditorState } from "../types";
+
+export interface StatusBarProps {
+  state: EditorState;
+  mode: EditorMode;
+  onModeChange: (mode: EditorMode) => void;
+}
+
+function ModeButton({
+  label,
+  active,
+  onPress,
+}: {
+  label: string;
+  active: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Text
+      fontSize={11}
+      color={active ? "$color12" : "$color9"}
+      fontWeight={active ? "600" : "400"}
+      cursor="pointer"
+      onPress={onPress}
+      hoverStyle={{ color: "$color11" }}
+      userSelect="none"
+    >
+      {label}
+    </Text>
+  );
+}
+
+export function StatusBar({ state, mode, onModeChange }: StatusBarProps) {
+  const _ctx = RichEditorContext.useStyledContext();
+
+  return (
+    <XStack
+      borderTopWidth={1}
+      borderTopColor="$color5"
+      paddingHorizontal="$3"
+      paddingVertical="$1.5"
+      justifyContent="space-between"
+      alignItems="center"
+    >
+      <XStack gap="$1.5" alignItems="center">
+        <ModeButton
+          label="Rich text"
+          active={mode === "richtext"}
+          onPress={() => onModeChange("richtext")}
+        />
+        <Text fontSize={11} color="$color7">
+          |
+        </Text>
+        <ModeButton
+          label="Markdown"
+          active={mode === "markdown"}
+          onPress={() => onModeChange("markdown")}
+        />
+      </XStack>
+      <XStack gap="$3">
+        <Text fontSize={11} color="$color9">
+          {state.wordCount} {state.wordCount === 1 ? "word" : "words"}
+        </Text>
+        <Text fontSize={11} color="$color9">
+          {state.characterCount} {state.characterCount === 1 ? "character" : "characters"}
+        </Text>
+      </XStack>
+    </XStack>
+  );
+}

package/src/toolbar/TableBubble.tsx

@@ -0,0 +1,197 @@
+/**
+ * Bubble menu shown when cursor is inside a table.
+ * Provides row/column add/delete and table management actions.
+ */
+
+import { useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Popover, Text, XStack, YStack } from "tamagui";
+import { DropdownMenuItemFrame, ToolbarSeparatorFrame } from "../styled";
+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>
+  );
+}
+
+interface TableAction {
+  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() },
+];
+
+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() },
+];
+
+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() },
+];
+
+export interface TableBubbleProps {
+  editor: Editor | null;
+}
+
+export function TableBubble({ editor }: TableBubbleProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={({ editor: e }) => e.isActive("table")}
+      options={{ placement: "top" }}
+    >
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1"
+        gap="$1"
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        <ToolbarButton
+          onPress={() => editor.chain().focus().addRowAfter().run()}
+          aria-label="Add row"
+          tooltip="Add row below"
+        >
+          <RowPlusIcon />
+        </ToolbarButton>
+
+        <ToolbarButton
+          onPress={() => editor.chain().focus().addColumnAfter().run()}
+          aria-label="Add column"
+          tooltip="Add column after"
+        >
+          <Text fontSize={11} fontWeight="700">
+            +Col
+          </Text>
+        </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>
+          </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 }}
+          >
+            <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>
+              ))}
+              <XStack paddingVertical="$0.5">
+                <ToolbarSeparatorFrame
+                  vertical={false}
+                  width="100%"
+                  height={1}
+                  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>
+              ))}
+              <XStack paddingVertical="$0.5">
+                <ToolbarSeparatorFrame
+                  vertical={false}
+                  width="100%"
+                  height={1}
+                  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>
+              ))}
+            </YStack>
+          </Popover.Content>
+        </Popover>
+
+        <ToolbarButton
+          onPress={() => editor.chain().focus().deleteTable().run()}
+          aria-label="Delete table"
+          tooltip="Delete table"
+        >
+          <TrashIcon />
+        </ToolbarButton>
+      </XStack>
+    </BubbleMenu>
+  );
+}