@multiplatform.one/rich-text 6.0.0

package/src/styled.ts

@@ -0,0 +1,177 @@
+/**
+ * Shared styled components for the rich text editor
+ */
+
+import { Separator, View, XStack, styled } from "tamagui";
+import { RichEditorContext } from "./context";
+
+// ===========================================================================
+// EditorFrame
+// ===========================================================================
+
+export const EditorFrame = styled(View, {
+  name: "EditorFrame",
+  context: RichEditorContext,
+  borderWidth: 1,
+  borderColor: "$color7",
+  backgroundColor: "$color2",
+  overflow: "hidden",
+
+  variants: {
+    hasError: {
+      true: {
+        borderColor: "$red10",
+      },
+    },
+    size: {
+      "...size": (_val, { tokens: _tokens }) => {
+        return {};
+      },
+    },
+    compact: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none",
+      },
+    },
+  } as const,
+});
+
+// ===========================================================================
+// ToolbarFrame
+// ===========================================================================
+
+export const ToolbarFrame = styled(XStack, {
+  name: "ToolbarFrame",
+  context: RichEditorContext,
+  backgroundColor: "$color3",
+  borderBottomWidth: 1,
+  borderBottomColor: "$color6",
+  paddingVertical: "$1",
+  position: "relative",
+
+  variants: {
+    hasError: {
+      true: {
+        borderBottomColor: "$red10",
+      },
+    },
+    size: {
+      "...size": () => ({}),
+    },
+    compact: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+  } as const,
+});
+
+// ===========================================================================
+// ToolbarGroupFrame
+// ===========================================================================
+
+export const ToolbarGroupFrame = styled(XStack, {
+  name: "ToolbarGroupFrame",
+  context: RichEditorContext,
+  alignItems: "center",
+  gap: 2,
+
+  variants: {
+    size: {
+      "...size": () => ({}),
+    },
+    compact: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+  } as const,
+});
+
+// ===========================================================================
+// ToolbarSeparatorFrame
+// ===========================================================================
+
+export const ToolbarSeparatorFrame = styled(Separator, {
+  name: "ToolbarSeparatorFrame",
+  context: RichEditorContext,
+  vertical: true,
+  backgroundColor: "$color6",
+  width: 1,
+  height: 16,
+  marginHorizontal: "$2",
+
+  variants: {
+    size: {
+      "...size": () => ({}),
+    },
+    compact: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+  } as const,
+});
+
+// ===========================================================================
+// DropdownMenuItemFrame
+// ===========================================================================
+
+export const DropdownMenuItemFrame = styled(XStack, {
+  name: "DropdownMenuItemFrame",
+  context: RichEditorContext,
+  paddingHorizontal: "$3",
+  paddingVertical: "$2",
+  gap: "$2",
+  alignItems: "center",
+  cursor: "pointer",
+  borderRadius: "$2",
+
+  hoverStyle: {
+    backgroundColor: "$color4",
+  },
+
+  pressStyle: {
+    backgroundColor: "$color5",
+  },
+
+  focusVisibleStyle: {
+    backgroundColor: "$color4",
+    outlineColor: "$color8",
+    outlineStyle: "solid",
+    outlineWidth: 2,
+  },
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color4",
+      },
+    },
+    size: {
+      "...size": () => ({}),
+    },
+    compact: {
+      true: {},
+      false: {},
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+  } as const,
+});

package/src/toolbar/BubbleToolbar.tsx

