mardora 1.2.0

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

@@ -0,0 +1,83 @@
+import { createMardoraIcon } from "../icons";
+import type { MardoraTocItem } from "./types";
+
+export interface TocPanelRenderState {
+  expanded: boolean;
+  width: number;
+  items: MardoraTocItem[];
+}
+
+export interface TocPanelCallbacks {
+  onSelect(item: MardoraTocItem): void;
+  onToggle(): void;
+  onResizeStart(event: MouseEvent): void;
+}
+
+function appendIcon(parent: HTMLElement, name: string): void {
+  const icon = createMardoraIcon(name);
+  if (icon) parent.appendChild(icon);
+}
+
+function createExpandedToggle(callbacks: TocPanelCallbacks): HTMLButtonElement {
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "cm-mardora-toc-toggle";
+  toggle.setAttribute("aria-label", "Toggle table of contents");
+  toggle.textContent = "‹";
+  toggle.addEventListener("click", callbacks.onToggle);
+  return toggle;
+}
+
+function createCollapsed(callbacks: TocPanelCallbacks): HTMLElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "cm-mardora-toc-collapsed";
+  button.setAttribute("aria-label", "Open table of contents");
+  appendIcon(button, "table-of-contents");
+  button.addEventListener("click", callbacks.onToggle);
+  return button;
+}
+
+function createItem(item: MardoraTocItem, callbacks: TocPanelCallbacks): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = item.active ? "cm-mardora-toc-item cm-mardora-toc-item-active" : "cm-mardora-toc-item";
+  button.dataset.mardoraTocId = item.id;
+  button.dataset.mardoraTocLevel = String(item.level);
+  button.title = item.text;
+  button.textContent = item.text;
+  button.addEventListener("click", () => callbacks.onSelect(item));
+  return button;
+}
+
+export function createTocPanelElement(state: TocPanelRenderState, callbacks: TocPanelCallbacks): HTMLElement {
+  const root = document.createElement("aside");
+  root.className = "cm-mardora-toc";
+  root.dataset.mardoraTocExpanded = String(state.expanded);
+  root.style.setProperty("--mardora-toc-width", `${state.width}px`);
+
+  const resize = document.createElement("div");
+  resize.className = "cm-mardora-toc-resize";
+  resize.addEventListener("mousedown", callbacks.onResizeStart);
+  root.appendChild(resize);
+
+  if (!state.expanded) {
+    root.appendChild(createCollapsed(callbacks));
+    return root;
+  }
+
+  root.appendChild(createExpandedToggle(callbacks));
+
+  const list = document.createElement("nav");
+  list.className = "cm-mardora-toc-list";
+  if (state.items.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "cm-mardora-toc-empty";
+    empty.textContent = "暂无目录";
+    list.appendChild(empty);
+  } else {
+    for (const item of state.items) list.appendChild(createItem(item, callbacks));
+  }
+  root.appendChild(list);
+  return root;
+}

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

