@multiplatform.one/rich-text 6.0.0

package/src/editor/BlockDragHandle.ts

@@ -0,0 +1,141 @@
+/**
+ * Universal block drag handle extension.
+ * Shows a grip icon to the left of the hovered top-level block.
+ * Dragging from the handle moves the entire block.
+ */
+
+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>`;
+
+function createHandleElement(): HTMLDivElement {
+  const el = document.createElement("div");
+  el.className = "block-drag-handle";
+  el.draggable = true;
+  el.innerHTML = HANDLE_HTML;
+  Object.assign(el.style, {
+    position: "absolute",
+    width: `${HANDLE_WIDTH}px`,
+    height: `${HANDLE_WIDTH}px`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "grab",
+    borderRadius: "4px",
+    opacity: "0",
+    transition: "opacity 0.15s",
+    zIndex: "10",
+    userSelect: "none",
+  });
+  return el;
+}
+
+export const BlockDragHandle = Extension.create({
+  name: "blockDragHandle",
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    let handle: HTMLDivElement | null = null;
+    let currentBlockPos: number | null = null;
+
+    return [
+      new Plugin({
+        key: new PluginKey("blockDragHandle"),
+
+        view(editorView) {
+          handle = createHandleElement();
+          editorView.dom.parentElement?.appendChild(handle);
+          editorView.dom.parentElement!.style.position = "relative";
+
+          const onMouseMove = (event: MouseEvent) => {
+            if (!handle || !editorView.dom.contains(event.target as Node)) {
+              if (handle) handle.style.opacity = "0";
+              currentBlockPos = null;
+              return;
+            }
+
+            const pos = editorView.posAtCoords({
+              left: event.clientX,
+              top: event.clientY,
+            });
+            if (!pos) {
+              handle.style.opacity = "0";
+              currentBlockPos = null;
+              return;
+            }
+
+            const $pos = editorView.state.doc.resolve(pos.pos);
+            const depth = $pos.depth;
+            if (depth === 0) {
+              handle.style.opacity = "0";
+              currentBlockPos = null;
+              return;
+            }
+
+            const topLevelPos = $pos.before(1);
+            const node = editorView.state.doc.nodeAt(topLevelPos);
+            if (!node) {
+              handle.style.opacity = "0";
+              currentBlockPos = null;
+              return;
+            }
+
+            currentBlockPos = topLevelPos;
+
+            const domNode = editorView.nodeDOM(topLevelPos) as HTMLElement | null;
+            if (!domNode) {
+              handle.style.opacity = "0";
+              return;
+            }
+
+            const editorRect = editorView.dom.parentElement!.getBoundingClientRect();
+            const blockRect = domNode.getBoundingClientRect();
+
+            handle.style.left = `${blockRect.left - editorRect.left - HANDLE_WIDTH - 2}px`;
+            handle.style.top = `${blockRect.top - editorRect.top + 2}px`;
+            handle.style.opacity = "1";
+          };
+
+          const onMouseLeave = () => {
+            if (handle) handle.style.opacity = "0";
+            currentBlockPos = null;
+          };
+
+          const onDragStart = (event: DragEvent) => {
+            if (currentBlockPos == null) return;
+            const node = editorView.state.doc.nodeAt(currentBlockPos);
+            if (!node) return;
+
+            const sel = NodeSelection.create(editorView.state.doc, currentBlockPos);
+            editorView.dispatch(editorView.state.tr.setSelection(sel));
+
+            editorView.dragging = {
+              slice: sel.content(),
+              move: true,
+            };
+
+            event.dataTransfer?.setDragImage(
+              editorView.nodeDOM(currentBlockPos) as HTMLElement,
+              0,
+              0,
+            );
+          };
+
+          handle.addEventListener("dragstart", onDragStart);
+          editorView.dom.addEventListener("mousemove", onMouseMove);
+          editorView.dom.addEventListener("mouseleave", onMouseLeave);
+
+          return {
+            destroy() {
+              handle?.remove();
+              editorView.dom.removeEventListener("mousemove", onMouseMove);
+              editorView.dom.removeEventListener("mouseleave", onMouseLeave);
+            },
+          };
+        },
+      }),
+    ];
+  },
+});

package/src/editor/MarkdownPaste.ts

@@ -0,0 +1,50 @@
+/**
+ * Extension that intercepts paste events containing markdown-formatted plain
+ * text and converts it to HTML before insertion. If the clipboard already
+ * contains HTML (e.g. from a web page), the default paste behavior is used.
+ */
+
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { marked } from "marked";
+
+const MARKDOWN_PATTERN = /(?:^#{1,6}\s|^\*\s|^-\s|^\d+\.\s|```|^\[.+\]\(.+\)|^\*\*|^>\s)/m;
+
+function looksLikeMarkdown(text: string): boolean {
+  return MARKDOWN_PATTERN.test(text);
+}
+
+export const MarkdownPaste = Extension.create({
+  name: "markdownPaste",
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      new Plugin({
+        key: new PluginKey("markdownPaste"),
+        props: {
+          handlePaste(view, event) {
+            const clipboardData = event.clipboardData;
+            if (!clipboardData) return false;
+
+            const hasHTML = clipboardData.types.includes("text/html");
+            if (hasHTML) return false;
+
+            const text = clipboardData.getData("text/plain");
+            if (!text || !looksLikeMarkdown(text)) return false;
+
+            event.preventDefault();
+
+            const html = marked.parse(text, { async: false }) as string;
+            editor.commands.insertContent(html, {
+              parseOptions: { preserveWhitespace: false },
+            });
+
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/editor/SlashCommands.tsx

@@ -0,0 +1,357 @@
+/**
+ * Slash commands extension -- type "/" to open a menu of block types.
+ * Uses @tiptap/suggestion for trigger/matching and a React component for the popup.
+ */
+
+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";
+
+// ===========================================================================
+// Slash Command Items
+// ===========================================================================
+
+export interface SlashCommandItem {
+  title: string;
+  description: string;
+  icon: string;
+  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();
+      }
+    },
+  },
+];
+
+// ===========================================================================
+// SlashCommandsList (React popup)
+// ===========================================================================
+
+interface SlashCommandsListProps {
+  items: SlashCommandItem[];
+  command: (item: SlashCommandItem) => void;
+}
+
+interface SlashCommandsListRef {
+  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
+}
+
+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],
+    );
+
+    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",
+  },
+};
+
+// ===========================================================================
+// SlashCommands Extension
+// ===========================================================================
+
+export const SlashCommands = Extension.create({
+  name: "slashCommands",
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        startOfLine: false,
+        items: ({ query }: { query: string }) => {
+          const q = query.toLowerCase();
+          return SLASH_ITEMS.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;
+            },
+          };
+        },
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: SlashCommandItem;
+        }) => {
+          props.command({ editor, range });
+        },
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});