@kerebron/extension-lsp 0.4.3 → 0.4.5

package/README.md

@@ -1,82 +1,192 @@
-# Kerebron - Prosemirror based online editor kit
+# LSP Extension
 
-## Watch a Demo
+Language Server Protocol (LSP) integration for Kerebron editors.
 
-<a href="https://youtube.com/shorts/OdJjhAPj-wA?feature=share" target="_blank">
-  <img src="https://github.com/user-attachments/assets/b63ec84a-0ed2-4f98-920c-76f6d3215168" alt="Alt Text" width="200">
-</a>
+## Features
 
-## Playground Demo
+- **LSP Client**: Connect to any LSP-compatible language server
+- **WebSocket Transport**: Built-in WebSocket transport for browser-based connections
+- **Autocomplete**: Get intelligent code completions from the language server
+- **Diagnostics**: Display errors and warnings from the language server
+- **Status Indicator**: Visual indicator showing LSP connection status in the toolbar
 
-[playground](https://demo.kerebron.com) - be nice.
+## Installation
 
-## Overview
+```bash
+npm install @kerebron/extension-lsp
+```
+
+## Usage
+
+### Basic Setup
+
+```typescript
+import { CoreEditor } from '@kerebron/editor';
+import { ExtensionLsp, type LspTransportGetter, type Transport } from '@kerebron/extension-lsp';
+import { LspWebSocketTransport } from '@kerebron/extension-lsp/LspWebSocketTransport';
+
+// Import styles for the status indicator
+import '@kerebron/extension-lsp/assets/lsp-status.css';
+
+// Configure transport for different languages
+const getLspTransport: LspTransportGetter = (lang: string): Transport | undefined => {
+  const baseUrl = 'ws://localhost:8000/lsp';
+  
+  switch (lang) {
+    case 'markdown':
+      return new LspWebSocketTransport(`${baseUrl}/markdown`);
+    case 'typescript':
+    case 'javascript':
+      return new LspWebSocketTransport(`${baseUrl}/typescript`);
+    case 'json':
+      return new LspWebSocketTransport(`${baseUrl}/json`);
+    default:
+      return undefined;
+  }
+};
+
+const editor = new CoreEditor({
+  element: document.getElementById('editor'),
+  uri: 'file:///document.md',  // Required: LSP needs a file URI
+  extensions: [
+    // ... other extensions
+    new ExtensionLsp({ getLspTransport }),
+  ],
+});
+```
 
-Using vanilla Prosemirror modules is often impossible because of
-incompatibilities.
+### With Toolbar Status Indicator
 
-Kerebron forks several prosemirror projects into one monorepo in order to keep
-them in sync.
+When used with `ExtensionCustomMenu`, an LSP status indicator is automatically added to the toolbar:
 
-Project is inspired on https://tiptap.dev/, but instead of building wrapper
-around a wrapper it borrows concept of extension and command manager.
+```typescript
+import { ExtensionCustomMenu } from '@kerebron/extension-menu';
+import { ExtensionLsp } from '@kerebron/extension-lsp';
 
-It has simplified tooling (deno), fewer dependencies and resulting in lower
-number of output npm modules.
+import '@kerebron/extension-menu/assets/custom-menu.css';
+import '@kerebron/extension-lsp/assets/lsp-status.css';
 
-**Work in progress**
+const editor = new CoreEditor({
+  element: document.getElementById('editor'),
+  uri: 'file:///document.md',
+  extensions: [
+    // ... other extensions
+    new ExtensionLsp({ getLspTransport }),
+    new ExtensionCustomMenu(),  // Must come AFTER ExtensionLsp
+  ],
+});
+```
 
+The status indicator shows:
 
-## Build
+| Status | Indicator | Description |
+|--------|-----------|-------------|
+| Connected | 🟢 Green dot | Successfully connected to LSP server |
+| Connecting | 🟡 Yellow pulsing dot | Attempting to connect |
+| Disconnected | 🔴 Red dot | Not connected to LSP server |
 
-### Build static examples and `.wasm` files
+### Disable Auto Status Indicator
 
-```sh
-deno task build
+```typescript
+new ExtensionCustomMenu({ autoAddLspStatus: false })
 ```
 
-## Development
+### Manual Status Element
 
-To start example server:
+You can manually add the LSP status element for more control:
 
-```sh
-deno task -f server-deno-hono start
-```
+```typescript
+import { LspStatusElement } from '@kerebron/extension-lsp/LspStatus';
 
-## Examples
+const lspExtension = new ExtensionLsp({ getLspTransport });
 
-TODO
+new ExtensionCustomMenu({
+  autoAddLspStatus: false,
+  trailingElements: [
+    new LspStatusElement({
+      lspExtension,
+      label: 'Language Server',  // Custom label (default: 'LSP')
+    }),
+  ],
+});
+```
 
-### NPM packages are generated using DNT
+## Configuration
 
-- https://deno.com/blog/publish-esm-cjs-module-dnt - the easiest way to publish
-  a hybrid npm module for ESM and CommonJS
-- https://github.com/denoland/dnt
-- https://gaubee.com/article/Publishing-Your-Deno-Project-as-a-Monorepo-using-dnt/
+### LspConfig
 
-To generate npm packages
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `getLspTransport` | `LspTransportGetter` | Yes | Function that returns a transport for a given language |
 
-```sh
-deno -A ./build/build_npm.ts
+### LspTransportGetter
+
+```typescript
+type LspTransportGetter = (lang: string) => Transport | undefined;
 ```
 
-## Run through docker
+Returns a `Transport` instance for the specified language, or `undefined` if no LSP support is available for that language.
 
-```sh
-docker build . -t editor-test
-docker run -it -p 8000:8000 -v $PWD:/usr/src/app editor-test
-```
+## Transports
 
-## Prerequisites
+### LspWebSocketTransport
 
-Install deno
+Built-in WebSocket transport for browser-based LSP connections:
 
+```typescript
+import { LspWebSocketTransport } from '@kerebron/extension-lsp/LspWebSocketTransport';
+
+const transport = new LspWebSocketTransport('ws://localhost:8000/lsp/typescript');
 ```
-npm install -g deno
-```
 
-Install rust
+### Custom Transport
+
+Implement the `Transport` interface for custom transport mechanisms:
 
+```typescript
+interface Transport {
+  connect(): Promise<void>;
+  disconnect(): void;
+  send(message: string): void;
+  onMessage(handler: (message: string) => void): void;
+  onError(handler: (error: Error) => void): void;
+  onClose(handler: () => void): void;
+}
 ```
-curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+## Server Setup
+
+The LSP extension requires a server that proxies WebSocket connections to LSP servers. See the `server-deno-hono` example for a reference implementation.
+
+Example server routes:
+
+```typescript
+// Proxy to a markdown language server
+app.get('/lsp/markdown', upgradeWebSocket(() => {
+  return lspAdapter.upgradeWebSocket();
+}));
+
+// Proxy to TypeScript language server
+app.get('/lsp/typescript', upgradeWebSocket(() => {
+  return proxyProcess('npx', ['typescript-language-server', '--stdio']);
+}));
 ```
+
+## CSS Classes
+
+The status indicator uses the following CSS classes for customization:
+
+| Class | Description |
+|-------|-------------|
+| `.kb-lsp-status` | Container element |
+| `.kb-lsp-status__button` | Button wrapper |
+| `.kb-lsp-status__dot` | Status dot indicator |
+| `.kb-lsp-status__dot--connected` | Green connected state |
+| `.kb-lsp-status__dot--connecting` | Yellow connecting state (pulsing) |
+| `.kb-lsp-status__dot--disconnected` | Red disconnected state |
+| `.kb-lsp-status__label` | Text label |
+
+## Related
+
+- [@kerebron/extension-menu](../extension-menu) - Custom menu with auto LSP status detection
+- [@kerebron/extension-autocomplete](../extension-autocomplete) - Autocomplete functionality

package/assets/lsp-status.css

@@ -0,0 +1,60 @@
+/* LSP Status Menu Element */
+.kb-lsp-status {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.kb-lsp-status__indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--kb-border, #444);
+  border-radius: 4px;
+  background: var(--kb-surface, #2a2a2a);
+  color: var(--kb-text, #e8e8e8);
+  font-size: 0.85rem;
+  cursor: default;
+}
+
+/* Status dot indicator */
+.kb-lsp-status__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.kb-lsp-status__dot--connected {
+  background-color: #22c55e;
+  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
+}
+
+.kb-lsp-status__dot--connecting {
+  background-color: #eab308;
+  box-shadow: 0 0 4px rgba(234, 179, 8, 0.5);
+  animation: kb-lsp-pulse 1.5s ease-in-out infinite;
+}
+
+.kb-lsp-status__dot--disconnected {
+  background-color: #ef4444;
+  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
+}
+
+@keyframes kb-lsp-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Label */
+.kb-lsp-status__label {
+  font-weight: 500;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}

package/esm/extension-lsp/src/LspStatus.d.ts

@@ -0,0 +1,35 @@
+import "../../_dnt.polyfills.js";
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import type { MenuElement } from '../../extension-menu/src/mod.js';
+import type { ExtensionLsp } from './ExtensionLsp.js';
+export type LspConnectionStatus = 'connected' | 'connecting' | 'disconnected';
+export interface LspStatusOptions {
+    /** The LSP extension instance to monitor */
+    lspExtension: ExtensionLsp;
+    /** Optional label to show (e.g., 'LSP' or language name) */
+    label?: string;
+}
+/**
+ * A menu element that displays LSP connection status.
+ * Shows a status indicator dot with an optional label.
+ */
+export declare class LspStatusElement implements MenuElement {
+    private lspExtension;
+    private label;
+    private dom;
+    private statusDot;
+    private labelEl;
+    private status;
+    private statusCheckInterval;
+    constructor(options: LspStatusOptions);
+    render(_view: EditorView): {
+        dom: HTMLElement;
+        update: (state: EditorState) => boolean;
+    };
+    private getClient;
+    private updateStatusFromClient;
+    private setStatus;
+    destroy(): void;
+}
+//# sourceMappingURL=LspStatus.d.ts.map

package/esm/extension-lsp/src/LspStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LspStatus.d.ts","sourceRoot":"","sources":["../../../src/extension-lsp/src/LspStatus.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,YAAY,EAAE,YAAY,CAAC;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,gBAAiB,YAAW,WAAW;IAClD,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAuC;IACrD,OAAO,CAAC,mBAAmB,CAA+C;gBAE9D,OAAO,EAAE,gBAAgB;IAKrC,MAAM,CACJ,KAAK,EAAE,UAAU,GAChB;QAAE,GAAG,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;KAAE;IAyChE,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,SAAS;IAoBjB,OAAO;CAMR"}

package/esm/extension-lsp/src/LspStatus.js

@@ -0,0 +1,128 @@
+import "../../_dnt.polyfills.js";
+const CSS_PREFIX = 'kb-lsp-status';
+/**
+ * A menu element that displays LSP connection status.
+ * Shows a status indicator dot with an optional label.
+ */
+export class LspStatusElement {
+    constructor(options) {
+        Object.defineProperty(this, "lspExtension", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "label", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statusDot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "labelEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'disconnected'
+        });
+        Object.defineProperty(this, "statusCheckInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.lspExtension = options.lspExtension;
+        this.label = options.label ?? 'LSP';
+    }
+    render(_view) {
+        // Create main container
+        this.dom = document.createElement('div');
+        this.dom.className = CSS_PREFIX;
+        this.dom.setAttribute('role', 'status');
+        this.dom.setAttribute('aria-live', 'polite');
+        // Create status indicator
+        const indicator = document.createElement('div');
+        indicator.className = `${CSS_PREFIX}__indicator`;
+        // Status dot
+        this.statusDot = document.createElement('span');
+        this.statusDot.className =
+            `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--disconnected`;
+        indicator.appendChild(this.statusDot);
+        // Label
+        this.labelEl = document.createElement('span');
+        this.labelEl.className = `${CSS_PREFIX}__label`;
+        this.labelEl.textContent = this.label;
+        indicator.appendChild(this.labelEl);
+        this.dom.appendChild(indicator);
+        // Set initial status based on client state
+        this.updateStatusFromClient();
+        // Poll for status changes since the client is created lazily
+        this.statusCheckInterval = setInterval(() => {
+            this.updateStatusFromClient();
+        }, 1000);
+        const update = (_state) => {
+            // Always visible
+            return true;
+        };
+        return { dom: this.dom, update };
+    }
+    getClient() {
+        const mainLang = this.lspExtension.mainLang || 'markdown';
+        return this.lspExtension.getClient(mainLang);
+    }
+    updateStatusFromClient() {
+        const client = this.getClient();
+        // Check if the client has server capabilities (meaning it's connected and initialized)
+        if (client?.serverCapabilities) {
+            this.setStatus('connected');
+        }
+        else if (client?.active) {
+            this.setStatus('connecting');
+        }
+        else {
+            this.setStatus('disconnected');
+        }
+    }
+    setStatus(status) {
+        if (this.status === status)
+            return; // No change
+        this.status = status;
+        if (this.statusDot) {
+            this.statusDot.className =
+                `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--${status}`;
+        }
+        if (this.dom) {
+            this.dom.setAttribute('data-status', status);
+            const statusLabels = {
+                connected: 'LSP Connected',
+                connecting: 'LSP Connecting...',
+                disconnected: 'LSP Disconnected',
+            };
+            this.dom.title = statusLabels[status];
+            this.dom.setAttribute('aria-label', statusLabels[status]);
+        }
+    }
+    destroy() {
+        if (this.statusCheckInterval) {
+            clearInterval(this.statusCheckInterval);
+            this.statusCheckInterval = null;
+        }
+    }
+}

package/esm/extension-menu/src/CustomMenuPlugin.d.ts

@@ -0,0 +1,65 @@
+import { EditorState, Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import type { CoreEditor } from '../../editor/src/mod.js';
+import type { MenuElement } from './menu.js';
+interface ToolItem {
+    id: string;
+    label: string;
+    element: MenuElement;
+    isPinned: boolean;
+}
+export declare class CustomMenuView {
+    readonly editorView: EditorView;
+    readonly editor: CoreEditor;
+    readonly content: readonly (readonly MenuElement[])[];
+    wrapper: HTMLElement;
+    toolbar: HTMLElement;
+    overflowMenu: HTMLElement;
+    pinnedDropdownMenu: HTMLElement | null;
+    modal: HTMLElement | null;
+    tools: ToolItem[];
+    trailingElements: MenuElement[];
+    root: Document | ShadowRoot;
+    resizeHandle: HTMLElement;
+    editorContainer: HTMLElement;
+    private closeOverflowHandler;
+    private closePinnedDropdownHandler;
+    private submenuStack;
+    private pinnedDropdownStack;
+    constructor(editorView: EditorView, editor: CoreEditor, content: readonly (readonly MenuElement[])[], trailingElements?: readonly MenuElement[]);
+    private initializeTools;
+    /**
+     * Generate a stable ID from a label by converting it to a kebab-case slug.
+     * Falls back to a hash if the label is empty or contains only special characters.
+     */
+    private generateStableId;
+    /**
+     * Simple hash function for generating stable IDs from strings.
+     */
+    private simpleHash;
+    private extractLabel;
+    private loadPinnedState;
+    private savePinnedState;
+    private showSubmenu;
+    private goBack;
+    private showPinnedDropdown;
+    private pinnedDropdownGoBack;
+    private pinnedDropdownShowSubmenu;
+    private renderPinnedDropdown;
+    private renderOverflowMenu;
+    private render;
+    private openManageModal;
+    private updateModalState;
+    private setupResize;
+    update(view: EditorView, prevState: EditorState): void;
+    destroy(): void;
+}
+export interface CustomMenuPluginOptions {
+    content: readonly (readonly MenuElement[])[];
+    trailingElements?: readonly MenuElement[];
+}
+export declare class CustomMenuPlugin extends Plugin {
+    constructor(editor: CoreEditor, options: CustomMenuPluginOptions);
+}
+export {};
+//# sourceMappingURL=CustomMenuPlugin.d.ts.map

package/esm/extension-menu/src/CustomMenuPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMenuPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/CustomMenuPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAuB7C,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,cAAc;IAmBvB,QAAQ,CAAC,UAAU,EAAE,UAAU;IAC/B,QAAQ,CAAC,MAAM,EAAE,UAAU;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE;IApBvD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,WAAW,CAAC;IAC1B,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,WAAW,GAAG,IAAI,CAAQ;IACjC,KAAK,EAAE,QAAQ,EAAE,CAAM;IACvB,gBAAgB,EAAE,WAAW,EAAE,CAAM;IACrC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,WAAW,CAAC;IAC7B,OAAO,CAAC,oBAAoB,CAA0C;IACtE,OAAO,CAAC,0BAA0B,CAA0C;IAC5E,OAAO,CAAC,YAAY,CAAmD;IACvE,OAAO,CAAC,mBAAmB,CAEpB;gBAGI,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,EACrD,gBAAgB,CAAC,EAAE,SAAS,WAAW,EAAE;IAmE3C,OAAO,CAAC,eAAe;IAgCvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAyBxB;;OAEG;IACH,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,kBAAkB;IA0C1B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,yBAAyB;IAuCjC,OAAO,CAAC,oBAAoB;IA8L5B,OAAO,CAAC,kBAAkB;IA6R1B,OAAO,CAAC,MAAM;IAuMd,OAAO,CAAC,eAAe;IAyHvB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,WAAW;IAgDnB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW;IAQ/C,OAAO;CA8BR;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CAC3C;AAED,qBAAa,gBAAiB,SAAQ,MAAM;gBAC9B,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,uBAAuB;CAYjE"}