@multiplatform.one/rich-text 6.3.0 → 6.4.0

package/src/editor/extensions.ts

@@ -0,0 +1,315 @@
+/**
+ * Extension factory for the web Tiptap editor.
+ *
+ * One canonical list (LC-16) consumed by TiptapEditor AND by the
+ * capability specs, so what ships is exactly what is verified. With
+ * `capabilities: "markdown"` the non-markdown extensions are NOT
+ * registered — their commands do not exist on the editor (LC-52
+ * MARKDOWN-EXPRESSIBLE-EDITING), and StarterKit's underline sub-extension
+ * is disabled.
+ */
+
+import { Extension, type Extensions } 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 Typography from "@tiptap/extension-typography";
+import CharacterCount from "@tiptap/extension-character-count";
+import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
+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 type { EditorCapabilities } from "../types";
+import { MARKDOWN_EXCLUDED_SLASH_IDS } from "./capabilities";
+import { SlashCommands } from "./SlashCommands";
+import { MarkdownPaste } from "./MarkdownPaste";
+import { BlockDragHandle } from "./BlockDragHandle";
+import { MediaUpload } from "./media";
+import { EmojiSuggestion } from "./emoji";
+import { InlineMath } from "./mathematics";
+import { CodeBlockWithPreview, PreviewChromeStore } from "./codeBlockPreview";
+import { SuggestionChromeStore } from "./suggestionPopup";
+import { t } from "../shared/t";
+
+const lowlight = createLowlight(common);
+
+/**
+ * Tab / Shift-Tab indentation inside code blocks.
+ * Inserts or removes 2 spaces at the cursor (or start of each selected line).
+ */
+export 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.
+ */
+export 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.
+ */
+export 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;
+      },
+    };
+  },
+});
+
+// ===========================================================================
+// Factory
+// ===========================================================================
+
+export interface BuildEditorExtensionsOptions {
+  /** Capability preset (default "full") */
+  capabilities?: EditorCapabilities;
+  /** Placeholder text (defaults to the translated "Start writing...") */
+  placeholder?: string;
+  /** Pre-built mention extension (ignored in markdown capabilities) */
+  mentionExtension?: Extensions[number] | null;
+}
+
+/** Build the production extension list for the given capability surface */
+export function buildEditorExtensions({
+  capabilities = "full",
+  placeholder,
+  mentionExtension = null,
+}: BuildEditorExtensionsOptions = {}): Extensions {
+  const markdown = capabilities === "markdown";
+
+  return [
+    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,
+      // Markdown has no underline syntax — the mark must not exist
+      ...(markdown && { underline: false }),
+    }),
+    CodeBlockWithPreview.configure({
+      lowlight,
+      exitOnTripleEnter: true,
+      exitOnArrowDown: false,
+    }),
+    ParagraphEnterKeys,
+    CodeBlockTabIndent,
+    ListItemKeys,
+    // superscriptTwo/Three would mangle typed TeX (`$E=mc^2$` became
+    // `E=mc²` before the math input rule ran) — off, rest stays.
+    Typography.configure({
+      superscriptTwo: false,
+      superscriptThree: false,
+    }),
+    CharacterCount,
+    SlashCommands.configure({
+      excludeIds: markdown ? [...MARKDOWN_EXCLUDED_SLASH_IDS] : [],
+    }),
+    MarkdownPaste,
+    MediaUpload,
+    SuggestionChromeStore,
+    PreviewChromeStore,
+    // Emoji suggestions insert plain unicode characters (just text), so
+    // they stay available in markdown capabilities.
+    EmojiSuggestion,
+    ...(markdown
+      ? []
+      : [
+          InlineMath,
+          // Collapsible sections (GitLab <details> parity). persist: true
+          // is the extension's supported mode: its node view re-syncs the
+          // open state from node.attrs on every update, so ephemeral
+          // (persist: false) toggles get reverted by the next transaction.
+          // The open state therefore lives in the doc and serializes as
+          // `<details open>` — valid GitLab markdown.
+          Details.configure({ persist: true }),
+          DetailsSummary,
+          DetailsContent,
+        ]),
+    // Mention chips have no markdown representation — full surface only
+    ...(mentionExtension && !markdown ? [mentionExtension] : []),
+    BlockDragHandle,
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    Placeholder.configure({
+      placeholder: placeholder ?? t("Start writing..."),
+    }),
+    ...(markdown
+      ? []
+      : [
+          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,
+    }),
+  ];
+}

package/src/index.ts

@@ -13,7 +13,10 @@ export type { RichTextEditorProps } from "./RichTextEditor";
 export type {
   RichEditorRef,
   RichEditorProps,
+  EditorCapabilities,
   EditorCommand,
   EditorState,
   RichTextMentionOptions,
 } from "./types";
+
+export { MARKDOWN_COMMANDS, isCommandInCapabilities } from "./editor/capabilities";

package/src/toolbar/BubbleToolbar.tsx

