Add allow-multiple-selections prop.

Author: logue

README.md

@@ -31,28 +31,29 @@ This component can handle bidirectional binding by `v-model` like a general Vue
 
 ## Props
 
-| Props | Type | Information |
-| -------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| model-value | string \| Text | Text value. (Not `value`) |
-| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
-| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
-| dark | boolean | Toggle Darkmode. |
-| placeholder | string | Add placeholder text (or HTML DOM) when blank |
-| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
-| tab | boolean | Enables tab indentation. |
-| tab-size | number | Configures the tab size to use in this state. |
-| line-separator | string | Set line break (separetor) char. (Default is `\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. |
-| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
-| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging. |
-| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
-| phrases | Record&lt;string, string&gt; | Specify here if you want to make the displayed character string multilingual. see <https://codemirror.net/6/examples/translate/> |
-| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
-| 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. |
-| linterConfig | Object | see <https://codemirror.net/docs/ref/#lint.linter^config> |
-| gutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
-| gutterConfig | Object | see <https://codemirror.net/docs/ref/#lint.lintGutter^config> |
-| tag | string | HTML tags used in the component. (Default is `div` tag.) |
+| Props | Type | Information |
+| ------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| model-value | string \| Text | Text value. (Not `value`) |
+| basic | boolean | Use [basicSetup](https://codemirror.net/docs/ref/#codemirror.basicSetup). |
+| minimal | boolean | Use [miniSetup](https://codemirror.net/docs/ref/#codemirror.minimalSetup). If a `basic` prop is also specified, that setting will take precedence. |
+| dark | boolean | Toggle Darkmode. |
+| placeholder | string | Add placeholder text (or HTML DOM) when blank |
+| wrap | boolean | Line text wrapping. see [lineWrapping](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping). |
+| tab | boolean | Enables tab indentation. |
+| allow-multiple-selections | boolean | Allow Multiple Selection. See [allowMultipleSelections](https://codemirror.net/docs/ref/#state.EditorState^allowMultipleSelections) |
+| tab-size | number | Configures the tab size to use in this state. |
+| line-separator | string | Set line break (separetor) char. (Default is `\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. |
+| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
+| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to `readonly`, but setting this value to true disables dragging. |
+| lang | LanguageSupport | The language you want to have syntax highlighting. see <https://codemirror.net/6/#languages> |
+| phrases | Record&lt;string, string&gt; | Specify here if you want to make the displayed character string multilingual. see <https://codemirror.net/6/examples/translate/> |
+| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
+| 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. |
+| linterConfig | Object | see <https://codemirror.net/docs/ref/#lint.linter^config> |
+| gutter | boolean | Display 🔴 on the line where there was an error when `linter` was specified. It will not work if `linter` is not specified. |
+| gutterConfig | Object | see <https://codemirror.net/docs/ref/#lint.lintGutter^config> |
+| tag | string | HTML tags used in the component. (Default is `div` tag.) |
 
 ⚠ 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.
 
@@ -391,6 +392,4 @@ const config: UserConfig = {
 
 ## LICENSE
 
-[MIT](LICENSE)
-
-&copy; 2022 by Logue.
+©2022-2023 by Logue. Licensed under the [MIT License](LICENSE).

src/components/CodeMirror.ts

@@ -67,8 +67,6 @@ export interface CodeMirrorEmitsOptions extends ObjectEmitsOptions {
  (e: 'destroy'): void;
  /** State Changed */
  (e: 'change', value: EditorState): void;
- /** Diagnostic Count */
- (e: 'diagnosticCount'): number;
 }
 
 /** CodeMirror Component */
@@ -148,6 +146,15 @@ export default defineComponent({
  type: Boolean,
  default: false,
  },
+ /**
+ * Allow Multiple Selection.
+ *
+ * @see {@link https://codemirror.net/docs/ref/#state.EditorState^allowMultipleSelections}
+ */
+ allowMultipleSelections: {
+ type: Boolean,
+ default: false,
+ },
  /**
  * Tab size
  *
@@ -358,6 +365,8 @@ export default defineComponent({
  props.wrap ? EditorView.lineWrapping : undefined,
  // Indent with tab
  props.tab ? keymap.of([indentWithTab]) : undefined,
+ // Allow Multiple Selections
+ EditorState.allowMultipleSelections.of(props.allowMultipleSelections),
  // Indent tab size
  props.tabSize ? EditorState.tabSize.of(props.tabSize) : undefined,
  // locale settings
@@ -371,7 +380,7 @@ export default defineComponent({
  ? EditorState.lineSeparator.of(props.lineSeparator)
  : undefined,
  // Lang
- props.lang ? props.lang : undefined,
+ props.lang ? props.lang.extension : undefined,
  // Append Linter settings
  props.linter ? linter(props.linter, props.linterConfig) : undefined,
  // Show 🔴 to error line when linter enabled.
@@ -380,7 +389,7 @@ export default defineComponent({
  : undefined,
  // Placeholder
  props.placeholder ? placeholder(props.placeholder) : undefined,
- // Append Extensions (such as basic-setup)
+ // Append Extensions
  ...props.extensions,
  ])
  );
@@ -416,7 +425,8 @@ export default defineComponent({
  view.value.dispatch({
  effects: StateEffect.reconfigure.of(exts),
  });
- }
+ },
+ { deep: true }
  );
 
  // focus changed