@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/toolbar/BubbleToolbar.tsx

@@ -14,11 +14,13 @@ 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 type { EditorCapabilities, EditorState, RichEditorRef } from "../types";
 import { defaultEditorState } from "../types";
+import { isCommandInCapabilities } from "../editor/capabilities";
 import { ToolbarButton } from "./ToolbarButton";
 import {
   BoldIcon,
+  InlineCodeIcon,
   ItalicIcon,
   UnderlineIcon,
   StrikeIcon,
@@ -28,6 +30,7 @@ import {
 import { TextColorPicker, HighlightColorPicker } from "./ColorPicker";
 import { LinkDialog } from "./LinkDialog";
 import { SHORTCUTS } from "./shortcuts";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -40,6 +43,8 @@ export interface BubbleToolbarProps {
   editorRef: React.RefObject<RichEditorRef | null>;
   /** Current editor state */
   state?: EditorState;
+  /** Capability surface — markdown hides non-markdown controls (default "full") */
+  capabilities?: EditorCapabilities;
 }
 
 // ===========================================================================
@@ -50,14 +55,18 @@ export function BubbleToolbar({
   editor,
   editorRef,
   state = defaultEditorState,
+  capabilities = "full",
 }: BubbleToolbarProps) {
   const { knobProps } = useResolvedKnobs();
+  const has = (command: Parameters<typeof isCommandInCapabilities>[0]) =>
+    isCommandInCapabilities(command, capabilities);
 
   if (!editor) return null;
 
   return (
     <BubbleMenu
       editor={editor}
+      className="rt-bubble-menu"
       shouldShow={({ editor: e, from, to }) => {
         if (from === to) return false;
         if (e.isActive("codeBlock")) return false;
@@ -79,7 +88,7 @@ export function BubbleToolbar({
         <ToolbarButton
           active={state.isBold}
           onPress={() => editorRef.current?.executeCommand("bold")}
-          aria-label="Bold"
+          aria-label={t("Bold")}
           tooltip={SHORTCUTS.bold}
         >
           <BoldIcon>B</BoldIcon>
@@ -88,25 +97,27 @@ export function BubbleToolbar({
         <ToolbarButton
           active={state.isItalic}
           onPress={() => editorRef.current?.executeCommand("italic")}
-          aria-label="Italic"
+          aria-label={t("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>
+        {has("underline") && (
+          <ToolbarButton
+            active={state.isUnderline}
+            onPress={() => editorRef.current?.executeCommand("underline")}
+            aria-label={t("Underline")}
+            tooltip={SHORTCUTS.underline}
+          >
+            <UnderlineIcon>U</UnderlineIcon>
+          </ToolbarButton>
+        )}
 
         <ToolbarButton
           active={state.isStrike}
           onPress={() => editorRef.current?.executeCommand("strike")}
-          aria-label="Strikethrough"
+          aria-label={t("Strikethrough")}
           tooltip={SHORTCUTS.strike}
         >
           <StrikeIcon>S</StrikeIcon>
@@ -115,33 +126,37 @@ export function BubbleToolbar({
         <ToolbarButton
           active={state.isCode}
           onPress={() => editorRef.current?.executeCommand("code")}
-          aria-label="Code"
+          aria-label={t("Code")}
           tooltip={SHORTCUTS.code}
         >
-          {"</>"}
+          <InlineCodeIcon />
         </ToolbarButton>
 
-        <ToolbarButton
-          active={state.isSubscript}
-          onPress={() => editorRef.current?.executeCommand("subscript")}
-          aria-label="Subscript"
-          tooltip={SHORTCUTS.subscript}
-        >
-          <SubscriptIcon />
-        </ToolbarButton>
+        {has("subscript") && (
+          <ToolbarButton
+            active={state.isSubscript}
+            onPress={() => editorRef.current?.executeCommand("subscript")}
+            aria-label={t("Subscript")}
+            tooltip={SHORTCUTS.subscript}
+          >
+            <SubscriptIcon />
+          </ToolbarButton>
+        )}
 
-        <ToolbarButton
-          active={state.isSuperscript}
-          onPress={() => editorRef.current?.executeCommand("superscript")}
-          aria-label="Superscript"
-          tooltip={SHORTCUTS.superscript}
-        >
-          <SuperscriptIcon />
-        </ToolbarButton>
+        {has("superscript") && (
+          <ToolbarButton
+            active={state.isSuperscript}
+            onPress={() => editorRef.current?.executeCommand("superscript")}
+            aria-label={t("Superscript")}
+            tooltip={SHORTCUTS.superscript}
+          >
+            <SuperscriptIcon />
+          </ToolbarButton>
+        )}
 
-        {/* Color pickers */}
-        <TextColorPicker editorRef={editorRef} state={state} />
-        <HighlightColorPicker editorRef={editorRef} state={state} />
+        {/* Color pickers — no markdown syntax (LC-52) */}
+        {has("textColor") && <TextColorPicker editorRef={editorRef} state={state} />}
+        {has("highlight") && <HighlightColorPicker editorRef={editorRef} state={state} />}
 
         {/* Link */}
         <LinkDialog editorRef={editorRef} state={state} />

package/src/toolbar/CodeBlockBubble.tsx

@@ -1,15 +1,18 @@
 /**
  * Bubble menu shown when cursor is inside a code block.
- * Provides language selection and remove/convert actions.
+ * Provides language selection, copy-to-clipboard, and remove actions.
  */
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { CheckIcon, CopyIcon, TrashIcon } from "@phosphor-icons/react";
 import { Popover, Text, XStack, YStack } from "tamagui";
 import { DropdownMenuItemFrame } from "../styled";
+import { getBlockVirtualElement } from "../editor/blockAnchor";
 import { ToolbarButton, ToolbarDropdownButton } from "./ToolbarButton";
+import { t } from "../shared/t";
 
 const LANGUAGES = [
   { value: null, label: "Plain text" },
@@ -25,6 +28,8 @@ const LANGUAGES = [
   { value: "json", label: "JSON" },
   { value: "kotlin", label: "Kotlin" },
   { value: "markdown", label: "Markdown" },
+  { value: "math", label: "Math (TeX)" },
+  { value: "mermaid", label: "Mermaid" },
   { value: "php", label: "PHP" },
   { value: "python", label: "Python" },
   { value: "ruby", label: "Ruby" },
@@ -37,33 +42,36 @@ const LANGUAGES = [
   { 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;
 }
 
+/** Reads the text of the code block the selection sits in */
+function getActiveCodeBlockText(editor: Editor): string {
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth >= 0; depth--) {
+    const node = $from.node(depth);
+    if (node.type.name === "codeBlock") return node.textContent;
+  }
+  return "";
+}
+
 export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
   const { knobProps } = useResolvedKnobs();
   const [langOpen, setLangOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+    },
+    [],
+  );
 
   const currentLang = editor?.getAttributes("codeBlock")?.language ?? null;
-  const currentLabel =
-    LANGUAGES.find((l) => l.value === currentLang)?.label ?? currentLang ?? "Plain text";
+  const rawLabel = LANGUAGES.find((l) => l.value === currentLang)?.label ?? currentLang;
+  const currentLabel = currentLang === null ? t("Plain text") : (rawLabel ?? t("Plain text"));
 
   const setLanguage = useCallback(
     (lang: string | null) => {
@@ -74,6 +82,18 @@ export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
     [editor],
   );
 
+  const copyCode = useCallback(async () => {
+    if (!editor) return;
+    try {
+      await navigator.clipboard.writeText(getActiveCodeBlockText(editor));
+      setCopied(true);
+      if (copiedTimer.current) clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.warn("[rich-text] copy failed:", err);
+    }
+  }, [editor]);
+
   const removeCodeBlock = useCallback(() => {
     if (!editor) return;
     editor.chain().focus().toggleCodeBlock().run();
@@ -84,8 +104,13 @@ export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
   return (
     <BubbleMenu
       editor={editor}
+      className="rt-bubble-menu"
       shouldShow={({ editor: e }) => e.isActive("codeBlock")}
-      options={{ placement: "top-start" }}
+      // Anchor to the <pre> rect (not the caret) so the bubble sits above
+      // the block instead of covering its first line, and does not chase
+      // the caret while typing.
+      getReferencedVirtualElement={() => getBlockVirtualElement(editor, "codeBlock")}
+      options={{ placement: "top-start", offset: 6 }}
     >
       <XStack
         backgroundColor="$background"
@@ -99,12 +124,17 @@ export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
       >
         <Popover open={langOpen} onOpenChange={setLangOpen} placement="bottom-start">
           <Popover.Trigger asChild>
-            <ToolbarDropdownButton onPress={() => setLangOpen(true)} aria-label="Select language">
+            <ToolbarDropdownButton
+              onPress={() => setLangOpen(true)}
+              aria-label={t("Select language")}
+            >
               <Text fontSize={12}>{currentLabel}</Text>
             </ToolbarDropdownButton>
           </Popover.Trigger>
           <Popover.Content
-            {...knobProps.panelPadding}
+            // SP-EDGE: container owns only its border — items own all padding.
+            padding={0}
+            overflow="hidden"
             backgroundColor="$background"
             borderWidth={1}
             borderColor="$borderColor"
@@ -119,21 +149,29 @@ export function CodeBlockBubble({ editor }: CodeBlockBubbleProps) {
                   key={lang.label}
                   active={currentLang === lang.value}
                   onPress={() => setLanguage(lang.value)}
-                  aria-label={lang.label}
+                  aria-label={lang.value === null ? t("Plain text") : lang.label}
                 >
-                  <Text fontSize={13}>{lang.label}</Text>
+                  <Text fontSize={13}>{lang.value === null ? t("Plain text") : lang.label}</Text>
                 </DropdownMenuItemFrame>
               ))}
             </YStack>
           </Popover.Content>
         </Popover>
 
+        <ToolbarButton
+          onPress={copyCode}
+          aria-label={copied ? t("Copied") : t("Copy code")}
+          tooltip={copied ? t("Copied") : t("Copy code")}
+        >
+          {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+        </ToolbarButton>
+
         <ToolbarButton
           onPress={removeCodeBlock}
-          aria-label="Remove code block"
-          tooltip="Remove code block"
+          aria-label={t("Remove code block")}
+          tooltip={t("Remove code block")}
         >
-          <TrashIcon />
+          <TrashIcon size={14} />
         </ToolbarButton>
       </XStack>
     </BubbleMenu>

package/src/toolbar/ColorPicker.native.tsx

@@ -0,0 +1,126 @@
+/**
+ * Color picker for text color and highlight (native)
+ *
+ * Must NOT use a second RN Modal / FloatingPanel here: the fullscreen editor
+ * is already a Modal, and nesting another Modal on iOS dismisses the parent
+ * (SB-N-ios-25 wipe looked like "Text Color cleared the doc" because Cancel
+ * via onRequestClose ran). ActionSheetIOS / Android Alert stay in-process.
+ */
+
+import { useCallback, useMemo } from "react";
+import { ActionSheetIOS, Alert, Platform } from "react-native";
+import { useTheme, useThemeName } from "tamagui";
+import type { EditorState, RichEditorRef } from "../types";
+import { TEXT_COLOR_TOKENS, TEXT_COLOR_TOKENS_DARK, HIGHLIGHT_COLOR_TOKENS } from "../constants";
+import type { ColorEntry, ColorTokenEntry } from "../constants";
+import { ToolbarButton } from "./ToolbarButton";
+import { TextColorIcon, HighlightIcon } from "./icons";
+import { t } from "../shared/t";
+
+/**
+ * Resolves palette theme tokens to concrete color values via the active
+ * theme (Axiom 5 ONE SOURCE): RN and the 10Tap webview cannot resolve CSS
+ * custom properties, so the native picker applies resolved values.
+ */
+function useResolvedPalette(entries: ColorTokenEntry[]): ColorEntry[] {
+  const theme = useTheme();
+  return useMemo(
+    () =>
+      entries.map(({ name, token }) => ({
+        name,
+        value: token ? ((theme as any)[token]?.val ?? null) : null,
+      })),
+    [entries, theme],
+  );
+}
+
+// ===========================================================================
+// 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;
+}
+
+function pickColor(title: string, colors: ColorEntry[], onSelect: (color: string | null) => void) {
+  const labels = colors.map((c) => t(c.name));
+  if (Platform.OS === "ios") {
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        title,
+        options: [...labels, t("Cancel")],
+        cancelButtonIndex: labels.length,
+      },
+      (index) => {
+        if (typeof index !== "number" || index >= labels.length) return;
+        onSelect(colors[index]?.value ?? null);
+      },
+    );
+    return;
+  }
+  Alert.alert(title, undefined, [
+    ...colors.map((c) => ({
+      text: t(c.name),
+      onPress: () => onSelect(c.value),
+    })),
+    { text: t("Cancel"), style: "cancel" as const },
+  ]);
+}
+
+// ===========================================================================
+// TextColorPicker
+// ===========================================================================
+
+export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps) {
+  const themeName = useThemeName();
+  // Same tokens both schemes; only the neutral ink's honest label flips
+  const textColors = useResolvedPalette(
+    String(themeName).startsWith("dark") ? TEXT_COLOR_TOKENS_DARK : TEXT_COLOR_TOKENS,
+  );
+
+  const handlePress = useCallback(() => {
+    pickColor(t("Text Color"), textColors, (color) => {
+      editorRef.current?.executeCommand("textColor", { color });
+    });
+  }, [editorRef, textColors]);
+
+  return (
+    <ToolbarButton
+      active={!!state.textColor}
+      disabled={disabled}
+      onPress={handlePress}
+      aria-label={t("Text Color")}
+    >
+      <TextColorIcon color={state.textColor} />
+    </ToolbarButton>
+  );
+}
+
+// ===========================================================================
+// HighlightColorPicker
+// ===========================================================================
+
+export function HighlightColorPicker({ editorRef, state, disabled }: ColorPickerProps) {
+  const highlightColors = useResolvedPalette(HIGHLIGHT_COLOR_TOKENS);
+  const handlePress = useCallback(() => {
+    pickColor(t("Highlight"), highlightColors, (color) => {
+      editorRef.current?.executeCommand("highlight", { color });
+    });
+  }, [editorRef, highlightColors]);
+
+  return (
+    <ToolbarButton
+      active={!!state.highlightColor}
+      disabled={disabled}
+      onPress={handlePress}
+      aria-label={t("Highlight Color")}
+    >
+      <HighlightIcon color={state.highlightColor} />
+    </ToolbarButton>
+  );
+}

package/src/toolbar/ColorPicker.tsx

@@ -3,13 +3,15 @@
  */
 
 import { useCallback, useState } from "react";
+import { PresetSwatches } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { Popover, Text, YStack, useThemeName } from "tamagui";
 import type { EditorState, RichEditorRef } from "../types";
-import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants";
+import { TEXT_COLORS, TEXT_COLORS_DARK, HIGHLIGHT_COLORS } from "../constants";
 import type { ColorEntry } from "../constants";
 import { ToolbarButton } from "./ToolbarButton";
 import { TextColorIcon, HighlightIcon } from "./icons";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -25,51 +27,7 @@ export interface ColorPickerProps {
 }
 
 // ===========================================================================
-// 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
+// ColorGrid — titled wrapper around the forms PresetSwatches grid
 // ===========================================================================
 
 function ColorGrid({
@@ -91,17 +49,12 @@ function ColorGrid({
       <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>
+      <PresetSwatches
+        presetColors={colors.map((c) => ({ ...c, name: t(c.name) }))}
+        selectedColor={selectedColor}
+        onSelect={onSelect}
+        width={maxWidth}
+      />
     </YStack>
   );
 }
@@ -112,12 +65,15 @@ function ColorGrid({
 
 export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps) {
   const { knobProps } = useResolvedKnobs();
+  const themeName = useThemeName();
+  const textColors = String(themeName).startsWith("dark") ? TEXT_COLORS_DARK : TEXT_COLORS;
   const [open, setOpen] = useState(false);
 
+  // DISMISS-BY-INTENT (LC-19): swatch click applies the color live; the popup
+  // stays open so the user can try several. Outside click / Escape dismisses.
   const handleSelect = useCallback(
     (color: string | null) => {
       editorRef.current?.executeCommand("textColor", { color });
-      setOpen(false);
     },
     [editorRef],
   );
@@ -129,8 +85,8 @@ export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps
           active={!!state.textColor}
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Text Color"
-          tooltip="Text Color"
+          aria-label={t("Text Color")}
+          tooltip={t("Text Color")}
         >
           <TextColorIcon color={state.textColor} />
         </ToolbarButton>
@@ -147,8 +103,8 @@ export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps
       >
         <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
         <ColorGrid
-          title="Text Color"
-          colors={TEXT_COLORS}
+          title={t("Text Color")}
+          colors={textColors}
           selectedColor={state.textColor}
           onSelect={handleSelect}
           maxWidth={160}
@@ -166,10 +122,10 @@ export function HighlightColorPicker({ editorRef, state, disabled }: ColorPicker
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
 
+  // DISMISS-BY-INTENT (LC-19): keep the popup open across swatch selections.
   const handleSelect = useCallback(
     (color: string | null) => {
       editorRef.current?.executeCommand("highlight", { color });
-      setOpen(false);
     },
     [editorRef],
   );
@@ -181,8 +137,8 @@ export function HighlightColorPicker({ editorRef, state, disabled }: ColorPicker
           active={!!state.highlightColor}
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Highlight Color"
-          tooltip="Highlight"
+          aria-label={t("Highlight Color")}
+          tooltip={t("Highlight")}
         >
           <HighlightIcon color={state.highlightColor} />
         </ToolbarButton>
@@ -199,7 +155,7 @@ export function HighlightColorPicker({ editorRef, state, disabled }: ColorPicker
       >
         <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
         <ColorGrid
-          title="Highlight"
+          title={t("Highlight")}
           colors={HIGHLIGHT_COLORS}
           selectedColor={state.highlightColor}
           onSelect={handleSelect}