@multiplatform.one/rich-text 6.0.4 → 6.3.0

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
@@ -271,66 +251,21 @@ export const SlashCommands = Extension.create({
         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,