mardora 1.2.0

package/src/editor/slash/insertions.ts

@@ -0,0 +1,26 @@
+import type { ChangeSpec } from "@codemirror/state";
+import type { MardoraSlashQuery } from "./types";
+
+export type MardoraSlashReplacementTemplate = {
+  marker: string;
+  cursorOffset: number;
+};
+
+export type MardoraSlashReplacement = {
+  changes: ChangeSpec;
+  selectionAnchor: number;
+};
+
+export function buildSlashReplacement(
+  template: MardoraSlashReplacementTemplate,
+  query: MardoraSlashQuery
+): MardoraSlashReplacement {
+  return {
+    changes: {
+      from: query.from,
+      to: query.to,
+      insert: template.marker,
+    },
+    selectionAnchor: query.from + template.cursorOffset,
+  };
+}

package/src/editor/slash/menu.ts

@@ -0,0 +1,123 @@
+import type { MardoraSlashCommand } from "./types";
+import { createMardoraIcon } from "../icons";
+import type { MardoraLocale } from "../i18n";
+import type { MardoraSlashMessages } from "./types";
+
+export type MardoraSlashMenuState = {
+  commands: MardoraSlashCommand[];
+  activeIndex: number;
+  messages: MardoraSlashMessages;
+};
+
+export type MardoraSlashMenuCallbacks = {
+  onHover: (index: number) => void;
+  onSelect: (index: number) => void;
+};
+
+const slashMessages: Record<MardoraLocale, MardoraSlashMessages> = {
+  "zh-CN": {
+    groups: {
+      basic: "基本区块",
+      media: "媒体",
+    },
+    empty: "没有匹配的命令",
+    close: "关闭菜单",
+    closeHint: "esc",
+  },
+  "en-US": {
+    groups: {
+      basic: "Basic blocks",
+      media: "Media",
+    },
+    empty: "No matching commands",
+    close: "Close menu",
+    closeHint: "esc",
+  },
+};
+
+export function getSlashMessages(locale: MardoraLocale): MardoraSlashMessages {
+  return slashMessages[locale];
+}
+
+export function createSlashMenuElement(
+  state: MardoraSlashMenuState,
+  callbacks: MardoraSlashMenuCallbacks
+): HTMLElement {
+  const { messages } = state;
+  const root = document.createElement("div");
+  root.className = "cm-mardora-slash-menu";
+  root.setAttribute("role", "listbox");
+
+  const list = document.createElement("div");
+  list.className = "cm-mardora-slash-list";
+  root.addEventListener(
+    "wheel",
+    (event) => {
+      list.scrollTop += event.deltaY;
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    { capture: true, passive: false }
+  );
+
+  if (state.commands.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "cm-mardora-slash-empty";
+    empty.textContent = messages.empty;
+    list.appendChild(empty);
+    root.appendChild(list);
+    return root;
+  }
+
+  let currentGroup: MardoraSlashCommand["group"] | null = null;
+
+  for (const [index, command] of state.commands.entries()) {
+    if (command.group !== currentGroup) {
+      currentGroup = command.group;
+      const label = document.createElement("div");
+      label.className = "cm-mardora-slash-group";
+      label.textContent = messages.groups[currentGroup];
+      list.appendChild(label);
+    }
+
+    const item = document.createElement("button");
+    item.type = "button";
+    item.className =
+      index === state.activeIndex ? "cm-mardora-slash-item cm-mardora-slash-item-active" : "cm-mardora-slash-item";
+    item.dataset.mardoraSlashIndex = String(index);
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", String(index === state.activeIndex));
+    item.addEventListener("mouseenter", () => callbacks.onHover(index));
+    item.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      callbacks.onSelect(index);
+    });
+
+    const icon = document.createElement("span");
+    icon.className = "cm-mardora-slash-icon";
+    const svgIcon = createMardoraIcon(command.icon);
+    if (svgIcon) {
+      icon.appendChild(svgIcon);
+    } else {
+      icon.textContent = command.icon;
+    }
+
+    const title = document.createElement("span");
+    title.className = "cm-mardora-slash-title";
+    title.textContent = command.title;
+
+    const hint = document.createElement("span");
+    hint.className = "cm-mardora-slash-hint";
+    hint.textContent = command.hint;
+
+    item.append(icon, title, hint);
+    list.appendChild(item);
+  }
+
+  const footer = document.createElement("div");
+  footer.className = "cm-mardora-slash-footer";
+  footer.innerHTML = `<span>${messages.close}</span><span>${messages.closeHint}</span>`;
+  root.append(list, footer);
+
+  return root;
+}

