{"id":20989230,"url":"https://github.com/logue/vue-codemirror6","last_synced_at":"2025-05-15T19:06:24.417Z","repository":{"id":37757738,"uuid":"457654660","full_name":"logue/vue-codemirror6","owner":"logue","description":"⌨️ @codemirror 6 component for @vuejs. Vue2 \u0026 Vue3 both supported.","archived":false,"fork":false,"pushed_at":"2025-03-31T11:17:24.000Z","size":26127,"stargazers_count":163,"open_issues_count":34,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-08T10:50:52.627Z","etag":null,"topics":["code-editor","codemirror-editor","codemirror6","text-editor","vue","vue-codemirror","vue-component","vue-components","vue-plugin","vue-resource","vue2","vue3","vuejs","web-editor"],"latest_commit_sha":null,"homepage":"https://logue.dev/vue-codemirror6/","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/logue.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-10T06:16:42.000Z","updated_at":"2025-04-16T12:49:53.000Z","dependencies_parsed_at":"2023-02-18T16:45:26.194Z","dependency_job_id":"7559a69b-96c2-4849-afb9-0570c37d47dd","html_url":"https://github.com/logue/vue-codemirror6","commit_stats":{"total_commits":113,"total_committers":3,"mean_commits":"37.666666666666664","dds":"0.017699115044247815","last_synced_commit":"e83e4bf5025b64cde8baa835babc1d85a474b6eb"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvue-codemirror6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvue-codemirror6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvue-codemirror6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvue-codemirror6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logue","download_url":"https://codeload.github.com/logue/vue-codemirror6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254404357,"owners_count":22065641,"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-editor","codemirror-editor","codemirror6","text-editor","vue","vue-codemirror","vue-component","vue-components","vue-plugin","vue-resource","vue2","vue3","vuejs","web-editor"],"created_at":"2024-11-19T06:24:11.030Z","updated_at":"2025-05-15T19:06:24.394Z","avatar_url":"https://github.com/logue.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-codemirror6\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/480173/224358008-6ffad05d-1d97-4c18-8554-7d41b03f88ab.png\" alt=\"logo\" width=\"300\" height=\"300\" /\u003e\n\u003c/p\u003e\n\n[![jsdelivr CDN](https://data.jsdelivr.com/v1/package/npm/vue-codemirror6/badge)](https://www.jsdelivr.com/package/npm/vue-codemirror6)\n[![NPM Downloads](https://img.shields.io/npm/dm/vue-codemirror6.svg?style=flat)](https://www.npmjs.com/package/vue-codemirror6)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/vue-codemirror6/file/README.md)\n[![npm version](https://img.shields.io/npm/v/vue-codemirror6.svg)](https://www.npmjs.com/package/vue-codemirror6)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/logue/vue-codemirror6)\n[![Twitter Follow](https://img.shields.io/twitter/follow/logue256?style=plastic)](https://twitter.com/logue256)\n\nA component for using [CodeMirror6](https://codemirror.net/6/) with Vue. This component works in both Vue2 and Vue3.\n\n- [CHANGELOG](./CHANGELOG.md)\n\n## Usage\n\n```sh\nyarn add vue-codemirror6 codemirror\n```\n\nFor Vue 2.7 or below, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.\n\n```sh\nyarn add vue-codemirror6 @vue/composition-api\n```\n\nThis component can handle bidirectional binding by `v-model` like a general Vue component.\n\n## Props\n\n| Props                     | Type                              | Information                                                                                                                                                                                                                    |\n| ------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| model-value               | string \\| Text                    | Text value. (Not `value`)                                                                                                                                                                                                      |\n| basic                     | boolean                           | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup).                                                                                                                                                      |\n| minimal                   | boolean                           | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence.                                                                             |\n| dark                      | boolean                           | Toggle Darkmode.                                                                                                                                                                                                               |\n| placeholder               | string                            | Add placeholder text (or HTML DOM) when blank                                                                                                                                                                                  |\n| wrap                      | boolean                           | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping).                                                                                                                       |\n| tab                       | boolean                           | Enables tab indentation.                                                                                                                                                                                                       |\n| allow-multiple-selections | boolean                           | Allow Multiple Selection. See [allowMultipleSelections](https://codemirror.net/docs/ref/#state.EditorState^allowMultipleSelections)                                                                                            |\n| tab-size                  | number                            | Configures the tab size to use in this state.                                                                                                                                                                                  |\n| line-separator            | string                            | Set line break (separetor) char. (Default is `\\n`.)                                                                                                                                                                            |\n| theme                     | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use [@codemirror/theme-one-dark](https://github.com/codemirror/theme-one-dark), import `oneDark` and put it in this prop.                                                               |\n| readonly                  | boolean                           | Makes the cursor visible or you can drag the text but not edit the value.                                                                                                                                                      |\n| disabled                  | boolean                           | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging.                                                                                                |\n| lang                      | LanguageSupport                   | The language you want to have syntax highlighting. see \u003chttps://codemirror.net/6/#languages\u003e                                                                                                                                   |\n| phrases                   | Record\u0026lt;string, string\u0026gt;      | Specify here if you want to make the displayed character string multilingual. see \u003chttps://codemirror.net/6/examples/translate/\u003e                                                                                               |\n| extensions                | Extension[]                       | Includes enhancements to extend CodeMirror.                                                                                                                                                                                    |\n| linter                    | LintSource                        | Set Linter. Enter a linter (eg `esLint([arbitrary rule])` function for `@codemirror/lang-javascript`, `jsonParseLinter()`function for`@codemirror/json`). See the sources for various language libraries for more information. |\n| linterConfig              | Object                            | see \u003chttps://codemirror.net/docs/ref/#lint.linter^config\u003e                                                                                                                                                                      |\n| forceLinting              | boolean                           | see \u003chttps://codemirror.net/docs/ref/#lint.forceLinting\u003e                                                                                                                                                                       |\n| gutter                    | boolean                           | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified.                                                                                                    |\n| gutterConfig              | Object                            | see \u003chttps://codemirror.net/docs/ref/#lint.lintGutter^config\u003e                                                                                                                                                                  |\n| tag                       | string                            | HTML tags used in the component. (Default is `div` tag.)                                                                                                                                                                       |\n| scrollIntoView            | boolean                           | Allows an external update to scroll the form. (Default is `true`)                                                                                                                                                              |\n\n⚠ Notice: `lang` and `linter` can also be set together in `extensions`. These are separated for compatibility with previous versions of CodeMirror settings and for typing props.\n\n### Supported Languages\n\n#### Official\n\n- [`@codemirror/lang-angular`](https://www.npmjs.com/package/@codemirror/lang-angular)\n- [`@codemirror/lang-cpp`](https://www.npmjs.com/package/@codemirror/lang-cpp)\n- [`@codemirror/lang-css`](https://www.npmjs.com/package/@codemirror/lang-css)\n- [`@codemirror/lang-html`](https://www.npmjs.com/package/@codemirror/lang-html)\n- [`@codemirror/lang-java`](https://www.npmjs.com/package/@codemirror/lang-java)\n- [`@codemirror/lang-javascript`](https://www.npmjs.com/package/@codemirror/lang-javascript)\n- [`@codemirror/lang-json`](https://www.npmjs.com/package/@codemirror/lang-json)\n- [`@codemirror/lang-lezer`](https://www.npmjs.com/package/@codemirror/lang-lezer)\n- [`@codemirror/lang-markdown`](https://www.npmjs.com/package/@codemirror/lang-markdown)\n- [`@codemirror/lang-php`](https://www.npmjs.com/package/@codemirror/lang-php)\n- [`@codemirror/lang-python`](https://www.npmjs.com/package/@codemirror/lang-python)\n- [`@codemirror/lang-rust`](https://www.npmjs.com/package/@codemirror/lang-rust)\n- [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)\n- [`@codemirror/lang-vue`](https://www.npmjs.com/package/@codemirror/lang-vue)\n- [`@codemirror/lang-west`](https://www.npmjs.com/package/@codemirror/lang-west)\n- [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)\n\n### Unofficial\n\n- [`@phoenix-plugin-registry/petetnt.brackets-codemirror-fortran`](https://www.npmjs.com/package/@phoenix-plugin-registry/petetnt.brackets-codemirror-fortran)\n- [`@phoenix-plugin-registry/petetnt.brackets-codemirror-go`](https://www.npmjs.com/package/@phoenix-plugin-registry/petetnt.brackets-codemirror-go)\n- [`@acarl005/lang-sql`](https://www.npmjs.com/package/@acarl005/lang-sql)\n- [`@ark-us/codemirror-lang-taylor`](https://www.npmjs.com/package/@ark-us/codemirror-lang-taylor)\n- [`@formulavize/lang-fiz`](https://www.npmjs.com/package/@formulavize/lang-fiz)\n- [`@gravitywiz/codemirror-lang-gfcalc`](https://www.npmjs.com/package/@gravitywiz/codemirror-lang-gfcalc)\n- [`@nextjournal/lang-clojure`](https://www.npmjs.com/package/@nextjournal/lang-clojure)\n- [`@plutojl/lang-julia`](https://www.npmjs.com/package/@plutojl/lang-julia)\n- [`@polybase/codemirror-lang-javascript`](https://www.npmjs.com/package/@polybase/codemirror-lang-javascript) -[`@replit/codemirror-lang-nix`](https://www.npmjs.com/package/@replit/codemirror-lang-nix)\n- [`@replit/codemirror-lang-csharp`](https://www.npmjs.com/package/@replit/codemirror-lang-csharp)\n- [`@replit/codemirror-lang-solidity`](https://www.npmjs.com/package/@replit/codemirror-lang-solidity)\n- [`@replit/codemirror-lang-svelte`](https://www.npmjs.com/package/@replit/codemirror-lang-svelte)\n- [`@zhijiu/lang-sql`](https://www.npmjs.com/package/@zhijiu/lang-sql)\n- [`codemirror-lang-bool`](https://www.npmjs.com/package/codemirror-lang-bool)\n- [`codemirror-lang-brainfuck`](https://www.npmjs.com/package/codemirror-lang-brainfuck)\n- [`codemirror-lang-cherry`](https://www.npmjs.com/package/codemirror-lang-cherry)\n- [`codemirror-lang-chordpro`](https://www.npmjs.com/package/codemirror-lang-chordpro)\n- [`codemirror-lang-circom`](https://www.npmjs.com/package/codemirror-lang-circom)\n- [`codemirror-lang-edn`](https://www.npmjs.com/package/codemirror-lang-edn)\n- [`codemirror-lang-ejs`](https://www.npmjs.com/package/codemirror-lang-ejs)\n- [`codemirror-lang-fsl`](https://www.npmjs.com/package/codemirror-lang-fsl)\n- [`codemirror-lang-gml`](https://www.npmjs.com/package/codemirror-lang-gml)\n- [`codemirror-lang-golfscript`](https://www.npmjs.com/package/codemirror-lang-golfscript)\n- [`codemirror-lang-homescript`](https://www.npmjs.com/package/codemirror-lang-homescript)\n- [`codemirror-lang-html-n8n`](https://www.npmjs.com/package/codemirror-lang-html-n8n)\n- [`codemirror-lang-inform7`](https://www.npmjs.com/package/codemirror-lang-inform7)\n- [`codemirror-lang-j`](https://www.npmjs.com/package/codemirror-lang-j)\n- [`codemirror-lang-janet`](https://www.npmjs.com/package/codemirror-lang-janet)\n- [`codemirror-lang-k`](https://www.npmjs.com/package/codemirror-lang-k)\n- [`codemirror-lang-karol`](https://www.npmjs.com/package/codemirror-lang-karol)\n- [`codemirror-lang-mermaid`](https://www.npmjs.com/package/codemirror-lang-mermaid)\n- [`codemirror-lang-n8n-expression`](https://www.npmjs.com/package/codemirror-lang-n8n-expression)\n- [`codemirror-lang-prolog`](https://www.npmjs.com/package/codemirror-lang-prolog)\n- [`codemirror-lang-qpen`](https://www.npmjs.com/package/codemirror-lang-qpen)\n- [`codemirror-lang-qtam`](https://www.npmjs.com/package/codemirror-lang-qtam)\n- [`codemirror-lang-r`](https://www.npmjs.com/package/codemirror-lang-r)\n- [`codemirror-lang-rome-ast`](https://www.npmjs.com/package/codemirror-lang-rome-ast)\n- [`codemirror-lang-rome`](https://www.npmjs.com/package/codemirror-lang-rome)\n- [`codemirror-lang-rush`](https://www.npmjs.com/package/codemirror-lang-rush)\n- [`codemirror-lang-scopescript`](https://www.npmjs.com/package/codemirror-lang-scopescript)\n- [`codemirror-lang-statement`](https://www.npmjs.com/package/codemirror-lang-statement)\n- [`gcode-lang-codemirror`](https://www.npmjs.com/package/gcode-lang-codemirror)\n- [`gmail-lang`](https://www.npmjs.com/package/gmail-lang)\n- [`lang-bqn`](https://www.npmjs.com/package/lang-bqn)\n- [`lang-clojure`](https://www.npmjs.com/package/lang-clojure)\n- [`lang-d`](https://www.npmjs.com/package/lang-d)\n- [`lang-feel`](https://www.npmjs.com/package/lang-feel)\n- [`lang-firestore`](https://www.npmjs.com/package/lang-firestore)\n\n### Supported Themes\n\n- [`@codemirror/theme-one-dark`](https://github.com/codemirror/theme-one-dark)\n- [`upleveled/theme-vs-code-dark-plus`](https://github.com/upleveled/theme-vs-code-dark-plus)\n- [`codemirror6-bootstrap-theme`](https://github.com/logue/codemirror6-bootstrap-theme)\n\n## Example\n\nMark up as follows to make it work at a minimum.\n\n```vue\n\u003ctemplate\u003e\n  \u003ccode-mirror v-model=\"value\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref, defineComponent } from 'vue';\n\nimport CodeMirror from 'vue-codemirror6';\n\nexport default defineComponent({\n  components: {\n    CodeMirror,\n  },\n  setup() {\n    const value = ref('Cozy lummox gives smart squid who asks for job pen.');\n\n    return { value };\n  },\n});\n\u003c/script\u003e\n```\n\n### Example using Slots\n\nThe contents of the slot will overwrite the existing `v-model`. For this reason, it is recommended to use it when simply displaying with a `readonly` prop without using `v-model`.\n\nAlso, insert a `\u003cpre\u003e` tag to prevent the text in the slot from being automatically formatted.\n\n```vue\n\u003ctemplate\u003e\n  \u003ccode-mirror :lang=\"lang\" :linter=\"linter\"\u003e\n    \u003cpre\u003e\n{\n  \"key\": \"value\"\n}\u003c/pre\n    \u003e\n  \u003c/code-mirror\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref, defineComponent } from 'vue';\n\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\n\nimport CodeMirror from 'vue-codemirror6';\n\nexport default defineComponent({\n  components: {\n    CodeMirror,\n  },\n  setup() {\n    const lang = json();\n    const linter = jsonParseLinter();\n    return { lang, linter };\n  },\n});\n\u003c/script\u003e\n```\n\n### Full Example\n\nWhen using as a Markdown editor on [https://github.com/logue/vite-vue3-ts-starter](vite-vue3-ts-starter).\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, defineComponent, type Ref } from 'vue';\n\n// Load component\nimport CodeMirror from 'vue-codemirror6';\n\n// CodeMirror extensions\nimport { markdown as md } from '@codemirror/lang-markdown';\nimport type { LanguageSupport } from '@codemirror/language';\nimport type { Extension } from '@codemirror/state';\nimport type { ViewUpdate } from '@codemirror/view';\n\n/** text */\nconst value: Ref\u003cstring\u003e = ref('');\n\n/** Dark mode **/\nconst dark: Ref\u003cboolean\u003e = ref(\n  window.matchMedia('(prefers-color-scheme: dark)').matches\n);\n\n/**\n * CodeMirror Language\n *\n * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}\n */\nconst lang: LanguageSupport = md();\n\n/**\n * Internationalization Config.\n * In this example, the display language to Japanese.\n * Must be reactive when used in combination with vue-i18n.\n *\n * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization}\n */\nconst phrases: Record\u003cstring, string\u003e = {\n  // @codemirror/view\n  'Control character': '制御文字',\n  // @codemirror/commands\n  'Selection deleted': '選択を削除',\n  // @codemirror/language\n  'Folded lines': '折り畳まれた行',\n  'Unfolded lines': '折り畳める行',\n  to: '行き先',\n  'folded code': '折り畳まれたコード',\n  unfold: '折り畳みを解除',\n  'Fold line': '行を折り畳む',\n  'Unfold line': '行の折り畳む解除',\n  // @codemirror/search\n  'Go to line': '行き先の行',\n  go: 'OK',\n  Find: '検索',\n  Replace: '置き換え',\n  next: '▼',\n  previous: '▲',\n  all: 'すべて',\n  'match case': '一致条件',\n  'by word': '全文検索',\n  regexp: '正規表現',\n  replace: '置き換え',\n  'replace all': 'すべてを置き換え',\n  close: '閉じる',\n  'current match': '現在の一致',\n  'replaced $ matches': '$ 件の一致を置き換え',\n  'replaced match on line $': '$ 行の一致を置き換え',\n  'on line': 'した行',\n  // @codemirror/autocomplete\n  Completions: '自動補完',\n  // @codemirror/lint\n  Diagnostics: 'エラー',\n  'No diagnostics': 'エラーなし',\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ccode-mirror\n    v-model=\"value\"\n    basic\n    :dark=\"dark\"\n    :lang=\"lang\"\n    :phrases=\"phrases\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Events\n\n| Event  | Description                                                                                                   |\n| ------ | ------------------------------------------------------------------------------------------------------------- |\n| ready  | When CodeMirror loaded.                                                                                       |\n| focus  | When focus changed.                                                                                           |\n| update | When CodeMirror state changed. Returns [ViewUpdate](https://codemirror.net/docs/ref/#view.ViewUpdate) object. |\n| change | Value changed. Returns [EditorState](https://codemirror.net/docs/ref/#state.EditorState)                      |\n\n## Parameter / Function\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref, onMounted, type Ref, type PropType } from 'vue';\nimport CodeMirror from 'vue-codemirror6';\n\nconst cm: Ref\u003cInstanceType\u003ctypeof CodeMirror\u003e | undefined\u003e = ref();\n\nonMounted(() =\u003e {\n  console.log(cm.value?.json);\n});\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003ccode-mirror ref=\"cm\" /\u003e\n\u003c/template\u003e\n```\n\n| Function / Parameter | Description                                                                                         |\n| -------------------- | --------------------------------------------------------------------------------------------------- |\n| view                 | Get and set [EditorView](https://codemirror.net/docs/ref/#view.EditorView).                         |\n| selection            | Get and set the [EditorSelection](https://codemirror.net/docs/ref/#state.EditorSelection) instance. |\n| cursor               | Get and set the [cursor](https://codemirror.net/docs/ref/#state.EditorSelection^cursor) location.   |\n| json                 | Get and set state to a JSON-serializable object.                                                    |\n| focus                | Get and set [focus](https://codemirror.net/docs/ref/#view.EditorView.focus).                        |\n| lint()               | Force run linter (Only if `linter` prop is specified)                                               |\n| forceReconfigure()   | Re register all extensions.                                                                         |\n\n### CodeMirror5 backward compatible functions\n\nThe instructions below are compatible methods for those familiar with [codemirror5](https://codemirror.net/5/).\nSince the above method is usually sufficient, its **active use is not recommended**.\n\n| Function                                                            | Description                                                                                      |\n| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| getRange(from?: number, to?: number)                                | Get the text between the given points in the editor.                                             |\n| getLine(number: number)                                             | Get the content of line.                                                                         |\n| lineCount()                                                         | Get the number of lines in the editor.                                                           |\n| getCursor()                                                         | Retrieve one end of the primary selection.                                                       |\n| listSelections()                                                    | Retrieves a list of all current selections.                                                      |\n| getSelection()                                                      | Get the currently selected code.                                                                 |\n| getSelections()                                                     | The length of the given array should be the same as the number of active selections.             |\n| somethingSelected()                                                 | Return true if any text is selected.                                                             |\n| replaceRange(replacement: string \\| Text, from: number, to: number) | Replace the part of the document between from and to with the given string.                      |\n| replaceSelection(replacement: string \\| Text)                       | Replace the selection(s) with the given string.                                                  |\n| setCursor(position: number)                                         | Set the cursor position.                                                                         |\n| setSelection(anchor: number, head?: number)                         | Set a single selection range.                                                                    |\n| setSelections(ranges: readonly SelectionRange[], primary?: number)  | Sets a new set of selections.                                                                    |\n| extendSelectionsBy(f: Function)                                     | Applies the given function to all existing selections, and calls extendSelections on the result. |\n\n## Recommendations\n\nSince CodeMirror has a relatively large capacity, when using [vite](https://vitejs.dev), it is recommended to set it to output as a separate file using the [`manualChunks`](https://vitejs.dev/guide/build.html#chunking-strategy) option at build time as shown below.\n\n```ts\nconst config: UserConfig = {\n  // ...\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks: {\n          // ...\n          codemirror: [\n            // Split CodeMirror code.\n            'vue-codemirror6',\n            'codemirror',\n            '@codemirror/autocomplete',\n            '@codemirror/commands',\n            '@codemirror/language',\n            '@codemirror/lint',\n            '@codemirror/search',\n            '@codemirror/state',\n            '@codemirror/view',\n          ],\n          'codemirror-lang': [\n            // Add the following as needed.\n            '@codemirror/lang-html',\n            '@codemirror/lang-javascript',\n            '@codemirror/lang-markdown',\n          ],\n          // ...\n        },\n      },\n    },\n  },\n  // ...\n};\n```\n\n## LICENSE\n\n©2022-2025 by Logue.\nLicensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogue%2Fvue-codemirror6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogue%2Fvue-codemirror6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogue%2Fvue-codemirror6/lists"}