@@ -0,0 +1,50 @@
+import type { MardoraTocConfig, ResolvedMardoraTocConfig } from "./types";
+
+const defaultMinWidth = 180;
+const defaultMaxWidth = 360;
+const defaultWidth = 240;
+
+export function clampTocWidth(width: number, config: Pick<ResolvedMardoraTocConfig, "minWidth" | "maxWidth">): number {
+  return Math.min(Math.max(width, config.minWidth), config.maxWidth);
+}
+
+export function resolveTocConfig(config: MardoraTocConfig = {}): ResolvedMardoraTocConfig {
+  const minWidth = Math.max(120, config.minWidth ?? defaultMinWidth);
+  const maxWidth = Math.max(minWidth, config.maxWidth ?? defaultMaxWidth);
+  const requestedMinLevel = config.minLevel ?? 2;
+  const requestedMaxLevel = config.maxLevel ?? 6;
+  const minLevel = requestedMinLevel <= requestedMaxLevel ? requestedMinLevel : requestedMaxLevel;
+  const maxLevel = requestedMaxLevel >= requestedMinLevel ? requestedMaxLevel : requestedMinLevel;
+  const resolved: ResolvedMardoraTocConfig = {
+    enabled: config.enabled !== false,
+    minLevel,
+    maxLevel,
+    defaultExpanded: config.defaultExpanded !== false,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+  };
+
+  if (config.onTocChange) resolved.onTocChange = config.onTocChange;
+  if (config.storageKey) resolved.storageKey = config.storageKey;
+  resolved.defaultWidth = clampTocWidth(config.defaultWidth ?? defaultWidth, resolved);
+  return resolved;
+}
+
+function normalizeHeadingText(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export function createTocSlugger(): (text: string) => string {
+  const seen = new Map<string, number>();
+  return (text: string) => {
+    const base = normalizeHeadingText(text) || "heading";
+    const count = (seen.get(base) ?? 0) + 1;
+    seen.set(base, count);
+    return count === 1 ? base : `${base}-${count}`;
+  };
+}

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

@@ -0,0 +1,35 @@
+import type { TocPanelState, TocStorageAdapter } from "./types";
+
+function defaultStorage(): TocStorageAdapter | null {
+  if (typeof window === "undefined") return null;
+  return window.localStorage;
+}
+
+export function readTocPanelState(
+  storageKey?: string,
+  storage: TocStorageAdapter | null = defaultStorage()
+): TocPanelState | null {
+  if (!storageKey || !storage) return null;
+  try {
+    const raw = storage.getItem(storageKey);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Partial<TocPanelState>;
+    if (typeof parsed.expanded !== "boolean" || typeof parsed.width !== "number") return null;
+    return { expanded: parsed.expanded, width: parsed.width };
+  } catch {
+    return null;
+  }
+}
+
+export function writeTocPanelState(
+  storageKey: string | undefined,
+  state: TocPanelState,
+  storage: TocStorageAdapter | null = defaultStorage()
+): void {
+  if (!storageKey || !storage) return;
+  try {
+    storage.setItem(storageKey, JSON.stringify({ expanded: state.expanded, width: state.width }));
+  } catch {
+    // Storage can fail in private mode or restricted host environments.
+  }
+}

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

@@ -0,0 +1,153 @@
+import { EditorView } from "@codemirror/view";
+
+export const tocTheme = EditorView.baseTheme({
+  ".cm-mardora": {
+    position: "relative",
+  },
+  ".cm-mardora .cm-scroller": {
+    boxSizing: "border-box",
+    paddingRight: "calc(var(--mardora-toc-layout-width, 0px) + var(--mardora-toc-scrollbar-gutter, 0px))",
+    scrollbarGutter: "stable",
+  },
+  ".cm-mardora .cm-scroller::-webkit-scrollbar-track": {
+    background: "transparent",
+  },
+  ".cm-mardora-toc": {
+    position: "absolute",
+    top: "0",
+    right: "var(--mardora-toc-scrollbar-gutter, 0px)",
+    bottom: "0",
+    zIndex: "8",
+    width: "var(--mardora-toc-width, 240px)",
+    minWidth: "0",
+    borderLeft: "1px solid var(--mardora-toc-border, #ececef)",
+    background: "var(--mardora-toc-bg, transparent)",
+    color: "var(--mardora-toc-fg, #27272a)",
+    userSelect: "none",
+  },
+  ".cm-mardora-toc[data-mardora-toc-expanded='false']": {
+    width: "42px",
+  },
+  ".cm-mardora-toc-resize": {
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    left: "-4px",
+    zIndex: "2",
+    width: "8px",
+    cursor: "col-resize",
+  },
+  ".cm-mardora-toc-resize::after": {
+    position: "absolute",
+    top: "50%",
+    left: "3px",
+    width: "2px",
+    height: "64px",
+    borderRadius: "999px",
+    background: "var(--mardora-toc-handle, #d4d4d8)",
+    opacity: "0",
+    transform: "translateY(-50%)",
+    transition: "opacity 120ms ease",
+    content: "''",
+  },
+  ".cm-mardora-toc:hover .cm-mardora-toc-resize::after, .cm-mardora-toc-resizing .cm-mardora-toc-resize::after": {
+    opacity: "1",
+  },
+  ".cm-mardora-toc-collapsed svg": {
+    width: "16px",
+    height: "16px",
+  },
+  ".cm-mardora-toc-toggle, .cm-mardora-toc-collapsed, .cm-mardora-toc-item": {
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    cursor: "default",
+    font: "inherit",
+  },
+  ".cm-mardora-toc-toggle": {
+    position: "absolute",
+    top: "8px",
+    right: "8px",
+    zIndex: "1",
+    width: "28px",
+    height: "28px",
+    borderRadius: "6px",
+    color: "var(--mardora-toc-muted, #71717a)",
+    opacity: "0.55",
+    transition: "background 120ms ease, color 120ms ease, opacity 120ms ease",
+  },
+  ".cm-mardora-toc-toggle:hover": {
+    color: "var(--mardora-toc-active, #18181b)",
+    opacity: "1",
+  },
+  ".cm-mardora-toc-toggle:hover, .cm-mardora-toc-collapsed:hover, .cm-mardora-toc-item:hover": {
+    background: "var(--mardora-toc-hover, #f4f4f5)",
+  },
+  ".cm-mardora-toc-collapsed": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    color: "var(--mardora-toc-muted, #71717a)",
+  },
+  ".cm-mardora-toc-list": {
+    overflow: "auto",
+    height: "100%",
+    padding: "12px 10px 16px 18px",
+    scrollbarWidth: "thin",
+  },
+  ".cm-mardora-toc-list::-webkit-scrollbar": {
+    width: "8px",
+  },
+  ".cm-mardora-toc-list::-webkit-scrollbar-track": {
+    background: "transparent",
+  },
+  ".cm-mardora-toc-list::-webkit-scrollbar-thumb": {
+    borderRadius: "999px",
+    background: "var(--mardora-toc-scrollbar, #c7c7cc)",
+  },
+  ".cm-mardora-toc-item": {
+    display: "block",
+    width: "100%",
+    overflow: "hidden",
+    minHeight: "30px",
+    padding: "0 8px",
+    borderLeft: "2px solid transparent",
+    borderRadius: "6px",
+    color: "var(--mardora-toc-muted, #71717a)",
+    lineHeight: "30px",
+    textAlign: "left",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    transition: "background 120ms ease, color 120ms ease",
+  },
+  ".cm-mardora-toc-item[data-mardora-toc-level='3']": { paddingLeft: "18px" },
+  ".cm-mardora-toc-item[data-mardora-toc-level='4']": { paddingLeft: "28px" },
+  ".cm-mardora-toc-item[data-mardora-toc-level='5']": { paddingLeft: "38px" },
+  ".cm-mardora-toc-item[data-mardora-toc-level='6']": { paddingLeft: "48px" },
+  ".cm-mardora-toc-item-active": {
+    borderLeftColor: "var(--mardora-toc-active, #18181b)",
+    background: "var(--mardora-toc-hover, #f4f4f5)",
+    color: "var(--mardora-toc-active, #18181b)",
+    fontWeight: "600",
+  },
+  ".cm-mardora-toc-empty": {
+    padding: "12px 8px",
+    color: "var(--mardora-toc-muted, #71717a)",
+    fontSize: "13px",
+  },
+  ".cm-mardora-toc-resizing": {
+    userSelect: "none",
+  },
+  "&dark .cm-mardora-toc": {
+    "--mardora-toc-bg": "#18181b",
+    "--mardora-toc-fg": "#f4f4f5",
+    "--mardora-toc-border": "#3f3f46",
+    "--mardora-toc-handle": "#52525b",
+    "--mardora-toc-hover": "#27272a",
+    "--mardora-toc-muted": "#a1a1aa",
+    "--mardora-toc-active": "#f4f4f5",
+    "--mardora-toc-scrollbar": "#52525b",
+  },
+});

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

