mardora 1.2.0

package/src/editor/selection-toolbar/types.ts

@@ -0,0 +1,155 @@
+import type { MardoraIconName } from "../icons";
+import type { MardoraLocale } from "../i18n";
+import type { SelectionToolbarMessages } from "./i18n";
+
+export type MardoraSelectionToolbarConfig = {
+  enabled?: boolean;
+  locale?: MardoraLocale;
+};
+
+export type SelectionToolbarPlacement = "top" | "bottom";
+
+export type SelectionToolbarAnchorRect = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+
+export type SelectionToolbarViewport = {
+  width: number;
+  height: number;
+};
+
+export type SelectionToolbarFloatingSize = {
+  width: number;
+  height: number;
+};
+
+export type SelectionToolbarBoundary = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+
+export type SelectionToolbarLayoutInput = {
+  anchor: SelectionToolbarAnchorRect;
+  viewport: SelectionToolbarViewport;
+  boundary?: SelectionToolbarBoundary;
+  floating: SelectionToolbarFloatingSize;
+};
+
+export type SelectionToolbarLayout = {
+  placement: SelectionToolbarPlacement;
+  left: number;
+  top: number;
+  maxHeight: number;
+};
+
+export type SelectionToolbarActionId =
+  | "block-type"
+  | "bold"
+  | "italic"
+  | "strike"
+  | "underline"
+  | "code"
+  | "highlight"
+  | "color"
+  | "link"
+  | "ordered-list"
+  | "unordered-list"
+  | "task-list";
+
+export type SelectionToolbarButton = {
+  id: SelectionToolbarActionId;
+  label: string;
+  icon: MardoraIconName;
+  text?: string;
+  active?: boolean;
+};
+
+export type TextChange = {
+  from: number;
+  to: number;
+  insert: string;
+};
+
+export type TextSelection = {
+  anchor: number;
+  head?: number;
+};
+
+export type TextCommandResult = {
+  changes: TextChange | TextChange[];
+  selection?: TextSelection;
+};
+
+export type InlineFormatInput = {
+  doc: string;
+  from: number;
+  to: number;
+  marker?: string;
+  htmlTag?: "u";
+  spanStyle?: {
+    property: "color" | "background-color";
+    value: string;
+  };
+  clear?: boolean;
+};
+
+export type ParsedSelectionLink =
+  | { kind: "markdown-link"; title: string; url: string }
+  | { kind: "url"; title: string; url: string }
+  | { kind: "text"; title: string; url: string };
+
+export type LinkChangeInput = {
+  from: number;
+  to: number;
+  title: string;
+  url: string;
+  remove?: boolean;
+};
+
+export type SelectionToolbarListKind = "ordered" | "unordered" | "task";
+export type SelectionToolbarBlockType = "text" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6";
+
+export type SelectionToolbarPanel = "toolbar" | "link" | "color" | "highlight" | "block-type";
+
+export type SelectionToolbarPaletteItem = {
+  id: string;
+  label: string;
+  value: string | null;
+};
+
+export type SelectionToolbarLinkState = {
+  title: string;
+  url: string;
+  canRemove: boolean;
+  error?: string;
+  copied?: boolean;
+};
+
+export type SelectionToolbarMenuState = {
+  panel: SelectionToolbarPanel;
+  buttons: SelectionToolbarButton[];
+  blockType: SelectionToolbarBlockType;
+  blockTypes: Array<{ type: SelectionToolbarBlockType; label: string; icon: MardoraIconName }>;
+  textColors: SelectionToolbarPaletteItem[];
+  highlightColors: SelectionToolbarPaletteItem[];
+  link: SelectionToolbarLinkState;
+  messages: SelectionToolbarMessages;
+};
+
+export type SelectionToolbarMenuCallbacks = {
+  onAction: (id: SelectionToolbarActionId) => void;
+  onBlockType: (type: SelectionToolbarBlockType) => void;
+  onColor: (value: string | null) => void;
+  onHighlight: (value: string | null) => void;
+  onLinkInput: (field: "title" | "url", value: string) => void;
+  onLinkSubmit: () => void;
+  onLinkCopy: () => void;
+  onLinkOpen: () => void;
+  onLinkRemove: () => void;
+  onCancelPanel: () => void;
+};

package/src/editor/slash/default-commands.ts