package/src/editor/slash/position.ts

@@ -0,0 +1,61 @@
+export type SlashMenuAnchorRect = {
+  left: number;
+  top: number;
+  bottom: number;
+};
+
+export type SlashMenuViewport = {
+  width: number;
+  height: number;
+};
+
+export type SlashMenuLayoutInput = {
+  anchor: SlashMenuAnchorRect;
+  viewport: SlashMenuViewport;
+};
+
+export type SlashMenuPlacement = "top" | "bottom";
+
+export type SlashMenuLayout = {
+  placement: SlashMenuPlacement;
+  left: number;
+  top: number | null;
+  bottom: number | null;
+  maxHeight: number;
+};
+
+const menuWidth = 328;
+const menuMaxHeight = 420;
+const viewportPadding = 8;
+const anchorGap = 6;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function computeSlashMenuLayout(input: SlashMenuLayoutInput): SlashMenuLayout {
+  const maxLeft = Math.max(viewportPadding, input.viewport.width - menuWidth - viewportPadding);
+  const left = clamp(input.anchor.left, viewportPadding, maxLeft);
+  const availableBelow = Math.max(1, input.viewport.height - input.anchor.bottom - anchorGap - viewportPadding);
+  const availableAbove = Math.max(1, input.anchor.top - anchorGap - viewportPadding);
+  const placement: SlashMenuPlacement =
+    availableBelow >= menuMaxHeight || availableBelow >= availableAbove ? "bottom" : "top";
+
+  if (placement === "bottom") {
+    return {
+      placement,
+      left,
+      top: input.anchor.bottom + anchorGap,
+      bottom: null,
+      maxHeight: Math.min(menuMaxHeight, availableBelow),
+    };
+  }
+
+  return {
+    placement,
+    left,
+    top: null,
+    bottom: input.viewport.height - input.anchor.top + anchorGap,
+    maxHeight: Math.min(menuMaxHeight, availableAbove),
+  };
+}

package/src/editor/slash/query.ts

@@ -0,0 +1,33 @@
+import type { MardoraSlashCommand, MardoraSlashQuery } from "./types";
+
+const slashLinePattern = /^\/([^\s]*)$/;
+
+export function detectSlashQuery(documentText: string, cursorPosition: number): MardoraSlashQuery | null {
+  const safeCursor = Math.max(0, Math.min(cursorPosition, documentText.length));
+  const lineStart = documentText.lastIndexOf("\n", safeCursor - 1) + 1;
+  const lineTextBeforeCursor = documentText.slice(lineStart, safeCursor);
+  const match = lineTextBeforeCursor.match(slashLinePattern);
+
+  if (!match) {
+    return null;
+  }
+
+  return {
+    from: lineStart,
+    to: safeCursor,
+    query: match[1] ?? "",
+  };
+}
+
+export function filterSlashCommands(commands: readonly MardoraSlashCommand[], query: string): MardoraSlashCommand[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+
+  if (!normalizedQuery) {
+    return [...commands];
+  }
+
+  return commands.filter((command) => {
+    const searchable = [command.title, command.id, command.hint, ...command.aliases].join(" ").toLocaleLowerCase();
+    return searchable.includes(normalizedQuery);
+  });
+}

package/src/editor/slash/theme.ts

