@scalar/use-codemirror 0.7.22 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-codemirror
 
+## 0.8.0
+
+### Minor Changes
+
+- 612431b4: Migrate model logic from codemirror component to hook
+
 ## 0.7.22
 
 ### Patch Changes

package/dist/components/CodeMirror/CodeMirror.vue.d.ts

@@ -1,9 +1,6 @@
-import { type Extension } from '@codemirror/state';
 import type { CodeMirrorLanguage } from '../../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    name?: string | undefined;
-    extensions?: Extension[] | undefined;
-    content?: string | undefined;
+    content: string | undefined;
     readOnly?: boolean | undefined;
     languages?: CodeMirrorLanguage[] | undefined;
     withVariables?: boolean | undefined;
@@ -12,14 +9,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disableEnter?: boolean | undefined;
 }>, {
     disableEnter: boolean;
-}>, {
-    setCodeMirrorContent: (content?: string | undefined) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: string) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    name?: string | undefined;
-    extensions?: Extension[] | undefined;
-    content?: string | undefined;
+    content: string | undefined;
     readOnly?: boolean | undefined;
     languages?: CodeMirrorLanguage[] | undefined;
     withVariables?: boolean | undefined;

package/dist/components/CodeMirror/CodeMirror.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAUlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6PlC,OAAO;;AAV1B,wBAkBG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;;aA2GxC,MAAM,GAAG,SAAS;;;;;;;;;;;;aAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;kBAMZ,OAAO;;AAR1B,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/hooks/useCodeMirror.d.ts

@@ -1,27 +1,34 @@
 import { type Extension } from '@codemirror/state';
-import { EditorView } from 'codemirror';
-import { type Ref } from 'vue';
-type UseCodeMirrorParameters = {
-    /**
-     * Some additional CodeMirror extensions.
-     */
-    extensions: Extension[];
-    /**
-     * Prefill the content. Will be ignored when a provider is given.
-     */
-    content?: string;
-    /**
-     * Whether to load a theme.
-     */
-    withoutTheme?: boolean;
-};
-export declare const useCodeMirror: (parameters: UseCodeMirrorParameters) => {
-    value: Ref<string>;
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+import type { CodeMirrorLanguage } from '../types';
+type BaseParameters = {
+    /** Element Ref to mount codemirror to */
     codeMirrorRef: Ref<HTMLDivElement | null>;
-    codeMirror: Ref<EditorView | null>;
+    /** Whether to load a theme.*/
+    withoutTheme?: MaybeRefOrGetter<boolean | undefined>;
+    /** Languages to support for syntax highlighting */
+    languages?: MaybeRefOrGetter<CodeMirrorLanguage[] | undefined>;
+    /** Class names to apply to the instance */
+    classes?: MaybeRefOrGetter<string[] | undefined>;
+    /** Put the editor into read-only mode */
+    readOnly?: MaybeRefOrGetter<boolean | undefined>;
+    /** Option to show line numbers in the editor */
+    lineNumbers?: MaybeRefOrGetter<boolean | undefined>;
+    withVariables?: MaybeRefOrGetter<boolean | undefined>;
+    disableEnter?: MaybeRefOrGetter<boolean | undefined>;
+};
+export type UseCodeMirrorParameters = (BaseParameters & {
+    /** Prefill the content. Will be ignored when a provider is given. */
+    content: MaybeRefOrGetter<string | undefined>;
+    onChange: (v: string) => void;
+}) | (BaseParameters & {
+    provider: Extension;
+    content?: MaybeRefOrGetter<string | undefined>;
+    onChange?: (v: string) => void;
+});
+/** Reactive CodeMirror Integration */
+export declare const useCodeMirror: (params: UseCodeMirrorParameters) => {
     setCodeMirrorContent: (content?: string) => void;
-    reconfigureCodeMirror: (newExtensions: Extension[]) => void;
-    restartCodeMirror: (newExtensions: Extension[]) => void;
 };
 export {};
 //# sourceMappingURL=useCodeMirror.d.ts.map

package/dist/hooks/useCodeMirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,KAAK,CAAA;AAI1C,KAAK,uBAAuB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,aAAa,eACZ,uBAAuB;WAE5B,IAAI,MAAM,CAAC;mBACH,IAAI,cAAc,GAAG,IAAI,CAAC;gBAC7B,IAAI,UAAU,GAAG,IAAI,CAAC;qCACD,MAAM,KAAK,IAAI;2CACT,SAAS,EAAE,KAAK,IAAI;uCACxB,SAAS,EAAE,KAAK,IAAI;CA+HxD,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAO/D,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAMT,MAAM,KAAK,CAAA;AAGZ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,KAAK,cAAc,GAAG;IACpB,yCAAyC;IACzC,aAAa,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,SAAS,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,SAAS,CAAC,CAAA;IAC9D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAChD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,gDAAgD;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;CACrD,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAC,GACF,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,CAAA;AAUN,sCAAsC;AACtC,eAAO,MAAM,aAAa,WAChB,uBAAuB;qCAEE,MAAM,KAAK,IAAI;CAsGjD,CAAA"}

package/dist/hooks/variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../src/hooks/variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAGlB,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAA;AAYzB,eAAO,MAAM,SAAS;;mBAOD,UAAU;EAc5B,CAAA"}

package/dist/index.js

@@ -4,16 +4,15 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, watch, defineComponent, openBlock, createElementBlock, toRaw } from "vue";
+import { ref, watch, onBeforeUnmount, toValue, computed, defineComponent, toRef, openBlock, createElementBlock } from "vue";
 import { html } from "@codemirror/lang-html";
 import { java } from "@codemirror/lang-java";
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
 import { StreamLanguage } from "@codemirror/language";
