@onereach/ui-components 5.7.0-beta.3264.0 → 5.7.0-beta.3276.0

package/dist/bundled/v2/components/OrCodeV3/OrCode.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
 import { b as basicSetup, i as indentWithTab } from '../../index-dbeba01e.js';
-import { w as EditorView, a4 as keymap, e as EditorState } from '../../index-df5748fb.js';
+import { d as Compartment, a4 as keymap, e as EditorState, w as EditorView } from '../../index-df5748fb.js';
 import { j as javascript, c as css, h as html } from '../../index-7020020d.js';
 import { j as json } from '../../index-4ee5b5e5.js';
 import { m as markdown } from '../../index-1d9c1371.js';
@@ -81,6 +81,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
+    const addedExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -88,8 +89,8 @@ var script = defineComponent({
       ...useValidationAttributes()
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const proxyLanguage = computed(() => {
-      switch (props.language) {
+    const getLanguageExtension = async language => {
+      switch (language) {
         case CodeLanguage.HTML:
           return html();
         case CodeLanguage.CSS:
@@ -105,7 +106,7 @@ var script = defineComponent({
         case CodeLanguage.MD:
           return markdown();
       }
-    });
+    };
     // Methods
     function focus() {
       var _a;
@@ -116,14 +117,8 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // #region Codemirror
-    const editorView = new EditorView({
-      dispatch: transaction => {
-        editorView.update([transaction]);
-        proxyModelValue.value = String(editorView.state.doc);
-      }
-    });
     const theme = useTheme();
-    const extensions = computed(() => [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -158,19 +153,34 @@ var script = defineComponent({
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
       }
-    }), proxyLanguage.value, ...props.extensions]);
-    watch([proxyModelValue, extensions], _ref => {
-      let [modelValue = '', extensions] = _ref;
-      const {
-        selection
-      } = editorView.state;
-      editorView.setState(EditorState.create({
-        doc: modelValue,
-        extensions,
-        selection: selection.ranges.some(range => range.to > modelValue.length) ? {
-          anchor: modelValue.length
-        } : selection
-      }));
+    })];
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, addedExtensionCompartment.of([])]
+      // selection: selection.ranges.some((range) => range.to > modelValue.length)
+      //   ? { anchor: modelValue.length }
+      //   : selection,
+    });
+
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch([() => props.extensions, () => props.language], async _ref => {
+      let [extensions, language] = _ref;
+      const languageExt = await getLanguageExtension(language);
+      extensions.forEach(extension => {
+        Reflect.setPrototypeOf(extension, Reflect.getPrototypeOf(state));
+      });
+      const effect = addedExtensionCompartment.reconfigure([...extensions, languageExt]);
+      editorView.dispatch({
+        effects: [effect]
+      });
     }, {
       immediate: true
     });
@@ -207,7 +217,6 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur
     };

package/dist/bundled/v2/components/OrCodeV3/OrCode.vue.d.ts