@@ -0,0 +1,113 @@
+import { EditorView } from "@codemirror/view";
+
+export const slashMenuTheme = EditorView.baseTheme({
+  ".cm-mardora-slash-menu": {
+    position: "fixed",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: "1000",
+    width: "328px",
+    maxHeight: "420px",
+    overflow: "hidden",
+    border: "1px solid rgba(120, 113, 108, 0.22)",
+    borderRadius: "12px",
+    background: "var(--mardora-slash-bg, #ffffff)",
+    boxShadow: "0 18px 48px rgba(15, 23, 42, 0.16)",
+    padding: "8px 0 0",
+    caretColor: "transparent",
+    cursor: "default",
+    fontFamily: "var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)",
+    userSelect: "none",
+  },
+  ".cm-mardora-slash-open .cm-cursor": {
+    visibility: "hidden",
+  },
+  ".cm-mardora-slash-open .cm-content": {
+    caretColor: "transparent",
+  },
+  ".cm-mardora-slash-list": {
+    flex: "1 1 auto",
+    minHeight: "0",
+    overflowY: "auto",
+  },
+  ".cm-mardora-slash-group": {
+    padding: "8px 14px 6px",
+    color: "var(--mardora-slash-muted, #a8a29e)",
+    fontSize: "12px",
+    fontWeight: "500",
+  },
+  ".cm-mardora-slash-item": {
+    display: "grid",
+    gridTemplateColumns: "34px 1fr auto",
+    alignItems: "center",
+    width: "100%",
+    minHeight: "34px",
+    border: "0",
+    padding: "0 14px",
+    background: "transparent",
+    color: "var(--mardora-slash-fg, #27272a)",
+    textAlign: "left",
+    cursor: "default",
+  },
+  ".cm-mardora-slash-item-active": {
+    background: "var(--mardora-slash-active, #f4f4f5)",
+  },
+  ".cm-mardora-slash-icon": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--mardora-slash-icon, #3f3f46)",
+    fontSize: "13px",
+    fontWeight: "400",
+    textAlign: "center",
+  },
+  ".cm-mardora-slash-icon svg": {
+    display: "block",
+    width: "17px",
+    height: "17px",
+    strokeWidth: "1.9",
+  },
+  ".cm-mardora-slash-title": {
+    overflow: "hidden",
+    color: "inherit",
+    fontSize: "14px",
+    fontWeight: "400",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  ".cm-mardora-slash-hint": {
+    marginLeft: "12px",
+    color: "var(--mardora-slash-muted, #a8a29e)",
+    fontSize: "12px",
+    fontWeight: "400",
+  },
+  ".cm-mardora-slash-footer": {
+    display: "flex",
+    flex: "0 0 auto",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: "40px",
+    borderTop: "1px solid rgba(120, 113, 108, 0.18)",
+    background: "var(--mardora-slash-bg, #ffffff)",
+    padding: "0 14px",
+    color: "var(--mardora-slash-fg, #27272a)",
+    fontSize: "14px",
+  },
+  ".cm-mardora-slash-footer span:last-child": {
+    color: "var(--mardora-slash-muted, #a8a29e)",
+    fontSize: "12px",
+    fontWeight: "400",
+  },
+  ".cm-mardora-slash-empty": {
+    padding: "14px",
+    color: "var(--mardora-slash-muted, #a8a29e)",
+    fontSize: "13px",
+  },
+  "&dark .cm-mardora-slash-menu": {
+    "--mardora-slash-bg": "#18181b",
+    "--mardora-slash-fg": "#f4f4f5",
+    "--mardora-slash-muted": "#a1a1aa",
+    "--mardora-slash-active": "#27272a",
+    "--mardora-slash-icon": "#e4e4e7",
+  },
+});

package/src/editor/slash/types.ts

@@ -0,0 +1,40 @@
+import type { EditorView } from "@codemirror/view";
+import type { MardoraAttachmentKind } from "../attachments";
+import type { MardoraLocale } from "../i18n";
+
+export type MardoraSlashCommandGroup = "basic" | "media";
+
+export type MardoraSlashMessages = {
+  groups: Record<MardoraSlashCommandGroup, string>;
+  empty: string;
+  close: string;
+  closeHint: string;
+};
+
+export type MardoraSlashCommandContext = {
+  view: EditorView;
+  queryRange: { from: number; to: number };
+  requestAttachment?: (kind: MardoraAttachmentKind, context: MardoraSlashCommandContext) => boolean;
+};
+
+export type MardoraSlashCommand = {
+  id: string;
+  group: MardoraSlashCommandGroup;
+  title: string;
+  aliases: string[];
+  icon: string;
+  hint: string;
+  run: (context: MardoraSlashCommandContext) => boolean;
+};
+
+export type MardoraSlashQuery = {
+  from: number;
+  to: number;
+  query: string;
+};
+
+export type MardoraSlashCommandsConfig = {
+  enabled?: boolean;
+  locale?: MardoraLocale;
+  commands?: MardoraSlashCommand[];
+};

package/src/editor/table-of-contents/extension.ts

