mardora 1.2.0

package/src/editor/attachments/format.ts

@@ -0,0 +1,63 @@
+import type { MardoraAttachmentKind, MardoraAttachmentUploadResult, MardoraFileLike } from "./types";
+
+export type MardoraUploadMarkerState = "uploading" | "failed";
+
+export type MardoraUploadMarkerInput = {
+  taskId: string;
+  kind: MardoraAttachmentKind;
+  name: string;
+  state: MardoraUploadMarkerState;
+};
+
+export function detectAttachmentKind(file: MardoraFileLike): MardoraAttachmentKind {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  return "file";
+}
+
+export function isAcceptedAttachment(file: MardoraFileLike, acceptRules: readonly string[]): boolean {
+  if (acceptRules.includes("*/*")) return true;
+
+  return acceptRules.some((rule) => {
+    if (rule.endsWith("/*")) {
+      return file.type.startsWith(rule.slice(0, -1));
+    }
+
+    if (rule.startsWith(".")) {
+      return file.name.toLocaleLowerCase().endsWith(rule.toLocaleLowerCase());
+    }
+
+    return file.type === rule;
+  });
+}
+
+export function createUploadMarker(input: MardoraUploadMarkerInput): string {
+  if (input.state === "failed") {
+    return `[Upload failed: ${input.name}](mardora-upload://${input.taskId})`;
+  }
+
+  if (input.kind === "image") {
+    return `![${input.name}](mardora-upload://${input.taskId})`;
+  }
+
+  return `[Uploading ${input.name}](mardora-upload://${input.taskId})`;
+}
+
+export function formatAttachmentMarkdown(kind: MardoraAttachmentKind, result: MardoraAttachmentUploadResult): string {
+  const name = result.name || "attachment";
+
+  if (kind === "image") {
+    return result.title ? `![${name}](${result.url} "${result.title}")` : `![${name}](${result.url})`;
+  }
+
+  if (kind === "video") {
+    return `<video src="${result.url}" controls></video>`;
+  }
+
+  if (kind === "audio") {
+    return `<audio src="${result.url}" controls></audio>`;
+  }
+
+  return `[${name}](${result.url})`;
+}

package/src/editor/attachments/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./format";
+export * from "./extension";

package/src/editor/attachments/types.ts

@@ -0,0 +1,37 @@
+export type MardoraAttachmentKind = "image" | "video" | "audio" | "file";
+
+export type MardoraAttachmentUploadSource = "slash" | "paste" | "drop" | "api";
+
+export type MardoraAttachmentUploadContext = {
+  kind: MardoraAttachmentKind;
+  source: MardoraAttachmentUploadSource;
+  documentText: string;
+  selection: { from: number; to: number };
+};
+
+export type MardoraAttachmentUploadResult = {
+  url: string;
+  name?: string;
+  title?: string;
+  mimeType?: string;
+};
+
+export type MardoraAttachmentUploader = (
+  file: File,
+  context: MardoraAttachmentUploadContext
+) => Promise<MardoraAttachmentUploadResult>;
+
+export type MardoraAttachmentAccept = Partial<Record<MardoraAttachmentKind, string[]>>;
+
+export type MardoraAttachmentsConfig = {
+  enabled?: boolean;
+  uploader?: MardoraAttachmentUploader;
+  accept?: MardoraAttachmentAccept;
+  enablePaste?: boolean;
+  enableDrop?: boolean;
+};
+
+export type MardoraFileLike = {
+  name: string;
+  type: string;
+};

package/src/editor/heading-fold/config.ts