@@ -0,0 +1,190 @@
+import type { MardoraSlashCommand } from "./types";
+import { buildSlashReplacement } from "./insertions";
+import type { MardoraAttachmentKind } from "../attachments";
+import type { MardoraLocale } from "../i18n";
+
+type LocalizedSlashCommandCopy = {
+  title: string;
+  aliases: string[];
+};
+
+const commandCopy: Record<MardoraLocale, Record<string, LocalizedSlashCommandCopy>> = {
+  "zh-CN": {
+    paragraph: { title: "文本", aliases: ["text", "plain", "wenben"] },
+    "heading-1": { title: "标题 1", aliases: ["h1", "heading", "heading1", "biaoti", "标题"] },
+    "heading-2": { title: "标题 2", aliases: ["h2", "heading", "heading2", "biaoti", "标题"] },
+    "heading-3": { title: "标题 3", aliases: ["h3", "heading", "heading3", "biaoti", "标题"] },
+    "heading-4": { title: "标题 4", aliases: ["h4", "heading", "heading4", "biaoti", "标题"] },
+    "heading-5": { title: "标题 5", aliases: ["h5", "heading", "heading5", "biaoti", "标题"] },
+    "heading-6": { title: "标题 6", aliases: ["h6", "heading", "heading6", "biaoti", "标题"] },
+    quote: { title: "引用", aliases: ["quote", "blockquote", "yinyong"] },
+    "callout-note": {
+      title: "说明 Callout",
+      aliases: ["callout", "note", "info", "告警", "说明", "提示", "shuoming", "tishi"],
+    },
+    "callout-tip": {
+      title: "技巧 Callout",
+      aliases: ["callout", "tip", "hint", "告警", "技巧", "提示", "jiqiao", "tishi"],
+    },
+    "callout-important": { title: "重要 Callout", aliases: ["callout", "important", "告警", "重要", "zhongyao"] },
+    "callout-warning": { title: "警告 Callout", aliases: ["callout", "warning", "warn", "告警", "警告", "jinggao"] },
+    "callout-caution": {
+      title: "严重警告 Callout",
+      aliases: ["callout", "caution", "danger", "告警", "严重", "风险", "yanzhong", "fengxian"],
+    },
+    "code-block": { title: "代码块", aliases: ["code", "codeblock", "fence", "代码", "代码块", "daima"] },
+    "ordered-list": { title: "有序列表", aliases: ["ol", "ordered", "numbered", "youxu", "有序"] },
+    "unordered-list": { title: "项目符号列表", aliases: ["ul", "bullet", "unordered", "bulleted", "wuxu", "无序"] },
+    "task-list": { title: "待办清单", aliases: ["todo", "task", "check", "daiban", "待办"] },
+    table: { title: "表格", aliases: ["table", "biaoge"] },
+    divider: { title: "分隔线", aliases: ["hr", "divider", "line", "fengexian", "分隔"] },
+    link: { title: "链接", aliases: ["link", "url", "lianjie"] },
+    file: { title: "文件", aliases: ["file", "wenjian"] },
+    image: { title: "图片", aliases: ["image", "img", "tu", "tupian", "图片"] },
+    video: { title: "视频", aliases: ["video", "shipin"] },
+    audio: { title: "音频", aliases: ["audio", "music", "yinpin"] },
+  },
+  "en-US": {
+    paragraph: { title: "Text", aliases: ["文本", "text", "plain", "wenben"] },
+    "heading-1": { title: "Heading 1", aliases: ["标题", "h1", "heading", "heading1", "biaoti"] },
+    "heading-2": { title: "Heading 2", aliases: ["标题", "h2", "heading", "heading2", "biaoti"] },
+    "heading-3": { title: "Heading 3", aliases: ["标题", "h3", "heading", "heading3", "biaoti"] },
+    "heading-4": { title: "Heading 4", aliases: ["标题", "h4", "heading", "heading4", "biaoti"] },
+    "heading-5": { title: "Heading 5", aliases: ["标题", "h5", "heading", "heading5", "biaoti"] },
+    "heading-6": { title: "Heading 6", aliases: ["标题", "h6", "heading", "heading6", "biaoti"] },
+    quote: { title: "Quote", aliases: ["引用", "quote", "blockquote", "yinyong"] },
+    "callout-note": { title: "Note callout", aliases: ["说明", "提示", "告警", "callout", "note", "info"] },
+    "callout-tip": { title: "Tip callout", aliases: ["技巧", "提示", "告警", "callout", "tip", "hint"] },
+    "callout-important": { title: "Important callout", aliases: ["重要", "告警", "callout", "important"] },
+    "callout-warning": { title: "Warning callout", aliases: ["警告", "告警", "callout", "warning", "warn"] },
+    "callout-caution": { title: "Caution callout", aliases: ["严重", "风险", "告警", "callout", "caution", "danger"] },
+    "code-block": { title: "Code block", aliases: ["代码", "代码块", "code", "codeblock", "fence", "daima"] },
+    "ordered-list": { title: "Numbered list", aliases: ["有序", "ol", "ordered", "numbered", "youxu"] },
+    "unordered-list": { title: "Bulleted list", aliases: ["无序", "ul", "bullet", "unordered", "bulleted", "wuxu"] },
+    "task-list": { title: "To-do list", aliases: ["待办", "todo", "task", "check", "daiban"] },
+    table: { title: "Table", aliases: ["表格", "table", "biaoge"] },
+    divider: { title: "Divider", aliases: ["分隔", "hr", "divider", "line", "fengexian"] },
+    link: { title: "Link", aliases: ["链接", "link", "url", "lianjie"] },
+    file: { title: "File", aliases: ["文件", "file", "wenjian"] },
+    image: { title: "Image", aliases: ["图片", "image", "img", "tu", "tupian"] },
+    video: { title: "Video", aliases: ["视频", "video", "shipin"] },
+    audio: { title: "Audio", aliases: ["音频", "audio", "music", "yinpin"] },
+  },
+};
+
+function commandMeta(
+  locale: MardoraLocale,
+  id: string,
+  group: MardoraSlashCommand["group"],
+  icon: string,
+  hint: string
+): Omit<MardoraSlashCommand, "run"> {
+  const copy = commandCopy[locale][id];
+  if (!copy) {
+    throw new Error(`Missing slash command copy: ${locale}:${id}`);
+  }
+
+  return {
+    id,
+    group,
+    title: copy.title,
+    aliases: copy.aliases,
+    icon,
+    hint,
+  };
+}
+
+function markdownCommand(
+  command: Omit<MardoraSlashCommand, "run">,
+  marker: string,
+  cursorOffset: number = marker.length
+): MardoraSlashCommand {
+  return {
+    ...command,
+    run: ({ view, queryRange }) => {
+      const replacement = buildSlashReplacement({ marker, cursorOffset }, { ...queryRange, query: "" });
+      view.dispatch({
+        changes: replacement.changes,
+        selection: { anchor: replacement.selectionAnchor },
+        scrollIntoView: true,
+      });
+      view.focus();
+      return true;
+    },
+  };
+}
+
+function calloutCommand(
+  locale: MardoraLocale,
+  id: string,
+  icon: string,
+  type: "NOTE" | "TIP" | "IMPORTANT" | "WARNING" | "CAUTION"
+): MardoraSlashCommand {
+  return markdownCommand(commandMeta(locale, id, "basic", icon, `[!${type}]`), `> [!${type}]\n> `);
+}
+
+function mediaCommand(command: Omit<MardoraSlashCommand, "run">, kind: MardoraAttachmentKind): MardoraSlashCommand {
+  return {
+    ...command,
+    run: (context) => {
+      if (context.requestAttachment?.(kind, context)) {
+        return true;
+      }
+
+      const fallbackByKind: Record<MardoraAttachmentKind, string> = {
+        image: "![image](url)",
+        video: '<video src="url" controls></video>',
+        audio: '<audio src="url" controls></audio>',
+        file: "[filename](url)",
+      };
+      const fallback = fallbackByKind[kind];
+      const replacement = buildSlashReplacement(
+        { marker: fallback, cursorOffset: kind === "file" ? 1 : fallback.indexOf("url") },
+        { ...context.queryRange, query: "" }
+      );
+
+      context.view.dispatch({
+        changes: replacement.changes,
+        selection: { anchor: replacement.selectionAnchor },
+        scrollIntoView: true,
+      });
+      context.view.focus();
+      return true;
+    },
+  };
+}
+
+export function getDefaultSlashCommands(locale: MardoraLocale = "zh-CN"): MardoraSlashCommand[] {
+  return [
+    markdownCommand(commandMeta(locale, "paragraph", "basic", "type", ""), "", 0),
+    markdownCommand(commandMeta(locale, "heading-1", "basic", "heading-1", "#"), "# "),
+    markdownCommand(commandMeta(locale, "heading-2", "basic", "heading-2", "##"), "## "),
+    markdownCommand(commandMeta(locale, "heading-3", "basic", "heading-3", "###"), "### "),
+    markdownCommand(commandMeta(locale, "heading-4", "basic", "heading-4", "####"), "#### "),
+    markdownCommand(commandMeta(locale, "heading-5", "basic", "heading-5", "#####"), "##### "),
+    markdownCommand(commandMeta(locale, "heading-6", "basic", "heading-6", "######"), "###### "),
+    markdownCommand(commandMeta(locale, "quote", "basic", "text-quote", ">"), "> "),
+    calloutCommand(locale, "callout-note", "info", "NOTE"),
+    calloutCommand(locale, "callout-tip", "lightbulb", "TIP"),
+    calloutCommand(locale, "callout-important", "badge-alert", "IMPORTANT"),
+    calloutCommand(locale, "callout-warning", "triangle-alert", "WARNING"),
+    calloutCommand(locale, "callout-caution", "octagon-alert", "CAUTION"),
+    markdownCommand(commandMeta(locale, "code-block", "basic", "code-xml", "```"), "```\n\n```", 4),
+    markdownCommand(commandMeta(locale, "ordered-list", "basic", "list-ordered", "1."), "1. "),
+    markdownCommand(commandMeta(locale, "unordered-list", "basic", "list", "-"), "- "),
+    markdownCommand(commandMeta(locale, "task-list", "basic", "list-todo", "[]"), "- [ ] "),
+    markdownCommand(
+      commandMeta(locale, "table", "basic", "table", "| |"),
+      "| Column 1 | Column 2 |\n| --- | --- |\n|  |  |\n",
+      2
+    ),
+    markdownCommand(commandMeta(locale, "divider", "basic", "minus", "---"), "---\n"),
+    markdownCommand(commandMeta(locale, "link", "basic", "link", "[]()"), "[]()", 1),
+    mediaCommand(commandMeta(locale, "file", "media", "file", "file"), "file"),
+    mediaCommand(commandMeta(locale, "image", "media", "image", "img"), "image"),
+    mediaCommand(commandMeta(locale, "video", "media", "play", "video"), "video"),
+    mediaCommand(commandMeta(locale, "audio", "media", "music-2", "audio"), "audio"),
+  ];
+}
+
+export const defaultSlashCommands: MardoraSlashCommand[] = getDefaultSlashCommands("zh-CN");

