@multiplatform.one/rich-text 6.0.0

package/src/toolbar/HeadingPicker.tsx

@@ -0,0 +1,169 @@
+/**
+ * Heading picker dropdown for selecting heading levels
+ */
+
+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";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface HeadingPickerProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  state: EditorState;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+}
+
+// ===========================================================================
+// Heading Options
+// ===========================================================================
+
+interface HeadingOption {
+  label: string;
+  description: string;
+  command: EditorCommand;
+  stateKey: keyof EditorState;
+  fontSize: string;
+  fontWeight: string;
+}
+
+const HEADING_OPTIONS: HeadingOption[] = [
+  {
+    label: "H1",
+    description: "Heading 1",
+    command: "heading1",
+    stateKey: "isHeading1",
+    fontSize: "$5",
+    fontWeight: "700",
+  },
+  {
+    label: "H2",
+    description: "Heading 2",
+    command: "heading2",
+    stateKey: "isHeading2",
+    fontSize: "$4",
+    fontWeight: "600",
+  },
+  {
+    label: "H3",
+    description: "Heading 3",
+    command: "heading3",
+    stateKey: "isHeading3",
+    fontSize: "$3",
+    fontWeight: "600",
+  },
+  {
+    label: "H4",
+    description: "Heading 4",
+    command: "heading4",
+    stateKey: "isHeading4",
+    fontSize: "$2",
+    fontWeight: "600",
+  },
+  {
+    label: "H5",
+    description: "Heading 5",
+    command: "heading5",
+    stateKey: "isHeading5",
+    fontSize: "$1",
+    fontWeight: "600",
+  },
+  {
+    label: "H6",
+    description: "Heading 6",
+    command: "heading6",
+    stateKey: "isHeading6",
+    fontSize: "$1",
+    fontWeight: "600",
+  },
+  {
+    label: "P",
+    description: "Paragraph",
+    command: "paragraph",
+    stateKey: "isParagraph",
+    fontSize: "$3",
+    fontWeight: "400",
+  },
+];
+
+// ===========================================================================
+// HeadingPicker
+// ===========================================================================
+
+function getActiveHeadingLabel(state: EditorState): string {
+  if (state.isHeading1) return "H1";
+  if (state.isHeading2) return "H2";
+  if (state.isHeading3) return "H3";
+  if (state.isHeading4) return "H4";
+  if (state.isHeading5) return "H5";
+  if (state.isHeading6) return "H6";
+  return "H";
+}
+
+function isAnyHeadingActive(state: EditorState): boolean {
+  return (
+    state.isHeading1 ||
+    state.isHeading2 ||
+    state.isHeading3 ||
+    state.isHeading4 ||
+    state.isHeading5 ||
+    state.isHeading6
+  );
+}
+
+export function HeadingPicker({ editorRef, state, disabled }: HeadingPickerProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
+      <Popover.Trigger asChild>
+        <ToolbarDropdownButton
+          active={isAnyHeadingActive(state)}
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Heading"
+        >
+          <Text fontWeight="600">{getActiveHeadingLabel(state)}</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="$1" minWidth={140}>
+          {HEADING_OPTIONS.map((option) => (
+            <DropdownMenuItemFrame
+              key={option.command}
+              active={state[option.stateKey] as boolean}
+              onPress={() => {
+                editorRef.current?.executeCommand(option.command);
+                setOpen(false);
+              }}
+              aria-label={option.description}
+            >
+              <Text fontWeight={option.fontWeight as any} fontSize={option.fontSize as any}>
+                {option.label}
+              </Text>
+              <Text color="$color11">{option.description}</Text>
+            </DropdownMenuItemFrame>
+          ))}
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/toolbar/ImageBubble.tsx

@@ -0,0 +1,126 @@
+/**
+ * Bubble menu shown when an image node is selected.
+ * Provides options to update alt text or remove the image.
+ */
+
+import { useCallback, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+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>
+  );
+}
+
+export interface ImageBubbleProps {
+  editor: Editor | null;
+}
+
+export function ImageBubble({ editor }: ImageBubbleProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [editing, setEditing] = useState(false);
+  const [altText, setAltText] = useState("");
+
+  const handleEdit = useCallback(() => {
+    if (!editor) return;
+    const attrs = editor.getAttributes("image");
+    setAltText(attrs.alt || "");
+    setEditing(true);
+  }, [editor]);
+
+  const handleSave = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().updateAttributes("image", { alt: altText }).run();
+    setEditing(false);
+  }, [editor, altText]);
+
+  const handleDelete = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+  }, [editor]);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu editor={editor} shouldShow={({ editor: e }) => e.isActive("image")}>
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1.5"
+        gap="$1.5"
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        {editing ? (
+          <YStack gap="$1.5">
+            <Text fontSize={12} fontWeight="600">
+              Alt text
+            </Text>
+            <Input
+              size="$2"
+              placeholder="Describe this image..."
+              value={altText}
+              onChangeText={setAltText}
+              onSubmitEditing={handleSave}
+              autoFocus
+              minWidth={220}
+            />
+            <XStack gap="$1" justifyContent="flex-end">
+              <Button size="$2" onPress={() => setEditing(false)} aria-label="Cancel">
+                Cancel
+              </Button>
+              <Button size="$2" theme="active" onPress={handleSave} aria-label="Save alt text">
+                Save
+              </Button>
+            </XStack>
+          </YStack>
+        ) : (
+          <>
+            <Text fontSize={12} color="$color10" maxWidth={200} numberOfLines={1}>
+              {editor.getAttributes("image").alt || "No alt text"}
+            </Text>
+            <ToolbarButton onPress={handleEdit} aria-label="Edit alt text" tooltip="Edit alt text">
+              <EditIcon />
+            </ToolbarButton>
+            <ToolbarButton onPress={handleDelete} aria-label="Delete image" tooltip="Delete image">
+              <TrashIcon />
+            </ToolbarButton>
+          </>
+        )}
+      </XStack>
+    </BubbleMenu>
+  );
+}