@@ -0,0 +1,25 @@
+import type {
+  MardoraHeadingFoldConfig,
+  MardoraHeadingFoldLevel,
+  ResolvedMardoraHeadingFoldConfig,
+} from "./types";
+
+const minSupportedLevel = 2;
+const maxSupportedLevel = 5;
+
+function clampLevel(level: MardoraHeadingFoldLevel): MardoraHeadingFoldLevel {
+  return Math.min(Math.max(level, minSupportedLevel), maxSupportedLevel) as MardoraHeadingFoldLevel;
+}
+
+export function resolveHeadingFoldConfig(config: MardoraHeadingFoldConfig = {}): ResolvedMardoraHeadingFoldConfig {
+  const requestedMinLevel = clampLevel(config.minLevel ?? minSupportedLevel);
+  const requestedMaxLevel = clampLevel(config.maxLevel ?? maxSupportedLevel);
+  const minLevel = Math.min(requestedMinLevel, requestedMaxLevel) as MardoraHeadingFoldLevel;
+  const maxLevel = Math.max(requestedMinLevel, requestedMaxLevel) as MardoraHeadingFoldLevel;
+
+  return {
+    enabled: config.enabled !== false,
+    minLevel,
+    maxLevel,
+  };
+}

package/src/editor/heading-fold/extension.ts