@@ -0,0 +1,202 @@
+import { EditorSelection, Extension, Prec } from "@codemirror/state";
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { extractTocItemsFromState } from "./extract";
+import { createTocPanelElement } from "./panel";
+import { clampTocWidth, resolveTocConfig } from "./slug";
+import { readTocPanelState, writeTocPanelState } from "./storage";
+import { tocTheme } from "./theme";
+import type { MardoraTocConfig, MardoraTocItem, ResolvedMardoraTocConfig, TocPanelState } from "./types";
+
+function sameItems(a: MardoraTocItem[], b: MardoraTocItem[]): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+class TocViewPlugin {
+  private panel: HTMLElement | null = null;
+  private config: ResolvedMardoraTocConfig;
+  private panelState: TocPanelState;
+  private items: MardoraTocItem[] = [];
+  private renderFrame: number | null = null;
+  private readonly measureKey = {};
+
+  constructor(
+    private readonly view: EditorView,
+    rawConfig: MardoraTocConfig
+  ) {
+    this.config = resolveTocConfig(rawConfig);
+    const stored = readTocPanelState(this.config.storageKey);
+    this.panelState = {
+      expanded: stored?.expanded ?? this.config.defaultExpanded,
+      width: clampTocWidth(stored?.width ?? this.config.defaultWidth, this.config),
+    };
+    this.view.scrollDOM.addEventListener("scroll", this.handleScroll, { passive: true });
+    this.recompute();
+    this.scheduleRender();
+    this.scheduleActiveMeasure();
+  }
+
+  update(update: ViewUpdate): void {
+    if (update.docChanged) {
+      this.recompute();
+      return;
+    }
+    if (update.viewportChanged || update.geometryChanged) this.scheduleActiveMeasure();
+  }
+
+  destroy(): void {
+    this.view.scrollDOM.removeEventListener("scroll", this.handleScroll);
+    if (this.renderFrame !== null) {
+      this.view.dom.ownerDocument.defaultView?.cancelAnimationFrame(this.renderFrame);
+      this.renderFrame = null;
+    }
+    this.clearLayoutWidth();
+    this.panel?.remove();
+    this.panel = null;
+  }
+
+  private readonly handleScroll = (): void => {
+    this.scheduleActiveMeasure();
+  };
+
+  private recompute(): void {
+    const next = extractTocItemsFromState(this.view.state, this.config);
+    this.items = this.withPreservedActive(next);
+    this.config.onTocChange?.(this.items);
+    this.render();
+    this.scheduleActiveMeasure();
+  }
+
+  private withPreservedActive(items: MardoraTocItem[]): MardoraTocItem[] {
+    if (items.length === 0) return [];
+    const previousActive = this.items.find((item) => item.active)?.id;
+    const fallbackActiveId = items[0]?.id;
+    const activeId =
+      previousActive && items.some((item) => item.id === previousActive) ? previousActive : fallbackActiveId;
+    return items.map((item) => ({ ...item, active: item.id === activeId }));
+  }
+
+  private scheduleActiveMeasure(): void {
+    if (this.items.length === 0 || !this.view.dom.isConnected) return;
+    this.view.requestMeasure({
+      key: this.measureKey,
+      read: (view) => {
+        const viewportTop = view.scrollDOM.getBoundingClientRect().top + 24;
+        let activeId = this.items[0]?.id ?? null;
+        for (const item of this.items) {
+          if (typeof item.from !== "number") continue;
+          const coords = view.coordsAtPos(item.from);
+          if (coords && coords.top <= viewportTop) activeId = item.id;
+        }
+        return activeId;
+      },
+      write: (activeId) => {
+        if (!activeId) return;
+        this.updateActiveItem(activeId);
+      },
+    });
+  }
+
+  private updateActiveItem(activeId: string): void {
+    const next = this.items.map((item) => ({ ...item, active: item.id === activeId }));
+    if (sameItems(next, this.items)) return;
+    this.items = next;
+    this.config.onTocChange?.(this.items);
+    this.render();
+  }
+
+  private scheduleRender(): void {
+    const win = this.view.dom.ownerDocument.defaultView;
+    if (!win) {
+      this.render();
+      return;
+    }
+    if (this.renderFrame !== null) return;
+    this.renderFrame = win.requestAnimationFrame(() => {
+      this.renderFrame = null;
+      this.render();
+    });
+  }
+
+  private render(): void {
+    if (!this.config.enabled) {
+      this.clearLayoutWidth();
+      this.panel?.remove();
+      this.panel = null;
+      return;
+    }
+    this.syncLayoutWidth();
+    const nextPanel = createTocPanelElement(
+      { expanded: this.panelState.expanded, width: this.panelState.width, items: this.items },
+      {
+        onSelect: (item) => this.selectItem(item),
+        onToggle: () => this.toggle(),
+        onResizeStart: (event) => this.startResize(event),
+      }
+    );
+    if (this.panel?.isConnected) {
+      this.panel.replaceWith(nextPanel);
+    } else {
+      this.view.dom.appendChild(nextPanel);
+    }
+    this.panel = nextPanel;
+  }
+
+  private selectItem(item: MardoraTocItem): void {
+    if (typeof item.from !== "number") return;
+    this.view.dispatch({
+      selection: EditorSelection.cursor(item.from),
+      effects: EditorView.scrollIntoView(item.from, { y: "start" }),
+    });
+    this.view.focus();
+    this.updateActiveItem(item.id);
+    this.scheduleActiveMeasure();
+  }
+
+  private persistPanelState(): void {
+    writeTocPanelState(this.config.storageKey, this.panelState);
+  }
+
+  private toggle(): void {
+    this.panelState = { ...this.panelState, expanded: !this.panelState.expanded };
+    this.persistPanelState();
+    this.render();
+  }
+
+  private syncLayoutWidth(): void {
+    const layoutWidth = this.panelState.expanded ? this.panelState.width : 42;
+    this.view.dom.style.setProperty("--mardora-toc-layout-width", `${layoutWidth}px`);
+    this.view.dom.style.setProperty("--mardora-toc-scrollbar-gutter", "14px");
+  }
+
+  private clearLayoutWidth(): void {
+    this.view.dom.style.removeProperty("--mardora-toc-layout-width");
+    this.view.dom.style.removeProperty("--mardora-toc-scrollbar-gutter");
+  }
+
+  private startResize(event: MouseEvent): void {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = this.panelState.width;
+    const doc = this.view.dom.ownerDocument;
+    doc.body.classList.add("cm-mardora-toc-resizing");
+
+    const move = (moveEvent: MouseEvent) => {
+      const nextWidth = clampTocWidth(startWidth - (moveEvent.clientX - startX), this.config);
+      this.panelState = { ...this.panelState, width: nextWidth };
+      this.render();
+    };
+    const up = () => {
+      doc.body.classList.remove("cm-mardora-toc-resizing");
+      doc.removeEventListener("mousemove", move);
+      doc.removeEventListener("mouseup", up);
+      this.persistPanelState();
+    };
+
+    doc.addEventListener("mousemove", move);
+    doc.addEventListener("mouseup", up);
+  }
+}
+
+export function tableOfContents(config: MardoraTocConfig = {}): Extension[] {
+  return [tocTheme, Prec.low(ViewPlugin.define((view) => new TocViewPlugin(view, config)))];
+}