@@ -14,8 +14,9 @@ import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { XStack } from "tamagui";
-import type { EditorState, RichEditorRef } from "../types";
+import type { EditorCapabilities, EditorState, RichEditorRef } from "../types";
 import { defaultEditorState } from "../types";
+import { isCommandInCapabilities } from "../editor/capabilities";
 import { ToolbarButton } from "./ToolbarButton";
 import {
   BoldIcon,
@@ -42,6 +43,8 @@ export interface BubbleToolbarProps {
   editorRef: React.RefObject<RichEditorRef | null>;
   /** Current editor state */
   state?: EditorState;
+  /** Capability surface — markdown hides non-markdown controls (default "full") */
+  capabilities?: EditorCapabilities;
 }
 
 // ===========================================================================
@@ -52,8 +55,11 @@ export function BubbleToolbar({
   editor,
   editorRef,
   state = defaultEditorState,
+  capabilities = "full",
 }: BubbleToolbarProps) {
   const { knobProps } = useResolvedKnobs();
+  const has = (command: Parameters<typeof isCommandInCapabilities>[0]) =>
+    isCommandInCapabilities(command, capabilities);
 
   if (!editor) return null;
 
@@ -97,14 +103,16 @@ export function BubbleToolbar({
           <ItalicIcon>I</ItalicIcon>
         </ToolbarButton>
 
-        <ToolbarButton
-          active={state.isUnderline}
-          onPress={() => editorRef.current?.executeCommand("underline")}
-          aria-label={t("Underline")}
-          tooltip={SHORTCUTS.underline}
-        >
-          <UnderlineIcon>U</UnderlineIcon>
-        </ToolbarButton>
+        {has("underline") && (
+          <ToolbarButton
+            active={state.isUnderline}
+            onPress={() => editorRef.current?.executeCommand("underline")}
+            aria-label={t("Underline")}
+            tooltip={SHORTCUTS.underline}
+          >
+            <UnderlineIcon>U</UnderlineIcon>
+          </ToolbarButton>
+        )}
 
         <ToolbarButton
           active={state.isStrike}
@@ -124,27 +132,31 @@ export function BubbleToolbar({
           <InlineCodeIcon />
         </ToolbarButton>
 
-        <ToolbarButton
-          active={state.isSubscript}
-          onPress={() => editorRef.current?.executeCommand("subscript")}
-          aria-label={t("Subscript")}
-          tooltip={SHORTCUTS.subscript}
-        >
-          <SubscriptIcon />
-        </ToolbarButton>
+        {has("subscript") && (
+          <ToolbarButton
+            active={state.isSubscript}
+            onPress={() => editorRef.current?.executeCommand("subscript")}
+            aria-label={t("Subscript")}
+            tooltip={SHORTCUTS.subscript}
+          >
+            <SubscriptIcon />
+          </ToolbarButton>
+        )}
 
-        <ToolbarButton
-          active={state.isSuperscript}
-          onPress={() => editorRef.current?.executeCommand("superscript")}
-          aria-label={t("Superscript")}
-          tooltip={SHORTCUTS.superscript}
-        >
-          <SuperscriptIcon />
-        </ToolbarButton>
+        {has("superscript") && (
+          <ToolbarButton
+            active={state.isSuperscript}
+            onPress={() => editorRef.current?.executeCommand("superscript")}
+            aria-label={t("Superscript")}
+            tooltip={SHORTCUTS.superscript}
+          >
+            <SuperscriptIcon />
+          </ToolbarButton>
+        )}
 
-        {/* Color pickers */}
-        <TextColorPicker editorRef={editorRef} state={state} />
-        <HighlightColorPicker editorRef={editorRef} state={state} />
+        {/* Color pickers — no markdown syntax (LC-52) */}
+        {has("textColor") && <TextColorPicker editorRef={editorRef} state={state} />}
+        {has("highlight") && <HighlightColorPicker editorRef={editorRef} state={state} />}
 
         {/* Link */}
         <LinkDialog editorRef={editorRef} state={state} />

package/src/toolbar/FixedToolbar.tsx

@@ -10,8 +10,9 @@
 
 import { useCallback, useEffect, useRef } from "react";
 import { XStack } from "tamagui";
-import type { EditorState, RichEditorRef, ToolbarSection } from "../types";
+import type { EditorCapabilities, EditorState, RichEditorRef, ToolbarSection } from "../types";
 import { defaultEditorState } from "../types";
+import { isCommandInCapabilities } from "../editor/capabilities";
 import { ToolbarFrame } from "../styled";
 import { ToolbarButton } from "./ToolbarButton";
 import { ToolbarGroup } from "./ToolbarGroup";
@@ -53,6 +54,8 @@ export interface FixedToolbarProps {
   state?: EditorState;
   /** Toolbar sections to show (shows all when omitted) */
   sections?: ToolbarSection[];
+  /** Capability surface — markdown hides non-markdown controls (default "full") */
+  capabilities?: EditorCapabilities;
   /** Whether the toolbar has an error state */
   hasError?: boolean;
   /** Whether the editor is in fullscreen mode */
@@ -84,6 +87,7 @@ export function FixedToolbar({
   editorRef,
   state = defaultEditorState,
   sections,
+  capabilities = "full",
   hasError,
   fullscreen,
   onFullscreenToggle,
@@ -191,14 +195,16 @@ export function FixedToolbar({
             >
               <ItalicIcon>I</ItalicIcon>
             </ToolbarButton>
-            <ToolbarButton
-              active={state.isUnderline}
-              onPress={() => executeCommand("underline")}
-              aria-label={t("Underline")}
-              tooltip={SHORTCUTS.underline}
-            >
-              <UnderlineIcon>U</UnderlineIcon>
-            </ToolbarButton>
+            {isCommandInCapabilities("underline", capabilities) && (
+              <ToolbarButton
+                active={state.isUnderline}
+                onPress={() => executeCommand("underline")}
+                aria-label={t("Underline")}
+                tooltip={SHORTCUTS.underline}
+              >
+                <UnderlineIcon>U</UnderlineIcon>
+              </ToolbarButton>
+            )}
             <ToolbarButton
               active={state.isStrike}
               onPress={() => executeCommand("strike")}
@@ -209,8 +215,10 @@ export function FixedToolbar({
             </ToolbarButton>
           </ToolbarGroup>
 
-          {/* Color */}
-          <ToolbarGroup visible={visible("color")}>
+          {/* Color — no markdown syntax for color/highlight (LC-52) */}
+          <ToolbarGroup
+            visible={visible("color") && isCommandInCapabilities("textColor", capabilities)}
+          >
             <TextColorPicker editorRef={editorRef} state={state} />
             <HighlightColorPicker editorRef={editorRef} state={state} />
           </ToolbarGroup>
@@ -268,7 +276,7 @@ export function FixedToolbar({
             }
             showSeparator={false}
           >
-            <MoreDropdown editorRef={editorRef} state={state} />
+            <MoreDropdown editorRef={editorRef} state={state} capabilities={capabilities} />
           </ToolbarGroup>
         </XStack>
       </div>

package/src/toolbar/MoreDropdown.tsx

@@ -7,7 +7,8 @@ import type React from "react";
 import { DotsThreeIcon } from "@phosphor-icons/react";
 import { useRef, useState } from "react";
 import { DropdownMenu } from "@multiplatform.one/components";
-import type { EditorCommand, EditorState, RichEditorRef } from "../types";
+import type { EditorCapabilities, EditorCommand, EditorState, RichEditorRef } from "../types";
+import { isCommandInCapabilities } from "../editor/capabilities";
 import { ToolbarButton } from "./ToolbarButton";
 import {
   SubscriptIcon,
@@ -25,6 +26,8 @@ import { t } from "../shared/t";
 export interface MoreDropdownProps {
   editorRef: React.RefObject<RichEditorRef | null>;
   state: EditorState;
+  /** Capability surface — markdown drops sub/superscript and alignment */
+  capabilities?: EditorCapabilities;
   disabled?: boolean;
 }
 
@@ -130,7 +133,12 @@ function ItemSection({
   );
 }
 
-export function MoreDropdown({ editorRef, state, disabled }: MoreDropdownProps) {
+export function MoreDropdown({
+  editorRef,
+  state,
+  capabilities = "full",
+  disabled,
+}: MoreDropdownProps) {
   const [open, setOpen] = useState(false);
   const selectedRef = useRef(false);
 
@@ -142,6 +150,14 @@ export function MoreDropdown({ editorRef, state, disabled }: MoreDropdownProps)
     }
   };
 
+  // Sections whose commands markdown cannot express disappear whole (LC-52)
+  const inlineItems = INLINE_ITEMS.filter((item) =>
+    isCommandInCapabilities(item.command, capabilities),
+  );
+  const alignItems = ALIGN_ITEMS.filter((item) =>
+    isCommandInCapabilities(item.command, capabilities),
+  );
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} placement="bottom-end">
       <DropdownMenu.Trigger asChild>
@@ -167,10 +183,18 @@ export function MoreDropdown({ editorRef, state, disabled }: MoreDropdownProps)
           }
         }}
       >
-        <ItemSection items={INLINE_ITEMS} state={state} onSelect={handleSelect} />
-        <DropdownMenu.Separator />
-        <ItemSection items={ALIGN_ITEMS} state={state} onSelect={handleSelect} />
-        <DropdownMenu.Separator />
+        {inlineItems.length > 0 && (
+          <>
+            <ItemSection items={inlineItems} state={state} onSelect={handleSelect} />
+            <DropdownMenu.Separator />
+          </>
+        )}
+        {alignItems.length > 0 && (
+          <>
+            <ItemSection items={alignItems} state={state} onSelect={handleSelect} />
+            <DropdownMenu.Separator />
+          </>
+        )}
         <ItemSection items={BLOCK_ITEMS} state={state} onSelect={handleSelect} />
       </DropdownMenu.Content>
     </DropdownMenu>