mardora 1.2.0

package/src/editor/media-lightbox-theme.ts

@@ -0,0 +1,146 @@
+import { createTheme } from "./utils";
+
+export const mediaLightboxTheme = createTheme({
+  default: {
+    ".cm-mardora-media-preview": {
+      position: "relative",
+    },
+    ".cm-mardora-media-preview-button": {
+      position: "absolute",
+      top: "0.5rem",
+      right: "0.5rem",
+      width: "1.75rem",
+      height: "1.75rem",
+      border: "1px solid rgba(148, 163, 184, 0.45)",
+      borderRadius: "0.375rem",
+      backgroundColor: "rgba(255, 255, 255, 0.86)",
+      color: "#334155",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "0",
+      opacity: "0",
+      pointerEvents: "auto",
+      cursor: "pointer",
+      transition: "opacity 120ms ease, background-color 120ms ease, border-color 120ms ease",
+      zIndex: "2",
+    },
+    ".cm-mardora-media-preview:hover .cm-mardora-media-preview-button, .cm-mardora-media-preview-button:focus-visible": {
+      opacity: "1",
+    },
+    ".cm-mardora-media-preview-button:hover, .cm-mardora-media-preview-button:focus-visible": {
+      borderColor: "rgba(37, 99, 235, 0.55)",
+      backgroundColor: "rgba(255, 255, 255, 0.96)",
+      color: "#2563eb",
+      outline: "none",
+    },
+    ".cm-mardora-media-preview-button svg": {
+      width: "1rem",
+      height: "1rem",
+    },
+    ".cm-mardora-media-lightbox": {
+      position: "fixed",
+      inset: "0",
+      zIndex: "10000",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "2rem",
+      backgroundColor: "rgba(15, 23, 42, 0.24)",
+    },
+    ".cm-mardora-media-lightbox-panel": {
+      position: "relative",
+      width: "min(96vw, 1200px)",
+      maxWidth: "min(96vw, 1200px)",
+      maxHeight: "92vh",
+      borderRadius: "0.75rem",
+      backgroundColor: "#ffffff",
+      color: "#0f172a",
+      boxShadow: "0 24px 70px rgba(15, 23, 42, 0.28)",
+      overflow: "hidden",
+    },
+    ".cm-mardora-media-lightbox-body": {
+      maxWidth: "100%",
+      maxHeight: "92vh",
+      overflow: "auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "1rem",
+    },
+    ".cm-mardora-media-lightbox-image": {
+      display: "block",
+      maxWidth: "100%",
+      maxHeight: "calc(92vh - 2rem)",
+      width: "auto",
+      height: "auto",
+      objectFit: "contain",
+    },
+    ".cm-mardora-media-lightbox-html": {
+      width: "100%",
+      maxWidth: "100%",
+      maxHeight: "calc(92vh - 2rem)",
+      overflow: "auto",
+      display: "flex",
+      justifyContent: "center",
+    },
+    ".cm-mardora-media-lightbox-html svg": {
+      display: "block",
+      maxWidth: "100%",
+      maxHeight: "calc(92vh - 2rem)",
+      width: "100%",
+      height: "auto",
+    },
+    ".cm-mardora-media-lightbox-close": {
+      position: "absolute",
+      top: "0.5rem",
+      right: "0.5rem",
+      width: "2rem",
+      height: "2rem",
+      border: "1px solid rgba(148, 163, 184, 0.45)",
+      borderRadius: "0.375rem",
+      backgroundColor: "rgba(255, 255, 255, 0.92)",
+      color: "#334155",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "0",
+      cursor: "pointer",
+    },
+    ".cm-mardora-media-lightbox-close:hover, .cm-mardora-media-lightbox-close:focus-visible": {
+      borderColor: "rgba(37, 99, 235, 0.55)",
+      color: "#2563eb",
+      outline: "none",
+    },
+    ".cm-mardora-media-lightbox-close svg": {
+      width: "1rem",
+      height: "1rem",
+    },
+  },
+  dark: {
+    ".cm-mardora-media-preview-button": {
+      borderColor: "rgba(71, 85, 105, 0.72)",
+      backgroundColor: "rgba(15, 23, 42, 0.84)",
+      color: "#cbd5e1",
+    },
+    ".cm-mardora-media-preview-button:hover, .cm-mardora-media-preview-button:focus-visible": {
+      borderColor: "rgba(96, 165, 250, 0.68)",
+      backgroundColor: "rgba(15, 23, 42, 0.96)",
+      color: "#93c5fd",
+    },
+    ".cm-mardora-media-lightbox-panel": {
+      backgroundColor: "#0f172a",
+      color: "#e2e8f0",
+      boxShadow: "0 24px 70px rgba(0, 0, 0, 0.45)",
+    },
+    ".cm-mardora-media-lightbox-close": {
+      borderColor: "rgba(71, 85, 105, 0.72)",
+      backgroundColor: "rgba(15, 23, 42, 0.92)",
+      color: "#cbd5e1",
+    },
+    ".cm-mardora-media-lightbox-close:hover, .cm-mardora-media-lightbox-close:focus-visible": {
+      borderColor: "rgba(96, 165, 250, 0.68)",
+      color: "#93c5fd",
+    },
+  },
+});