@@ -0,0 +1,268 @@
+import {
+  Facet,
+  StateEffect,
+  StateField,
+  type EditorState,
+  type Extension,
+  type Range,
+  type Transaction,
+} from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from "@codemirror/view";
+import { extractHeadingFoldRangesFromState } from "./extract";
+import { headingFoldTheme } from "./theme";
+import type { MardoraHeadingFoldConfig, MardoraHeadingFoldRange } from "./types";
+
+const toggleHeadingFoldEffect = StateEffect.define<number>();
+
+const headingFoldConfigFacet = Facet.define<MardoraHeadingFoldConfig, MardoraHeadingFoldConfig>({
+  combine: (values) => values[values.length - 1] ?? {},
+});
+
+interface HeadingFoldState {
+  foldedHeadings: readonly number[];
+  decorations: DecorationSet;
+}
+
+function nextFoldedHeadings(value: readonly number[], transaction: Transaction): readonly number[] {
+    const next = new Set<number>();
+
+    if (transaction.docChanged) {
+      for (const position of value) {
+        next.add(transaction.changes.mapPos(position, 1));
+      }
+    } else {
+      for (const position of value) next.add(position);
+    }
+
+    for (const effect of transaction.effects) {
+      if (!effect.is(toggleHeadingFoldEffect)) continue;
+      if (next.has(effect.value)) {
+        next.delete(effect.value);
+      } else {
+        next.add(effect.value);
+      }
+    }
+
+  return Array.from(next).sort((a, b) => a - b);
+}
+
+class HeadingFoldWidget extends WidgetType {
+  constructor(
+    private readonly range: MardoraHeadingFoldRange,
+    private readonly folded: boolean
+  ) {
+    super();
+  }
+
+  override eq(other: HeadingFoldWidget): boolean {
+    return other.range.headingFrom === this.range.headingFrom && other.folded === this.folded;
+  }
+
+  override toDOM(): HTMLElement {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "cm-mardora-heading-fold-toggle";
+    button.setAttribute("aria-label", `${this.folded ? "Expand" : "Collapse"} H${this.range.level} section`);
+    button.dataset.mardoraHeadingFoldFolded = String(this.folded);
+    button.dataset.mardoraHeadingFoldFrom = String(this.range.headingFrom);
+
+    const level = document.createElement("span");
+    level.className = "cm-mardora-heading-fold-level";
+    level.textContent = `H${this.range.level}`;
+
+    const arrow = document.createElement("span");
+    arrow.className = "cm-mardora-heading-fold-arrow";
+    arrow.setAttribute("aria-hidden", "true");
+
+    button.append(level, arrow);
+
+    return button;
+  }
+
+  override ignoreEvent(event: Event): boolean {
+    return event.type === "mousedown" || event.type === "click";
+  }
+}
+
+class FoldPlaceholderWidget extends WidgetType {
+  override eq(other: FoldPlaceholderWidget): boolean {
+    return other instanceof FoldPlaceholderWidget;
+  }
+
+  override toDOM(): HTMLElement {
+    const placeholder = document.createElement("span");
+    placeholder.className = "cm-mardora-heading-fold-placeholder";
+    placeholder.setAttribute("aria-hidden", "true");
+    placeholder.textContent = "...";
+    return placeholder;
+  }
+}
+
+function selectionTouchesHeading(state: EditorState, range: MardoraHeadingFoldRange): boolean {
+  return state.selection.ranges.some((selection) => {
+    const line = state.doc.lineAt(selection.head);
+    return line.from === range.headingLineFrom;
+  });
+}
+
+function readHeadingFoldButtonPosition(target: EventTarget | null, view: EditorView): number | null {
+  if (!(target instanceof Element)) return null;
+  const button = target.closest(".cm-mardora-heading-fold-toggle");
+  if (!(button instanceof HTMLElement) || !view.dom.contains(button)) return null;
+  const position = Number(button.dataset.mardoraHeadingFoldFrom);
+  return Number.isFinite(position) ? position : null;
+}
+
+function toggleHeadingFoldAt(view: EditorView, position: number): void {
+  view.dispatch({ effects: toggleHeadingFoldEffect.of(position) });
+  view.focus();
+}
+
+const headingFoldDomHandlers = EditorView.domEventHandlers({
+  mousedown: (event, view) => {
+    if (event.button !== 0) return false;
+    const position = readHeadingFoldButtonPosition(event.target, view);
+    if (position === null) return false;
+    event.preventDefault();
+    event.stopPropagation();
+    toggleHeadingFoldAt(view, position);
+    return true;
+  },
+  click: (event, view) => {
+    if (event.detail !== 0) return false;
+    const position = readHeadingFoldButtonPosition(event.target, view);
+    if (position === null) return false;
+    event.preventDefault();
+    event.stopPropagation();
+    toggleHeadingFoldAt(view, position);
+    return true;
+  },
+});
+
+export function __buildHeadingFoldDecorations(
+  state: EditorState,
+  config: MardoraHeadingFoldConfig,
+  foldedHeadings: readonly number[]
+): DecorationSet {
+  const folded = new Set(foldedHeadings);
+  const decorations: Range<Decoration>[] = [];
+
+  for (const range of extractHeadingFoldRangesFromState(state, config)) {
+    const isFolded = folded.has(range.headingFrom);
+    const active = selectionTouchesHeading(state, range);
+    const lineClass = [
+      "cm-mardora-heading-fold-line",
+      active ? "cm-mardora-heading-fold-line-active" : "",
+      isFolded ? "cm-mardora-heading-fold-line-folded" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    decorations.push(Decoration.line({ class: lineClass }).range(range.headingLineFrom));
+    decorations.push(
+      Decoration.widget({
+        widget: new HeadingFoldWidget(range, isFolded),
+        side: -1,
+      }).range(range.headingFrom)
+    );
+
+    if (isFolded) {
+      decorations.push(
+        Decoration.widget({
+          widget: new FoldPlaceholderWidget(),
+          side: 1,
+          mardoraHeadingFoldRole: "placeholder",
+        }).range(range.headingTo)
+      );
+      decorations.push(
+        Decoration.replace({
+          mardoraHeadingFoldRole: "hidden-content",
+        }).range(range.foldFrom, range.foldTo)
+      );
+    }
+  }
+
+  return Decoration.set(decorations, true);
+}
+
+const headingFoldStateField = StateField.define<HeadingFoldState>({
+  create: (state) => {
+    const foldedHeadings: readonly number[] = [];
+    return {
+      foldedHeadings,
+      decorations: __buildHeadingFoldDecorations(state, state.facet(headingFoldConfigFacet), foldedHeadings),
+    };
+  },
+  update: (value, transaction) => {
+    const foldedHeadings = nextFoldedHeadings(value.foldedHeadings, transaction);
+    return {
+      foldedHeadings,
+      decorations: __buildHeadingFoldDecorations(transaction.state, transaction.state.facet(headingFoldConfigFacet), foldedHeadings),
+    };
+  },
+  provide: (field) => EditorView.decorations.from(field, (value) => value.decorations),
+});
+
+class HeadingFoldViewPlugin {
+  private suppressNextMouseDown = false;
+
+  constructor(
+    private readonly view: EditorView,
+    _config: MardoraHeadingFoldConfig
+  ) {
+    void _config;
+    this.view.dom.addEventListener("pointerdown", this.handlePointerDown, true);
+    this.view.dom.addEventListener("mousedown", this.handleMouseDown, true);
+    this.view.dom.addEventListener("click", this.handleClick, true);
+  }
+
+  update(_update: ViewUpdate): void {
+    void _update;
+  }
+
+  destroy(): void {
+    this.view.dom.removeEventListener("pointerdown", this.handlePointerDown, true);
+    this.view.dom.removeEventListener("mousedown", this.handleMouseDown, true);
+    this.view.dom.removeEventListener("click", this.handleClick, true);
+  }
+
+  private readonly handlePointerDown = (event: PointerEvent): void => {
+    if (event.button !== 0) return;
+    if (readHeadingFoldButtonPosition(event.target, this.view) !== null) this.suppressNextMouseDown = true;
+    this.handleToggleEvent(event);
+  };
+
+  private readonly handleMouseDown = (event: MouseEvent): void => {
+    if (event.button !== 0) return;
+    if (this.suppressNextMouseDown) {
+      this.suppressNextMouseDown = false;
+      return;
+    }
+    this.handleToggleEvent(event);
+  };
+
+  private readonly handleClick = (event: MouseEvent): void => {
+    if (event.detail !== 0) return;
+    this.handleToggleEvent(event);
+  };
+
+  private handleToggleEvent(event: MouseEvent | PointerEvent): void {
+    const position = readHeadingFoldButtonPosition(event.target, this.view);
+    if (position === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    toggleHeadingFoldAt(this.view, position);
+  }
+}
+
+export function headingFold(config: MardoraHeadingFoldConfig = {}): Extension[] {
+  if (config.enabled === false) return [];
+
+  return [
+    headingFoldConfigFacet.of(config),
+    headingFoldStateField,
+    headingFoldTheme,
+    headingFoldDomHandlers,
+    ViewPlugin.define((view) => new HeadingFoldViewPlugin(view, config)),
+  ];
+}

package/src/editor/heading-fold/extract.ts

@@ -0,0 +1,88 @@
+import type { EditorState } from "@codemirror/state";
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import type { SyntaxNodeRef } from "@lezer/common";
+import { stripMarkdownHeadingText } from "../table-of-contents";
+import { resolveHeadingFoldConfig } from "./config";
+import type { MardoraHeadingFoldConfig, MardoraHeadingFoldLevel, MardoraHeadingFoldRange } from "./types";
+
+const headingPattern = /^ATXHeading([1-6])$/;
+const headingFoldParseTimeout = 100;
+
+interface ParsedHeading {
+  level: number;
+  text: string;
+  from: number;
+  to: number;
+}
+
+function headingLevel(node: SyntaxNodeRef): number | null {
+  const match = headingPattern.exec(node.name);
+  return match ? Number(match[1]) : null;
+}
+
+function canFoldLevel(level: number, minLevel: MardoraHeadingFoldLevel, maxLevel: MardoraHeadingFoldLevel): boolean {
+  return level >= minLevel && level <= maxLevel;
+}
+
+function collectHeadings(state: EditorState): ParsedHeading[] {
+  const headings: ParsedHeading[] = [];
+  const tree = ensureSyntaxTree(state, state.doc.length, headingFoldParseTimeout) ?? syntaxTree(state);
+
+  tree.iterate({
+    enter: (node) => {
+      const level = headingLevel(node);
+      if (!level) return;
+      const text = stripMarkdownHeadingText(state.sliceDoc(node.from, node.to));
+      if (!text) return;
+      headings.push({ level, text, from: node.from, to: node.to });
+    },
+  });
+
+  return headings;
+}
+
+function findFoldEnd(state: EditorState, headings: ParsedHeading[], index: number): number {
+  const heading = headings[index]!;
+  const nextBoundary = headings.slice(index + 1).find((candidate) => candidate.level <= heading.level);
+  if (!nextBoundary) return state.doc.length;
+  return state.doc.lineAt(nextBoundary.from).from;
+}
+
+function findFoldStart(state: EditorState, heading: ParsedHeading): number {
+  const headingLine = state.doc.lineAt(heading.from);
+  if (headingLine.number >= state.doc.lines) return headingLine.to;
+  return state.doc.line(headingLine.number + 1).from;
+}
+
+export function extractHeadingFoldRangesFromState(
+  state: EditorState,
+  config: MardoraHeadingFoldConfig = {}
+): MardoraHeadingFoldRange[] {
+  const resolved = resolveHeadingFoldConfig(config);
+  if (!resolved.enabled) return [];
+
+  const headings = collectHeadings(state);
+  const ranges: MardoraHeadingFoldRange[] = [];
+
+  headings.forEach((heading, index) => {
+    if (!canFoldLevel(heading.level, resolved.minLevel, resolved.maxLevel)) return;
+
+    const line = state.doc.lineAt(heading.from);
+    const foldFrom = findFoldStart(state, heading);
+    const foldTo = findFoldEnd(state, headings, index);
+    if (foldTo <= foldFrom) return;
+
+    ranges.push({
+      level: heading.level as MardoraHeadingFoldLevel,
+      text: heading.text,
+      headingFrom: heading.from,
+      headingTo: heading.to,
+      headingLineFrom: line.from,
+      headingLineTo: line.to,
+      foldFrom,
+      foldTo,
+    });
+  });
+
+  return ranges;
+}

package/src/editor/heading-fold/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./config";
+export * from "./extract";
+export * from "./theme";
+export { headingFold } from "./extension";

package/src/editor/heading-fold/theme.ts

@@ -0,0 +1,85 @@
+import { EditorView } from "@codemirror/view";
+
+export const headingFoldTheme = EditorView.baseTheme({
+  ".cm-mardora-heading-fold-line": {
+    position: "relative",
+  },
+
+  ".cm-mardora-heading-fold-toggle": {
+    alignItems: "center",
+    background: "transparent",
+    border: "0",
+    borderRadius: "4px",
+    color: "var(--mardora-heading-fold-muted, #a1a1aa)",
+    cursor: "pointer",
+    display: "inline-flex",
+    font: "600 0.7rem/1 var(--font-sans, sans-serif)",
+    height: "1rem",
+    justifyContent: "center",
+    marginLeft: "-2.55rem",
+    marginRight: "0.45rem",
+    padding: "0",
+    transform: "translateY(-0.52em)",
+    verticalAlign: "middle",
+    width: "2rem",
+  },
+
+  ".cm-mardora-heading-fold-toggle:hover, .cm-mardora-heading-fold-toggle:focus-visible": {
+    color: "var(--mardora-heading-fold-active, #52525b)",
+  },
+
+  ".cm-mardora-heading-fold-toggle:focus-visible": {
+    outline: "2px solid var(--mardora-heading-fold-focus, #a1a1aa)",
+    outlineOffset: "2px",
+  },
+
+  ".cm-mardora-heading-fold-level": {
+    display: "inline-flex",
+  },
+
+  ".cm-mardora-heading-fold-arrow": {
+    display: "none",
+    height: "0.55rem",
+    position: "relative",
+    width: "0.55rem",
+  },
+
+  ".cm-mardora-heading-fold-arrow::before": {
+    borderBottom: "1.5px solid currentColor",
+    borderRight: "1.5px solid currentColor",
+    content: '""',
+    display: "block",
+    height: "0.28rem",
+    left: "0.08rem",
+    position: "absolute",
+    top: "0.03rem",
+    transform: "rotate(45deg)",
+    width: "0.28rem",
+  },
+
+  ".cm-mardora-heading-fold-toggle[data-mardora-heading-fold-folded='true'] .cm-mardora-heading-fold-arrow::before": {
+    left: "0.03rem",
+    top: "0.11rem",
+    transform: "rotate(-45deg)",
+  },
+
+  ".cm-mardora-heading-fold-line:hover .cm-mardora-heading-fold-level, .cm-mardora-heading-fold-line-active .cm-mardora-heading-fold-level, .cm-mardora-heading-fold-toggle:hover .cm-mardora-heading-fold-level, .cm-mardora-heading-fold-toggle:focus-visible .cm-mardora-heading-fold-level, .cm-mardora-heading-fold-toggle[data-mardora-heading-fold-folded='true'] .cm-mardora-heading-fold-level": {
+    display: "none",
+  },
+
+  ".cm-mardora-heading-fold-line:hover .cm-mardora-heading-fold-arrow, .cm-mardora-heading-fold-line-active .cm-mardora-heading-fold-arrow, .cm-mardora-heading-fold-toggle:hover .cm-mardora-heading-fold-arrow, .cm-mardora-heading-fold-toggle:focus-visible .cm-mardora-heading-fold-arrow, .cm-mardora-heading-fold-toggle[data-mardora-heading-fold-folded='true'] .cm-mardora-heading-fold-arrow": {
+    display: "inline-block",
+  },
+
+  ".cm-mardora-heading-fold-placeholder": {
+    color: "var(--mardora-heading-fold-muted, #a1a1aa)",
+    font: "600 0.9rem/1.4 var(--font-sans, sans-serif)",
+    padding: "0.1rem 0 0.35rem 0.25rem",
+  },
+
+  "&dark .cm-mardora-heading-fold-toggle, &dark .cm-mardora-heading-fold-placeholder": {
+    "--mardora-heading-fold-muted": "#71717a",
+    "--mardora-heading-fold-active": "#d4d4d8",
+    "--mardora-heading-fold-focus": "#71717a",
+  },
+});

package/src/editor/heading-fold/types.ts

@@ -0,0 +1,24 @@
+export type MardoraHeadingFoldLevel = 2 | 3 | 4 | 5;
+
+export interface MardoraHeadingFoldConfig {
+  enabled?: boolean;
+  minLevel?: MardoraHeadingFoldLevel;
+  maxLevel?: MardoraHeadingFoldLevel;
+}
+
+export interface ResolvedMardoraHeadingFoldConfig {
+  enabled: boolean;
+  minLevel: MardoraHeadingFoldLevel;
+  maxLevel: MardoraHeadingFoldLevel;
+}
+
+export interface MardoraHeadingFoldRange {
+  level: MardoraHeadingFoldLevel;
+  text: string;
+  headingFrom: number;
+  headingTo: number;
+  headingLineFrom: number;
+  headingLineTo: number;
+  foldFrom: number;
+  foldTo: number;
+}

package/src/editor/i18n.ts

@@ -0,0 +1,13 @@
+export type MardoraLocale = "zh-CN" | "en-US";
+
+export type MardoraI18nConfig = {
+  locale?: MardoraLocale;
+};
+
+export const defaultMardoraLocale: MardoraLocale = "zh-CN";
+
+const supportedMardoraLocales = new Set<MardoraLocale>(["zh-CN", "en-US"]);
+
+export function resolveMardoraLocale(locale?: MardoraLocale): MardoraLocale {
+  return locale && supportedMardoraLocales.has(locale) ? locale : defaultMardoraLocale;
+}