-import { MatchDecorator, Decoration, ViewPlugin, EditorView as EditorView$1, lineNumbers, keymap } from "@codemirror/view";
 import { StateEffect } from "@codemirror/state";
-import { EditorView } from "codemirror";
+import { MatchDecorator, Decoration, ViewPlugin, EditorView, lineNumbers, keymap } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { createTheme } from "@uiw/codemirror-themes";
 function Context$2(indented, column, type, info, align, prev) {
@@ -3942,110 +3941,6 @@ const customTheme = createTheme({
     }
   ]
 });
-const useCodeMirror = (parameters) => {
-  const { extensions, content, withoutTheme } = parameters;
-  const value = ref(content ?? "");
-  const codeMirrorRef = ref(null);
-  const codeMirror = ref(null);
-  watch(codeMirrorRef, () => {
-    destroyCodeMirror();
-    mountCodeMirror(extensions);
-  });
-  const mountCodeMirror = (withCustomExtensions) => {
-    if (codeMirrorRef.value) {
-      const configuration = {
-        parent: codeMirrorRef.value,
-        extensions: addDefaultExtensions(withCustomExtensions)
-      };
-      if (content) {
-        configuration.doc = content;
-      }
-      codeMirror.value = new EditorView(configuration);
-    }
-  };
-  const addDefaultExtensions = (newExtensions = []) => {
-    const defaultExtensions = [
-      withoutTheme ? null : customTheme,
-      EditorView.theme({
-        ".cm-line": {
-          lineHeight: "20px"
-        },
-        ".cm-gutterElement": {
-          lineHeight: "20px"
-        }
-      })
-    ].filter((extension) => extension !== null);
-    return [...defaultExtensions, newExtensions];
-  };
-  const destroyCodeMirror = () => {
-    var _a;
-    (_a = codeMirror.value) == null ? void 0 : _a.destroy();
-  };
-  const setCodeMirrorContent = (newValue) => {
-    if (!codeMirror.value) {
-      return;
-    }
-    if (value.value === newValue) {
-      return;
-    }
-    value.value = newValue ?? "";
-    if (codeMirror.value.state.doc.toString() === value.value) {
-      return;
-    }
-    codeMirror.value.dispatch({
-      changes: {
-        from: 0,
-        to: codeMirror.value.state.doc.length,
-        insert: newValue
-      },
-      selection: {
-        anchor: Math.min(
-          codeMirror.value.state.selection.main.anchor,
-          value.value.length
-        )
-      }
-    });
-  };
-  const reconfigureCodeMirror = (newExtensions) => {
-    if (!codeMirror.value) {
-      return;
-    }
-    codeMirror.value.dispatch({
-      effects: StateEffect.reconfigure.of(addDefaultExtensions(newExtensions))
-    });
-  };
-  const restartCodeMirror = (newExtensions) => {
-    destroyCodeMirror();
-    mountCodeMirror(newExtensions);
-  };
-  return {
-    /**
-     * The current value
-     */
-    value,
-    /**
-     * An empty reference used to mount CodeMirror when bound to the DOM.
-     */
-    codeMirrorRef,
-    /**
-     * The CodeMirror instance.
-     */
-    // @ts-ignore
-    codeMirror,
-    /**
-     * Replaces the current content with the given value.
-     */
-    setCodeMirrorContent,
-    /**
-     * Reconfigure the used extensions.
-     */
-    reconfigureCodeMirror,
-    /**
-     * Restarts CodeMirror (destroy + mount)
-     */
-    restartCodeMirror
-  };
-};
 const variableHighlighterDecoration = new MatchDecorator({
   regexp: /(\{[^}]+\})/g,
   decoration: () => Decoration.mark({
@@ -4069,7 +3964,7 @@ const variables = () => ViewPlugin.fromClass(
   },
   {
     decorations: (instance) => instance.variables,
-    provide: (plugin) => EditorView$1.atomicRanges.of(
+    provide: (plugin) => EditorView.atomicRanges.of(
       (view) => {
         var _a;
         return ((_a = view.plugin(plugin)) == null ? void 0 : _a.variables) || Decoration.none;
@@ -4077,11 +3972,185 @@ const variables = () => ViewPlugin.fromClass(
     )
   }
 );
+const hasProvider = (params) => "provider" in params;
+const useCodeMirror = (params) => {
+  const codeMirror = ref(null);
+  watch(
+    params.codeMirrorRef,
+    () => {
+      var _a;
+      (_a = codeMirror.value) == null ? void 0 : _a.destroy();
+      mountCodeMirror();
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    var _a;
+    return (_a = codeMirror.value) == null ? void 0 : _a.destroy();
+  });
+  function mountCodeMirror() {
+    if (params.codeMirrorRef.value) {
+      const extensions = getCodeMirrorExtensions(extensionConfig.value);
+      if (hasProvider(params))
+        extensions.push(params.provider);
+      codeMirror.value = new EditorView({
+        parent: params.codeMirrorRef.value,
+        extensions
+      });
+      if (!hasProvider(params))
+        setCodeMirrorContent(toValue(params.content));
+    }
+  }
+  const extensionConfig = computed(() => ({
+    onChange: params.onChange,
+    languages: toValue(params.languages),
+    classes: toValue(params.classes),
+    readOnly: toValue(params.readOnly),
+    lineNumbers: toValue(params.lineNumbers),
+    withVariables: toValue(params.withVariables),
+    disableEnter: toValue(params.withVariables),
+    withoutTheme: toValue(params.withoutTheme)
+  }));
+  watch(
+    extensionConfig,
+    () => {
+      if (!codeMirror.value)
+        return;
+      const extensions = getCodeMirrorExtensions(extensionConfig.value);
+      if (hasProvider(params))
+        extensions.push(params.provider);
+      codeMirror.value.dispatch({
+        effects: StateEffect.reconfigure.of(extensions)
+      });
+    },
+    { immediate: true }
+  );
+  const setCodeMirrorContent = (newValue = "") => {
+    if (!codeMirror.value)
+      return;
+    if (codeMirror.value.state.doc.toString() === newValue)
+      return;
+    codeMirror.value.dispatch({
+      changes: {
+        from: 0,
+        to: codeMirror.value.state.doc.length,
+        insert: newValue
+      },
+      selection: {
+        anchor: Math.min(
+          codeMirror.value.state.selection.main.anchor,
+          newValue.length
+        )
+      }
+    });
+  };
+  watch(
+    () => toValue(params.content),
+    () => {
+      if (hasProvider(params))
+        return;
+      setCodeMirrorContent(toValue(params.content));
+    },
+    { immediate: true }
+  );
+  return {
+    /** Replaces the current content with the given value. */
+    setCodeMirrorContent
+  };
+};
+const syntaxHighlighting = {
+  c: StreamLanguage.define(c),
+  clojure: StreamLanguage.define(clojure),
+  csharp: StreamLanguage.define(csharp),
+  go: StreamLanguage.define(go),
+  http: StreamLanguage.define(http),
+  html: html(),
+  java: java(),
+  javascript: javascript(),
+  json: json(),
+  kotlin: StreamLanguage.define(kotlin),
+  node: javascript(),
+  objc: StreamLanguage.define(objectiveC),
+  ocaml: StreamLanguage.define(oCaml),
+  powershell: StreamLanguage.define(powerShell),
+  python: python(),
+  r: StreamLanguage.define(r),
+  ruby: StreamLanguage.define(ruby),
+  shell: StreamLanguage.define(shell),
+  swift: StreamLanguage.define(swift),
+  yaml: StreamLanguage.define(yaml)
+};
+function getCodeMirrorExtensions({
+  onChange,
+  languages = [],
+  classes = [],
+  readOnly = false,
+  lineNumbers: lineNumbers$1 = false,
+  withVariables = false,
+  disableEnter = false,
+  withoutTheme = false
+}) {
+  const extensions = [
+    EditorView.theme({
+      ".cm-line": {
+        lineHeight: "20px"
+      },
+      ".cm-gutterElement": {
+        lineHeight: "20px"
+      }
+    }),
+    // Listen to updates
+    EditorView.updateListener.of((v) => {
+      if (!v.docChanged)
+        return;
+      onChange == null ? void 0 : onChange(v.state.doc.toString());
+    }),
+    // Add Classes
+    EditorView.editorAttributes.of({ class: classes.join(" ") })
+  ];
+  if (!withoutTheme)
+    extensions.push(customTheme);
+  if (readOnly)
+    extensions.push(EditorView.editable.of(false));
+  if (languages.length) {
+    languages.filter((language) => typeof syntaxHighlighting[language] !== "undefined").forEach((language) => {
+      extensions.push(syntaxHighlighting[language]);
+    });
+  }
+  if (lineNumbers$1)
+    extensions.push(lineNumbers());
+  if (withVariables)
+    extensions.push(variables());
+  if (disableEnter) {
+    extensions.push(
+      keymap.of([
+        {
+          key: "Enter",
+          run: () => {
+            return true;
+          }
+        },
+        {
+          key: "Ctrl-Enter",
+          mac: "Cmd-Enter",
+          run: () => {
+            return true;
+          }
+        },
+        {
+          key: "Shift-Enter",
+          run: () => {
+            return true;
+          }
+        }
+      ])
+    );
+  }
+  return extensions;
+}
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CodeMirror",
   props: {
-    name: {},
-    extensions: {},
     content: {},
     readOnly: { type: Boolean },
     languages: {},
@@ -4091,128 +4160,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disableEnter: { type: Boolean, default: false }
   },
   emits: ["change"],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { emit }) {
     const props = __props;
-    const syntaxHighlighting = {
-      c: StreamLanguage.define(c),
-      clojure: StreamLanguage.define(clojure),
-      csharp: StreamLanguage.define(csharp),
-      go: StreamLanguage.define(go),
-      http: StreamLanguage.define(http),
-      html: html(),
-      java: java(),
-      javascript: javascript(),
-      json: json(),
-      kotlin: StreamLanguage.define(kotlin),
-      node: javascript(),
-      objc: StreamLanguage.define(objectiveC),
-      ocaml: StreamLanguage.define(oCaml),
-      powershell: StreamLanguage.define(powerShell),
-      python: python(),
-      r: StreamLanguage.define(r),
-      ruby: StreamLanguage.define(ruby),
-      shell: StreamLanguage.define(shell),
-      swift: StreamLanguage.define(swift),
-      yaml: StreamLanguage.define(yaml)
-    };
-    const classes = ["scalar-api-client__codemirror"];
-    if (props.readOnly) {
-      classes.push("scalar-api-client__codemirror--read-only");
-    }
-    const getCodeMirrorExtensions = () => {
-      const extensions = [];
-      extensions.push(EditorView$1.editorAttributes.of({ class: classes.join(" ") }));
-      if (props.extensions) {
-        props.extensions.forEach((extension) => {
-          extensions.push(toRaw(extension));
-        });
-      }
-      if (props.readOnly) {
-        extensions.push(EditorView$1.editable.of(false));
-      }
-      if (props.languages) {
-        props.languages.filter((language) => typeof syntaxHighlighting[language] !== "undefined").forEach((language) => {
-          extensions.push(syntaxHighlighting[language]);
-        });
-      }
-      if (props.lineNumbers) {
-        extensions.push(lineNumbers());
-      }
-      if (props.withVariables) {
-        extensions.push(variables());
-      }
-      if (props.disableEnter) {
-        extensions.push(
-          keymap.of([
-            {
-              key: "Enter",
-              run: () => {
-                return true;
-              }
-            },
-            {
-              key: "Ctrl-Enter",
-              mac: "Cmd-Enter",
-              run: () => {
-                return true;
-              }
-            },
-            {
-              key: "Shift-Enter",
-              run: () => {
-                return true;
-              }
-            }
-          ])
-        );
-      }
-      extensions.push(
-        EditorView$1.updateListener.of((v) => {
-          if (!v.docChanged) {
-            return;
-          }
-          emit("change", v.state.doc.toString());
-        })
-      );
-      return extensions;
-    };
-    const {
-      codeMirrorRef,
-      setCodeMirrorContent,
-      reconfigureCodeMirror,
-      restartCodeMirror
-    } = useCodeMirror({
-      content: props.content ?? "",
-      extensions: getCodeMirrorExtensions(),
-      withoutTheme: props.withoutTheme
-    });
-    watch(
-      () => props.content,
-      () => {
-        setCodeMirrorContent(props.content);
-      }
-    );
-    watch(
-      () => props.name,
-      () => {
-        restartCodeMirror(getCodeMirrorExtensions());
-      }
+    const classes = computed(
+      () => props.readOnly ? [
+        "scalar-api-client__codemirror",
+        "scalar-api-client__codemirror--read-only"
+      ] : ["scalar-api-client__codemirror"]
     );
-    watch(
-      [
-        () => props.disableEnter,
-        () => props.languages,
-        () => props.lineNumbers,
-        () => props.readOnly,
-        () => props.withoutTheme,
-        () => props.withVariables
-      ],
-      () => {
-        reconfigureCodeMirror(getCodeMirrorExtensions());
-      }
-    );
-    __expose({
-      setCodeMirrorContent
+    const codeMirrorRef = ref(null);
+    useCodeMirror({
+      content: toRef(() => props.content),
+      readOnly: toRef(() => props.readOnly),
+      languages: toRef(() => props.languages),
+      withVariables: toRef(() => props.withVariables),
+      lineNumbers: toRef(() => props.lineNumbers),
+      withoutTheme: toRef(() => props.withoutTheme),
+      disableEnter: toRef(() => props.disableEnter),
+      onChange: (v) => emit("change", v || ""),
+      codeMirrorRef,
+      classes
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/package.json

@@ -11,7 +11,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.7.22",
+  "version": "0.8.0",
   "engines": {
     "node": ">=18"
   },

package/dist/components/CodeMirror/extensions/variables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeMirror/extensions/variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAGlB,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAA;AAYzB,eAAO,MAAM,SAAS;;mBAOD,UAAU;EAc5B,CAAA"}