package/src/editor/media-lightbox.ts

@@ -0,0 +1,125 @@
+import { createMardoraIcon } from "./icons";
+
+export type MediaLightboxContent =
+  | {
+      readonly kind: "image";
+      readonly src: string;
+      readonly alt: string;
+      readonly title?: string;
+    }
+  | {
+      readonly kind: "html";
+      readonly html: string;
+      readonly title?: string;
+    };
+
+export interface OpenMediaLightboxOptions {
+  readonly content: MediaLightboxContent;
+  readonly returnFocus?: HTMLElement | null;
+}
+
+export interface MediaLightboxHandle {
+  readonly element: HTMLElement;
+  close(): void;
+}
+
+export interface MediaPreviewButtonOptions {
+  readonly label: string;
+  readonly content: () => MediaLightboxContent | null;
+}
+
+export function consumeMediaLightboxTrigger(event: Pick<Event, "preventDefault" | "stopPropagation">): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+export function createMediaPreviewButton(
+  ownerDocument: Document,
+  options: MediaPreviewButtonOptions
+): HTMLButtonElement {
+  const button = ownerDocument.createElement("button");
+  button.type = "button";
+  button.className = "cm-mardora-media-preview-button";
+  button.setAttribute("aria-label", options.label);
+  button.title = options.label;
+  const icon = createMardoraIcon("maximize-2");
+  if (icon) button.appendChild(icon);
+  button.addEventListener("click", (event) => {
+    consumeMediaLightboxTrigger(event);
+    const content = options.content();
+    if (!content) return;
+    openMediaLightbox(ownerDocument, { content, returnFocus: button });
+  });
+  return button;
+}
+
+export function openMediaLightbox(ownerDocument: Document, options: OpenMediaLightboxOptions): MediaLightboxHandle {
+  ownerDocument.querySelector(".cm-mardora-media-lightbox")?.remove();
+  const mountPoint = options.returnFocus?.closest(".cm-editor") ?? ownerDocument.body;
+
+  const root = ownerDocument.createElement("div");
+  root.className = "cm-mardora-media-lightbox";
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "true");
+  if (options.content.title) {
+    root.setAttribute("aria-label", options.content.title);
+  }
+
+  const panel = ownerDocument.createElement("div");
+  panel.className = "cm-mardora-media-lightbox-panel";
+  panel.addEventListener("click", (event) => event.stopPropagation());
+
+  const closeButton = ownerDocument.createElement("button");
+  closeButton.type = "button";
+  closeButton.className = "cm-mardora-media-lightbox-close";
+  closeButton.setAttribute("aria-label", "关闭大图查看");
+  closeButton.title = "关闭大图查看";
+  const closeIcon = createMardoraIcon("x");
+  if (closeIcon) closeButton.appendChild(closeIcon);
+
+  const body = ownerDocument.createElement("div");
+  body.className = "cm-mardora-media-lightbox-body";
+  body.appendChild(createLightboxContent(ownerDocument, options.content));
+
+  panel.appendChild(closeButton);
+  panel.appendChild(body);
+  root.appendChild(panel);
+
+  const close = (): void => {
+    root.remove();
+    ownerDocument.removeEventListener("keydown", handleKeydown);
+    options.returnFocus?.focus();
+  };
+  const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === "Escape") {
+      close();
+    }
+  };
+
+  root.addEventListener("click", close);
+  closeButton.addEventListener("click", (event) => {
+    consumeMediaLightboxTrigger(event);
+    close();
+  });
+  ownerDocument.addEventListener("keydown", handleKeydown);
+  mountPoint.appendChild(root);
+  closeButton.focus();
+
+  return { element: root, close };
+}
+
+function createLightboxContent(ownerDocument: Document, content: MediaLightboxContent): HTMLElement {
+  if (content.kind === "image") {
+    const image = ownerDocument.createElement("img");
+    image.className = "cm-mardora-media-lightbox-image";
+    image.src = content.src;
+    image.alt = content.alt;
+    if (content.title) image.title = content.title;
+    return image;
+  }
+
+  const container = ownerDocument.createElement("div");
+  container.className = "cm-mardora-media-lightbox-html";
+  container.innerHTML = content.html;
+  return container;
+}

