@multiplatform.one/rich-text 6.0.0

package/src/toolbar/FixedToolbar.native.tsx

@@ -0,0 +1,381 @@
+/**
+ * Fixed toolbar for the rich text editor (native)
+ *
+ * Same interface as web version but uses NATIVE_SUPPORTED_COMMANDS to hide
+ * unsupported features entirely (not show disabled buttons).
+ * Uses React Native ScrollView horizontal instead of CSS-based scroll.
+ */
+
+import { useCallback } from "react";
+import { ScrollView, Text, XStack } from "tamagui";
+import type { EditorCommand, EditorState, RichEditorRef, ToolbarSection } from "../types";
+import { defaultEditorState } from "../types";
+import { NATIVE_SUPPORTED_COMMANDS } from "../constants";
+import { ToolbarFrame } from "../styled";
+import { ToolbarButton } from "./ToolbarButton";
+import { ToolbarGroup } from "./ToolbarGroup";
+import {
+  UndoIcon,
+  RedoIcon,
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AlignRightIcon,
+  AlignJustifyIcon,
+  BlockquoteIcon,
+  ClearFormattingIcon,
+  LinkIcon,
+  ImageIcon,
+  TextColorIcon,
+  HighlightIcon,
+} from "./icons";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface FixedToolbarProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state?: EditorState;
+  /** Toolbar sections to show (shows all when omitted) */
+  sections?: ToolbarSection[];
+  /** Whether the toolbar has an error state */
+  hasError?: boolean;
+}
+
+// ===========================================================================
+// Helpers
+// ===========================================================================
+
+function isSectionVisible(section: ToolbarSection, sections?: ToolbarSection[]): boolean {
+  if (!sections) return true;
+  return sections.includes(section);
+}
+
+/**
+ * Checks if a command is supported on native (10Tap).
+ * Unsupported commands are hidden entirely rather than shown disabled.
+ */
+function isNativeSupported(command: EditorCommand): boolean {
+  return NATIVE_SUPPORTED_COMMANDS[command] === true;
+}
+
+/**
+ * Checks if any command in a group is supported on native.
+ * If no commands in a section are supported, the entire section is hidden.
+ */
+function hasAnySupportedCommand(commands: EditorCommand[]): boolean {
+  return commands.some(isNativeSupported);
+}
+
+// ===========================================================================
+// FixedToolbar (Native)
+// ===========================================================================
+
+export function FixedToolbar({
+  editorRef,
+  state = defaultEditorState,
+  sections,
+  hasError,
+}: FixedToolbarProps) {
+  const executeCommand = useCallback(
+    (command: EditorCommand, payload?: any) => {
+      editorRef.current?.executeCommand(command, payload);
+    },
+    [editorRef],
+  );
+
+  const visible = (section: ToolbarSection) => isSectionVisible(section, sections);
+
+  // History commands: undo, redo
+  const historyVisible = visible("history") && hasAnySupportedCommand(["undo", "redo"]);
+
+  // Formatting commands (hide unsupported: subscript, superscript)
+  const formattingVisible =
+    visible("formatting") &&
+    hasAnySupportedCommand(["bold", "italic", "underline", "strike", "code"]);
+
+  // Color commands: textColor, highlight
+  const colorVisible = visible("color") && hasAnySupportedCommand(["textColor", "highlight"]);
+
+  // Heading commands
+  const headingVisible =
+    visible("heading") && hasAnySupportedCommand(["heading1", "heading2", "heading3", "paragraph"]);
+
+  // Alignment commands (not supported on native)
+  const alignmentVisible =
+    visible("alignment") &&
+    hasAnySupportedCommand(["alignLeft", "alignCenter", "alignRight", "alignJustify"]);
+
+  // List commands
+  const listVisible =
+    visible("list") && hasAnySupportedCommand(["bulletList", "orderedList", "taskList"]);
+
+  // Block commands (blockquote supported, codeBlock/horizontalRule not)
+  const blockVisible =
+    visible("block") && hasAnySupportedCommand(["blockquote", "codeBlock", "horizontalRule"]);
+
+  // Link
+  const linkVisible = visible("link") && isNativeSupported("link");
+
+  // Image
+  const imageVisible = visible("image") && isNativeSupported("image");
+
+  // Clear formatting (not supported on native)
+  const clearVisible = visible("clear") && isNativeSupported("clearFormatting");
+
+  return (
+    <ToolbarFrame hasError={hasError}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 8, gap: 2 }}
+      >
+        <XStack alignItems="center" gap={4}>
+          {/* History */}
+          <ToolbarGroup visible={historyVisible}>
+            {isNativeSupported("undo") && (
+              <ToolbarButton
+                disabled={!state.canUndo}
+                onPress={() => executeCommand("undo")}
+                aria-label="Undo"
+              >
+                <UndoIcon />
+              </ToolbarButton>
+            )}
+            {isNativeSupported("redo") && (
+              <ToolbarButton
+                disabled={!state.canRedo}
+                onPress={() => executeCommand("redo")}
+                aria-label="Redo"
+              >
+                <RedoIcon />
+              </ToolbarButton>
+            )}
+          </ToolbarGroup>
+
+          {/* Formatting (hide subscript, superscript on native) */}
+          <ToolbarGroup visible={formattingVisible}>
+            {isNativeSupported("bold") && (
+              <ToolbarButton
+                active={state.isBold}
+                onPress={() => executeCommand("bold")}
+                aria-label="Bold"
+              >
+                <BoldIcon>B</BoldIcon>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("italic") && (
+              <ToolbarButton
+                active={state.isItalic}
+                onPress={() => executeCommand("italic")}
+                aria-label="Italic"
+              >
+                <ItalicIcon>I</ItalicIcon>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("underline") && (
+              <ToolbarButton
+                active={state.isUnderline}
+                onPress={() => executeCommand("underline")}
+                aria-label="Underline"
+              >
+                <UnderlineIcon>U</UnderlineIcon>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("strike") && (
+              <ToolbarButton
+                active={state.isStrike}
+                onPress={() => executeCommand("strike")}
+                aria-label="Strikethrough"
+              >
+                <StrikeIcon>S</StrikeIcon>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("code") && (
+              <ToolbarButton
+                active={state.isCode}
+                onPress={() => executeCommand("code")}
+                aria-label="Code"
+              >
+                <Text>{"</>"}</Text>
+              </ToolbarButton>
+            )}
+            {/* subscript and superscript are NOT supported on native -- hidden entirely */}
+          </ToolbarGroup>
+
+          {/* Color */}
+          <ToolbarGroup visible={colorVisible}>
+            {isNativeSupported("textColor") && (
+              <ToolbarButton
+                active={!!state.textColor}
+                onPress={() => executeCommand("textColor")}
+                aria-label="Text Color"
+              >
+                <TextColorIcon color={state.textColor} />
+              </ToolbarButton>
+            )}
+            {isNativeSupported("highlight") && (
+              <ToolbarButton
+                active={!!state.highlightColor}
+                onPress={() => executeCommand("highlight")}
+                aria-label="Highlight Color"
+              >
+                <HighlightIcon color={state.highlightColor} />
+              </ToolbarButton>
+            )}
+          </ToolbarGroup>
+
+          {/* Heading */}
+          <ToolbarGroup visible={headingVisible}>
+            {isNativeSupported("heading1") && (
+              <ToolbarButton
+                active={state.isHeading1}
+                onPress={() => executeCommand("heading1")}
+                aria-label="Heading 1"
+              >
+                <Text fontWeight="700">H1</Text>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("heading2") && (
+              <ToolbarButton
+                active={state.isHeading2}
+                onPress={() => executeCommand("heading2")}
+                aria-label="Heading 2"
+              >
+                <Text fontWeight="600">H2</Text>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("heading3") && (
+              <ToolbarButton
+                active={state.isHeading3}
+                onPress={() => executeCommand("heading3")}
+                aria-label="Heading 3"
+              >
+                <Text fontWeight="600">H3</Text>
+              </ToolbarButton>
+            )}
+          </ToolbarGroup>
+
+          {/* Alignment (not supported on native -- entire group hidden) */}
+          <ToolbarGroup visible={alignmentVisible}>
+            {isNativeSupported("alignLeft") && (
+              <ToolbarButton
+                active={state.textAlign === "left"}
+                onPress={() => executeCommand("alignLeft")}
+                aria-label="Align Left"
+              >
+                <AlignLeftIcon />
+              </ToolbarButton>
+            )}
+            {isNativeSupported("alignCenter") && (
+              <ToolbarButton
+                active={state.textAlign === "center"}
+                onPress={() => executeCommand("alignCenter")}
+                aria-label="Align Center"
+              >
+                <AlignCenterIcon />
+              </ToolbarButton>
+            )}
+            {isNativeSupported("alignRight") && (
+              <ToolbarButton
+                active={state.textAlign === "right"}
+                onPress={() => executeCommand("alignRight")}
+                aria-label="Align Right"
+              >
+                <AlignRightIcon />
+              </ToolbarButton>
+            )}
+            {isNativeSupported("alignJustify") && (
+              <ToolbarButton
+                active={state.textAlign === "justify"}
+                onPress={() => executeCommand("alignJustify")}
+                aria-label="Justify"
+              >
+                <AlignJustifyIcon />
+              </ToolbarButton>
+            )}
+          </ToolbarGroup>
+
+          {/* List */}
+          <ToolbarGroup visible={listVisible}>
+            {isNativeSupported("bulletList") && (
+              <ToolbarButton
+                active={state.isBulletList}
+                onPress={() => executeCommand("bulletList")}
+                aria-label="Bullet List"
+              >
+                <Text>{"•"}</Text>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("orderedList") && (
+              <ToolbarButton
+                active={state.isOrderedList}
+                onPress={() => executeCommand("orderedList")}
+                aria-label="Ordered List"
+              >
+                <Text>{"1."}</Text>
+              </ToolbarButton>
+            )}
+            {isNativeSupported("taskList") && (
+              <ToolbarButton
+                active={state.isTaskList}
+                onPress={() => executeCommand("taskList")}
+                aria-label="Task List"
+              >
+                <Text>{"[ ]"}</Text>
+              </ToolbarButton>
+            )}
+          </ToolbarGroup>
+
+          {/* Block (only blockquote is supported on native) */}
+          <ToolbarGroup visible={blockVisible}>
+            {isNativeSupported("blockquote") && (
+              <ToolbarButton
+                active={state.isBlockquote}
+                onPress={() => executeCommand("blockquote")}
+                aria-label="Blockquote"
+              >
+                <BlockquoteIcon />
+              </ToolbarButton>
+            )}
+            {/* codeBlock and horizontalRule are NOT supported on native -- hidden entirely */}
+          </ToolbarGroup>
+
+          {/* Link */}
+          <ToolbarGroup visible={linkVisible}>
+            <ToolbarButton
+              active={state.isLink}
+              onPress={() => executeCommand("link")}
+              aria-label="Link"
+            >
+              <LinkIcon />
+            </ToolbarButton>
+          </ToolbarGroup>
+
+          {/* Image */}
+          <ToolbarGroup visible={imageVisible} showSeparator={!clearVisible}>
+            <ToolbarButton onPress={() => executeCommand("image")} aria-label="Insert Image">
+              <ImageIcon />
+            </ToolbarButton>
+          </ToolbarGroup>
+
+          {/* Clear formatting (not supported on native -- hidden entirely) */}
+          <ToolbarGroup visible={clearVisible} showSeparator={false}>
+            <ToolbarButton
+              onPress={() => executeCommand("clearFormatting")}
+              aria-label="Clear Formatting"
+            >
+              <ClearFormattingIcon />
+            </ToolbarButton>
+          </ToolbarGroup>
+        </XStack>
+      </ScrollView>
+    </ToolbarFrame>
+  );
+}

package/src/toolbar/FixedToolbar.tsx

@@ -0,0 +1,252 @@
+/**
+ * Fixed toolbar for the rich text editor (web)
+ *
+ * Primary groups (always visible):
+ *   History | Bold, Italic, Underline, Strike | Color | Heading | List | Blockquote, Code Block | Link, Image
+ *
+ * Overflow ("More" dropdown):
+ *   Subscript, Superscript | Alignment | Horizontal Rule, Clear Formatting
+ */
+
+import { useCallback, useEffect, useRef } from "react";
+import { XStack } from "tamagui";
+import type { EditorState, RichEditorRef, ToolbarSection } from "../types";
+import { defaultEditorState } from "../types";
+import { ToolbarFrame } from "../styled";
+import { ToolbarButton } from "./ToolbarButton";
+import { ToolbarGroup } from "./ToolbarGroup";
+import {
+  useHorizontalScroll,
+  useHorizontalScrollArrows,
+  HorizontalScrollArrow,
+} from "./useHorizontalScroll";
+import {
+  UndoIcon,
+  RedoIcon,
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  BlockquoteIcon,
+  CodeBlockIcon,
+} from "./icons";
+import { TextColorPicker, HighlightColorPicker } from "./ColorPicker";
+import { HeadingPicker } from "./HeadingPicker";
+import { ListPicker } from "./ListPicker";
+import { LinkDialog } from "./LinkDialog";
+import { ImageDialog } from "./ImageDialog";
+import { MoreDropdown } from "./MoreDropdown";
+import { SHORTCUTS } from "./shortcuts";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface FixedToolbarProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state?: EditorState;
+  /** Toolbar sections to show (shows all when omitted) */
+  sections?: ToolbarSection[];
+  /** Whether the toolbar has an error state */
+  hasError?: boolean;
+}
+
+// ===========================================================================
+// Helpers
+// ===========================================================================
+
+function isSectionVisible(section: ToolbarSection, sections?: ToolbarSection[]): boolean {
+  if (!sections) return true;
+  return sections.includes(section);
+}
+
+// ===========================================================================
+// FixedToolbar
+// ===========================================================================
+
+export function FixedToolbar({
+  editorRef,
+  state = defaultEditorState,
+  sections,
+  hasError,
+}: FixedToolbarProps) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const { arrowLeft, arrowRight, arrowScrollDirRef, updateArrows } = useHorizontalScrollArrows();
+
+  useHorizontalScroll(scrollerRef);
+
+  useEffect(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+
+    const handleUpdate = () => updateArrows(el);
+    handleUpdate();
+
+    el.addEventListener("scroll", handleUpdate, { passive: true });
+    const resizeObserver = new ResizeObserver(handleUpdate);
+    resizeObserver.observe(el);
+
+    return () => {
+      el.removeEventListener("scroll", handleUpdate);
+      resizeObserver.disconnect();
+    };
+  }, [updateArrows]);
+
+  const executeCommand = useCallback(
+    (command: string, payload?: any) => {
+      editorRef.current?.executeCommand(command as any, payload);
+    },
+    [editorRef],
+  );
+
+  const visible = (section: ToolbarSection) => isSectionVisible(section, sections);
+
+  return (
+    <ToolbarFrame hasError={hasError}>
+      <style>
+        {`
+          .toolbar-scroller {
+            flex: 1;
+            overflow-x: auto;
+            overflow-y: hidden;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+          .toolbar-scroller::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+      </style>
+      <HorizontalScrollArrow
+        direction="left"
+        scrollRef={scrollerRef}
+        visible={arrowLeft}
+        arrowScrollDirRef={arrowScrollDirRef}
+      />
+      <div ref={scrollerRef} className="toolbar-scroller">
+        <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+          {/* History */}
+          <ToolbarGroup visible={visible("history")}>
+            <ToolbarButton
+              disabled={!state.canUndo}
+              onPress={() => executeCommand("undo")}
+              aria-label="Undo"
+              tooltip={SHORTCUTS.undo}
+            >
+              <UndoIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              disabled={!state.canRedo}
+              onPress={() => executeCommand("redo")}
+              aria-label="Redo"
+              tooltip={SHORTCUTS.redo}
+            >
+              <RedoIcon />
+            </ToolbarButton>
+          </ToolbarGroup>
+
+          {/* Formatting */}
+          <ToolbarGroup visible={visible("formatting")}>
+            <ToolbarButton
+              active={state.isBold}
+              onPress={() => executeCommand("bold")}
+              aria-label="Bold"
+              tooltip={SHORTCUTS.bold}
+            >
+              <BoldIcon>B</BoldIcon>
+            </ToolbarButton>
+            <ToolbarButton
+              active={state.isItalic}
+              onPress={() => executeCommand("italic")}
+              aria-label="Italic"
+              tooltip={SHORTCUTS.italic}
+            >
+              <ItalicIcon>I</ItalicIcon>
+            </ToolbarButton>
+            <ToolbarButton
+              active={state.isUnderline}
+              onPress={() => executeCommand("underline")}
+              aria-label="Underline"
+              tooltip={SHORTCUTS.underline}
+            >
+              <UnderlineIcon>U</UnderlineIcon>
+            </ToolbarButton>
+            <ToolbarButton
+              active={state.isStrike}
+              onPress={() => executeCommand("strike")}
+              aria-label="Strikethrough"
+              tooltip={SHORTCUTS.strike}
+            >
+              <StrikeIcon>S</StrikeIcon>
+            </ToolbarButton>
+          </ToolbarGroup>
+
+          {/* Color */}
+          <ToolbarGroup visible={visible("color")}>
+            <TextColorPicker editorRef={editorRef} state={state} />
+            <HighlightColorPicker editorRef={editorRef} state={state} />
+          </ToolbarGroup>
+
+          {/* Heading */}
+          <ToolbarGroup visible={visible("heading")}>
+            <HeadingPicker editorRef={editorRef} state={state} />
+          </ToolbarGroup>
+
+          {/* List */}
+          <ToolbarGroup visible={visible("list")}>
+            <ListPicker editorRef={editorRef} state={state} />
+          </ToolbarGroup>
+
+          {/* Block */}
+          <ToolbarGroup visible={visible("block")}>
+            <ToolbarButton
+              active={state.isBlockquote}
+              onPress={() => executeCommand("blockquote")}
+              aria-label="Blockquote"
+              tooltip={SHORTCUTS.blockquote}
+            >
+              <BlockquoteIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              active={state.isCodeBlock}
+              onPress={() => executeCommand("codeBlock")}
+              aria-label="Code Block"
+              tooltip={SHORTCUTS.codeBlock}
+            >
+              <CodeBlockIcon />
+            </ToolbarButton>
+          </ToolbarGroup>
+
+          {/* Link */}
+          <ToolbarGroup visible={visible("link")}>
+            <LinkDialog editorRef={editorRef} state={state} />
+          </ToolbarGroup>
+
+          {/* Image */}
+          <ToolbarGroup visible={visible("image")}>
+            <ImageDialog editorRef={editorRef} />
+          </ToolbarGroup>
+
+          {/* More (overflow): sub/superscript, alignment, hr, clear */}
+          <ToolbarGroup
+            visible={
+              !sections ||
+              sections.some((s) => ["formatting", "alignment", "clear", "block"].includes(s))
+            }
+            showSeparator={false}
+          >
+            <MoreDropdown editorRef={editorRef} state={state} />
+          </ToolbarGroup>
+        </XStack>
+      </div>
+      <HorizontalScrollArrow
+        direction="right"
+        scrollRef={scrollerRef}
+        visible={arrowRight}
+        arrowScrollDirRef={arrowScrollDirRef}
+      />
+    </ToolbarFrame>
+  );
+}