@@ -0,0 +1,151 @@
+/**
+ * Bubble toolbar for the rich text editor (web only)
+ *
+ * Uses Tiptap 3's BubbleMenu to show inline formatting controls
+ * when text is selected. Contains only inline formatting:
+ * Bold, Italic, Underline, Strike, Code, Subscript, Superscript,
+ * Text Color, Highlight, Link.
+ *
+ * No headings, lists, alignment -- those stay in the fixed toolbar.
+ * No native equivalent (10Tap does not support floating menus).
+ */
+
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { XStack } from "tamagui";
+import type { EditorState, RichEditorRef } from "../types";
+import { defaultEditorState } from "../types";
+import { ToolbarButton } from "./ToolbarButton";
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeIcon,
+  SubscriptIcon,
+  SuperscriptIcon,
+} from "./icons";
+import { TextColorPicker, HighlightColorPicker } from "./ColorPicker";
+import { LinkDialog } from "./LinkDialog";
+import { SHORTCUTS } from "./shortcuts";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface BubbleToolbarProps {
+  /** Direct Tiptap editor instance (not through ref) */
+  editor: Editor | null;
+  /** Reference to the editor for executeCommand */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state?: EditorState;
+}
+
+// ===========================================================================
+// BubbleToolbar
+// ===========================================================================
+
+export function BubbleToolbar({
+  editor,
+  editorRef,
+  state = defaultEditorState,
+}: BubbleToolbarProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={({ editor: e, from, to }) => {
+        if (from === to) return false;
+        if (e.isActive("codeBlock")) return false;
+        if (e.isActive("image")) return false;
+        return true;
+      }}
+    >
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1"
+        gap={2}
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        {/* Inline formatting only */}
+        <ToolbarButton
+          active={state.isBold}
+          onPress={() => editorRef.current?.executeCommand("bold")}
+          aria-label="Bold"
+          tooltip={SHORTCUTS.bold}
+        >
+          <BoldIcon>B</BoldIcon>
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isItalic}
+          onPress={() => editorRef.current?.executeCommand("italic")}
+          aria-label="Italic"
+          tooltip={SHORTCUTS.italic}
+        >
+          <ItalicIcon>I</ItalicIcon>
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isUnderline}
+          onPress={() => editorRef.current?.executeCommand("underline")}
+          aria-label="Underline"
+          tooltip={SHORTCUTS.underline}
+        >
+          <UnderlineIcon>U</UnderlineIcon>
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isStrike}
+          onPress={() => editorRef.current?.executeCommand("strike")}
+          aria-label="Strikethrough"
+          tooltip={SHORTCUTS.strike}
+        >
+          <StrikeIcon>S</StrikeIcon>
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isCode}
+          onPress={() => editorRef.current?.executeCommand("code")}
+          aria-label="Code"
+          tooltip={SHORTCUTS.code}
+        >
+          {"</>"}
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isSubscript}
+          onPress={() => editorRef.current?.executeCommand("subscript")}
+          aria-label="Subscript"
+          tooltip={SHORTCUTS.subscript}
+        >
+          <SubscriptIcon />
+        </ToolbarButton>
+
+        <ToolbarButton
+          active={state.isSuperscript}
+          onPress={() => editorRef.current?.executeCommand("superscript")}
+          aria-label="Superscript"
+          tooltip={SHORTCUTS.superscript}
+        >
+          <SuperscriptIcon />
+        </ToolbarButton>
+
+        {/* Color pickers */}
+        <TextColorPicker editorRef={editorRef} state={state} />
+        <HighlightColorPicker editorRef={editorRef} state={state} />
+
+        {/* Link */}
+        <LinkDialog editorRef={editorRef} state={state} />
+      </XStack>
+    </BubbleMenu>
+  );
+}

package/src/toolbar/CodeBlockBubble.tsx

@@ -0,0 +1,141 @@
+/**
+ * Bubble menu shown when cursor is inside a code block.
+ * Provides language selection and remove/convert actions.
+ */
+
+import { useCallback, 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 } from "../styled";
+import { ToolbarButton, ToolbarDropdownButton } from "./ToolbarButton";
+
+const LANGUAGES = [
+  { value: null, label: "Plain text" },
+  { value: "bash", label: "Bash" },
+  { value: "c", label: "C" },
+  { value: "cpp", label: "C++" },
+  { value: "csharp", label: "C#" },
+  { value: "css", label: "CSS" },
+  { value: "go", label: "Go" },
+  { value: "graphql", label: "GraphQL" },
+  { value: "java", label: "Java" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "json", label: "JSON" },
+  { value: "kotlin", label: "Kotlin" },
+  { value: "markdown", label: "Markdown" },
+  { value: "php", label: "PHP" },
+  { value: "python", label: "Python" },
+  { value: "ruby", label: "Ruby" },
+  { value: "rust", label: "Rust" },
+  { value: "scss", label: "SCSS" },
+  { value: "sql", label: "SQL" },
+  { value: "swift", label: "Swift" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "xml", label: "XML / HTML" },
+  { value: "yaml", label: "YAML" },
+] as const;
+
+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>
+  );
+}
+
+export interface CodeBlockBubbleProps {
+  editor: Editor | null;
+}
+
+export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [langOpen, setLangOpen] = useState(false);
+
+  const currentLang = editor?.getAttributes("codeBlock")?.language ?? null;
+  const currentLabel =
+    LANGUAGES.find((l) => l.value === currentLang)?.label ?? currentLang ?? "Plain text";
+
+  const setLanguage = useCallback(
+    (lang: string | null) => {
+      if (!editor) return;
+      editor.chain().focus().updateAttributes("codeBlock", { language: lang }).run();
+      setLangOpen(false);
+    },
+    [editor],
+  );
+
+  const removeCodeBlock = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().toggleCodeBlock().run();
+  }, [editor]);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={({ editor: e }) => e.isActive("codeBlock")}
+      options={{ placement: "top-start" }}
+    >
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1"
+        gap="$1"
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        <Popover open={langOpen} onOpenChange={setLangOpen} placement="bottom-start">
+          <Popover.Trigger asChild>
+            <ToolbarDropdownButton onPress={() => setLangOpen(true)} aria-label="Select language">
+              <Text fontSize={12}>{currentLabel}</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={160} maxHeight={280} overflow="scroll">
+              {LANGUAGES.map((lang) => (
+                <DropdownMenuItemFrame
+                  key={lang.label}
+                  active={currentLang === lang.value}
+                  onPress={() => setLanguage(lang.value)}
+                  aria-label={lang.label}
+                >
+                  <Text fontSize={13}>{lang.label}</Text>
+                </DropdownMenuItemFrame>
+              ))}
+            </YStack>
+          </Popover.Content>
+        </Popover>
+
+        <ToolbarButton
+          onPress={removeCodeBlock}
+          aria-label="Remove code block"
+          tooltip="Remove code block"
+        >
+          <TrashIcon />
+        </ToolbarButton>
+      </XStack>
+    </BubbleMenu>
+  );
+}