@@ -0,0 +1,44 @@
+export type MardoraTocLevel = 2 | 3 | 4 | 5 | 6;
+
+export interface MardoraTocItem {
+  id: string;
+  level: MardoraTocLevel;
+  text: string;
+  from?: number;
+  to?: number;
+  active: boolean;
+}
+
+export interface MardoraTocConfig {
+  enabled?: boolean;
+  onTocChange?: (items: MardoraTocItem[]) => void;
+  minLevel?: MardoraTocLevel;
+  maxLevel?: MardoraTocLevel;
+  defaultExpanded?: boolean;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  storageKey?: string;
+}
+
+export interface ResolvedMardoraTocConfig {
+  enabled: boolean;
+  onTocChange?: (items: MardoraTocItem[]) => void;
+  minLevel: MardoraTocLevel;
+  maxLevel: MardoraTocLevel;
+  defaultExpanded: boolean;
+  defaultWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  storageKey?: string;
+}
+
+export interface TocPanelState {
+  expanded: boolean;
+  width: number;
+}
+
+export interface TocStorageAdapter {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): unknown;
+}

package/src/editor/theme.ts

@@ -0,0 +1,72 @@
+import { EditorView } from "@codemirror/view";
+
+/**
+ * Base theme for mardora styling
+ * Note: Layout styles are scoped under .cm-mardora which is added by the view plugin
+ */
+export const mardoraBaseTheme = EditorView.theme({
+  // Container styles - only apply when view plugin is enabled
+  "&.cm-mardora": {
+    fontSize: "16px",
+    lineHeight: "1.6",
+    minHeight: "100%",
+    backgroundColor: "transparent !important",
+  },
+
+  "&.cm-mardora.cm-focused": {
+    outline: "none",
+  },
+
+  "&.cm-mardora .cm-scroller": {
+    minHeight: "100%",
+  },
+
+  "&.cm-mardora .cm-content": {
+    width: "100%",
+    maxWidth: "48rem",
+    padding: "0 0.5rem",
+    margin: "0 auto",
+    fontFamily: "var(--font-sans, sans-serif)",
+    fontSize: "16px",
+    lineHeight: "1.6",
+  },
+
+  "&.cm-mardora .cm-content .cm-line": {
+    paddingInline: 0,
+  },
+
+  "&.cm-mardora .cm-content .cm-widgetBuffer": {
+    display: "none !important",
+  },
+});
+
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * Reset syntax highlighting for markdown elements
+ * Used to disable theme colors for markdown syntax
+ */
+const markdownResetStyle = HighlightStyle.define([
+  {
+    tag: [
+      t.heading,
+      t.strong,
+      t.emphasis,
+      t.strikethrough,
+      t.link,
+      t.url,
+      t.quote,
+      t.list,
+      t.meta,
+      t.contentSeparator,
+      t.labelName,
+    ],
+    color: "inherit",
+    fontWeight: "inherit",
+    fontStyle: "inherit",
+    textDecoration: "none",
+  },
+]);
+
+export const markdownResetExtension = syntaxHighlighting(markdownResetStyle, { fallback: false });

