@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/editor/BlockDragHandle.ts

@@ -8,13 +8,38 @@ import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey, NodeSelection } from "@tiptap/pm/state";
 
 const HANDLE_WIDTH = 20;
-const HANDLE_HTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" opacity="0.35"><circle cx="4" cy="3" r="1.2"/><circle cx="10" cy="3" r="1.2"/><circle cx="4" cy="7" r="1.2"/><circle cx="10" cy="7" r="1.2"/><circle cx="4" cy="11" r="1.2"/><circle cx="10" cy="11" r="1.2"/></svg>`;
+const SVG_NS = "http://www.w3.org/2000/svg";
+const GRIP_DOTS: Array<[number, number]> = [
+  [4, 3],
+  [10, 3],
+  [4, 7],
+  [10, 7],
+  [4, 11],
+  [10, 11],
+];
+
+function createGripIcon(): SVGSVGElement {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("width", "14");
+  svg.setAttribute("height", "14");
+  svg.setAttribute("viewBox", "0 0 14 14");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("opacity", "0.35");
+  for (const [cx, cy] of GRIP_DOTS) {
+    const circle = document.createElementNS(SVG_NS, "circle");
+    circle.setAttribute("cx", String(cx));
+    circle.setAttribute("cy", String(cy));
+    circle.setAttribute("r", "1.2");
+    svg.appendChild(circle);
+  }
+  return svg;
+}
 
 function createHandleElement(): HTMLDivElement {
   const el = document.createElement("div");
   el.className = "block-drag-handle";
   el.draggable = true;
-  el.innerHTML = HANDLE_HTML;
+  el.appendChild(createGripIcon());
   Object.assign(el.style, {
     position: "absolute",
     width: `${HANDLE_WIDTH}px`,
@@ -25,7 +50,8 @@ function createHandleElement(): HTMLDivElement {
     cursor: "grab",
     borderRadius: "4px",
     opacity: "0",
-    transition: "opacity 0.15s",
+    // decorative fade lives in editorStyles CSS, driven by the motion knob
+    // (animation none silences it); direct drag stays instant either way
     zIndex: "10",
     userSelect: "none",
   });
@@ -36,7 +62,6 @@ export const BlockDragHandle = Extension.create({
   name: "blockDragHandle",
 
   addProseMirrorPlugins() {
-    const { editor } = this;
     let handle: HTMLDivElement | null = null;
     let currentBlockPos: number | null = null;
 
@@ -104,7 +129,7 @@ export const BlockDragHandle = Extension.create({
           };
 
           const onDragStart = (event: DragEvent) => {
-            if (currentBlockPos == null) return;
+            if (currentBlockPos === null) return;
             const node = editorView.state.doc.nodeAt(currentBlockPos);
             if (!node) return;
 

package/src/editor/SlashCommands.tsx

@@ -1,261 +1,241 @@
 /**
- * Slash commands extension -- type "/" to open a menu of block types.
- * Uses @tiptap/suggestion for trigger/matching and a React component for the popup.
+ * Slash commands extension -- type "/" to open a searchable menu of block
+ * types. Uses @tiptap/suggestion for trigger/matching and the shared
+ * suggestion popup (LC-16: same list, rows, chrome, and keyboard handling
+ * as the @ mention menu).
  */
 
 import { Extension } from "@tiptap/core";
-import { ReactRenderer } from "@tiptap/react";
 import Suggestion from "@tiptap/suggestion";
 import type { Editor, Range } from "@tiptap/core";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import {
+  CaretCircleDownIcon,
+  CodeIcon,
+  FunctionIcon,
+  ImageIcon,
+  ListBulletsIcon,
+  ListChecksIcon,
+  ListNumbersIcon,
+  MathOperationsIcon,
+  MinusIcon,
+  QuotesIcon,
+  SmileyIcon,
+  TableIcon,
+  TextHOneIcon,
+  TextHThreeIcon,
+  TextHTwoIcon,
+  TextTIcon,
+  TreeStructureIcon,
+} from "@phosphor-icons/react";
+import { t } from "../shared/t";
+import type { MediaUploadHandlers } from "./media";
+import {
+  createSuggestionRenderer,
+  getSuggestionChrome,
+  type SuggestionRow,
+} from "./suggestionPopup";
 
 // ===========================================================================
 // Slash Command Items
 // ===========================================================================
 
 export interface SlashCommandItem {
+  /** Stable identifier (also the row key) */
+  id: string;
+  /** Translated display title */
   title: string;
+  /** Translated one-line description */
   description: string;
-  icon: string;
+  icon: SuggestionRow["icon"];
   command: (props: { editor: Editor; range: Range }) => void;
 }
 
-const SLASH_ITEMS: SlashCommandItem[] = [
-  {
-    title: "Heading 1",
-    description: "Large section heading",
-    icon: "H1",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run(),
-  },
-  {
-    title: "Heading 2",
-    description: "Medium section heading",
-    icon: "H2",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run(),
-  },
-  {
-    title: "Heading 3",
-    description: "Small section heading",
-    icon: "H3",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run(),
-  },
-  {
-    title: "Bullet List",
-    description: "Unordered list with bullets",
-    icon: "•",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).toggleBulletList().run(),
-  },
-  {
-    title: "Numbered List",
-    description: "Ordered list with numbers",
-    icon: "1.",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).toggleOrderedList().run(),
-  },
-  {
-    title: "Task List",
-    description: "List with checkboxes",
-    icon: "☑",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).toggleTaskList().run(),
-  },
-  {
-    title: "Code Block",
-    description: "Fenced code with syntax highlighting",
-    icon: "<>",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-  },
-  {
-    title: "Blockquote",
-    description: "Quoted text block",
-    icon: "❝",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
-  },
-  {
-    title: "Horizontal Rule",
-    description: "Visual divider line",
-    icon: "—",
-    command: ({ editor, range }) =>
-      editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
-  },
-  {
-    title: "Table",
-    description: "Insert a 3×3 table",
-    icon: "⊞",
-    command: ({ editor, range }) =>
-      editor
-        .chain()
-        .focus()
-        .deleteRange(range)
-        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-        .run(),
-  },
-  {
-    title: "Image",
-    description: "Insert image from URL",
-    icon: "🖼",
-    command: ({ editor, range }) => {
-      const url = window.prompt("Image URL:");
-      if (url) {
-        editor.chain().focus().deleteRange(range).setImage({ src: url }).run();
+function insertImageFromSlash(editor: Editor, range: Range) {
+  const handlers = (editor.storage.mediaUpload?.handlers ?? {}) as MediaUploadHandlers;
+  if (handlers.onImageUpload && typeof document !== "undefined") {
+    // Upload hook wired: offer the OS file picker and insert the uploaded URL
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const src = await handlers.onImageUpload!(file);
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setImage({ src, alt: file.name.replace(/\.[a-z0-9]+$/i, "") })
+          .run();
+      } catch (err) {
+        console.warn("[rich-text] image upload failed:", err);
       }
-    },
-  },
-];
-
-// ===========================================================================
-// SlashCommandsList (React popup)
-// ===========================================================================
-
-interface SlashCommandsListProps {
-  items: SlashCommandItem[];
-  command: (item: SlashCommandItem) => void;
-}
-
-interface SlashCommandsListRef {
-  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
+    };
+    input.click();
+    return;
+  }
+  // No uploader: fall back to a URL prompt
+  const url = window.prompt(t("Image URL:"));
+  if (url) {
+    editor.chain().focus().deleteRange(range).setImage({ src: url }).run();
+  }
 }
 
-const SlashCommandsList = forwardRef<SlashCommandsListRef, SlashCommandsListProps>(
-  ({ items, command }, ref) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const listRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      setSelectedIndex(0);
-    }, [items]);
-
-    useEffect(() => {
-      const el = listRef.current?.children[selectedIndex] as HTMLElement | undefined;
-      el?.scrollIntoView({ block: "nearest" });
-    }, [selectedIndex]);
-
-    const selectItem = useCallback(
-      (index: number) => {
-        const item = items[index];
-        if (item) command(item);
-      },
-      [items, command],
-    );
+const ICON_SIZE = 16;
 
-    useImperativeHandle(ref, () => ({
-      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
-        if (event.key === "ArrowUp") {
-          setSelectedIndex((i) => (i + items.length - 1) % items.length);
-          return true;
-        }
-        if (event.key === "ArrowDown") {
-          setSelectedIndex((i) => (i + 1) % items.length);
-          return true;
-        }
-        if (event.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
-      },
-    }));
-
-    if (items.length === 0) {
-      return (
-        <div style={styles.container}>
-          <div style={styles.empty}>No results</div>
-        </div>
-      );
-    }
-
-    return (
-      <div style={styles.container} ref={listRef}>
-        {items.map((item, index) => (
-          <button
-            key={item.title}
-            style={{
-              ...styles.item,
-              ...(index === selectedIndex ? styles.itemSelected : {}),
-            }}
-            onClick={() => selectItem(index)}
-            onMouseEnter={() => setSelectedIndex(index)}
-            type="button"
-          >
-            <span style={styles.icon}>{item.icon}</span>
-            <span style={styles.textGroup}>
-              <span style={styles.title}>{item.title}</span>
-              <span style={styles.description}>{item.description}</span>
-            </span>
-          </button>
-        ))}
-      </div>
-    );
-  },
-);
-
-SlashCommandsList.displayName = "SlashCommandsList";
-
-const styles: Record<string, React.CSSProperties> = {
-  container: {
-    background: "var(--background, #fff)",
-    border: "1px solid var(--borderColor, #e0e0e0)",
-    borderRadius: "8px",
-    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
-    padding: "4px",
-    maxHeight: "320px",
-    overflowY: "auto",
-    minWidth: "220px",
-  },
-  item: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    padding: "8px 10px",
-    border: "none",
-    background: "none",
-    width: "100%",
-    textAlign: "left",
-    cursor: "pointer",
-    borderRadius: "6px",
-    fontSize: "13px",
-    lineHeight: "1.3",
-  },
-  itemSelected: {
-    background: "var(--color4, #f0f0f0)",
-  },
-  icon: {
-    width: "28px",
-    height: "28px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "4px",
-    background: "var(--color3, #f5f5f5)",
-    fontWeight: "700",
-    fontSize: "12px",
-    flexShrink: 0,
-  },
-  textGroup: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "1px",
-  },
-  title: {
-    fontWeight: "600",
-    color: "var(--color12, #333)",
-  },
-  description: {
-    fontSize: "11px",
-    color: "var(--color9, #888)",
-  },
-  empty: {
-    padding: "8px 12px",
-    color: "var(--color9, #888)",
-    fontSize: "13px",
-  },
-};
+function getSlashItems(): SlashCommandItem[] {
+  return [
+    {
+      id: "text",
+      title: t("Text"),
+      description: t("Plain paragraph text"),
+      icon: <TextTIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setParagraph().run(),
+    },
+    {
+      id: "heading1",
+      title: t("Heading 1"),
+      description: t("Large section heading"),
+      icon: <TextHOneIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run(),
+    },
+    {
+      id: "heading2",
+      title: t("Heading 2"),
+      description: t("Medium section heading"),
+      icon: <TextHTwoIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run(),
+    },
+    {
+      id: "heading3",
+      title: t("Heading 3"),
+      description: t("Small section heading"),
+      icon: <TextHThreeIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run(),
+    },
+    {
+      id: "bulletList",
+      title: t("Bullet List"),
+      description: t("Unordered list with bullets"),
+      icon: <ListBulletsIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).toggleBulletList().run(),
+    },
+    {
+      id: "orderedList",
+      title: t("Numbered List"),
+      description: t("Ordered list with numbers"),
+      icon: <ListNumbersIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run(),
+    },
+    {
+      id: "taskList",
+      title: t("Task List"),
+      description: t("List with checkboxes"),
+      icon: <ListChecksIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).toggleTaskList().run(),
+    },
+    {
+      id: "codeBlock",
+      title: t("Code Block"),
+      description: t("Fenced code with syntax highlighting"),
+      icon: <CodeIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+    },
+    {
+      id: "blockquote",
+      title: t("Blockquote"),
+      description: t("Quoted text block"),
+      icon: <QuotesIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
+    },
+    {
+      id: "horizontalRule",
+      title: t("Horizontal Rule"),
+      description: t("Visual divider line"),
+      icon: <MinusIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+    },
+    {
+      id: "table",
+      title: t("Table"),
+      description: t("Insert a 3\u00d73 table"),
+      icon: <TableIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+          .run(),
+    },
+    {
+      id: "image",
+      title: t("Image"),
+      description: t("Upload or embed an image"),
+      icon: <ImageIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) => insertImageFromSlash(editor, range),
+    },
+    {
+      id: "mermaid",
+      title: t("Mermaid Diagram"),
+      description: t("Diagram code with live preview"),
+      icon: <TreeStructureIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setCodeBlock({ language: "mermaid" }).run(),
+    },
+    {
+      id: "mathBlock",
+      title: t("Math Block"),
+      description: t("Display TeX math with live preview"),
+      icon: <MathOperationsIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).setCodeBlock({ language: "math" }).run(),
+    },
+    {
+      id: "inlineMath",
+      title: t("Inline Math"),
+      description: t("TeX formula in the text flow"),
+      icon: <FunctionIcon size={ICON_SIZE} />,
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).insertInlineMath().run(),
+    },
+    {
+      id: "details",
+      title: t("Collapsible Section"),
+      description: t("Expandable details with a summary"),
+      icon: <CaretCircleDownIcon size={ICON_SIZE} />,
+      // open: true so the freshly inserted section is expanded for typing
+      command: ({ editor, range }) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setDetails()
+          .updateAttributes("details", { open: true })
+          .run(),
+    },
+    {
+      id: "emoji",
+      title: t("Emoji"),
+      description: t("Search emoji by name"),
+      icon: <SmileyIcon size={ICON_SIZE} />,
+      // inserting ":" hands off to the emoji suggestion popup
+      command: ({ editor, range }) =>
+        editor.chain().focus().deleteRange(range).insertContent(":").run(),
+    },
+  ];
+}
 
 // ===========================================================================
 // SlashCommands Extension