package/src/toolbar/ImageDialog.tsx

@@ -0,0 +1,93 @@
+/**
+ * Image dialog popover for inserting images via URL
+ */
+
+import { useCallback, useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Input, Popover, 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 { SHORTCUTS } from "./shortcuts";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface ImageDialogProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Whether the dialog is disabled */
+  disabled?: boolean;
+}
+
+// ===========================================================================
+// ImageDialog
+// ===========================================================================
+
+export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
+  const { knobProps } = useResolvedKnobs();
+  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 (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+      <Popover.Trigger asChild>
+        <ToolbarButton
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Insert Image"
+          tooltip={SHORTCUTS.image}
+        >
+          <ImageIcon />
+        </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" />
+        <YStack gap="$2" minWidth={250}>
+          <Text fontSize={knobProps.sizeToken} fontWeight="600">
+            Insert Image
+          </Text>
+          <Input
+            size="$3"
+            placeholder="https://example.com/image.jpg"
+            value={imageUrl}
+            onChangeText={setImageUrl}
+            onSubmitEditing={handleInsert}
+            autoFocus
+          />
+          <XStack gap="$2" justifyContent="flex-end">
+            <Button
+              size="$2"
+              theme="active"
+              onPress={handleInsert}
+              disabled={!imageUrl.trim()}
+              aria-label="Insert image"
+            >
+              Insert
+            </Button>
+          </XStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/toolbar/LinkBubble.tsx

@@ -0,0 +1,166 @@
+/**
+ * Bubble menu shown when cursor is on a link.
+ * Displays the URL with options to visit, edit, or unlink.
+ */
+
+import { useCallback, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Input, Text, XStack, YStack } from "tamagui";
+import { Button } from "@multiplatform.one/forms";
+import { ToolbarButton } from "./ToolbarButton";
+import { LinkIcon } from "./icons";
+
+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);
+  const [editUrl, setEditUrl] = useState("");
+
+  const handleEdit = useCallback(() => {
+    if (!editor) return;
+    const attrs = editor.getAttributes("link");
+    setEditUrl(attrs.href || "");
+    setEditing(true);
+  }, [editor]);
+
+  const handleSave = useCallback(() => {
+    if (!editor) return;
+    const trimmed = editUrl.trim();
+    if (trimmed) {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: trimmed }).run();
+    }
+    setEditing(false);
+  }, [editor, editUrl]);
+
+  const handleUnlink = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setEditing(false);
+  }, [editor]);
+
+  if (!editor) return null;
+
+  return (
+    <BubbleMenu editor={editor} shouldShow={({ editor: e }) => e.isActive("link")}>
+      <XStack
+        backgroundColor="$background"
+        borderWidth={1}
+        borderColor="$borderColor"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        padding="$1.5"
+        gap="$1.5"
+        alignItems="center"
+        elevation={knobProps.elevation}
+      >
+        {editing ? (
+          <YStack gap="$1.5">
+            <Input
+              size="$2"
+              placeholder="https://example.com"
+              value={editUrl}
+              onChangeText={setEditUrl}
+              onSubmitEditing={handleSave}
+              autoFocus
+              minWidth={220}
+            />
+            <XStack gap="$1" justifyContent="flex-end">
+              <Button size="$2" onPress={() => setEditing(false)} aria-label="Cancel">
+                Cancel
+              </Button>
+              <Button size="$2" theme="active" onPress={handleSave} aria-label="Save link">
+                Save
+              </Button>
+            </XStack>
+          </YStack>
+        ) : (
+          <>
+            <Text
+              fontSize={12}
+              color="$blue10"
+              maxWidth={200}
+              numberOfLines={1}
+              cursor="pointer"
+              onPress={() => {
+                const href = editor.getAttributes("link").href;
+                if (href) window.open(href, "_blank", "noopener,noreferrer");
+              }}
+            >
+              {editor.getAttributes("link").href || "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"
+            >
+              <ExternalLinkIcon />
+            </ToolbarButton>
+            <ToolbarButton onPress={handleEdit} aria-label="Edit link" tooltip="Edit link">
+              <EditIcon />
+            </ToolbarButton>
+            <ToolbarButton onPress={handleUnlink} aria-label="Remove link" tooltip="Unlink">
+              <UnlinkIcon />
+            </ToolbarButton>
+          </>
+        )}
+      </XStack>
+    </BubbleMenu>
+  );
+}

