Update README.md

Author: hjr265

README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/codemirror-languageserver.svg)](https://www.npmjs.com/package/codemirror-languageserver)
 
-This plugin enables code completion, hover tooltips, and linter functionality by connecting a CodeMirror 6 editor with a language server over WebSocket.
+This plugin connects a [CodeMirror 6](https://codemirror.net/) editor with a [Language Server](https://microsoft.github.io/language-server-protocol/) over WebSocket, providing IDE-like features in the browser.
 
 [How It Works](https://hjr265.me/blog/codemirror-lsp/)
 
@@ -18,83 +18,140 @@ https://user-images.githubusercontent.com/348107/120141150-c6bb9180-c1fd-11eb-8a
 - 🎨 Document Formatting and Range Formatting
 - ✏️ Rename Symbol
 
-## Usage
+## Installation
 
 ```
 npm i codemirror-languageserver
 ```
 
+**Peer dependencies:** This package requires `@codemirror/autocomplete`, `@codemirror/lint`, `@codemirror/state`, and `@codemirror/view` as peer dependencies. If you're using CodeMirror 6, you likely already have these installed.
+
+## Quick Start
+
 ```js
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { languageServer } from 'codemirror-languageserver';
 
-var ls = languageServer({
-    // WebSocket server uri and other client options.
-    serverUri,
+const ls = languageServer({
+    serverUri: 'ws://localhost:8080',
     rootUri: 'file:///',
-
-    // Alternatively, to share the same client across multiple instances of this plugin.
-    client: new LanguageServerClient({
-        transport: new WebSocketTransport(serverUri),
-        rootUri: 'file:///',
-    }),
-
     documentUri: `file:///${filename}`,
     languageId: 'cpp', // As defined at https://microsoft.github.io/language-server-protocol/specification#textDocumentItem.
 });
 
-var view = new EditorView({
+const view = new EditorView({
     state: EditorState.create({
         extensions: [
-            // ...
+            // ... other extensions
             ls,
-            // ...
         ],
     }),
 });
 ```
 
-### Custom Transport
+This sets up all built-in features: completion, hover, diagnostics, go-to-definition, document highlight, and rename support.
 
-Use `languageServerWithTransport` to provide a custom transport (e.g. for non-WebSocket connections):
+## Options
+
+| Option | Type | Description |
+|---|---|---|
+| `serverUri` | `ws://...` or `wss://...` | WebSocket server URI |
+| `rootUri` | `string` | Root URI of the workspace |
+| `workspaceFolders` | `WorkspaceFolder[]` | LSP workspace folders |
+| `documentUri` | `string` | URI of the document being edited |
+| `languageId` | `string` | Language identifier ([spec](https://microsoft.github.io/language-server-protocol/specification#textDocumentItem)) |
+| `initializationOptions` | `object` | Server-specific initialization options |
+| `locale` | `string` | Locale for the LSP session (e.g. `'en'`) |
+| `allowHTMLContent` | `boolean` | Trust raw HTML in hover/completion content (default: `false`) |
+| `synchronizationMethod` | `SynchronizationMethod` | `'full'` or `'incremental'` document sync (default: `'full'`) |
+| `client` | `LanguageServerClient` | Share a client across multiple editor instances |
+| `onCapabilities` | `(capabilities) => void` | Called when server capabilities are available |
+
+## Shared Client
+
+To share the same language server connection across multiple editor instances:
+
+```js
+import { LanguageServerClient, languageServerWithTransport, WebSocketTransport } from 'codemirror-languageserver';
+
+const client = new LanguageServerClient({
+    transport: new WebSocketTransport('ws://localhost:8080'),
+    rootUri: 'file:///',
+});
+
+// Use the same client for multiple editors
+const ls1 = languageServerWithTransport({
+    client,
+    documentUri: 'file:///main.cpp',
+    languageId: 'cpp',
+});
+
+const ls2 = languageServerWithTransport({
+    client,
+    documentUri: 'file:///utils.cpp',
+    languageId: 'cpp',
+});
+```
+
+## Custom Transport
+
+Use `languageServerWithTransport` for non-WebSocket connections:
 
 ```js
 import { languageServerWithTransport } from 'codemirror-languageserver';
 
-var ls = languageServerWithTransport({
-    transport: myCustomTransport, // Must implement the Transport interface
+const ls = languageServerWithTransport({
+    transport: myCustomTransport,
     rootUri: 'file:///',
     documentUri: `file:///${filename}`,
     languageId: 'cpp',
 });
 ```
 
-The `Transport` interface requires `send`, `onMessage`, `onClose`, `onError`, and `close` methods. You can import `Transport` and `WebSocketTransport` from the package.
+The `Transport` interface:
+
+```ts
+interface Transport {
+    send(message: string): void;
+    onMessage(callback: (message: string) => void): void;
+    onClose(callback: () => void): void;
+    onError(callback: (error: Error) => void): void;
+    close(): void;
+}
+```
+
+You can import `Transport` and `WebSocketTransport` from the package.
 
-### Document Highlight
+## Document Highlight
 
-Document highlights are enabled by default. When the cursor is on a symbol, all occurrences are highlighted. Style them with CSS:
+Enabled by default. When the cursor is on a symbol, all occurrences in the document are highlighted. Style with CSS:
 
 ```css
 .cm-lsp-highlight-text,
 .cm-lsp-highlight-read { background-color: rgba(255, 255, 0, 0.2); }
 .cm-lsp-highlight-write { background-color: rgba(255, 165, 0, 0.3); }
 ```
 
-### Formatting
+The three classes correspond to [DocumentHighlightKind](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#documentHighlightKind): general text occurrences, read accesses, and write accesses.
 
-`formatDocument` and `formatSelection` are CodeMirror commands that you can bind to keys:
+## Formatting
+
+`formatDocument` and `formatSelection` are CodeMirror [commands](https://codemirror.net/docs/ref/#view.Command) — bind them to keys:
 
 ```js
 import { keymap } from '@codemirror/view';
 import { formatDocument, formatSelection } from 'codemirror-languageserver';
 
-keymap.of([
+const formattingKeymap = keymap.of([
     { key: 'Shift-Alt-f', run: formatDocument },
     { key: 'Ctrl-k Ctrl-f', run: formatSelection },
-])
+]);
 ```
 
-To configure formatting options (tab size, spaces vs tabs, etc.), use the `formattingOptions` facet:
+### Formatting Options
+
+Configure formatting with the `formattingOptions` facet. By default, `tabSize` is read from the editor state.
 
 ```js
 import { formattingOptions } from 'codemirror-languageserver';
@@ -105,61 +162,89 @@ formattingOptions.of({
     insertSpaces: true,
     trimTrailingWhitespace: true,
     insertFinalNewline: true,
+    trimFinalNewlines: true,
 })
 ```
 
-By default, `tabSize` is read from the editor state.
-
-### Rename Symbol
+## Rename Symbol
 
-`renameSymbol` is a CodeMirror command that opens a rename prompt at the top of the editor:
+`renameSymbol` is a CodeMirror command that opens a rename prompt at the top of the editor. If the server supports `prepareRename`, the current symbol name is used as the placeholder.
 
 ```js
 import { keymap } from '@codemirror/view';
 import { renameSymbol } from 'codemirror-languageserver';
 
-keymap.of([
+const renameKeymap = keymap.of([
     { key: 'F2', run: renameSymbol },
-])
+]);
 ```
 
-Style the rename panel with CSS using the `cm-lsp-rename-panel` and `cm-lsp-rename-input` classes.
+Style the panel with CSS:
 
-### Server Capabilities
+```css
+.cm-lsp-rename-panel {
+    padding: 4px 8px;
+    border-bottom: 1px solid #ddd;
+}
+.cm-lsp-rename-input {
+    font-family: inherit;
+    font-size: inherit;
+}
+```
 
-Use the `onCapabilities` callback to be notified when the server's capabilities are available (e.g. to update a toolbar):
+## Server Capabilities
+
+Use the `onCapabilities` callback to react when the server finishes initializing — e.g. to show or hide toolbar buttons:
 
 ```js
 languageServer({
-    serverUri,
+    serverUri: 'ws://localhost:8080',
     rootUri: 'file:///',
     documentUri: `file:///${filename}`,
     languageId: 'cpp',
     onCapabilities(capabilities) {
-        // capabilities.documentFormattingProvider, capabilities.renameProvider, etc.
+        // capabilities.documentFormattingProvider
+        // capabilities.renameProvider
+        // capabilities.completionProvider
+        // etc.
         toolbar.update({ capabilities });
     },
 })
 ```
 
-### Using with Initialization Options
+## Initialization Options
+
+The package includes TypeScript definitions for popular language servers:
 
-The plugin includes built-in TypeScript definitions for popular language servers:
+- `PyrightInitializationOptions` — Python (Pyright)
+- `RustAnalyzerInitializationOptions` — Rust (rust-analyzer)
+- `TypeScriptInitializationOptions` — TypeScript/JavaScript
+- `ESLintInitializationOptions` — ESLint
+- `ClangdInitializationOptions` — C/C++ (Clangd)
+- `GoplsInitializationOptions` — Go (Gopls)
 
--   `PyrightInitializationOptions` - Python (Pyright)
--   `RustAnalyzerInitializationOptions` - Rust (rust-analyzer)
--   `TypeScriptInitializationOptions` - TypeScript/JavaScript
--   `ESLintInitializationOptions` - ESLint
--   `ClangdInitializationOptions` - C/C++ (Clangd)
--   `GoplsInitializationOptions` - Go (Gopls)
+```ts
+import { languageServer } from 'codemirror-languageserver';
+import type { ClangdInitializationOptions } from 'codemirror-languageserver';
+
+const ls = languageServer<ClangdInitializationOptions>({
+    serverUri: 'ws://localhost:8080',
+    rootUri: 'file:///',
+    documentUri: 'file:///main.cpp',
+    languageId: 'cpp',
+    initializationOptions: {
+        // Type-checked options specific to Clangd
+    },
+});
+```
 
 ## Contributing
 
 Contributions are welcome.
 
 ## Real World Uses
 
--   [Toph](https://toph.co): Competitive programming platform. Toph uses Language Server Plugin for CodeMirror 6 with its integrated code editor.
+- [Toph](https://toph.co): Competitive programming platform. Toph uses Language Server Plugin for CodeMirror 6 with its integrated code editor.
 
 ## License