package/src/toolbar/ColorPicker.tsx

@@ -0,0 +1,211 @@
+/**
+ * Color picker popover for text color and highlight color
+ */
+
+import { useCallback, useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Popover, Text, View, XStack, YStack } from "tamagui";
+import type { EditorState, RichEditorRef } from "../types";
+import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants";
+import type { ColorEntry } from "../constants";
+import { ToolbarButton } from "./ToolbarButton";
+import { TextColorIcon, HighlightIcon } from "./icons";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ColorPickerProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state: EditorState;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+}
+
+// ===========================================================================
+// ColorSwatch
+// ===========================================================================
+
+function ColorSwatch({
+  color,
+  isSelected,
+  onPress,
+  isNone,
+}: {
+  color: string | null;
+  isSelected: boolean;
+  onPress: () => void;
+  isNone?: boolean;
+}) {
+  return (
+    <View
+      width={24}
+      height={24}
+      borderRadius={4}
+      backgroundColor={color || "$background"}
+      borderWidth={isSelected ? 2 : 1}
+      borderColor={isSelected ? "$blue10" : "$color6"}
+      cursor="pointer"
+      hoverStyle={{ opacity: 0.8 }}
+      pressStyle={{ scale: 0.95 }}
+      onPress={onPress}
+      alignItems="center"
+      justifyContent="center"
+      aria-label={isNone ? "Remove color" : `Color ${color}`}
+    >
+      {isNone && (
+        <View
+          position="absolute"
+          width={20}
+          height={2}
+          backgroundColor="$red10"
+          transform={[{ rotate: "45deg" }]}
+        />
+      )}
+    </View>
+  );
+}
+
+// ===========================================================================
+// ColorGrid
+// ===========================================================================
+
+function ColorGrid({
+  title,
+  colors,
+  selectedColor,
+  onSelect,
+  maxWidth,
+}: {
+  title: string;
+  colors: ColorEntry[];
+  selectedColor: string | null;
+  onSelect: (color: string | null) => void;
+  maxWidth: number;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <YStack {...knobProps.gap}>
+      <Text fontSize={knobProps.sizeToken} fontWeight="600">
+        {title}
+      </Text>
+      <XStack flexWrap="wrap" gap="$1" maxWidth={maxWidth}>
+        {colors.map((c) => (
+          <ColorSwatch
+            key={c.name}
+            color={c.value}
+            isSelected={selectedColor === c.value}
+            isNone={c.value === null}
+            onPress={() => onSelect(c.value)}
+          />
+        ))}
+      </XStack>
+    </YStack>
+  );
+}
+
+// ===========================================================================
+// TextColorPicker
+// ===========================================================================
+
+export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = useCallback(
+    (color: string | null) => {
+      editorRef.current?.executeCommand("textColor", { color });
+      setOpen(false);
+    },
+    [editorRef],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+      <Popover.Trigger asChild>
+        <ToolbarButton
+          active={!!state.textColor}
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Text Color"
+          tooltip="Text Color"
+        >
+          <TextColorIcon color={state.textColor} />
+        </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 }}
+      >
+        <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
+        <ColorGrid
+          title="Text Color"
+          colors={TEXT_COLORS}
+          selectedColor={state.textColor}
+          onSelect={handleSelect}
+          maxWidth={160}
+        />
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+// ===========================================================================
+// HighlightColorPicker
+// ===========================================================================
+
+export function HighlightColorPicker({ editorRef, state, disabled }: ColorPickerProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = useCallback(
+    (color: string | null) => {
+      editorRef.current?.executeCommand("highlight", { color });
+      setOpen(false);
+    },
+    [editorRef],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+      <Popover.Trigger asChild>
+        <ToolbarButton
+          active={!!state.highlightColor}
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Highlight Color"
+          tooltip="Highlight"
+        >
+          <HighlightIcon color={state.highlightColor} />
+        </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 }}
+      >
+        <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
+        <ColorGrid
+          title="Highlight"
+          colors={HIGHLIGHT_COLORS}
+          selectedColor={state.highlightColor}
+          onSelect={handleSelect}
+          maxWidth={130}
+        />
+      </Popover.Content>
+    </Popover>
+  );
+}