@multiplatform.one/rich-text 6.0.0

package/src/editor/TiptapEditor.tsx

@@ -0,0 +1,616 @@
+/**
+ * Tiptap-based rich text editor for web
+ *
+ * Uses extracted utilities:
+ * - getEditorCSS() for ProseMirror styles (theme-aware CSS custom properties)
+ * - getEditorStateFromTiptap() for state mapping
+ * - RichEditorContext for styling context
+ * - BubbleToolbar for inline formatting on text selection
+ */
+
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import { Extension } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import { Color } from "@tiptap/extension-color";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Image from "@tiptap/extension-image";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Typography from "@tiptap/extension-typography";
+import CharacterCount from "@tiptap/extension-character-count";
+
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { common, createLowlight } from "lowlight";
+import TurndownService from "turndown";
+import { marked } from "marked";
+import { View, styled } from "tamagui";
+import { isWeb } from "@tamagui/constants";
+import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
+import { defaultEditorState } from "../types";
+import { RichEditorContext } from "../context";
+import { getEditorCSS } from "./editorStyles";
+import { SlashCommands } from "./SlashCommands";
+import { MarkdownPaste } from "./MarkdownPaste";
+import { BlockDragHandle } from "./BlockDragHandle";
+import { getEditorStateFromTiptap } from "./useEditorState";
+import { BubbleToolbar } from "../toolbar/BubbleToolbar";
+import { LinkBubble } from "../toolbar/LinkBubble";
+import { CodeBlockBubble } from "../toolbar/CodeBlockBubble";
+import { ImageBubble } from "../toolbar/ImageBubble";
+import { TableBubble } from "../toolbar/TableBubble";
+
+const lowlight = createLowlight(common);
+const turndownService = new TurndownService({ headingStyle: "atx", codeBlockStyle: "fenced" });
+
+/**
+ * Tab / Shift-Tab indentation inside code blocks.
+ * Inserts or removes 2 spaces at the cursor (or start of each selected line).
+ */
+const CodeBlockTabIndent = Extension.create({
+  name: "codeBlockTabIndent",
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        if (!editor.isActive("codeBlock")) return false;
+        const { state, dispatch } = editor.view;
+        const { from, to } = state.selection;
+
+        if (from === to) {
+          dispatch(state.tr.insertText("  ", from, to));
+          return true;
+        }
+
+        const doc = state.doc;
+        const lines: { start: number }[] = [];
+        doc.nodesBetween(from, to, (node, pos) => {
+          if (node.isTextblock) {
+            lines.push({ start: pos + 1 });
+          }
+        });
+        if (lines.length === 0) {
+          dispatch(state.tr.insertText("  ", from, to));
+          return true;
+        }
+
+        let tr = state.tr;
+        let offset = 0;
+        for (const line of lines) {
+          const lineStart = line.start + offset;
+          tr = tr.insertText("  ", lineStart);
+          offset += 2;
+        }
+        dispatch(tr);
+        return true;
+      },
+      "Shift-Tab": ({ editor }) => {
+        if (!editor.isActive("codeBlock")) return false;
+        const { state, dispatch } = editor.view;
+        const { from, to, $from } = state.selection;
+
+        if (from === to) {
+          const lineStart = from - $from.parentOffset;
+          const text = state.doc.textBetween(lineStart, from);
+          const leadingSpaces = text.match(/^ {1,2}/)?.[0];
+          if (leadingSpaces) {
+            dispatch(state.tr.delete(lineStart, lineStart + leadingSpaces.length));
+          }
+          return true;
+        }
+
+        const doc = state.doc;
+        let tr = state.tr;
+        let offset = 0;
+        doc.nodesBetween(from, to, (node, pos) => {
+          if (node.isTextblock) {
+            const lineStart = pos + 1 + offset;
+            const text = tr.doc.textBetween(
+              lineStart,
+              Math.min(lineStart + node.content.size, tr.doc.content.size),
+            );
+            const leadingSpaces = text.match(/^ {1,2}/)?.[0];
+            if (leadingSpaces) {
+              tr = tr.delete(lineStart, lineStart + leadingSpaces.length);
+              offset -= leadingSpaces.length;
+            }
+          }
+        });
+        dispatch(tr);
+        return true;
+      },
+    };
+  },
+});
+
+/**
+ * Override Shift-Enter and Mod-Enter to create new paragraphs instead of
+ * hard breaks (<br>). Mirrors GitLab's approach: HardBreak node stays
+ * registered (so <br> in pasted HTML is preserved) but its keyboard
+ * shortcuts are replaced with the default enter (split paragraph) behavior.
+ */
+const ParagraphEnterKeys = Extension.create({
+  name: "paragraphEnterKeys",
+  priority: 1000,
+  addKeyboardShortcuts() {
+    return {
+      "Shift-Enter": ({ editor }) =>
+        editor.commands.first([
+          () => editor.commands.newlineInCode(),
+          () => editor.commands.splitListItem("listItem"),
+          () => editor.commands.createParagraphNear(),
+          () => editor.commands.liftEmptyBlock(),
+          () => editor.commands.splitBlock(),
+        ]),
+      "Mod-Enter": ({ editor }) =>
+        editor.commands.first([
+          () => editor.commands.newlineInCode(),
+          () => editor.commands.createParagraphNear(),
+          () => editor.commands.liftEmptyBlock(),
+          () => editor.commands.splitBlock(),
+        ]),
+    };
+  },
+});
+
+/**
+ * Tab/Shift-Tab indent/dedent and Alt+Arrow move for list items.
+ * Tab sinks (indents), Shift-Tab lifts (dedents).
+ * Alt+Up/Down moves the list item up or down among siblings.
+ */
+const ListItemKeys = Extension.create({
+  name: "listItemKeys",
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        if (editor.isActive("codeBlock")) return false;
+        if (
+          editor.isActive("bulletList") ||
+          editor.isActive("orderedList") ||
+          editor.isActive("taskList")
+        ) {
+          return (
+            editor.commands.sinkListItem("listItem") || editor.commands.sinkListItem("taskItem")
+          );
+        }
+        return false;
+      },
+      "Shift-Tab": ({ editor }) => {
+        if (editor.isActive("codeBlock")) return false;
+        if (
+          editor.isActive("bulletList") ||
+          editor.isActive("orderedList") ||
+          editor.isActive("taskList")
+        ) {
+          return (
+            editor.commands.liftListItem("listItem") || editor.commands.liftListItem("taskItem")
+          );
+        }
+        return false;
+      },
+    };
+  },
+});
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface TiptapEditorProps extends RichEditorProps {
+  /** Show the bubble toolbar on text selection (web only) */
+  showBubbleToolbar?: boolean;
+  /** CSS font-family string for body text (resolved from knobs) */
+  bodyFontFamily?: string;
+  /** CSS font-family string for headings (resolved from knobs) */
+  headingFontFamily?: string;
+  /** Current editing mode: richtext (WYSIWYG) or markdown (raw source) */
+  editorMode?: "richtext" | "markdown";
+}
+
+// ===========================================================================
+// Styled Container
+// ===========================================================================
+
+const EditorContainer = styled(View, {
+  name: "TiptapEditorContainer",
+  flex: 1,
+  minHeight: 150,
+  overflow: "hidden",
+});
+
+// ===========================================================================
+// TiptapEditor
+// ===========================================================================
+
+export const TiptapEditor = memo(
+  forwardRef<RichEditorRef, TiptapEditorProps>(
+    (
+      {
+        initialContent = "",
+        initialJSON,
+        placeholder = "Start writing...",
+        editable = true,
+        autoFocus = false,
+        onChange,
+        onStateChange,
+        onFocus,
+        onBlur,
+        minHeight = 150,
+        maxHeight,
+        hasError: _hasError,
+        showBubbleToolbar = false,
+        bodyFontFamily,
+        headingFontFamily,
+        editorMode = "richtext",
+      },
+      ref,
+    ) => {
+      const _ctx = RichEditorContext.useStyledContext();
+      const internalRef = useRef<RichEditorRef>(null);
+      const stateRafRef = useRef<number>(0);
+      const changeRafRef = useRef<number>(0);
+      const onStateChangeRef = useRef(onStateChange);
+      const onChangeRef = useRef(onChange);
+      const [markdownSource, setMarkdownSource] = useState("");
+      const prevModeRef = useRef(editorMode);
+
+      useEffect(() => {
+        onStateChangeRef.current = onStateChange;
+        onChangeRef.current = onChange;
+      });
+
+      const editor = useEditor({
+        extensions: [
+          StarterKit.configure({
+            heading: {
+              levels: [1, 2, 3, 4, 5, 6],
+              HTMLAttributes: { dir: "auto" },
+            },
+            paragraph: {
+              HTMLAttributes: { dir: "auto" },
+            },
+            link: {
+              openOnClick: false,
+              HTMLAttributes: {
+                rel: "noopener noreferrer",
+                target: "_blank",
+              },
+            },
+            bulletList: {
+              keepMarks: true,
+            },
+            orderedList: {
+              keepMarks: true,
+            },
+            codeBlock: false,
+            hardBreak: false,
+          }),
+          CodeBlockLowlight.configure({
+            lowlight,
+            exitOnTripleEnter: true,
+            exitOnArrowDown: false,
+          }),
+          ParagraphEnterKeys,
+          CodeBlockTabIndent,
+          ListItemKeys,
+          Typography,
+          CharacterCount,
+          SlashCommands,
+          MarkdownPaste,
+          BlockDragHandle,
+          Table.configure({ resizable: true }),
+          TableRow,
+          TableHeader,
+          TableCell,
+          Placeholder.configure({
+            placeholder,
+          }),
+          TextAlign.configure({
+            types: ["heading", "paragraph"],
+            defaultAlignment: "left",
+          }),
+          TextStyle,
+          Color,
+          Highlight.configure({
+            multicolor: true,
+          }),
+          Subscript,
+          Superscript,
+          TaskList,
+          TaskItem.configure({
+            nested: true,
+          }),
+          Image.configure({
+            inline: true,
+            allowBase64: true,
+          }),
+        ],
+        content: initialJSON || initialContent,
+        editable,
+        autofocus: autoFocus,
+        injectCSS: false,
+        immediatelyRender: false,
+        shouldRerenderOnTransaction: false,
+        onUpdate: ({ editor }) => {
+          cancelAnimationFrame(changeRafRef.current);
+          changeRafRef.current = requestAnimationFrame(() => {
+            const html = editor.getHTML();
+            const json = editor.getJSON();
+            onChangeRef.current?.(html, json);
+          });
+        },
+        onTransaction: ({ editor }) => {
+          cancelAnimationFrame(stateRafRef.current);
+          stateRafRef.current = requestAnimationFrame(() => {
+            onStateChangeRef.current?.(getEditorStateFromTiptap(editor));
+          });
+        },
+        onFocus: () => onFocus?.(),
+        onBlur: () => onBlur?.(),
+      });
+
+      useEffect(() => {
+        if (!editor) return;
+        if (prevModeRef.current === editorMode) return;
+        prevModeRef.current = editorMode;
+
+        if (editorMode === "markdown") {
+          setMarkdownSource(turndownService.turndown(editor.getHTML()));
+        } else {
+          const html = marked.parse(markdownSource, { async: false }) as string;
+          editor.commands.setContent(html);
+        }
+      }, [editorMode, editor, markdownSource]);
+
+      const handleMarkdownChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const md = e.target.value;
+        setMarkdownSource(md);
+        const html = marked.parse(md, { async: false }) as string;
+        onChangeRef.current?.(html, null);
+      }, []);
+
+      const executeCommand = useCallback(
+        (command: EditorCommand, payload?: any) => {
+          if (!editor) return;
+
+          const chain = editor.chain().focus();
+
+          switch (command) {
+            case "bold":
+              chain.toggleBold().run();
+              break;
+            case "italic":
+              chain.toggleItalic().run();
+              break;
+            case "underline":
+              chain.toggleUnderline().run();
+              break;
+            case "strike":
+              chain.toggleStrike().run();
+              break;
+            case "code":
+              chain.toggleCode().run();
+              break;
+            case "subscript":
+              chain.toggleSubscript().run();
+              break;
+            case "superscript":
+              chain.toggleSuperscript().run();
+              break;
+            case "heading1":
+              chain.toggleHeading({ level: 1 }).run();
+              break;
+            case "heading2":
+              chain.toggleHeading({ level: 2 }).run();
+              break;
+            case "heading3":
+              chain.toggleHeading({ level: 3 }).run();
+              break;
+            case "heading4":
+              chain.toggleHeading({ level: 4 }).run();
+              break;
+            case "heading5":
+              chain.toggleHeading({ level: 5 }).run();
+              break;
+            case "heading6":
+              chain.toggleHeading({ level: 6 }).run();
+              break;
+            case "paragraph":
+              chain.setParagraph().run();
+              break;
+            case "bulletList":
+              chain.toggleBulletList().run();
+              break;
+            case "orderedList":
+              chain.toggleOrderedList().run();
+              break;
+            case "taskList":
+              chain.toggleTaskList().run();
+              break;
+            case "image":
+              if (payload?.src) {
+                chain.setImage({ src: payload.src, alt: payload.alt || "" }).run();
+              }
+              break;
+            case "blockquote":
+              chain.toggleBlockquote().run();
+              break;
+            case "codeBlock":
+              chain.toggleCodeBlock().run();
+              break;
+            case "link":
+              if (payload?.href) {
+                chain.setLink({ href: payload.href }).run();
+              } else {
+                chain.unsetLink().run();
+              }
+              break;
+            case "undo":
+              chain.undo().run();
+              break;
+            case "redo":
+              chain.redo().run();
+              break;
+            case "alignLeft":
+              chain.setTextAlign("left").run();
+              break;
+            case "alignCenter":
+              chain.setTextAlign("center").run();
+              break;
+            case "alignRight":
+              chain.setTextAlign("right").run();
+              break;
+            case "alignJustify":
+              chain.setTextAlign("justify").run();
+              break;
+            case "textColor":
+              if (payload?.color) {
+                chain.setColor(payload.color).run();
+              } else {
+                chain.unsetColor().run();
+              }
+              break;
+            case "highlight":
+              if (payload?.color) {
+                chain.setHighlight({ color: payload.color }).run();
+              } else {
+                chain.unsetHighlight().run();
+              }
+              break;
+            case "horizontalRule":
+              chain.setHorizontalRule().run();
+              break;
+            case "clearFormatting":
+              chain.unsetAllMarks().clearNodes().run();
+              break;
+            case "insertTable":
+              chain
+                .insertTable({
+                  rows: payload?.rows ?? 3,
+                  cols: payload?.cols ?? 3,
+                  withHeaderRow: payload?.withHeaderRow ?? true,
+                })
+                .run();
+              break;
+            case "addColumnBefore":
+              chain.addColumnBefore().run();
+              break;
+            case "addColumnAfter":
+              chain.addColumnAfter().run();
+              break;
+            case "deleteColumn":
+              chain.deleteColumn().run();
+              break;
+            case "addRowBefore":
+              chain.addRowBefore().run();
+              break;
+            case "addRowAfter":
+              chain.addRowAfter().run();
+              break;
+            case "deleteRow":
+              chain.deleteRow().run();
+              break;
+            case "deleteTable":
+              chain.deleteTable().run();
+              break;
+            case "mergeCells":
+              chain.mergeCells().run();
+              break;
+            case "splitCell":
+              chain.splitCell().run();
+              break;
+            case "toggleHeaderRow":
+              chain.toggleHeaderRow().run();
+              break;
+          }
+        },
+        [editor],
+      );
+
+      const refMethods = useMemo<RichEditorRef>(
+        () => ({
+          executeCommand,
+          getState: () => getEditorStateFromTiptap(editor),
+          getHTML: () => editor?.getHTML() || "",
+          getJSON: () => editor?.getJSON() || null,
+          setHTML: (html: string) => editor?.commands.setContent(html),
+          setJSON: (json: any) => editor?.commands.setContent(json),
+          focus: () => editor?.commands.focus(),
+          blur: () => editor?.commands.blur(),
+        }),
+        [editor, executeCommand],
+      );
+
+      useImperativeHandle(ref, () => refMethods, [refMethods]);
+      (internalRef as any).current = refMethods;
+
+      const editorCSS = useMemo(
+        () => getEditorCSS({ minHeight, maxHeight, bodyFontFamily, headingFontFamily }),
+        [minHeight, maxHeight, bodyFontFamily, headingFontFamily],
+      );
+
+      if (editorMode === "markdown") {
+        return (
+          <EditorContainer minHeight={minHeight} maxHeight={maxHeight} overflow="hidden">
+            <textarea
+              value={markdownSource}
+              onChange={handleMarkdownChange}
+              style={{
+                width: "100%",
+                minHeight: minHeight,
+                maxHeight: maxHeight || undefined,
+                padding: "12px 12px 12px 16px",
+                border: "none",
+                outline: "none",
+                resize: "none",
+                background: "transparent",
+                color: "inherit",
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                fontSize: "0.875em",
+                lineHeight: "1.6",
+                overflow: "auto",
+                boxSizing: "border-box",
+              }}
+              spellCheck={false}
+            />
+          </EditorContainer>
+        );
+      }
+
+      return (
+        <EditorContainer minHeight={minHeight} maxHeight={maxHeight} overflow="hidden">
+          {isWeb && <style>{editorCSS}</style>}
+          {showBubbleToolbar && (
+            <>
+              <BubbleToolbar editor={editor} editorRef={internalRef} state={defaultEditorState} />
+              <LinkBubble editor={editor} />
+              <CodeBlockBubble editor={editor} />
+              <ImageBubble editor={editor} />
+              <TableBubble editor={editor} />
+            </>
+          )}
+          <EditorContent editor={editor} />
+        </EditorContainer>
+      );
+    },
+  ),
+);
+
+TiptapEditor.displayName = "TiptapEditor";

package/src/editor/editorStyles.spec.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { getEditorCSS } from "./editorStyles";
+
+describe("getEditorCSS", () => {
+  it("returns a non-empty CSS string containing Tamagui CSS custom properties", () => {
+    const css = getEditorCSS();
+    expect(css.length).toBeGreaterThan(0);
+    expect(css).toContain("var(--color");
+    expect(css).toContain("var(--blue10");
+  });
+
+  it("applies minHeight and maxHeight options", () => {
+    const css = getEditorCSS({ minHeight: 200, maxHeight: 500 });
+    expect(css).toContain("min-height: 200px");
+    expect(css).toContain("max-height: 500px");
+    expect(css).toContain("overflow-y: auto");
+  });
+
+  it("omits maxHeight styles when not provided", () => {
+    const css = getEditorCSS({ minHeight: 100 });
+    expect(css).toContain("min-height: 100px");
+    expect(css).not.toContain("max-height");
+  });
+});