@@ -266,71 +246,31 @@ export const SlashCommands = Extension.create({
 
   addOptions() {
     return {
+      /**
+       * Item ids removed from the menu (capability gating — e.g. markdown
+       * capabilities exclude math/details, which GFM cannot express).
+       */
+      excludeIds: [] as string[],
       suggestion: {
         char: "/",
         startOfLine: false,
         items: ({ query }: { query: string }) => {
           const q = query.toLowerCase();
-          return SLASH_ITEMS.filter(
+          return getSlashItems().filter(
             (item) =>
               item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q),
           );
         },
-        render: () => {
-          let component: ReactRenderer<SlashCommandsListRef> | null = null;
-          let popup: HTMLDivElement | null = null;
-
-          return {
-            onStart: (props: any) => {
-              component = new ReactRenderer(SlashCommandsList, {
-                props,
-                editor: props.editor,
-              });
-
-              popup = document.createElement("div");
-              popup.style.position = "absolute";
-              popup.style.zIndex = "50";
-              document.body.appendChild(popup);
-              popup.appendChild(component.element);
-
-              const { clientRect } = props;
-              if (clientRect) {
-                const rect = clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onUpdate: (props: any) => {
-              component?.updateProps(props);
-
-              if (popup && props.clientRect) {
-                const rect = props.clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onKeyDown: (props: any) => {
-              if (props.event.key === "Escape") {
-                popup?.remove();
-                component?.destroy();
-                popup = null;
-                component = null;
-                return true;
-              }
-              return component?.ref?.onKeyDown(props) ?? false;
-            },
-            onExit: () => {
-              popup?.remove();
-              component?.destroy();
-              popup = null;
-              component = null;
-            },
-          };
-        },
+        render: createSuggestionRenderer<SlashCommandItem>({
+          toRow: (item) => ({
+            key: item.id,
+            title: item.title,
+            description: item.description,
+            icon: item.icon,
+          }),
+          getChrome: getSuggestionChrome,
+          getEmptyLabel: () => t("No results"),
+        }),
         command: ({
           editor,
           range,
@@ -347,10 +287,15 @@ export const SlashCommands = Extension.create({
   },
 
   addProseMirrorPlugins() {
+    const excludeIds: string[] = this.options.excludeIds ?? [];
     return [
       Suggestion({
         editor: this.editor,
         ...this.options.suggestion,
+        items: (args: { query: string }) =>
+          this.options.suggestion
+            .items(args)
+            .filter((item: SlashCommandItem) => !excludeIds.includes(item.id)),
       }),
     ];
   },