{"id":15416573,"url":"https://github.com/remcohaszing/codemirror-languageservice","last_synced_at":"2025-07-21T07:32:06.914Z","repository":{"id":250559513,"uuid":"834802663","full_name":"remcohaszing/codemirror-languageservice","owner":"remcohaszing","description":"Integrate a Language Server Protocol compatible language service into CodeMirror","archived":false,"fork":false,"pushed_at":"2025-04-16T13:11:07.000Z","size":285,"stargazers_count":61,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-09T02:18:32.415Z","etag":null,"topics":["code","code-mirror","codemirror","editor","language-server","language-service","languageserver","languageservice","lsp"],"latest_commit_sha":null,"homepage":"https://codemirror-languageservice.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-28T12:10:02.000Z","updated_at":"2025-06-12T20:05:23.000Z","dependencies_parsed_at":"2024-09-09T16:12:57.068Z","dependency_job_id":"4286ef7e-6758-452e-afb9-e8f416ae8a30","html_url":"https://github.com/remcohaszing/codemirror-languageservice","commit_stats":{"total_commits":28,"total_committers":1,"mean_commits":28.0,"dds":0.0,"last_synced_commit":"d0b3f6959b44bbaa2995e603ce77b1e0e8323841"},"previous_names":["remcohaszing/codemirror-languageservice"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/remcohaszing/codemirror-languageservice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fcodemirror-languageservice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fcodemirror-languageservice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fcodemirror-languageservice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fcodemirror-languageservice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/codemirror-languageservice/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fcodemirror-languageservice/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266261123,"owners_count":23901284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","code-mirror","codemirror","editor","language-server","language-service","languageserver","languageservice","lsp"],"created_at":"2024-10-01T17:12:27.747Z","updated_at":"2025-07-21T07:32:06.897Z","avatar_url":"https://github.com/remcohaszing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# codemirror-languageservice\n\n[![github actions](https://github.com/remcohaszing/codemirror-languageservice/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/codemirror-languageservice/actions/workflows/ci.yaml)\n[![codecov](https://codecov.io/gh/remcohaszing/codemirror-languageservice/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/codemirror-languageservice)\n[![npm version](https://img.shields.io/npm/v/codemirror-languageservice)](https://www.npmjs.com/package/codemirror-languageservice)\n[![npm downloads](https://img.shields.io/npm/dm/codemirror-languageservice)](https://www.npmjs.com/package/codemirror-languageservice)\n\nIntegrate a [Language Server Protocol][lsp] compatible language service into [CodeMirror][].\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [`createCompletionSource(options)`](#createcompletionsourceoptions)\n  - [`createHoverTooltipSource(options)`](#createhovertooltipsourceoptions)\n  - [`createLintSource(options)`](#createlintsourceoptions)\n  - [`dispatchTextEdits(view, edits)`](#dispatchtexteditsview-edits)\n  - [`getTextDocument(state)`](#gettextdocumentstate)\n  - [`textDocument(uri?)`](#textdocumenturi)\n- [Example](#example)\n- [Compatibility](#compatibility)\n- [Contributing](#contributing)\n- [Related projects](#related-projects)\n- [License](#license)\n\n## Installation\n\nThis package has peer dependencies on the following packages:\n\n- [`@codemirror/autocomplete`](https://www.npmjs.com/package/@codemirror/autocomplete)\n- [`@codemirror/language`](https://www.npmjs.com/package/@codemirror/language)\n- [`@codemirror/lint`](https://www.npmjs.com/package/@codemirror/lint)\n- [`@codemirror/state`](https://www.npmjs.com/package/@codemirror/state)\n- [`@codemirror/view`](https://www.npmjs.com/package/@codemirror/view)\n\nSince you will probably import these directly yourself, it’s recommended to install all of them\nexplicitly.\n\n```sh\nnpm install \\\n  @codemirror/autocomplete \\\n  @codemirror/language \\\n  @codemirror/lint \\\n  @codemirror/state \\\n  @codemirror/view \\\n  codemirror-languageservice\n```\n\n## Usage\n\n- First, create a [CodeMirror][] `EditorView` as usual.\n- Since [LSP][] is based heavily on files and URIs, you need to add the `textDocument()` extension\n  to your editor. It’s recommended to pass a file URI. If none is given, a URI is generated that\n  uses the `inmemory://` protocol.\n- It’s recommended to add a language extension. This is used to detect the `languageId` for text\n  documents. If this isn’t available, the `plaintext` language is used.\n- Since [LSP][] uses markdown, you need to provide a function to convert markdown to DOM. A good\n  option is to combine [`hast-util-to-dom`](https://github.com/syntax-tree/hast-util-to-dom),\n  [`mdast-util-from-markdown`](https://github.com/syntax-tree/mdast-util-from-markdown), and\n  [`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast).\n- Add your language service integrations.\n\n```js\nimport { autocompletion } from '@codemirror/autocomplete'\nimport { json } from '@codemirror/lang-json'\nimport { linter } from '@codemirror/lint'\nimport { EditorView, hoverTooltip } from '@codemirror/view'\nimport {\n  createCompletionSource,\n  createHoverTooltipSource,\n  createLintSource,\n  textDocument\n} from 'codemirror-languageservice'\nimport { toDom } from 'hast-util-to-dom'\nimport { fromMarkdown } from 'mdast-util-from-markdown'\nimport { toHast } from 'mdast-util-to-hast'\n\nimport { doComplete, doDiagnostics, doHover } from './my-language-service.js'\n\nfunction markdownToDom(markdown) {\n  const mdast = fromMarkdown(markdown)\n  const hast = toHast(mdast)\n  return toDom(hast, { fragment: true })\n}\n\nconst view = new EditorView({\n  doc: '',\n  parent: document.getElementById('my-editor'),\n  extensions: [\n    json(),\n    textDocument('file:///example.txt'),\n    autocompletion({\n      override: [createCompletionSource({ doComplete, markdownToDom })]\n    }),\n    hoverTooltip(createHoverTooltipSource({ doHover, markdownToDom })),\n    linter(createLintSource({ doDiagnostics }))\n  ]\n})\n```\n\n## API\n\n### `createCompletionSource(options)`\n\nCreate an LSP based completion source.\n\n#### Options\n\n- `doComplete` (`Function`) — Provide LSP completions items.\n- `markdownToDom` (`Function`) — Convert a markdown string to DOM.\n- `fromCompletionItemKind` (`Function`, optional) — Convert an LSP completion item kind to a\n  CodeMirror completion type.\n- `section` (`string`, optional) — The section to use for completions.\n- `triggerCharacters` (`string`) — Only trigger completions automatically when one of these\n  characters is typed.\n\n#### Returns\n\nA CodeMirror completion source that uses LSP based completions.\n([`CompletionSource`](https://codemirror.net/docs/ref/#autocomplete.CompletionSource))\n\n### `createHoverTooltipSource(options)`\n\nCreate an LSP based hover tooltip provider.\n\n#### Options\n\n- `doHover` (`Function`) — Provide LSP hover info\n- `markdownToDom` (`Function`) — Convert a markdown string to DOM.\n\n#### Returns\n\nA CodeMirror hover tooltip source that uses LSP based hover information.\n([`HoverTooltipSource`](https://codemirror.net/docs/ref/#view.HoverTooltipSource))\n\n### `createLintSource(options)`\n\nCreate an LSP based lint source.\n\nBy default CodeMirror provides styling for the `cm-lintRange-hint`, `cm-lintRange-info`,\n`cm-lintRange-warning`, and `cm-lintRange-error` classes. This extension also uses the\n`cm-lintRange-deprecated` and `cm-lintRange-unnecessary` classes which you may want to style. For\nexample:\n\n```css\n.cm-lintRange-deprecated {\n  background-image: none !important;\n  text-decoration: line-through;\n}\n\n.cm-lintRange-unnecessary {\n  background-repeat: no-repeat !important;\n  opacity: 0.4;\n}\n```\n\n#### Options\n\n- `doDiagnostics` (`Function`) — Provide LSP diagnostics\n- `formatSource` (`Function`, optional) — Format the source of a diagnostic.\n- `markClass` (`string`, optional) — An additional class for all diagnostics provided by this\n  validation.\n\n#### Returns\n\nA CodeMirror lint source that uses LSP based diagnostics.\n([`LintSource`](https://codemirror.net/docs/ref/#lint.LintSource))\n\n### `dispatchTextEdits(view, edits)`\n\nApply LSP text edits to an CodeMirror `EditorView`.\n\n#### Parameters\n\n- `view` ([`EditorView`](https://codemirror.net/docs/ref/#view.EditorView)) — The view to dispatch\n  the changes to.\n- `edits`\n  ([`TextEdit[]`](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#textEditArray))\n  — The edits that should be applied.\n\n### `getTextDocument(state)`\n\nGet the text document for a CodeMirror editor state.\n\n#### Parameters\n\n- `state` ([`EditorState`](https://codemirror.net/docs/ref/#state.EditorState)) — The editor state\n  to get the text document for.\n\n#### Returns\n\nThe text document.\n([`TextDocument`](https://github.com/microsoft/vscode-languageserver-node/tree/main/textDocument))\n\n### `textDocument(uri?)`\n\nAssign a text document to an editor state.\n\nThis text document is used by other extensions provided by `codemirror-languageservice`.\n\nThe language ID is determined from the name of the [language](https://codemirror.net/#languages)\nused. If this isn’t found, the language ID defaults to `plaintext`.\n\n#### Parameters\n\n- `uri` (`string`) —The URI to use for the text document. If this is left unspecified, an\n  auto-incremented `inmemory://` URI is used.\n\n#### Returns\n\nA CodeMirror extension. ([`Extension`](https://codemirror.net/docs/ref/#state.Extension))\n\n## Example\n\nThere’s an example available in the\n[`example`](https://github.com/remcohaszing/codemirror-languageservice/blob/main/example) directory.\n\n## Compatibility\n\nThis project is compatible with [evergreen](https://www.w3.org/2001/tag/doc/evergreen-web) browsers.\n\n## Contributing\n\nThis project provides [LSP][] based integrations for [CodeMirror][]. However, not all LSP features\nmap well to CodeMirror. The goal is only to provide integrations that make sense for CodeMirror. If\nyou have a pragmatic idea to integrate another LSP method, feel free to open a\n[new issue](https://github.com/remcohaszing/codemirror-languageservice/issues/new).\n\nOn top of that, see my general\n[contributing guidelines](https://github.com/remcohaszing/.github/blob/main/CONTRIBUTING.md).\n\n## Related projects\n\n- [CodeMirror][] — CodeMirror is a code editor component for the web.\n- [Language Server Protocol][LSP] — The Language Server Protocol (LSP) defines the protocol used\n  between an editor or IDE and a language server that provides language features like auto complete,\n  go to definition, find all references etc.\n- [Transloadit](https://transloadit.com) — A simple API to handle any file in your app.\n  `codemirror-languageservice` was developed as part of the Transloadit JSON editor.\n\nKnown language services that you could use this for:\n\n- [`vscode-css-languageservice`](https://github.com/microsoft/vscode-css-languageservice) — CSS,\n  LESS \u0026 SCSS language service extracted from VSCode to be reused.\n- [`vscode-html-languageservice`](https://github.com/microsoft/vscode-html-languageservice) —\n  Language services for HTML.\n- [`vscode-json-languageservice`](https://github.com/microsoft/vscode-json-languageservice) — JSON\n  language service extracted from VSCode to be reused.\n- [`vscode-markdown-languageservice`](https://github.com/microsoft/vscode-markdown-languageservice)\n  — The language service that powers VS Code’s Markdown support.\n- [`yaml-language-server`](https://github.com/redhat-developer/yaml-language-server) — Language\n  Server for YAML Files.\n- [`@tailwindcss/language-service`](https://github.com/tailwindlabs/tailwindcss-intellisense) —\n  About Intelligent Tailwind CSS tooling.\n- [`@volar/language-service`](https://volarjs.dev) — The Embedded Language Tooling Framework.\n\n## License\n\n[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n\n[codemirror]: https://codemirror.net\n[lsp]: https://microsoft.github.io/language-server-protocol\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fcodemirror-languageservice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fcodemirror-languageservice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fcodemirror-languageservice/lists"}