package/src/editor/slash/extension.ts

@@ -0,0 +1,319 @@
+import { Extension, Prec } from "@codemirror/state";
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import type { MardoraAttachmentKind, MardoraAttachmentUploader } from "../attachments";
+import { uploadAttachmentFile } from "../attachments";
+import type { MardoraLocale } from "../i18n";
+import { resolveMardoraLocale } from "../i18n";
+import { getDefaultSlashCommands } from "./default-commands";
+import { createSlashMenuElement, getSlashMessages } from "./menu";
+import { computeSlashMenuLayout } from "./position";
+import { detectSlashQuery, filterSlashCommands } from "./query";
+import { slashMenuTheme } from "./theme";
+import type {
+  MardoraSlashCommand,
+  MardoraSlashCommandsConfig,
+  MardoraSlashMessages,
+  MardoraSlashQuery,
+} from "./types";
+
+export type MardoraSlashRuntimeConfig = MardoraSlashCommandsConfig & {
+  attachmentUploader?: MardoraAttachmentUploader | undefined;
+  inheritedLocale?: MardoraLocale | undefined;
+};
+
+export type ResolvedMardoraSlashRuntimeConfig = Required<Pick<MardoraSlashRuntimeConfig, "commands">> &
+  MardoraSlashRuntimeConfig & {
+    locale: MardoraLocale;
+    messages: MardoraSlashMessages;
+  };
+
+export function createSlashRuntimeConfig(config: MardoraSlashRuntimeConfig = {}): ResolvedMardoraSlashRuntimeConfig {
+  const locale = resolveMardoraLocale(config.locale ?? config.inheritedLocale);
+  return {
+    ...config,
+    locale,
+    commands: config.commands ?? getDefaultSlashCommands(locale),
+    messages: getSlashMessages(locale),
+  };
+}
+
+function requestFile(kind: MardoraAttachmentKind): Promise<File | null> {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = kind === "image" ? "image/*" : kind === "video" ? "video/*" : kind === "audio" ? "audio/*" : "*/*";
+    input.addEventListener("change", () => resolve(input.files?.[0] ?? null), { once: true });
+    input.click();
+  });
+}
+
+class SlashCommandViewPlugin {
+  private query: MardoraSlashQuery | null = null;
+  private commands: MardoraSlashCommand[] = [];
+  private activeIndex = 0;
+  private menu: HTMLElement | null = null;
+  private renderVersion = 0;
+  private previousCaretColor: string | null = null;
+
+  constructor(
+    private readonly view: EditorView,
+    private readonly config: ResolvedMardoraSlashRuntimeConfig
+  ) {
+    this.view.dom.ownerDocument.addEventListener("keydown", this.handleDocumentKeydown, true);
+    this.updateState();
+  }
+
+  update(update: ViewUpdate): void {
+    if (update.docChanged || update.selectionSet || update.viewportChanged) {
+      this.updateState();
+    }
+  }
+
+  destroy(): void {
+    this.view.dom.ownerDocument.removeEventListener("keydown", this.handleDocumentKeydown, true);
+    this.renderVersion += 1;
+    this.removeMenu();
+  }
+
+  move(delta: number): boolean {
+    if (!this.query || this.commands.length === 0) return false;
+    this.activeIndex = (this.activeIndex + delta + this.commands.length) % this.commands.length;
+    this.syncActiveItem("center");
+    return true;
+  }
+
+  close(): boolean {
+    if (!this.query) return false;
+    this.query = null;
+    this.commands = [];
+    this.renderVersion += 1;
+    this.removeMenu();
+    return true;
+  }
+
+  selectActive(): boolean {
+    if (!this.query || this.commands.length === 0) return false;
+    return this.select(this.activeIndex);
+  }
+
+  handleKeydown(event: KeyboardEvent): boolean {
+    if (event.key === "ArrowDown") {
+      return this.move(1);
+    }
+
+    if (event.key === "ArrowUp") {
+      return this.move(-1);
+    }
+
+    if (event.key === "Enter") {
+      return this.selectActive();
+    }
+
+    if (event.key === "Escape") {
+      return this.close();
+    }
+
+    return false;
+  }
+
+  private select(index: number): boolean {
+    const command = this.commands[index];
+    if (!this.query || !command) return false;
+
+    const queryRange = { from: this.query.from, to: this.query.to };
+    this.close();
+
+    return command.run({
+      view: this.view,
+      queryRange,
+      requestAttachment: (kind, context) => this.requestAttachment(kind, context.queryRange),
+    });
+  }
+
+  private requestAttachment(kind: MardoraAttachmentKind, queryRange: { from: number; to: number }): boolean {
+    if (!this.config.attachmentUploader) {
+      return false;
+    }
+
+    void requestFile(kind).then((file) => {
+      if (!file || !this.config.attachmentUploader) return;
+      void uploadAttachmentFile(this.view, file, {
+        kind,
+        source: "slash",
+        range: queryRange,
+        uploader: this.config.attachmentUploader,
+      });
+    });
+
+    return true;
+  }
+
+  private readonly handleDocumentKeydown = (event: KeyboardEvent): void => {
+    if (!this.query || event.defaultPrevented) return;
+
+    const handled = this.handleKeydown(event);
+    if (!handled) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  private updateState(): void {
+    const cursor = this.view.state.selection.main.head;
+    const query = detectSlashQuery(this.view.state.doc.toString(), cursor);
+
+    if (!query) {
+      this.query = null;
+      this.commands = [];
+      this.renderVersion += 1;
+      this.removeMenu();
+      return;
+    }
+
+    if (!this.query || this.query.query !== query.query || this.query.from !== query.from) {
+      this.activeIndex = 0;
+    }
+
+    this.query = query;
+    this.commands = filterSlashCommands(this.config.commands, query.query);
+    this.activeIndex = Math.min(this.activeIndex, Math.max(0, this.commands.length - 1));
+    this.renderMenu();
+  }
+
+  private renderMenu(): void {
+    if (!this.query) return;
+    const renderVersion = ++this.renderVersion;
+    const queryFrom = this.query.from;
+    this.removeMenu();
+
+    this.view.requestMeasure({
+      read: (view) => view.coordsAtPos(queryFrom),
+      write: (coords) => {
+        if (renderVersion !== this.renderVersion || !this.query || !coords) return;
+
+        this.removeMenu();
+        this.menu = createSlashMenuElement(
+          { commands: this.commands, activeIndex: this.activeIndex, messages: this.config.messages },
+          {
+            onHover: (index) => {
+              this.activeIndex = index;
+              this.syncActiveItem("nearest");
+            },
+            onSelect: (index) => {
+              this.select(index);
+            },
+          }
+        );
+
+        const layout = computeSlashMenuLayout({
+          anchor: { left: coords.left, top: coords.top, bottom: coords.bottom },
+          viewport: {
+            width: this.view.dom.ownerDocument.defaultView?.innerWidth ?? window.innerWidth,
+            height: this.view.dom.ownerDocument.defaultView?.innerHeight ?? window.innerHeight,
+          },
+        });
+        this.menu.dataset.mardoraSlashPlacement = layout.placement;
+        this.menu.style.left = `${layout.left}px`;
+        this.menu.style.maxHeight = `${layout.maxHeight}px`;
+        this.menu.style.top = layout.top === null ? "" : `${layout.top}px`;
+        this.menu.style.bottom = layout.bottom === null ? "" : `${layout.bottom}px`;
+        this.view.dom.classList.add("cm-mardora-slash-open");
+        this.hideEditorCaret();
+        this.view.dom.appendChild(this.menu);
+        this.syncActiveItem("nearest");
+      },
+    });
+  }
+
+  private syncActiveItem(scrollMode: "center" | "nearest"): void {
+    if (!this.menu) return;
+
+    const items = this.menu.querySelectorAll<HTMLElement>(".cm-mardora-slash-item");
+    let activeItem: HTMLElement | null = null;
+
+    items.forEach((item) => {
+      const itemIndex = Number(item.dataset.mardoraSlashIndex);
+      const isActive = itemIndex === this.activeIndex;
+      item.classList.toggle("cm-mardora-slash-item-active", isActive);
+      item.setAttribute("aria-selected", String(isActive));
+      if (isActive) {
+        activeItem = item;
+      }
+    });
+
+    if (activeItem) {
+      this.scrollActiveItemIntoView(activeItem, scrollMode);
+    }
+  }
+
+  private scrollActiveItemIntoView(activeItem: HTMLElement, mode: "center" | "nearest"): void {
+    const list = this.menu?.querySelector<HTMLElement>(".cm-mardora-slash-list");
+    if (!list) return;
+
+    const itemTop = activeItem.offsetTop;
+    const itemBottom = itemTop + activeItem.offsetHeight;
+    const visibleTop = list.scrollTop;
+    const visibleBottom = visibleTop + list.clientHeight;
+
+    if (mode === "center") {
+      list.scrollTop = itemTop - (list.clientHeight - activeItem.offsetHeight) / 2;
+      return;
+    }
+
+    if (itemTop < visibleTop) {
+      list.scrollTop = itemTop;
+      return;
+    }
+
+    if (itemBottom > visibleBottom) {
+      list.scrollTop = itemBottom - list.clientHeight;
+    }
+  }
+
+  private hideEditorCaret(): void {
+    if (this.previousCaretColor === null) {
+      this.previousCaretColor = this.view.contentDOM.style.caretColor;
+    }
+    this.view.contentDOM.style.caretColor = "transparent";
+  }
+
+  private restoreEditorCaret(): void {
+    if (this.previousCaretColor === null) return;
+    this.view.contentDOM.style.caretColor = this.previousCaretColor;
+    this.previousCaretColor = null;
+  }
+
+  private removeMenu(): void {
+    this.menu?.remove();
+    this.menu = null;
+    this.view.dom.classList.remove("cm-mardora-slash-open");
+    this.restoreEditorCaret();
+  }
+}
+
+export function slashCommands(config: MardoraSlashRuntimeConfig = {}): Extension[] {
+  if (config.enabled === false) {
+    return [];
+  }
+
+  const normalizedConfig = createSlashRuntimeConfig(config);
+
+  const plugin = ViewPlugin.define((view) => new SlashCommandViewPlugin(view, normalizedConfig));
+
+  return [
+    slashMenuTheme,
+    plugin,
+    Prec.highest(
+      EditorView.domEventHandlers({
+        keydown(event, view) {
+          const value = view.plugin(plugin);
+          if (!value) return false;
+
+          const handled = value.handleKeydown(event);
+          if (handled) event.preventDefault();
+          return handled;
+        },
+      })
+    ),
+  ];
+}

package/src/editor/slash/index.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./query";
+export * from "./insertions";
+export * from "./default-commands";
+export * from "./menu";
+export * from "./theme";
+export * from "./extension";