package/src/editor/plugin.ts

@@ -0,0 +1,294 @@
+import { Decoration, EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
+import { Extension, Range } from "@codemirror/state";
+import { MarkdownConfig } from "@lezer/markdown";
+import { SyntaxNode } from "@lezer/common";
+import { MardoraConfig } from "./mardora";
+import { createTheme, ThemeEnum, ThemeStyle } from "./utils";
+import { StyleModule } from "style-mod";
+
+/**
+ * Context passed to plugin lifecycle methods
+ */
+export interface PluginContext {
+  /** Current configuration */
+  readonly config: MardoraConfig;
+}
+
+/**
+ * Plugin configuration schema
+ */
+export interface PluginConfig {
+  [key: string]: unknown;
+}
+
+/**
+ * Decoration context passed to plugin decoration builders
+ * Provides access to view state and decoration collection
+ */
+export interface DecorationContext {
+  /** The EditorView instance (readonly) */
+  readonly view: EditorView;
+
+  /** Array to push decorations into (will be sorted automatically) */
+  readonly decorations: Range<Decoration>[];
+
+  /** Check if selection overlaps with a range (to show raw markdown) */
+  selectionOverlapsRange(from: number, to: number): boolean;
+
+  /** Check if cursor is within a range */
+  cursorInRange(from: number, to: number): boolean;
+}
+
+/**
+ * Abstract base class for all mardora plugins
+ *
+ * Implements OOP principles:
+ * - Abstraction: abstract name/version must be implemented by subclasses
+ * - Encapsulation: private _config, protected _context
+ * - Inheritance: specialized plugin classes can extend this
+ */
+export abstract class MardoraPlugin {
+  /** Unique plugin identifier (abstract - must be implemented) */
+  abstract readonly name: string;
+
+  /** Plugin version (abstract - must be implemented) */
+  abstract readonly version: string;
+
+  /** Decoration priority (higher = applied later) */
+  readonly decorationPriority: number = 100;
+
+  /** Plugin dependencies - names of required plugins */
+  readonly dependencies: string[] = [];
+
+  /** Node types this plugin handles for decorations and preview rendering */
+  readonly requiredNodes: readonly string[] = [];
+
+  /** Private configuration storage */
+  private _config: PluginConfig = {};
+
+  /** Protected context - accessible to subclasses */
+  protected _context: PluginContext | null = null;
+
+  /** Get plugin configuration */
+  get config(): PluginConfig {
+    return this._config;
+  }
+
+  /** Set plugin configuration */
+  set config(value: PluginConfig) {
+    this._config = value;
+  }
+
+  /** Get plugin context */
+  get context(): PluginContext | null {
+    return this._context;
+  }
+
+  /** Plugin theme */
+  get theme(): (theme: ThemeEnum) => ThemeStyle {
+    return createTheme({
+      default: {},
+      dark: {},
+      light: {},
+    });
+  }
+
+  // ============================================
+  // EXTENSION METHODS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Return CodeMirror extensions for this plugin
+   * Override to provide custom extensions
+   */
+  getExtensions(): Extension[] {
+    return [];
+  }
+
+  /**
+   * Return markdown parser extensions
+   * Override to extend markdown parsing
+   */
+  getMarkdownConfig(): MarkdownConfig | null {
+    return null;
+  }
+
+  /**
+   * Return keybindings for this plugin
+   * Override to add custom keyboard shortcuts
+   */
+  getKeymap(): KeyBinding[] {
+    return [];
+  }
+
+  // ============================================
+  // DECORATION METHODS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Build decorations for the current view state
+   * Override to contribute decorations to the editor
+   *
+   * @param ctx - Decoration context with view and decoration array
+   */
+  buildDecorations(_ctx: DecorationContext): void {
+    void _ctx;
+    // Default implementation does nothing
+    // Subclasses override to add decorations
+  }
+
+  // ============================================
+  // LIFECYCLE HOOKS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Called when plugin is registered with mardora
+   * Override to perform initialization
+   *
+   * @param context - Plugin context with configuration
+   */
+  onRegister(context: PluginContext): void | Promise<void> {
+    this._context = context;
+  }
+
+  /**
+   * Called when plugin is unregistered
+   * Override to perform cleanup
+   */
+  onUnregister(): void {
+    this._context = null;
+  }
+
+  /**
+   * Called when EditorView is created and ready
+   * Override to perform view-specific initialization
+   *
+   * @param view - The EditorView instance
+   */
+  onViewReady(_view: EditorView): void {
+    void _view;
+    // Default implementation does nothing
+  }
+
+  /**
+   * Called on view updates (document changes, selection changes, etc.)
+   * Override to react to editor changes
+   *
+   * @param update - The ViewUpdate with change information
+   */
+  onViewUpdate(_update: ViewUpdate): void {
+    void _update;
+    // Default implementation does nothing
+  }
+
+  // ============================================
+  // PROTECTED UTILITIES (for subclasses)
+  // ============================================
+
+  /**
+   * Helper to get current editor state
+   * @param view - The EditorView instance
+   */
+  protected getState(view: EditorView) {
+    return view.state;
+  }
+
+  /**
+   * Helper to get current document
+   * @param view - The EditorView instance
+   */
+  protected getDocument(view: EditorView) {
+    return view.state.doc;
+  }
+
+  // ============================================
+  // PREVIEW RENDERING METHODS (for mardora/preview)
+  // ============================================
+
+  /**
+   * Render a syntax node to HTML for preview mode
+   * Override to provide custom HTML rendering for specific node types
+   *
+   * @param node - The syntax node to render
+   * @param children - Pre-rendered children HTML
+   * @param ctx - Preview context with document and utilities
+   * @returns HTML string to use, or null to use default rendering
+   */
+  renderToHTML?(
+    node: SyntaxNode,
+    children: string,
+    ctx: {
+      doc: string;
+      sliceDoc(from: number, to: number): string;
+      sanitize(html: string): string;
+      syntaxHighlighters?: readonly import("@lezer/highlight").Highlighter[];
+    }
+  ): string | null | Promise<string | null>;
+
+  /**
+   * Return the document position consumed by preview rendering.
+   * Plugins can use this when a rendered node owns trailing syntax that is
+   * outside the Lezer node range, such as image attributes.
+   */
+  getPreviewConsumedTo?(
+    node: SyntaxNode,
+    ctx: {
+      doc: string;
+      sliceDoc(from: number, to: number): string;
+    }
+  ): number | null;
+
+  /**
+   * Get CSS styles for preview mode
+   * Override to provide custom CSS for preview rendering
+   *
+   * @param theme - Current theme enum
+   * @returns CSS string for preview styles
+   */
+  getPreviewStyles(theme: ThemeEnum, wrapperClass: string): string {
+    const themeStyles = this.theme(theme);
+    return this.transformToCss(themeStyles, wrapperClass);
+  }
+
+  /**
+   * Transform ThemeStyle object to CSS string for preview
+   * Uses cssClassMap to convert CM selectors to semantic selectors
+   */
+  protected transformToCss(themeStyles: ThemeStyle, wrapperClass: string): string {
+    const styleMod = new StyleModule(themeStyles, {
+      finish: (sel) => {
+        return `.${wrapperClass} ${sel}`;
+      },
+    });
+    return styleMod.getRules();
+  }
+}
+
+/**
+ * Base class for plugins that primarily contribute decorations
+ * Extends MardoraPlugin with decoration-focused defaults
+ */
+export abstract class DecorationPlugin extends MardoraPlugin {
+  /**
+   * Decoration priority - lower than default for decoration plugins
+   * Override to customize
+   */
+  override decorationPriority = 50;
+
+  /**
+   * Subclasses must implement this to provide decorations
+   * @param ctx - Decoration context
+   */
+  abstract override buildDecorations(ctx: DecorationContext): void;
+}
+
+/**
+ * Base class for plugins that add syntax/parser extensions
+ * Extends MardoraPlugin with syntax-focused requirements
+ */
+export abstract class SyntaxPlugin extends MardoraPlugin {
+  /**
+   * Subclasses must implement this to provide markdown config
+   */
+  abstract override getMarkdownConfig(): MarkdownConfig;
+}

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

@@ -0,0 +1,123 @@
+export type NativeSelectionActivationInput = {
+  editorSelectionEmpty: boolean;
+  nativeSelectionCollapsed: boolean;
+  anchorInEditor: boolean;
+  focusInEditor: boolean;
+  rangeCount: number;
+  anchorExcluded?: boolean;
+  focusExcluded?: boolean;
+};
+
+export type SelectionToolbarSyntaxNodeInput = {
+  selectionFrom: number;
+  selectionTo: number;
+  nodeFrom: number;
+  nodeTo: number;
+  nodeName: string;
+};
+
+type ClassListLike = {
+  length: number;
+  item(index: number): string | null;
+};
+
+type ElementLike = {
+  className?: unknown;
+  classList?: unknown;
+  parentElement?: unknown;
+};
+
+const excludedClassPrefixes = [
+  "cm-mardora-code-block",
+  "cm-mardora-code-caption",
+  "cm-mardora-code-copy",
+  "cm-mardora-code-diff",
+  "cm-mardora-code-fence",
+  "cm-mardora-code-header",
+  "cm-mardora-code-line",
+  "cm-mardora-image-",
+  "cm-mardora-math-",
+  "cm-mardora-mermaid-",
+] as const;
+
+const excludedSyntaxNodeNames = new Set(["FencedCode", "MermaidBlock", "MathBlock", "InlineMath", "Image"]);
+
+/** Returns whether a browser native selection should activate the toolbar. */
+export function canActivateFromNativeSelection(input: NativeSelectionActivationInput): boolean {
+  return (
+    !input.nativeSelectionCollapsed &&
+    input.anchorInEditor &&
+    input.focusInEditor &&
+    input.rangeCount > 0 &&
+    !input.anchorExcluded &&
+    !input.focusExcluded
+  );
+}
+
+export function hasSelectionToolbarExcludedAncestor(target: unknown, root?: unknown): boolean {
+  let current = toElementLike(target);
+  while (current) {
+    if (hasExcludedClass(current)) {
+      return true;
+    }
+    if (current === root) {
+      return false;
+    }
+    current = toElementLike(current.parentElement);
+  }
+  return false;
+}
+
+export function selectionOverlapsExcludedSyntaxNode(input: SelectionToolbarSyntaxNodeInput): boolean {
+  return (
+    excludedSyntaxNodeNames.has(input.nodeName) &&
+    input.selectionFrom < input.nodeTo &&
+    input.selectionTo > input.nodeFrom
+  );
+}
+
+function toElementLike(value: unknown): ElementLike | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const element = value as ElementLike;
+  if (hasClassData(element)) {
+    return element;
+  }
+  return toElementLike(element.parentElement);
+}
+
+function hasClassData(value: ElementLike): boolean {
+  return value.className !== undefined || value.classList !== undefined || value.parentElement !== undefined;
+}
+
+function hasExcludedClass(element: ElementLike): boolean {
+  for (const className of classNamesFrom(element)) {
+    if (excludedClassPrefixes.some((prefix) => className.startsWith(prefix))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function classNamesFrom(element: ElementLike): string[] {
+  const classList = element.classList;
+  if (isClassListLike(classList)) {
+    const classNames: string[] = [];
+    for (let index = 0; index < classList.length; index += 1) {
+      const item = classList.item(index);
+      if (item) classNames.push(item);
+    }
+    return classNames;
+  }
+  return typeof element.className === "string" ? element.className.split(/\s+/).filter(Boolean) : [];
+}
+
+function isClassListLike(value: unknown): value is ClassListLike {
+  return (
+    !!value &&
+    typeof value === "object" &&
+    typeof (value as ClassListLike).length === "number" &&
+    typeof (value as ClassListLike).item === "function"
+  );
+}