package/src/editor/utils.ts

@@ -0,0 +1,176 @@
+import { EditorView } from "@codemirror/view";
+import { StyleSpec } from "style-mod";
+
+/**
+ * Deep merge two objects
+ * @param a - First object
+ * @param b - Second object
+ * @returns Merged object
+ */
+export function deepMerge<T>(a: T, b?: T): T {
+  const result = { ...a };
+
+  if (!b) {
+    return result;
+  }
+
+  for (const key in b as T) {
+    if (b[key] && typeof b[key] === "object" && !Array.isArray(b[key]) && typeof a[key] === "object") {
+      result[key] = deepMerge(a[key], b[key]);
+    } else {
+      result[key] = b[key];
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Theme style
+ */
+export type ThemeStyle = {
+  [selector: string]: StyleSpec;
+};
+
+/**
+ * Theme Enum
+ */
+export enum ThemeEnum {
+  DARK = "dark",
+  LIGHT = "light",
+  AUTO = "auto",
+}
+
+/**
+ * Function to create the themes
+ *
+ * @param defaultTheme - Default theme -- Always applied
+ * @param darkTheme - Dark theme -- Applied when theme is "dark" or "auto" and system is dark
+ * @param lightTheme - Light theme -- Applied when theme is "light" or "auto" and system is light
+ * @returns Theme function
+ */
+export function createTheme({
+  default: defaultTheme,
+  dark: darkTheme,
+  light: lightTheme,
+}: {
+  default: ThemeStyle;
+  dark?: ThemeStyle;
+  light?: ThemeStyle;
+}): (theme: ThemeEnum) => ThemeStyle {
+  return (theme: ThemeEnum) => {
+    defaultTheme = flattenThemeStyles(defaultTheme);
+    darkTheme = flattenThemeStyles(darkTheme || {});
+    lightTheme = flattenThemeStyles(lightTheme || {});
+
+    let style: ThemeStyle = defaultTheme;
+
+    if (theme === ThemeEnum.DARK) {
+      style = deepMerge(style, darkTheme);
+    }
+
+    if (theme === ThemeEnum.LIGHT) {
+      style = deepMerge(style, lightTheme);
+    }
+
+    return style;
+  };
+}
+
+export function flattenThemeStyles(themeStyles: ThemeStyle, parentSelector?: string): ThemeStyle {
+  const flattened: ThemeStyle = {};
+
+  for (const [selectors, styles] of Object.entries(themeStyles)) {
+    for (const selector of selectors.split(",")) {
+      if (typeof styles === "object" && !Array.isArray(styles)) {
+        // Flatten nested styles
+        const fullSelector = fixSelector(parentSelector ? `${parentSelector} ${selector}` : selector);
+        const nestedStyles = flattenThemeStyles(styles as ThemeStyle, fullSelector);
+        Object.assign(flattened, nestedStyles);
+      } else {
+        // Add styles to the flattened object
+        if (parentSelector) {
+          flattened[parentSelector] = { ...flattened[parentSelector], [selector]: styles };
+        } else {
+          flattened[selector] = styles as StyleSpec;
+        }
+      }
+    }
+  }
+
+  return flattened;
+}
+
+export function fixSelector(selector: string): string {
+  // Replace all occurrences of "&" with the parent selector
+  return selector.replace(/\s&/g, "");
+}
+
+/**
+ * Check if cursor is within the given range
+ */
+export function cursorInRange(view: EditorView, from: number, to: number): boolean {
+  const selection = view.state.selection.main;
+  return selection.from <= to && selection.to >= from;
+}
+
+/**
+ * Check if any selection overlaps with the given range
+ */
+export function selectionOverlapsRange(view: EditorView, from: number, to: number): boolean {
+  for (const range of view.state.selection.ranges) {
+    if (range.from <= to && range.to >= from) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Toggle markdown style on selection or insert markers at cursor
+ * @param marker - The markdown marker (e.g., "**" for bold, "*" for italic)
+ * @returns Command function for EditorView
+ */
+export function toggleMarkdownStyle(marker: string): (view: EditorView) => boolean {
+  return (view: EditorView) => {
+    const { state } = view;
+    const { from, to, empty } = state.selection.main;
+
+    // Get selected text
+    const selectedText = state.sliceDoc(from, to);
+
+    // Check if already wrapped with markers
+    const markerLen = marker.length;
+    const beforeFrom = Math.max(0, from - markerLen);
+    const afterTo = Math.min(state.doc.length, to + markerLen);
+    const textBefore = state.sliceDoc(beforeFrom, from);
+    const textAfter = state.sliceDoc(to, afterTo);
+
+    const isWrapped = textBefore === marker && textAfter === marker;
+
+    if (isWrapped) {
+      // Remove markers
+      view.dispatch({
+        changes: [
+          { from: beforeFrom, to: from, insert: "" },
+          { from: to, to: afterTo, insert: "" },
+        ],
+        selection: { anchor: beforeFrom, head: beforeFrom + selectedText.length },
+      });
+    } else if (empty) {
+      // No selection - insert markers and place cursor between them
+      view.dispatch({
+        changes: { from, to, insert: marker + marker },
+        selection: { anchor: from + markerLen },
+      });
+    } else {
+      // Wrap selection with markers
+      view.dispatch({
+        changes: { from, to, insert: marker + selectedText + marker },
+        selection: { anchor: from + markerLen, head: to + markerLen },
+      });
+    }
+
+    return true;
+  };
+}