draftly 0.1.0-alpha.0

package/src/plugin.ts

@@ -0,0 +1,245 @@
+import { Decoration, EditorView, KeyBinding, ViewUpdate, WidgetType } from "@codemirror/view";
+import { Extension, Range } from "@codemirror/state";
+import { MarkdownConfig } from "@lezer/markdown";
+import { DraftlyConfig } from "./draftly";
+
+/**
+ * Context passed to plugin lifecycle methods
+ */
+export interface PluginContext {
+  /** Current configuration */
+  readonly config: DraftlyConfig;
+}
+
+/**
+ * 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 draftly 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 DraftlyPlugin {
+  /** Unique plugin identifier (abstract - must be implemented) */
+  abstract readonly name: string;
+
+  /** Plugin version (abstract - must be implemented) */
+  abstract readonly version: string;
+
+  /** Plugin dependencies - names of required plugins */
+  readonly dependencies: 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;
+  }
+
+  // ============================================
+  // 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)
+  // ============================================
+
+  /**
+   * Decoration priority (higher = applied later)
+   * Override to customize priority. Default: 100
+   */
+  get decorationPriority(): number {
+    return 100;
+  }
+
+  /**
+   * 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 {
+    // Default implementation does nothing
+    // Subclasses override to add decorations
+  }
+
+  // ============================================
+  // LIFECYCLE HOOKS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Called when plugin is registered with draftly
+   * 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 {
+    // 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 {
+    // Default implementation does nothing
+  }
+
+  // ============================================
+  // ACCESSIBILITY METHODS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Return ARIA attributes to add to the editor
+   * Override to improve accessibility
+   */
+  getAriaAttributes(): Record<string, string> {
+    return {};
+  }
+
+  // ============================================
+  // VIEW CONTRIBUTIONS (overridable by subclasses)
+  // ============================================
+
+  /**
+   * Return widget types this plugin provides
+   * Override to contribute custom widgets
+   */
+  getWidgets(): WidgetType[] {
+    return [];
+  }
+
+  // ============================================
+  // 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;
+  }
+}
+
+/**
+ * Base class for plugins that primarily contribute decorations
+ * Extends DraftlyPlugin with decoration-focused defaults
+ */
+export abstract class DecorationPlugin extends DraftlyPlugin {
+  /**
+   * Decoration priority - lower than default for decoration plugins
+   * Override to customize
+   */
+  override get decorationPriority(): number {
+    return 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 DraftlyPlugin with syntax-focused requirements
+ */
+export abstract class SyntaxPlugin extends DraftlyPlugin {
+  /**
+   * Subclasses must implement this to provide markdown config
+   */
+  abstract override getMarkdownConfig(): MarkdownConfig;
+}

package/src/plugins/heading-plugin.ts

@@ -0,0 +1,163 @@
+import { Decoration, EditorView } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { DecorationContext, DecorationPlugin } from "../plugin";
+import { Extension } from "@codemirror/state";
+
+/**
+ * Node types for ATX headings in markdown
+ */
+const HEADING_TYPES = ["ATXHeading1", "ATXHeading2", "ATXHeading3", "ATXHeading4", "ATXHeading5", "ATXHeading6"];
+
+/**
+ * Mark decorations for heading content
+ */
+const headingMarkDecorations = {
+  "heading-1": Decoration.mark({ class: "cm-draftly-h1" }),
+  "heading-2": Decoration.mark({ class: "cm-draftly-h2" }),
+  "heading-3": Decoration.mark({ class: "cm-draftly-h3" }),
+  "heading-4": Decoration.mark({ class: "cm-draftly-h4" }),
+  "heading-5": Decoration.mark({ class: "cm-draftly-h5" }),
+  "heading-6": Decoration.mark({ class: "cm-draftly-h6" }),
+  "heading-mark": Decoration.mark({ class: "cm-draftly-heading-mark" }),
+};
+
+/**
+ * Line decorations for heading lines
+ */
+const headingLineDecorations = {
+  "heading-1": Decoration.line({ class: "cm-draftly-line-h1" }),
+  "heading-2": Decoration.line({ class: "cm-draftly-line-h2" }),
+  "heading-3": Decoration.line({ class: "cm-draftly-line-h3" }),
+  "heading-4": Decoration.line({ class: "cm-draftly-line-h4" }),
+  "heading-5": Decoration.line({ class: "cm-draftly-line-h5" }),
+  "heading-6": Decoration.line({ class: "cm-draftly-line-h6" }),
+};
+
+/**
+ * HeadingPlugin - Decorates markdown headings
+ *
+ * Adds visual styling to ATX headings (# through ######)
+ * - Line decorations for the entire heading line
+ * - Mark decorations for heading content
+ * - Hides # markers when cursor is not in the heading
+ */
+export class HeadingPlugin extends DecorationPlugin {
+  readonly name = "heading";
+  readonly version = "1.0.0";
+
+  /**
+   * Higher priority to ensure headings are styled first
+   */
+  override get decorationPriority(): number {
+    return 10;
+  }
+
+  /**
+   * Get the extensions for this plugin
+   */
+  getExtensions(): Extension[] {
+    return [headingTheme];
+  }
+
+  /**
+   * Build heading decorations by iterating the syntax tree
+   */
+  override buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        if (!HEADING_TYPES.includes(name)) {
+          return;
+        }
+
+        const level = parseInt(name.slice(-1), 10);
+        const headingClass = `heading-${level}` as keyof typeof headingMarkDecorations;
+        const lineClass = `heading-${level}` as keyof typeof headingLineDecorations;
+
+        // Add line decoration
+        const line = view.state.doc.lineAt(from);
+        decorations.push(headingLineDecorations[lineClass].range(line.from));
+
+        // Add mark decoration for the heading content
+        decorations.push(headingMarkDecorations[headingClass].range(from, to + 1));
+
+        // Find and style the heading marker (#)
+        // Only hide when cursor is not in the heading
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          const headingMark = node.node.getChild("HeaderMark");
+          if (headingMark) {
+            decorations.push(headingMarkDecorations["heading-mark"].range(headingMark.from, headingMark.to + 1));
+          }
+        }
+      },
+    });
+  }
+}
+
+const headingTheme = EditorView.theme({
+  ".cm-draftly-h1": {
+    fontSize: "2em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  ".cm-draftly-h2": {
+    fontSize: "1.75em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  ".cm-draftly-h3": {
+    fontSize: "1.5em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  ".cm-draftly-h4": {
+    fontSize: "1.25em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  ".cm-draftly-h5": {
+    fontSize: "1em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  ".cm-draftly-h6": {
+    fontSize: "0.75em",
+    fontWeight: "bold",
+    fontFamily: "sans-serif",
+    textDecoration: "none",
+  },
+
+  // Heading line styles
+  ".cm-draftly-line-h1": {
+    paddingTop: "1.5em",
+    paddingBottom: "0.5em",
+  },
+  ".cm-draftly-line-h2": {
+    paddingTop: "1.25em",
+    paddingBottom: "0.5em",
+  },
+  ".cm-draftly-line-h3, .cm-draftly-line-h4, .cm-draftly-line-h5, .cm-draftly-line-h6": {
+    paddingTop: "1em",
+    paddingBottom: "0.5em",
+  },
+
+  // Heading mark (# symbols)
+  ".cm-draftly-heading-mark": {
+    display: "none",
+  },
+});