package/src/editor/table-of-contents/extract.ts

@@ -0,0 +1,53 @@
+import type { EditorState } from "@codemirror/state";
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import type { SyntaxNodeRef } from "@lezer/common";
+import type { MardoraTocConfig, MardoraTocItem, MardoraTocLevel } from "./types";
+import { createTocSlugger, resolveTocConfig } from "./slug";
+
+const headingPattern = /^ATXHeading([1-6])$/;
+const tocParseTimeout = 100;
+
+function headingLevel(node: SyntaxNodeRef): MardoraTocLevel | null {
+  const match = headingPattern.exec(node.name);
+  if (!match) return null;
+  const level = Number(match[1]);
+  return level >= 2 && level <= 6 ? (level as MardoraTocLevel) : null;
+}
+
+export function stripMarkdownHeadingText(text: string): string {
+  return text
+    .replace(/^#{1,6}\s*/, "")
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/__([^_]+)__/g, "$1")
+    .replace(/_([^_]+)_/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .trim();
+}
+
+export function extractTocItemsFromState(state: EditorState, config: MardoraTocConfig = {}): MardoraTocItem[] {
+  const resolved = resolveTocConfig(config);
+  const slug = createTocSlugger();
+  const items: MardoraTocItem[] = [];
+  const tree = ensureSyntaxTree(state, state.doc.length, tocParseTimeout) ?? syntaxTree(state);
+
+  tree.iterate({
+    enter: (node) => {
+      const level = headingLevel(node);
+      if (!level || level < resolved.minLevel || level > resolved.maxLevel) return;
+      const text = stripMarkdownHeadingText(state.sliceDoc(node.from, node.to));
+      if (!text) return;
+      items.push({
+        id: slug(text),
+        level,
+        text,
+        from: node.from,
+        to: node.to,
+        active: false,
+      });
+    },
+  });
+
+  return items;
+}

package/src/editor/table-of-contents/index.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./slug";
+export * from "./storage";
+export * from "./extract";
+export * from "./panel";
+export * from "./theme";
+export * from "./extension";