{"id":13532802,"url":"https://github.com/nimeshnayaju/solid-codemirror","last_synced_at":"2025-10-13T12:27:58.635Z","repository":{"id":41205836,"uuid":"508111363","full_name":"nimeshnayaju/solid-codemirror","owner":"nimeshnayaju","description":"CodeMirror 6 component for SolidJS","archived":false,"fork":false,"pushed_at":"2022-09-20T08:52:00.000Z","size":197,"stargazers_count":19,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T16:02:47.655Z","etag":null,"topics":["codemirror","codemirror6","editor","solid","solid-codemirror","solidjs"],"latest_commit_sha":null,"homepage":"https://solid-codemirror.vercel.app/","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/nimeshnayaju.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}},"created_at":"2022-06-28T01:11:43.000Z","updated_at":"2024-01-29T17:26:55.000Z","dependencies_parsed_at":"2022-07-14T23:30:42.537Z","dependency_job_id":null,"html_url":"https://github.com/nimeshnayaju/solid-codemirror","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nimeshnayaju%2Fsolid-codemirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nimeshnayaju%2Fsolid-codemirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nimeshnayaju%2Fsolid-codemirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nimeshnayaju%2Fsolid-codemirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nimeshnayaju","download_url":"https://codeload.github.com/nimeshnayaju/solid-codemirror/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713037,"owners_count":20821834,"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":["codemirror","codemirror6","editor","solid","solid-codemirror","solidjs"],"created_at":"2024-08-01T07:01:13.865Z","updated_at":"2025-10-13T12:27:53.597Z","avatar_url":"https://github.com/nimeshnayaju.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Frameworks \u0026 Component Libraries"],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-codemirror\u0026background=tiles\u0026project=%20\" alt=\"solid-codemirror\"\u003e\n\u003c/p\u003e\n\n# solid-codemirror\n\nA set of libraries to integrate CodeMirror to any SolidJS app. This repository contains two packages:\n\n- [@solid-codemirror/core](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/core)\n\n- [@solid-codemirror/codemirror](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror)\n\n## Demo\n\nhttps://solid-codemirror.vercel.app/\n\n## Installation\n\n```bash\nyarn add @solid-codemirror/codemirror\n# or\nnpm i @solid-codemirror/codemirror\n```\n\n\u003e **Note** The [@codemirror/state](https://github.com/codemirror/state) and [@codemirror/view](https://github.com/codemirror/state) libraries are flagged as peer dependencies and are recommeneded to be installed alongside this package.\n\n## Known issue with `Vite`\n\n\u003e **Warning** You may encounter the following error if you're using Vite as your bundling tool:\n\u003e\n\u003e ```bash\n\u003e Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multipleinstances of @codemirror/state are loaded, breaking instanceof checks.\n\u003e ```\n\u003e\n\u003e This error can be fixed by adding the following configuration option to your `vite.config.{js,ts}` file.\n\u003e\n\u003e ```typescript\n\u003e export default defineConfig({\n\u003e   // Your configuration\n\u003e   optimizeDeps: {\n\u003e     // Add both @codemirror/state and @codemirror/view to included deps for optimization\n\u003e     include: [\"@codemirror/state\", \"@codemirror/view\"],\n\u003e   },\n\u003e });\n\u003e ```\n\n## Basic Usage\n\n```tsx\nimport { CodeMirror } from \"@solid-codemirror/codemirror\";\n\nexport default function App() {\n  return \u003cCodeMirror /\u003e;\n}\n```\n\n## Configure Line Numbers / Read Only / Line Wrapping\n\n```tsx\nimport { CodeMirror } from \"@solid-codemirror/codemirror\";\n\nexport default function App() {\n  return \u003cCodeMirror showLineNumbers={true} readOnly={false} wrapLine={true} /\u003e;\n}\n```\n\n## Configure theme\n\n```tsx\nimport { CodeMirror } from \"@solid-codemirror/codemirror\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\n\nexport default function App() {\n  return \u003cCodeMirror theme={oneDark} /\u003e;\n}\n```\n\n## Configure Extensions\n\n```tsx\nimport { CodeMirror } from \"@solid-codemirror/codemirror\";\nimport { basicSetup } from \"codemirror\";\nimport { python } from \"@codemirror/lang-python\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\n\nexport default function App() {\n  return \u003cCodeMirror extensions={[basicSetup, python()]} /\u003e;\n}\n```\n\n## Register callbacks on editor value change or editor mount\n\n```tsx\nimport { CodeMirror } from \"@solid-codemirror/codemirror\";\nimport type { EditorView } from \"@codemirror/view\";\n\nexport default function App() {\n  const onValueChange = (value: string) =\u003e {\n    console.log(value);\n  };\n\n  const onEditorMount = (view: EditorView) =\u003e {\n    console.log(view);\n  };\n\n  return (\n    \u003cCodeMirror onEditorMount={onEditorMount} onValueChange={onValueChange} /\u003e\n  );\n}\n```\n\n## Controlling the `CodeMirror` component\n\nYou can control the `CodeMirror` component through the following props. **All props are optional.**\n\n| Prop              | Type                           | Description                                                                    |\n| ----------------- | ------------------------------ | ------------------------------------------------------------------------------ |\n| `value`           | `string`                       | The initial value of the editor                                                |\n| `onValueChange`   | `(value: string) =\u003e void`      | Called whenever the editor code value changes                                  |\n| `onEditorMount`   | `(editor: EditorView) =\u003e void` | Called when the editor first mounts, receiving the current EditorView instance |\n| `showLineNumbers` | `boolean`                      | Whether to display line numbers                                                |\n| `wrapLine`        | `boolean`                      | Whether to wrap lines                                                          |\n| `readOnly`        | `boolean`                      | Whether to set the editor to read-only                                         |\n| `theme`           | `Extension`                    | The CodeMirror theme extension to use                                          |\n| `extensions`      | `Extension[]`                  | An array of CodeMirror extensions to use                                       |\n\nFor more information on the usage of the `CodeMirror` component, check out [@solid-codemirror/codemirror](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror).\n\\\n\u0026nbsp;\n\\\n\u0026nbsp;\n\n# Advanced usage\n\n### Want more control over your `CodeMirror` component? Create your custom component using the `createCodeMirror` function.\n\n## Installation\n\n```bash\nyarn add @solid-codemirror/core @codemirror/state @codemirror/view\n# or\nnpm i @solid-codemirror/core @codemirror/state @codemirror/view\n```\n\n## `createCodeMirror`\n\nAttaches a `CodeMirror` view to the specified `ref` object and returns a object with a `createExtension` method to add extension compartments to the codemirror state instance.\n\n## Basic Usage\n\n```tsx\nimport { CodeMirrorProps, createCodeMirror } from \"@solid-codemirror/core\";\n\nexport default function CodeMirror(props: CodeMirrorProps) {\n  let ref: HTMLDivElement | undefined;\n\n  createCodeMirror(props, () =\u003e ref);\n\n  return \u003cdiv ref={ref} /\u003e;\n}\n```\n\n## Add Extension\n\n```tsx\nimport { CodeMirrorProps, createCodeMirror } from \"@solid-codemirror/core\";\nimport { lineNumbers } from \"@codemirror/view\";\n\nexport default function App(props: CodeMirrorProps) {\n  let ref: HTMLDivElement | undefined;\n\n  const { createExtension } = createCodeMirror(props, () =\u003e ref);\n\n  createExtension(lineNumbers());\n\n  return \u003cdiv ref={ref} /\u003e;\n}\n```\n\n## Reconfigure Extension\n\n```tsx\nimport { CodeMirrorProps, createCodeMirror } from \"@solid-codemirror/core\";\nimport { lineNumbers } from \"@codemirror/view\";\n\nexport default function App(props: CodeMirrorProps) {\n  let ref: HTMLDivElement | undefined;\n\n  const { createExtension } = createCodeMirror(props, () =\u003e ref);\n\n  const reconfigureLineNumbers = createExtension(lineNumbers());\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv ref={ref} /\u003e\n\n      {/* Buttons to show/hide line numbers */}\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e reconfigureLineNumbers([])}\u003e\n          Hide line numbers\n        \u003c/button\u003e\n        \u003cbutton onClick={() =\u003e reconfigureLineNumbers(lineNumbers())}\u003e\n          Show line numbers\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003e **Note** Extensions in `@codemirror/core` are wrapped inside an editor [Comparment](https://codemirror.net/docs/ref/#state.Compartment). Compartments enable [dynamic reconfiguration](https://codemirror.net/examples/config/) (partially reconfigure a tree of extensions) of the editor.\n\n\u003e **Note** The `@solid-codemirror/codemirror` package is based on `@codemirror/core`. You can view the [source code](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror) of the library here.\n\nFor more information on the usage of the `createCodeMirror` function, check out [@solid-codemirror/core](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/core).\n\n## License\n\nThis project is licensed under MIT.\n\n## Author\n\n- [@nayajunimesh](https://twitter.com/nayajunimesh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnimeshnayaju%2Fsolid-codemirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnimeshnayaju%2Fsolid-codemirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnimeshnayaju%2Fsolid-codemirror/lists"}