@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/src/toolbar/ImageBubble.tsx

@@ -7,41 +7,11 @@ import { useCallback, useState } from "react";
 import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PencilSimpleIcon, TrashIcon } from "@phosphor-icons/react";
 import { Input, Text, XStack, YStack } from "tamagui";
 import { Button } from "@multiplatform.one/forms";
 import { ToolbarButton } from "./ToolbarButton";
-
-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>
-  );
-}
-
-function EditIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-      <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-    </svg>
-  );
-}
+import { t } from "../shared/t";
 
 export interface ImageBubbleProps {
   editor: Editor | null;
@@ -73,7 +43,11 @@ export function ImageBubble({ editor }: ImageBubbleProps) {
   if (!editor) return null;
 
   return (
-    <BubbleMenu editor={editor} shouldShow={({ editor: e }) => e.isActive("image")}>
+    <BubbleMenu
+      editor={editor}
+      className="rt-bubble-menu"
+      shouldShow={({ editor: e }) => e.isActive("image")}
+    >
       <XStack
         backgroundColor="$background"
         borderWidth={1}
@@ -87,11 +61,11 @@ export function ImageBubble({ editor }: ImageBubbleProps) {
         {editing ? (
           <YStack gap="$1.5">
             <Text fontSize={12} fontWeight="600">
-              Alt text
+              {t("Alt text")}
             </Text>
             <Input
               size="$2"
-              placeholder="Describe this image..."
+              placeholder={t("Describe this image...")}
               value={altText}
               onChangeText={setAltText}
               onSubmitEditing={handleSave}
@@ -99,24 +73,32 @@ export function ImageBubble({ editor }: ImageBubbleProps) {
               minWidth={220}
             />
             <XStack gap="$1" justifyContent="flex-end">
-              <Button size="$2" onPress={() => setEditing(false)} aria-label="Cancel">
-                Cancel
+              <Button size="$2" onPress={() => setEditing(false)} aria-label={t("Cancel")}>
+                {t("Cancel")}
               </Button>
-              <Button size="$2" theme="active" onPress={handleSave} aria-label="Save alt text">
-                Save
+              <Button size="$2" theme="active" onPress={handleSave} aria-label={t("Save alt text")}>
+                {t("Save")}
               </Button>
             </XStack>
           </YStack>
         ) : (
           <>
             <Text fontSize={12} color="$color10" maxWidth={200} numberOfLines={1}>
-              {editor.getAttributes("image").alt || "No alt text"}
+              {editor.getAttributes("image").alt || t("No alt text")}
             </Text>
-            <ToolbarButton onPress={handleEdit} aria-label="Edit alt text" tooltip="Edit alt text">
-              <EditIcon />
+            <ToolbarButton
+              onPress={handleEdit}
+              aria-label={t("Edit alt text")}
+              tooltip={t("Edit alt text")}
+            >
+              <PencilSimpleIcon size={14} />
             </ToolbarButton>
-            <ToolbarButton onPress={handleDelete} aria-label="Delete image" tooltip="Delete image">
-              <TrashIcon />
+            <ToolbarButton
+              onPress={handleDelete}
+              aria-label={t("Delete image")}
+              tooltip={t("Delete image")}
+            >
+              <TrashIcon size={14} />
             </ToolbarButton>
           </>
         )}

package/src/toolbar/ImageDialog.native.tsx

@@ -0,0 +1,97 @@
+/**
+ * Image dialog for native: a small modal with a URL input.
+ *
+ * The web version uses a Popover; native uses an RN Modal. Same command
+ * contract: executeCommand("image", { src }).
+ */
+
+import { useCallback, useState } from "react";
+import { Modal, Pressable, StyleSheet } from "react-native";
+import { Input, Text, XStack, YStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import type { RichEditorRef } from "../types";
+import { ToolbarButton } from "./ToolbarButton";
+import { ImageIcon } from "./icons";
+import { t } from "../shared/t";
+
+export interface ImageDialogProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Whether the dialog is disabled */
+  disabled?: boolean;
+}
+
+export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [imageUrl, setImageUrl] = useState("");
+
+  const handleInsert = useCallback(() => {
+    const trimmed = imageUrl.trim();
+    if (trimmed) {
+      editorRef.current?.executeCommand("image", { src: trimmed });
+      setImageUrl("");
+      setOpen(false);
+    }
+  }, [imageUrl, editorRef]);
+
+  return (
+    <>
+      <ToolbarButton
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        aria-label={t("Insert Image")}
+      >
+        <ImageIcon />
+      </ToolbarButton>
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+          <Pressable style={styles.sheet} onPress={(e) => e.stopPropagation()}>
+            <YStack
+              backgroundColor="$background"
+              borderRadius="$4"
+              padding="$4"
+              gap="$3"
+              minWidth={280}
+            >
+              <Text fontWeight="600">{t("Insert Image")}</Text>
+              <Input
+                size="$3"
+                placeholder="https://example.com/image.jpg"
+                value={imageUrl}
+                onChangeText={setImageUrl}
+                onSubmitEditing={handleInsert}
+                autoFocus
+                autoCapitalize="none"
+                keyboardType="url"
+              />
+              <XStack gap="$2" justifyContent="flex-end">
+                <Button size="$2" onPress={() => setOpen(false)} aria-label={t("Cancel")}>
+                  {t("Cancel")}
+                </Button>
+                <Button
+                  size="$2"
+                  theme="active"
+                  onPress={handleInsert}
+                  disabled={!imageUrl.trim()}
+                  aria-label={t("Insert image")}
+                >
+                  {t("Insert")}
+                </Button>
+              </XStack>
+            </YStack>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sheet: {},
+});

package/src/toolbar/ImageDialog.tsx

@@ -10,6 +10,7 @@ import type { RichEditorRef } from "../types";
 import { ToolbarButton } from "./ToolbarButton";
 import { ImageIcon } from "./icons";
 import { SHORTCUTS } from "./shortcuts";
+import { t } from "../shared/t";
 
 // ===========================================================================
 // Types
@@ -46,7 +47,7 @@ export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
         <ToolbarButton
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Insert Image"
+          aria-label={t("Insert Image")}
           tooltip={SHORTCUTS.image}
         >
           <ImageIcon />
@@ -65,7 +66,7 @@ export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
         <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
         <YStack gap="$2" minWidth={250}>
           <Text fontSize={knobProps.sizeToken} fontWeight="600">
-            Insert Image
+            {t("Insert Image")}
           </Text>
           <Input
             size="$3"
@@ -81,9 +82,9 @@ export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
               theme="active"
               onPress={handleInsert}
               disabled={!imageUrl.trim()}
-              aria-label="Insert image"
+              aria-label={t("Insert image")}
             >
-              Insert
+              {t("Insert")}
             </Button>
           </XStack>
         </YStack>

package/src/toolbar/LinkBubble.tsx

@@ -7,65 +7,16 @@ import { useCallback, useState } from "react";
 import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ArrowSquareOutIcon, LinkBreakIcon, PencilSimpleIcon } from "@phosphor-icons/react";
 import { Input, Text, XStack, YStack } from "tamagui";
 import { Button } from "@multiplatform.one/forms";
 import { ToolbarButton } from "./ToolbarButton";
-import { LinkIcon } from "./icons";
+import { t } from "../shared/t";
 
 export interface LinkBubbleProps {
   editor: Editor | null;
 }
 
-function ExternalLinkIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-      <polyline points="15 3 21 3 21 9" />
-      <line x1="10" y1="14" x2="21" y2="3" />
-    </svg>
-  );
-}
-
-function UnlinkIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-      <line x1="2" y1="2" x2="22" y2="22" strokeWidth="2" />
-    </svg>
-  );
-}
-
-function EditIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-      <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-    </svg>
-  );
-}
-
 export function LinkBubble({ editor }: LinkBubbleProps) {
   const { knobProps } = useResolvedKnobs();
   const [editing, setEditing] = useState(false);
@@ -96,7 +47,11 @@ export function LinkBubble({ editor }: LinkBubbleProps) {
   if (!editor) return null;
 
   return (
-    <BubbleMenu editor={editor} shouldShow={({ editor: e }) => e.isActive("link")}>
+    <BubbleMenu
+      editor={editor}
+      className="rt-bubble-menu"
+      shouldShow={({ editor: e }) => e.isActive("link")}
+    >
       <XStack
         backgroundColor="$background"
         borderWidth={1}
@@ -119,11 +74,11 @@ export function LinkBubble({ editor }: LinkBubbleProps) {
               minWidth={220}
             />
             <XStack gap="$1" justifyContent="flex-end">
-              <Button size="$2" onPress={() => setEditing(false)} aria-label="Cancel">
-                Cancel
+              <Button size="$2" onPress={() => setEditing(false)} aria-label={t("Cancel")}>
+                {t("Cancel")}
               </Button>
-              <Button size="$2" theme="active" onPress={handleSave} aria-label="Save link">
-                Save
+              <Button size="$2" theme="active" onPress={handleSave} aria-label={t("Save link")}>
+                {t("Save")}
               </Button>
             </XStack>
           </YStack>
@@ -140,23 +95,31 @@ export function LinkBubble({ editor }: LinkBubbleProps) {
                 if (href) window.open(href, "_blank", "noopener,noreferrer");
               }}
             >
-              {editor.getAttributes("link").href || "No URL"}
+              {editor.getAttributes("link").href || t("No URL")}
             </Text>
             <ToolbarButton
               onPress={() => {
                 const href = editor.getAttributes("link").href;
                 if (href) window.open(href, "_blank", "noopener,noreferrer");
               }}
-              aria-label="Open link"
-              tooltip="Open link"
+              aria-label={t("Open link")}
+              tooltip={t("Open link")}
             >
-              <ExternalLinkIcon />
+              <ArrowSquareOutIcon size={14} />
             </ToolbarButton>
-            <ToolbarButton onPress={handleEdit} aria-label="Edit link" tooltip="Edit link">
-              <EditIcon />
+            <ToolbarButton
+              onPress={handleEdit}
+              aria-label={t("Edit link")}
+              tooltip={t("Edit link")}
+            >
+              <PencilSimpleIcon size={14} />
             </ToolbarButton>
-            <ToolbarButton onPress={handleUnlink} aria-label="Remove link" tooltip="Unlink">
-              <UnlinkIcon />
+            <ToolbarButton
+              onPress={handleUnlink}
+              aria-label={t("Remove link")}
+              tooltip={t("Unlink")}
+            >
+              <LinkBreakIcon size={14} />
             </ToolbarButton>
           </>
         )}

package/src/toolbar/LinkDialog.native.tsx

@@ -0,0 +1,117 @@
+/**
+ * Link dialog for native: a small modal with a URL input.
+ *
+ * The web version uses a Popover; native uses an RN Modal (10Tap has no
+ * floating anchors). Same command contract: executeCommand("link",
+ * { href }) to set, { href: null } to remove.
+ */
+
+import { useCallback, useState } from "react";
+import { Modal, Pressable, StyleSheet } from "react-native";
+import { Input, Text, XStack, YStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import type { EditorState, RichEditorRef } from "../types";
+import { ToolbarButton } from "./ToolbarButton";
+import { LinkIcon } from "./icons";
+import { t } from "../shared/t";
+import { normalizeUrl } from "../shared/url";
+
+export interface LinkDialogProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state: EditorState;
+  /** Whether the dialog is disabled */
+  disabled?: boolean;
+}
+
+export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+
+  const handleSubmit = useCallback(() => {
+    const normalized = normalizeUrl(linkUrl);
+    if (normalized) {
+      editorRef.current?.executeCommand("link", { href: normalized });
+    }
+    setLinkUrl("");
+    setOpen(false);
+  }, [linkUrl, editorRef]);
+
+  const handleRemove = useCallback(() => {
+    editorRef.current?.executeCommand("link", { href: null });
+    setOpen(false);
+  }, [editorRef]);
+
+  return (
+    <>
+      <ToolbarButton
+        active={state.isLink}
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        aria-label={t("Link")}
+      >
+        <LinkIcon />
+      </ToolbarButton>
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+          <Pressable style={styles.sheet} onPress={(e) => e.stopPropagation()}>
+            <YStack
+              backgroundColor="$background"
+              borderRadius="$4"
+              padding="$4"
+              gap="$3"
+              minWidth={280}
+            >
+              <Text fontWeight="600">{state.isLink ? t("Edit Link") : t("Add Link")}</Text>
+              <Input
+                size="$3"
+                placeholder="https://example.com"
+                value={linkUrl}
+                onChangeText={setLinkUrl}
+                onSubmitEditing={handleSubmit}
+                autoFocus
+                autoCapitalize="none"
+                keyboardType="url"
+              />
+              <XStack gap="$2" justifyContent="flex-end">
+                <Button size="$2" onPress={() => setOpen(false)} aria-label={t("Cancel")}>
+                  {t("Cancel")}
+                </Button>
+                {state.isLink && (
+                  <Button
+                    size="$2"
+                    theme="red"
+                    onPress={handleRemove}
+                    aria-label={t("Remove link")}
+                  >
+                    {t("Remove")}
+                  </Button>
+                )}
+                <Button
+                  size="$2"
+                  theme="active"
+                  onPress={handleSubmit}
+                  disabled={!linkUrl.trim()}
+                  aria-label={state.isLink ? t("Update link") : t("Add link")}
+                >
+                  {state.isLink ? t("Update") : t("Add")}
+                </Button>
+              </XStack>
+            </YStack>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sheet: {},
+});

