[BREAKING CHANGE] editable prop become to disabled (revere value).

[BREAKING CHANGE] `lint-gutter` prop become `gutter`.
Add gutter-config prop.

Author: logue

README.md

@@ -36,7 +36,7 @@ This component can handle bidirectional binding by `v-model` like a general Vue
 | tab        | boolean                           | Enables tab indentation.                                                                                                                                                                                                       |
 | 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                           | When this is set to true, it is similar to `readonly`, except that the cursor is not displayed like the normal pre tag.                                                                                                        |
+| 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.                                                                                                                                                                                    |

dev/DemoPage.vue

@@ -275,7 +275,7 @@ export default defineComponent({
             :lang="cmLangJs"
             :linter="cmLintJs"
             :dark="dark"
-            lint-gutter
+            gutter
             warp
             basic
           />
@@ -302,10 +302,11 @@ export default defineComponent({
         </a>
         and
         <a
-          href="https://codemirror.net/docs/ref/#state.EditorState^readOnly"
+          href="https://codemirror.net/docs/ref/#view.EditorView%5Eeditable"
           target="_blank"
         >
           <code>editable</code>
+          (not disabled)
         </a>
         a demo
       </h2>
@@ -332,20 +333,20 @@ export default defineComponent({
       </div>
       <div class="form-check form-switch">
         <input
-          id="editable"
-          v-model="isEditable"
+          id="disabled"
+          v-model="isDisabled"
           type="checkbox"
           class="form-check-input"
           role="switch"
-          :aria-checked="isEditable"
+          :aria-checked="isDisabled"
         />
-        <label class="form-check-label" for="editable">Editable</label>
+        <label class="form-check-label" for="disabled">Disabled</label>
       </div>
       <code-mirror
         :dark="dark"
         basic
         :readonly="isReadonly"
-        :editable="isEditable"
+        :disabled="isDisabled"
       >
         <pre>
 色は匂へど　散りぬるを
@@ -424,8 +425,8 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
 
     /** Readonly */
     const isReadonly = ref(true);
-    /** Editable */
-    const isEditable = ref(true);
+    /** Disabled */
+    const isDisabled = ref(false);
 
     // Realtime convert Markdown
     watch(demo, async current => {
@@ -452,7 +453,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
       onViewUpdate,
       onReady,
       isReadonly,
-      isEditable,
+      isDisabled,
     };
   },
 });

src/components/CodeMirror.ts

@@ -6,7 +6,6 @@ import {
   onUnmounted,
   ref,
   shallowRef,
-  toRaw,
   watch,
   type ComputedRef,
   type ObjectEmitsOptions,
@@ -113,14 +112,15 @@ export default defineComponent({
     /**
      * Line wrapping
      *
+     * An extension that enables line wrapping in the editor (by setting CSS white-space to pre-wrap in the content).
      * @see {@link https://codemirror.net/6/docs/ref/#view.EditorView%5ElineWrapping | LineWrapping}
      */
     wrap: {
       type: Boolean,
       default: false,
     },
     /**
-     * Tab handling
+     * Allow tab input.
      *
      * @see {@link https://codemirror.net/6/examples/tab/ | Tab Handling}
      */
@@ -138,13 +138,16 @@ export default defineComponent({
       default: false,
     },
     /**
-     * Editable
+     * Disable input.
+     *
+     * This is the reversed value of the CodeMirror editable.
+     * Similar to `readonly`, but setting this value to true disables dragging.
      *
      * @see {@link https://codemirror.net/6/docs/ref/#view.EditorView%5Eeditable | editable}
      */
-    editable: {
+    disabled: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     /**
      * Additional Extension
@@ -184,11 +187,22 @@ export default defineComponent({
       type: Function as PropType<LintSource>,
       default: undefined,
     },
-    /** Show Gutter */
-    lintGutter: {
+    /**
+     * Show Linter Gutter
+     *
+     * An area to circle the lines with errors will be displayed.
+     */
+    gutter: {
       type: Boolean,
       defalt: false,
     },
+    /**
+     * Gutter Config
+     */
+    gutterConfig: {
+      type: Object,
+      default: () => undefined,
+    },
     /** Using tag */
     tag: {
       type: String,
@@ -264,13 +278,15 @@ export default defineComponent({
         // Readonly option
         EditorState.readOnly.of(props.readonly),
         // Editable option
-        EditorView.editable.of(props.editable),
+        EditorView.editable.of(!props.disabled),
         // Lang
-        props.lang ? toRaw(props.lang) : undefined,
+        props.lang ? props.lang : undefined,
         // Append Linter settings
         props.linter ? linter(props.linter) : undefined,
         // Show 🔴 to error line when linter enabled.
-        props.linter && props.lintGutter ? lintGutter() : undefined,
+        props.linter && props.gutter
+          ? lintGutter(props.gutterConfig)
+          : undefined,
         // Append Extensions (such as basic-setup)
         ...props.extensions,
       ])
@@ -297,17 +313,15 @@ export default defineComponent({
     );
 
     // Extension (mostly props) Changed
-    watch(extensions, e => {
+    watch(extensions, exts =>
       // TODO: Reduce unchanched value
       view.value.dispatch({
-        effects: StateEffect.reconfigure.of(e),
-      });
-    });
+        effects: StateEffect.reconfigure.of(exts),
+      })
+    );
 
     // focus changed
-    watch(focus, isFocus => {
-      context.emit('focus', isFocus);
-    });
+    watch(focus, isFocus => context.emit('focus', isFocus));
 
     /** When loaded */
     onMounted(async () => {