@@ -28,7 +28,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
-    proxyLanguage: import("@vue/composition-api").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -143,7 +142,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
-    proxyLanguage: import("@vue/composition-api").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {

package/dist/bundled/v3/{OrCode.vue_vue_type_script_lang-df4f6357.js → OrCode.vue_vue_type_script_lang-8d6195d1.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
 import { b as basicSetup, i as indentWithTab } from './index-dbeba01e.js';
-import { w as EditorView, a4 as keymap, e as EditorState } from './index-df5748fb.js';
+import { d as Compartment, a4 as keymap, e as EditorState, w as EditorView } from './index-df5748fb.js';
 import { j as javascript, c as css, h as html } from './index-7020020d.js';
 import { j as json } from './index-4ee5b5e5.js';
 import { m as markdown } from './index-1d9c1371.js';
@@ -86,6 +86,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
+    const addedExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -93,8 +94,8 @@ var script = defineComponent({
       ...useValidationAttributes()
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const proxyLanguage = computed(() => {
-      switch (props.language) {
+    const getLanguageExtension = async language => {
+      switch (language) {
         case CodeLanguage.HTML:
           return html();
         case CodeLanguage.CSS:
@@ -110,7 +111,7 @@ var script = defineComponent({
         case CodeLanguage.MD:
           return markdown();
       }
-    });
+    };
     // Methods
     function focus() {
       var _a;
@@ -121,14 +122,8 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // #region Codemirror
-    const editorView = new EditorView({
-      dispatch: transaction => {
-        editorView.update([transaction]);
-        proxyModelValue.value = String(editorView.state.doc);
-      }
-    });
     const theme = useTheme();
-    const extensions = computed(() => [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -163,19 +158,34 @@ var script = defineComponent({
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
       }
-    }), proxyLanguage.value, ...props.extensions]);
-    watch([proxyModelValue, extensions], _ref => {
-      let [modelValue = '', extensions] = _ref;
-      const {
-        selection
-      } = editorView.state;
-      editorView.setState(EditorState.create({
-        doc: modelValue,
-        extensions,
-        selection: selection.ranges.some(range => range.to > modelValue.length) ? {
-          anchor: modelValue.length
-        } : selection
-      }));
+    })];
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, addedExtensionCompartment.of([])]
+      // selection: selection.ranges.some((range) => range.to > modelValue.length)
+      //   ? { anchor: modelValue.length }
+      //   : selection,
+    });
+
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch([() => props.extensions, () => props.language], async _ref => {
+      let [extensions, language] = _ref;
+      const languageExt = await getLanguageExtension(language);
+      extensions.forEach(extension => {
+        Reflect.setPrototypeOf(extension, Reflect.getPrototypeOf(state));
+      });
+      const effect = addedExtensionCompartment.reconfigure([...extensions, languageExt]);
+      editorView.dispatch({
+        effects: [effect]
+      });
     }, {
       immediate: true
     });
@@ -212,7 +222,6 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur
     };

package/dist/bundled/v3/components/OrCodeV3/OrCode.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrCode.vue_vue_type_script_lang-df4f6357.js';
-export { s as default } from '../../OrCode.vue_vue_type_script_lang-df4f6357.js';
+import { s as script } from '../../OrCode.vue_vue_type_script_lang-8d6195d1.js';
+export { s as default } from '../../OrCode.vue_vue_type_script_lang-8d6195d1.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createElementVNode, renderSlot, createVNode, withModifiers, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from 'vue';
 
 const _hoisted_1 = {

package/dist/bundled/v3/components/OrCodeV3/OrCode.vue.d.ts

@@ -61,7 +61,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | undefined>;
-    proxyLanguage: import("vue-demi").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{

package/dist/bundled/v3/components/OrCodeV3/index.js

@@ -1,5 +1,5 @@
 export { CodeLanguage } from './props.js';
-export { s as OrCodeV3 } from '../../OrCode.vue_vue_type_script_lang-df4f6357.js';
+export { s as OrCodeV3 } from '../../OrCode.vue_vue_type_script_lang-8d6195d1.js';
 export { a as lintGutter, l as linter } from '../../index-1e36d007.js';
 export { j as json, a as jsonParseLinter } from '../../index-4ee5b5e5.js';
 export { A as Annotation, a as AnnotationType, B as BidiSpan, t as BlockInfo, u as BlockType, C as ChangeDesc, b as ChangeSet, c as CharCategory, d as Compartment, D as Decoration, v as Direction, E as EditorSelection, e as EditorState, w as EditorView, F as Facet, G as GutterMarker, L as Line, M as MapMode, x as MatchDecorator, P as Prec, R as Range, f as RangeSet, g as RangeSetBuilder, h as RangeValue, y as RectangleMarker, S as SelectionRange, i as StateEffect, j as StateEffectType, k as StateField, T as Text, l as Transaction, V as ViewPlugin, z as ViewUpdate, W as WidgetType, _ as __test, H as closeHoverTooltips, m as codePointAt, n as codePointSize, o as combineConfig, p as countColumn, I as crosshairCursor, J as drawSelection, K as dropCursor, q as findClusterBreak, r as findColumn, s as fromCodePoint, N as getPanel, O as getTooltip, Q as gutter, U as gutterLineClass, X as gutters, Y as hasHoverTooltips, Z as highlightActiveLine, $ as highlightActiveLineGutter, a0 as highlightSpecialChars, a1 as highlightTrailingWhitespace, a2 as highlightWhitespace, a3 as hoverTooltip, a4 as keymap, a5 as layer, a6 as lineNumberMarkers, a7 as lineNumbers, a8 as logException, a9 as panels, aa as placeholder, ab as rectangularSelection, ac as repositionTooltips, ad as runScopeHandlers, ae as scrollPastEnd, af as showPanel, ag as showTooltip, ah as tooltips } from '../../index-df5748fb.js';

package/dist/bundled/v3/components/index.js

@@ -29,7 +29,7 @@ export { b as basicSetup } from '../index-dbeba01e.js';
 export { a as lintGutter, l as linter } from '../index-1e36d007.js';
 export { h as html, j as javascript } from '../index-7020020d.js';
 export { j as json, a as jsonParseLinter } from '../index-4ee5b5e5.js';
-export { s as OrCodeV3 } from '../OrCode.vue_vue_type_script_lang-df4f6357.js';
+export { s as OrCodeV3 } from '../OrCode.vue_vue_type_script_lang-8d6195d1.js';
 export { CodeLanguage } from './OrCodeV3/props.js';
 export { A as Annotation, a as AnnotationType, B as BidiSpan, t as BlockInfo, u as BlockType, C as ChangeDesc, b as ChangeSet, c as CharCategory, d as Compartment, D as Decoration, v as Direction, E as EditorSelection, e as EditorState, w as EditorView, F as Facet, G as GutterMarker, L as Line, M as MapMode, x as MatchDecorator, P as Prec, R as Range, f as RangeSet, g as RangeSetBuilder, h as RangeValue, y as RectangleMarker, S as SelectionRange, i as StateEffect, j as StateEffectType, k as StateField, T as Text, l as Transaction, V as ViewPlugin, z as ViewUpdate, W as WidgetType, _ as __test, H as closeHoverTooltips, m as codePointAt, n as codePointSize, o as combineConfig, p as countColumn, I as crosshairCursor, J as drawSelection, K as dropCursor, q as findClusterBreak, r as findColumn, s as fromCodePoint, N as getPanel, O as getTooltip, Q as gutter, U as gutterLineClass, X as gutters, Y as hasHoverTooltips, Z as highlightActiveLine, $ as highlightActiveLineGutter, a0 as highlightSpecialChars, a1 as highlightTrailingWhitespace, a2 as highlightWhitespace, a3 as hoverTooltip, a4 as keymap, a5 as layer, a6 as lineNumberMarkers, a7 as lineNumbers, a8 as logException, a9 as panels, aa as placeholder, ab as rectangularSelection, ac as repositionTooltips, ad as runScopeHandlers, ae as scrollPastEnd, af as showPanel, ag as showTooltip, ah as tooltips } from '../index-df5748fb.js';
 export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-69503c45.js';

package/dist/bundled/v3/index.js

@@ -18,7 +18,7 @@ export { s as OrChips } from './OrChips.vue_vue_type_script_lang-be1e7c30.js';
 import './components/OrCode/OrCode.js';
 export { s as OrCode } from './OrCode.vue_vue_type_script_lang-0edc76c5.js';
 import './components/OrCodeV3/OrCode.js';
-export { s as OrCodeV3 } from './OrCode.vue_vue_type_script_lang-df4f6357.js';
+export { s as OrCodeV3 } from './OrCode.vue_vue_type_script_lang-8d6195d1.js';
 import './components/OrColorPicker/OrColorPicker.js';
 export { s as OrColorPicker } from './OrColorPicker.vue_vue_type_script_lang-250f679e.js';
 import './components/OrCombinedInputV3/OrCombinedInput.js';

package/dist/esm/v2/{OrCode-b03b12f1.js → OrCode-12ab60ec.js}

@@ -6,9 +6,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
-import { EditorView, keymap } from '@codemirror/view';
+import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
@@ -110,6 +110,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
+    const addedExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -117,8 +118,8 @@ var script = defineComponent({
       ...useValidationAttributes()
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const proxyLanguage = computed(() => {
-      switch (props.language) {
+    const getLanguageExtension = async language => {
+      switch (language) {
         case CodeLanguage.HTML:
           return html();
         case CodeLanguage.CSS:
@@ -134,7 +135,7 @@ var script = defineComponent({
         case CodeLanguage.MD:
           return markdown();
       }
-    });
+    };
     // Methods
     function focus() {
       var _a;
@@ -145,14 +146,8 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // #region Codemirror
-    const editorView = new EditorView({
-      dispatch: transaction => {
-        editorView.update([transaction]);
-        proxyModelValue.value = String(editorView.state.doc);
-      }
-    });
     const theme = useTheme();
-    const extensions = computed(() => [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -187,19 +182,34 @@ var script = defineComponent({
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
       }
-    }), proxyLanguage.value, ...props.extensions]);
-    watch([proxyModelValue, extensions], _ref => {
-      let [modelValue = '', extensions] = _ref;
-      const {
-        selection
-      } = editorView.state;
-      editorView.setState(EditorState.create({
-        doc: modelValue,
-        extensions,
-        selection: selection.ranges.some(range => range.to > modelValue.length) ? {
-          anchor: modelValue.length
-        } : selection
-      }));
+    })];
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, addedExtensionCompartment.of([])]
+      // selection: selection.ranges.some((range) => range.to > modelValue.length)
+      //   ? { anchor: modelValue.length }
+      //   : selection,
+    });
+
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch([() => props.extensions, () => props.language], async _ref => {
+      let [extensions, language] = _ref;
+      const languageExt = await getLanguageExtension(language);
+      extensions.forEach(extension => {
+        Reflect.setPrototypeOf(extension, Reflect.getPrototypeOf(state));
+      });
+      const effect = addedExtensionCompartment.reconfigure([...extensions, languageExt]);
+      editorView.dispatch({
+        effects: [effect]
+      });
     }, {
       immediate: true
     });
@@ -236,7 +246,6 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur
     };

package/dist/esm/v2/components/index.js

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-b03b12f1.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-12ab60ec.js';
 export * from '@codemirror/state';
 export * from '@codemirror/view';
 export { _ as OrCollapse } from '../OrCollapse-9d22b072.js';

package/dist/esm/v2/components/or-code-v3/OrCode.vue.d.ts

@@ -28,7 +28,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
-    proxyLanguage: import("@vue/composition-api").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -143,7 +142,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
-    proxyLanguage: import("@vue/composition-api").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {

package/dist/esm/v2/components/or-code-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-b03b12f1.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-12ab60ec.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export * from '@codemirror/state';

package/dist/esm/v2/index.js

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-b03b12f1.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-12ab60ec.js';
 export * from '@codemirror/state';
 export * from '@codemirror/view';
 export { _ as OrCollapse } from './OrCollapse-9d22b072.js';

package/dist/esm/v3/{OrCode-8e70f55f.js → OrCode-18511f67.js}

@@ -6,9 +6,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
-import { EditorView, keymap } from '@codemirror/view';
+import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { EditorState } from '@codemirror/state';
+import { Compartment, EditorState } from '@codemirror/state';
 import { css } from '@codemirror/lang-css';
 import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
@@ -109,6 +109,7 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
+    const addedExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -116,8 +117,8 @@ var script = defineComponent({
       ...useValidationAttributes()
     });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const proxyLanguage = computed(() => {
-      switch (props.language) {
+    const getLanguageExtension = async language => {
+      switch (language) {
         case CodeLanguage.HTML:
           return html();
         case CodeLanguage.CSS:
@@ -133,7 +134,7 @@ var script = defineComponent({
         case CodeLanguage.MD:
           return markdown();
       }
-    });
+    };
     // Methods
     function focus() {
       var _a;
@@ -144,14 +145,8 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // #region Codemirror
-    const editorView = new EditorView({
-      dispatch: transaction => {
-        editorView.update([transaction]);
-        proxyModelValue.value = String(editorView.state.doc);
-      }
-    });
     const theme = useTheme();
-    const extensions = computed(() => [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -186,19 +181,34 @@ var script = defineComponent({
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
       }
-    }), proxyLanguage.value, ...props.extensions]);
-    watch([proxyModelValue, extensions], _ref => {
-      let [modelValue = '', extensions] = _ref;
-      const {
-        selection
-      } = editorView.state;
-      editorView.setState(EditorState.create({
-        doc: modelValue,
-        extensions,
-        selection: selection.ranges.some(range => range.to > modelValue.length) ? {
-          anchor: modelValue.length
-        } : selection
-      }));
+    })];
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, addedExtensionCompartment.of([])]
+      // selection: selection.ranges.some((range) => range.to > modelValue.length)
+      //   ? { anchor: modelValue.length }
+      //   : selection,
+    });
+
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch([() => props.extensions, () => props.language], async _ref => {
+      let [extensions, language] = _ref;
+      const languageExt = await getLanguageExtension(language);
+      extensions.forEach(extension => {
+        Reflect.setPrototypeOf(extension, Reflect.getPrototypeOf(state));
+      });
+      const effect = addedExtensionCompartment.reconfigure([...extensions, languageExt]);
+      editorView.dispatch({
+        effects: [effect]
+      });
     }, {
       immediate: true
     });
@@ -235,7 +245,6 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur
     };

package/dist/esm/v3/components/index.js

@@ -21,7 +21,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-8e70f55f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-18511f67.js';
 export * from '@codemirror/state';
 export * from '@codemirror/view';
 export { s as OrCollapse } from '../OrCollapse-d7c0afae.js';

package/dist/esm/v3/components/or-code-v3/OrCode.vue.d.ts

@@ -61,7 +61,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         id: string | undefined;
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | undefined>;
-    proxyLanguage: import("vue-demi").ComputedRef<import("@codemirror/language").LanguageSupport>;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{

package/dist/esm/v3/components/or-code-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-8e70f55f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-18511f67.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export * from '@codemirror/state';

package/dist/esm/v3/index.js

@@ -21,7 +21,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-8e70f55f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-18511f67.js';
 export * from '@codemirror/state';
 export * from '@codemirror/view';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.7.0-beta.3264.0",
+  "version": "5.7.0-beta.3276.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-code-v3/OrCode.vue

@@ -82,7 +82,7 @@ import { useControlAttributes, useIdAttribute, useProxyModelValue, useTheme, use
 import { basicSetup } from 'codemirror';
 import { EditorView, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { EditorState, Extension } from '@codemirror/state';
+import { EditorState, Extension, Compartment } from '@codemirror/state';
 
 /* Codemirror languages */
 import { css } from '@codemirror/lang-css';
@@ -199,6 +199,8 @@ export default defineComponent({
       ...CodeControl,
     ]);
 
+    const addedExtensionCompartment = new Compartment();
+
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -208,8 +210,8 @@ export default defineComponent({
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
-    const proxyLanguage = computed(() => {
-      switch (props.language) {
+    const getLanguageExtension = async (language: CodeLanguage) => {
+      switch (language) {
         case CodeLanguage.HTML:
           return html();
 
@@ -228,7 +230,7 @@ export default defineComponent({
         case CodeLanguage.MD:
           return markdown();
       }
-    });
+    };
 
     // Methods
     function focus(): void {
@@ -240,19 +242,8 @@ export default defineComponent({
     }
 
     // #region Codemirror
-    const editorView = new EditorView({
-      dispatch: (transaction) => {
-        editorView.update([
-          transaction,
-        ]);
-
-        proxyModelValue.value = String(editorView.state.doc);
-      },
-    });
-
     const theme = useTheme();
-
-    const extensions = computed<Extension[]>(() => [
+    const defaultExtensions = [
       basicSetup,
 
       keymap.of([
@@ -307,33 +298,47 @@ export default defineComponent({
           backgroundColor: theme.backgroundColor['primary-opacity-0-08'],
         },
       }),
+    ];
+
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [
+        ...defaultExtensions,
+        addedExtensionCompartment.of([]),
+      ],
+
+      // selection: selection.ranges.some((range) => range.to > modelValue.length)
+      //   ? { anchor: modelValue.length }
+      //   : selection,
+    });
 
-      proxyLanguage.value,
-      ...props.extensions,
-    ]);
+    const editorView = new EditorView({
+      state,
+      dispatch: (transaction) => {
+        editorView.update([
+          transaction,
+        ]);
 
-    watch([
-      proxyModelValue,
-      extensions,
-    ], ([
-      modelValue = '',
-      extensions,
-    ]) => {
-      const { selection } = editorView.state;
-
-      editorView.setState(
-        EditorState.create({
-          doc: modelValue,
-          extensions,
-
-          selection: selection.ranges.some((range) => range.to > modelValue.length)
-            ? { anchor: modelValue.length }
-            : selection,
-        }),
-      );
-    }, {
-      immediate: true,
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      },
     });
+
+    watch([() => props.extensions, () => props.language], async ([extensions, language]) => {
+      const languageExt = await getLanguageExtension(language as CodeLanguage);
+
+      extensions.forEach((extension) => {
+        Reflect.setPrototypeOf(extension, Reflect.getPrototypeOf(state));
+      });
+
+      const effect = addedExtensionCompartment.reconfigure([
+        ...extensions,
+        languageExt,
+      ]);
+
+      editorView!.dispatch({ effects: [effect] });
+    }, { immediate: true });
     // #endregion
 
     // Effects
@@ -366,7 +371,6 @@ export default defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur,
     };