📄 CM6 Extensions Cheat Sheet

🚀 CM6 Extension Architecture: Quick-Start

🗺️ System Overview

• LSP Client: Real-time diagnostics, autocomplete, & code actions.
• Ghost Text: AI inline suggestions at the cursor.
• Git-Diff: Visual line-state gutters (Add/Mod/Del).

---

🔌 Core Modules & Config

🧬 1. LSP (Language Server Protocol)

• Transport: JSON-RPC over WebSockets / Local Bridge.
• State: Custom state fields buffer incoming diagnostics $\to$ triggers auto-complete.
• View: Custom standard autocomplete facets + linter integration.

// Config Interface
interface LSPConfig {
  serverUrl: string;     // WS endpoint
  capabilities: {        // Hover, diagnostics, formatting
    hover: boolean;
    diagnostics: boolean;
    format: boolean;
  };
}

👻 2. Inline Ghost Text

• Type: State Field + View Plugin.
• Logic: Debounces transactions $\to$ inserts faint, italic decoration widgets at cursor.

// Config Interface
interface GhostTextConfig {
  delayMs: number;       // Debounce timeout (e.g., 75ms)
  acceptKey: string;     // Shortcut to commit (e.g., 'Tab')
}

🌲 3. Git-Diff Gutters

• Type: Gutter Marker + Gutter Setup.
• Logic: Diffs current doc against base ref $\to$ maps markers on change/refresh.

\color[rgb]{0,0.8,0}\mathbf{Green} & \text{Added Lines} \\ \color[rgb]{0,0.5,1}\mathbf{Blue} & \text{Modified Lines} \\ \color[rgb]{1,0,0}\mathbf{Red} & \text{Deleted Lines (Between lines)} \end{cases}$$ --- ## 🛠️ Implementation & Setup Initialize in this exact sequence to avoid dependency clashes: ```typescript import { EditorState } from "@codemirror/state"; import { EditorView } from "@codemirror/view"; import { lspExtension } from "./lsp"; import { gitDiffGutter } from "./git-diff"; import { inlineGhostText } from "./ghost-text"; // ⚠️ Strict Load Order: LSP -> Git Diff -> Ghost Text const extensions = [ lspExtension({ serverUrl: "ws://localhost:8080" }), gitDiffGutter({ baseRef: "HEAD" }), inlineGhostText({ delayMs: 150, acceptKey: "Tab" }) ]; const view = new EditorView({ state: EditorState.create({ extensions }), parent: document.body }); ``` ---