package/src/toolbar/LinkDialog.tsx

@@ -0,0 +1,124 @@
+/**
+ * Link dialog popover for inserting and editing links
+ */
+
+import { useCallback, useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Input, Popover, 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 { SHORTCUTS } from "./shortcuts";
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface LinkDialogProps {
+  /** Reference to the editor */
+  editorRef: React.RefObject<RichEditorRef | null>;
+  /** Current editor state */
+  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}`;
+}
+
+// ===========================================================================
+// LinkDialog
+// ===========================================================================
+
+export function LinkDialog({ editorRef, state, disabled }: LinkDialogProps) {
+  const { knobProps } = useResolvedKnobs();
+  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 (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+      <Popover.Trigger asChild>
+        <ToolbarButton
+          active={state.isLink}
+          disabled={disabled}
+          onPress={() => setOpen(true)}
+          aria-label="Link"
+          tooltip={SHORTCUTS.link}
+        >
+          <LinkIcon />
+        </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" />
+        <YStack gap="$2" minWidth={250}>
+          <Text fontSize={knobProps.sizeToken} fontWeight="600">
+            {state.isLink ? "Edit Link" : "Add Link"}
+          </Text>
+          <Input
+            size="$3"
+            placeholder="https://example.com"
+            value={linkUrl}
+            onChangeText={setLinkUrl}
+            onSubmitEditing={handleSubmit}
+            autoFocus
+          />
+          <XStack gap="$2" justifyContent="flex-end">
+            {state.isLink && (
+              <Button size="$2" theme="red" onPress={handleRemove} aria-label="Remove link">
+                Remove
+              </Button>
+            )}
+            <Button
+              size="$2"
+              theme="active"
+              onPress={handleSubmit}
+              disabled={!linkUrl.trim()}
+              aria-label={state.isLink ? "Update link" : "Add link"}
+            >
+              {state.isLink ? "Update" : "Add"}
+            </Button>
+          </XStack>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+export { normalizeUrl };