{"id":21385332,"url":"https://github.com/touchifyapp/svelte-codemirror-editor","last_synced_at":"2025-04-09T05:09:30.632Z","repository":{"id":48150113,"uuid":"504186152","full_name":"touchifyapp/svelte-codemirror-editor","owner":"touchifyapp","description":"A svelte component to create a CodeMirror 6+ editor","archived":false,"fork":false,"pushed_at":"2024-09-05T14:15:10.000Z","size":1349,"stargazers_count":194,"open_issues_count":5,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T04:02:29.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://touchifyapp.github.io/svelte-codemirror-editor/","language":"Svelte","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/touchifyapp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2022-06-16T14:24:28.000Z","updated_at":"2025-04-01T14:44:02.000Z","dependencies_parsed_at":"2024-12-07T16:11:14.563Z","dependency_job_id":null,"html_url":"https://github.com/touchifyapp/svelte-codemirror-editor","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.11111111111111116","last_synced_commit":"7fe51e9fab20ffda750a742f4da2eb9d7be550f2"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/touchifyapp%2Fsvelte-codemirror-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/touchifyapp%2Fsvelte-codemirror-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/touchifyapp%2Fsvelte-codemirror-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/touchifyapp%2Fsvelte-codemirror-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/touchifyapp","download_url":"https://codeload.github.com/touchifyapp/svelte-codemirror-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"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":[],"created_at":"2024-11-22T11:46:52.023Z","updated_at":"2025-04-09T05:09:30.609Z","avatar_url":"https://github.com/touchifyapp.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-codemirror-editor\n\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](http://opensource.org/licenses/MIT)\n[![NPM version](https://img.shields.io/npm/v/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor)\n[![NPM download](https://img.shields.io/npm/dm/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nA svelte component to create a [CodeMirror 6](https://codemirror.net/6/) editor.\n\n## Installation\n\n```bash\nnpm install svelte-codemirror-editor\n```\n\n## Usage\n\nTo use `svelte-codemirror-editor`, you need to import the package and use it as any `Svelte` component.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import CodeMirror from \"svelte-codemirror-editor\";\n    import { javascript } from \"@codemirror/lang-javascript\";\n\n    let value = \"\";\n\u003c/script\u003e\n\n\u003cCodeMirror bind:value lang={javascript()} /\u003e\n```\n\n## Properties\n\n| Property      | Type              | Description                                                          | Default value |\n| ------------- | ----------------- | -------------------------------------------------------------------- | ------------- |\n| `value`       | `string`          | The value that will be displayed and edited in the CodeMirror editor | `\"\"`          |\n| `basic`       | `boolean`         | Whether to use CodeMirror `basicSetup` extensions.                   | `true`        |\n| `lang`        | `LanguageSupport` | The language extension that will parse and highlight the value.      | `undefined`   |\n| `theme`       | `Extension`       | The theme extension to customize the appearence of the editor.       | `undefined`   |\n| `extensions`  | `Extension[]`     | Additional extensions to inject in the editor.                       | `[]`          |\n| `useTab`      | `boolean`         | Whether to use the `Tab` shortcut to handle indentation.             | `true`        |\n| `tabSize`     | `number`          | The number of space of an indentation level.                         | `2`           |\n| `editable`    | `boolean`         | Whether to make the editor editable or not.                          | `true`        |\n| `readonly`    | `boolean`         | Whether to make the editor readonly or not.                          | `false`       |\n| `lineWrapping`| `boolean`         | Whether to wrap lines in the editor or not.                          | `false`       |\n| `placeholder` | `string`          | A placeholder to include when value is empty.                        | `undefined`   |\n| `nodebounce`  | `boolean`         | Whether to stop debouncing value updates.                            | `false`       |\n| `styles`      | `ThemeSpec`       | In-place theme configuration. _See exemple below_.                   | `undefined`   |\n\n## Events\n\n| Event    | Type         | Description                                                                     |\n| -------- | ------------ | ------------------------------------------------------------------------------- |\n| `change` | `string`     | Trigger when the code changes.                                                  |\n| `ready`  | `EditorView` | Trigger when the editor is ready. Allows to retrieve the `EditorView` instance. |\n\n## Usage with vite / svelte-kit\n\nIf you try to use this component with `vite` or `svelte-kit`, you have to disable dependency optimization for `codemirror` and all its extensions.\n\n```javascript\n// vite.config.js\nconst config = {\n    //...\n    optimizeDeps: {\n        exclude: [\"svelte-codemirror-editor\", \"codemirror\", \"@codemirror/language-javascript\" /* ... */],\n    },\n    //...\n}\n```\n\n## Exemples\n\n### Basic usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import CodeMirror from \"svelte-codemirror-editor\";\n    import { javascript } from \"@codemirror/lang-javascript\";\n\n    let value = \"\";\n\u003c/script\u003e\n\n\u003cCodeMirror bind:value lang={javascript()} /\u003e\n```\n\n### Custom theme\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import CodeMirror from \"svelte-codemirror-editor\";\n    import { javascript } from \"@codemirror/lang-javascript\";\n    import { oneDark } from \"@codemirror/theme-one-dark\";\n\n    let value = \"\";\n\u003c/script\u003e\n\n\u003cCodeMirror bind:value lang={javascript()} theme={oneDark} /\u003e\n```\n\n### Custom styles\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import CodeMirror from \"svelte-codemirror-editor\";\n    import { javascript } from \"@codemirror/lang-javascript\";\n\n    let value = \"\";\n\u003c/script\u003e\n\n\u003cCodeMirror\n    bind:value\n    lang={javascript()}\n    styles={{\n        \"\u0026\": {\n            width: \"500px\",\n            maxWidth: \"100%\",\n            height: \"50rem\",\n        },\n    }}\n/\u003e\n```\n\n### Get EditorView instance\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import CodeMirror from \"svelte-codemirror-editor\";\n    let view: EditorView;\n\u003c/script\u003e\n\n\u003cCodeMirror on:ready={(e) =\u003e view = e.detail} /\u003e\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftouchifyapp%2Fsvelte-codemirror-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftouchifyapp%2Fsvelte-codemirror-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftouchifyapp%2Fsvelte-codemirror-editor/lists"}