package/src/toolbar/LinkDialog.tsx

@@ -10,6 +10,8 @@ import type { EditorState, RichEditorRef } from "../types";
 import { ToolbarButton } from "./ToolbarButton";
 import { LinkIcon } from "./icons";
 import { SHORTCUTS } from "./shortcuts";
+import { t } from "../shared/t";
+import { normalizeUrl } from "../shared/url";
 
 // ===========================================================================
 // Types
@@ -22,31 +24,33 @@ export interface LinkDialogProps {
   state: EditorState;
   /** Whether the dialog is disabled */
   disabled?: boolean;
-}
-
-// ===========================================================================
-// Helpers
-// ===========================================================================
-
-/**
- * Ensures URL has a protocol prefix, auto-prepending https:// if missing.
- */
-function normalizeUrl(url: string): string {
-  const trimmed = url.trim();
-  if (!trimmed) return trimmed;
-  if (/^https?:\/\//i.test(trimmed)) return trimmed;
-  if (/^mailto:/i.test(trimmed)) return trimmed;
-  if (/^tel:/i.test(trimmed)) return trimmed;
-  return `https://${trimmed}`;
+  /** Controlled open state (internal when omitted) — Mod+K wiring */
+  open?: boolean;
+  /** Called when the open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
 // ===========================================================================
 // LinkDialog
 // ===========================================================================
 
-export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
+export function LinkDialog({
+  editorRef,
+  state,
+  disabled,
+  open: openProp,
+  onOpenChange,
+}: LinkDialogProps) {
   const { knobProps } = useResolvedKnobs();
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = openProp ?? internalOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange],
+  );
   const [linkUrl, setLinkUrl] = useState("");
 
   const handleSubmit = useCallback(() => {
@@ -70,7 +74,7 @@ export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
           active={state.isLink}
           disabled={disabled}
           onPress={() => setOpen(true)}
-          aria-label="Link"
+          aria-label={t("Link")}
           tooltip={SHORTCUTS.link}
         >
           <LinkIcon />
@@ -89,7 +93,7 @@ export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
         <Popover.Arrow borderColor="$borderColor" backgroundColor="$background" />
         <YStack gap="$2" minWidth={250}>
           <Text fontSize={knobProps.sizeToken} fontWeight="600">
-            {state.isLink ? "Edit Link" : "Add Link"}
+            {state.isLink ? t("Edit Link") : t("Add Link")}
           </Text>
           <Input
             size="$3"
@@ -101,8 +105,8 @@ export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
           />
           <XStack gap="$2" justifyContent="flex-end">
             {state.isLink && (
-              <Button size="$2" theme="red" onPress={handleRemove} aria-label="Remove link">
-                Remove
+              <Button size="$2" theme="red" onPress={handleRemove} aria-label={t("Remove link")}>
+                {t("Remove")}
               </Button>
             )}
             <Button
@@ -110,9 +114,9 @@ export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
               theme="active"
               onPress={handleSubmit}
               disabled={!linkUrl.trim()}
-              aria-label={state.isLink ? "Update link" : "Add link"}
+              aria-label={state.isLink ? t("Update link") : t("Add link")}
             >
-              {state.isLink ? "Update" : "Add"}
+              {state.isLink ? t("Update") : t("Add")}
             </Button>
           </XStack>
         </YStack>