@onereach/ui-components 8.25.0 → 8.25.1

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-f1a845c3.js';
-import { C as Compartment, k as keymap, a as EditorState, E as EditorView } from '../../index-10711eb4.js';
+import { C as Compartment, k as keymap, E as EditorView, a as EditorState } from '../../index-10711eb4.js';
 import { CodeControlRoot, CodeControl, Code, CodeModal } from './styles.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrHintV3/OrHint.js';
@@ -232,6 +232,8 @@ var script = defineComponent({
     const modalStyles = computed(() => [...CodeModal]);
     const addedExtensionCompartment = new Compartment();
     const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -272,7 +274,7 @@ var script = defineComponent({
     }
     // #region Codemirror
     const theme = useTheme();
-    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorView.domEventHandlers({
       input: event => {
         context.emit('input', event);
       },
@@ -315,7 +317,7 @@ var script = defineComponent({
     })];
     const state = EditorState.create({
       doc: proxyModelValue.value,
-      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions)]
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions), readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]), disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)])]
     });
     const editorView = new EditorView({
       state,
@@ -344,10 +346,16 @@ var script = defineComponent({
         } : selection
       });
     });
-    watch([() => props.extensions, () => props.language], async (_ref, _ref2) => {
-      let [extensions, language] = _ref;
-      let [, prevLanguage] = _ref2;
+    watch([() => props.extensions, () => props.language, () => props.readonly, () => props.disabled], async (_ref, _ref2) => {
+      let [extensions, language, readonly, disabled] = _ref;
+      let [, prevLanguage, pevReadonly, pevDisabled] = _ref2;
       let effects = [];
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
       if (language !== prevLanguage) {
         const languageExt = await getLanguageExtension(language);
         effects.push(languageExtensionCompartment.reconfigure([languageExt]));

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

@@ -1 +1 @@
-export { q as default } from '../OrCode-7a263a23.js';
+export { q as default } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { O as OrCodeLanguages } from '../OrCode-7a263a23.js';
+export { O as OrCodeLanguages } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7a263a23.js';
+export { q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { r as CSS, u as HTML, J as JS, v as JSON, M as MD, T as TS, w as default } from '../OrCode-7a263a23.js';
+export { r as CSS, u as HTML, J as JS, v as JSON, M as MD, T as TS, w as default } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7a263a23.js';
+export { b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { x as color, A as default, z as orCodeHighlightStyle, y as orCodeTheme } from '../OrCode-7a263a23.js';
+export { x as color, A as default, z as orCodeHighlightStyle, y as orCodeTheme } from '../OrCode-7fce40fd.js';

package/dist/bundled/v3/components/{OrCode-7a263a23.js → OrCode-7fce40fd.js}

@@ -31606,4 +31606,4 @@ script.render = render;
 script.__scopeId = "data-v-3d4b8218";
 script.__file = "src/components/or-code/OrCode.vue";
 
-export { theme as A, index$4 as B, Compartment as C, index$3 as D, EditorState as E, index$2 as F, index$1 as G, HighlightStyle as H, index as I, JS as J, MD as M, OrCodeLanguages as O, TS as T, EditorView as a, basicSetup as b, lintGutter as c, json as d, jsonParseLinter as e, keyName as f, base as g, html as h, indentWithTab as i, javascript as j, keymap as k, linter as l, highlightActiveLine as m, highlightActiveLineGutter as n, lineNumbers as o, minimalSetup as p, script as q, CSS as r, syntaxHighlighting as s, tags$1 as t, HTML as u, JSON$1 as v, languages as w, color as x, orCodeTheme as y, orCodeHighlightStyle as z };
+export { theme as A, index$4 as B, Compartment as C, index$3 as D, EditorView as E, index$2 as F, index$1 as G, HighlightStyle as H, index as I, JS as J, MD as M, OrCodeLanguages as O, TS as T, EditorState as a, basicSetup as b, lintGutter as c, json as d, jsonParseLinter as e, keyName as f, base as g, html as h, indentWithTab as i, javascript as j, keymap as k, linter as l, highlightActiveLine as m, highlightActiveLineGutter as n, lineNumbers as o, minimalSetup as p, script as q, CSS as r, syntaxHighlighting as s, tags$1 as t, HTML as u, JSON$1 as v, languages as w, color as x, orCodeTheme as y, orCodeHighlightStyle as z };

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

@@ -1 +1 @@
-export { s as default } from '../OrCodeV3-6dedc19c.js';
+export { s as default } from '../OrCodeV3-d326eaeb.js';

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

@@ -1,2 +1,2 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCodeV3-6dedc19c.js';
-export { E as EditorState, a as EditorView, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7a263a23.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCodeV3-d326eaeb.js';
+export { a as EditorState, E as EditorView, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { E as EditorState, a as EditorView, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7a263a23.js';
+export { a as EditorState, E as EditorView, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-7fce40fd.js';

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

@@ -1 +1 @@
-export { C as CodeLanguage } from '../OrCodeV3-6dedc19c.js';
+export { C as CodeLanguage } from '../OrCodeV3-d326eaeb.js';

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

@@ -1 +1 @@
-export { a as Code, c as CodeControl, b as CodeControlRoot, d as CodeModal } from '../OrCodeV3-6dedc19c.js';
+export { a as Code, c as CodeControl, b as CodeControlRoot, d as CodeModal } from '../OrCodeV3-d326eaeb.js';

package/dist/bundled/v3/components/{OrCodeV3-6dedc19c.js → OrCodeV3-d326eaeb.js}

@@ -1,5 +1,5 @@
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createBlock, createCommentVNode, vShow, withModifiers, createSlots } from 'vue';
-import { C as Compartment, b as basicSetup, k as keymap, i as indentWithTab, E as EditorState, a as EditorView } from './OrCode-7a263a23.js';
+import { C as Compartment, b as basicSetup, k as keymap, i as indentWithTab, E as EditorView, a as EditorState } from './OrCode-7fce40fd.js';
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
 import { s as script$2 } from './OrErrorV3-19502b8d.js';
 import { s as script$3 } from './OrHintV3-25a3be82.js';
@@ -238,6 +238,8 @@ var script = defineComponent({
     const modalStyles = computed(() => [...CodeModal]);
     const addedExtensionCompartment = new Compartment();
     const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -248,19 +250,19 @@ var script = defineComponent({
     const getLanguageExtension = async language => {
       switch (language) {
         case CodeLanguage.HTML:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.G; })).html();
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.G; })).html();
         case CodeLanguage.CSS:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.F; })).css();
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.F; })).css();
         case CodeLanguage.JS:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.B; })).javascript();
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.B; })).javascript();
         case CodeLanguage.TS:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.B; })).javascript({
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.B; })).javascript({
             typescript: true
           });
         case CodeLanguage.JSON:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.D; })).json();
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.D; })).json();
         case CodeLanguage.MD:
-          return (await import('./OrCode-7a263a23.js').then(function (n) { return n.I; })).markdown();
+          return (await import('./OrCode-7fce40fd.js').then(function (n) { return n.I; })).markdown();
       }
     };
     // Methods
@@ -278,7 +280,7 @@ var script = defineComponent({
     }
     // #region Codemirror
     const theme = useTheme();
-    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorView.domEventHandlers({
       input: event => {
         context.emit('input', event);
       },
@@ -321,7 +323,7 @@ var script = defineComponent({
     })];
     const state = EditorState.create({
       doc: proxyModelValue.value,
-      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions)]
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions), readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]), disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)])]
     });
     const editorView = new EditorView({
       state,
@@ -350,10 +352,16 @@ var script = defineComponent({
         } : selection
       });
     });
-    watch([() => props.extensions, () => props.language], async (_ref, _ref2) => {
-      let [extensions, language] = _ref;
-      let [, prevLanguage] = _ref2;
+    watch([() => props.extensions, () => props.language, () => props.readonly, () => props.disabled], async (_ref, _ref2) => {
+      let [extensions, language, readonly, disabled] = _ref;
+      let [, prevLanguage, pevReadonly, pevDisabled] = _ref2;
       let effects = [];
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
       if (language !== prevLanguage) {
         const languageExt = await getLanguageExtension(language);
         effects.push(languageExtensionCompartment.reconfigure([languageExt]));

package/dist/bundled/v3/components/OrRichTextEditorV3/OrRichTextEditor.js

@@ -1 +1 @@
-export { s as default } from '../OrRichTextEditorV3-a23ed54e.js';
+export { s as default } from '../OrRichTextEditorV3-6bd823ab.js';

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

@@ -1 +1 @@
-export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditorV3-a23ed54e.js';
+export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/props.js

@@ -1 +1 @@
-export { F as Formats } from '../OrRichTextEditorV3-a23ed54e.js';
+export { F as Formats } from '../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/styles.js

@@ -1 +1 @@
-export { E as EditorContainer, f as EditorInput, b as Toolbar, c as ToolbarButton, e as ToolbarButtonFocused, T as ToolbarContainer } from '../OrRichTextEditorV3-a23ed54e.js';
+export { E as EditorContainer, f as EditorInput, b as Toolbar, c as ToolbarButton, e as ToolbarButtonFocused, T as ToolbarContainer } from '../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/codemirrorNode.js

@@ -1,2 +1,2 @@
-export { i as default } from '../../../OrRichTextEditorV3-a23ed54e.js';
-import '../../../OrCode-7a263a23.js';
+export { i as default } from '../../../OrRichTextEditorV3-6bd823ab.js';
+import '../../../OrCode-7fce40fd.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/codemirrorView.js

@@ -1,2 +1,2 @@
-export { C as default } from '../../../OrRichTextEditorV3-a23ed54e.js';
-import '../../../OrCode-7a263a23.js';
+export { C as default } from '../../../OrRichTextEditorV3-6bd823ab.js';
+import '../../../OrCode-7fce40fd.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/index.js

@@ -1 +1 @@
-export { C as CodeMirrorView } from '../../../OrRichTextEditorV3-a23ed54e.js';
+export { C as CodeMirrorView } from '../../../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/codemirror/theme.js

@@ -1,3 +1,3 @@
-import '../../../OrCode-7a263a23.js';
+import '../../../OrCode-7fce40fd.js';
 import '../../../../hooks/useTheme.js';
-export { g as color, t as default, h as orCodeHighlightStyle, o as orCodeTheme } from '../../../OrRichTextEditorV3-a23ed54e.js';
+export { g as color, t as default, h as orCodeHighlightStyle, o as orCodeTheme } from '../../../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/OrRichTextEditorV3/utils/markdown.js

@@ -1 +1 @@
-export { d as deserialize, a as serialize } from '../../OrRichTextEditorV3-a23ed54e.js';
+export { d as deserialize, a as serialize } from '../../OrRichTextEditorV3-6bd823ab.js';

package/dist/bundled/v3/components/{OrRichTextEditorV3-a23ed54e.js → OrRichTextEditorV3-6bd823ab.js}

@@ -4,7 +4,7 @@ import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, next
 import { u as useFocusTrap } from './OrModal-5d3ac552.js';
 import { k as useResizeObserver, l as useDebounceFn, o as onClickOutside } from './OrBottomSheetV3-d2f7ec3a.js';
 import { j as commonjsGlobal, k as getDefaultExportFromCjs } from './OrDateTimePicker-d181c892.js';
-import { f as keyName, g as base, a as EditorView$1, H as HighlightStyle, t as tags, s as syntaxHighlighting, E as EditorState$1, m as highlightActiveLine, n as highlightActiveLineGutter, o as lineNumbers, k as keymap$1, p as minimalSetup, j as javascript } from './OrCode-7a263a23.js';
+import { f as keyName, g as base, E as EditorView$1, H as HighlightStyle, t as tags, s as syntaxHighlighting, a as EditorState$1, m as highlightActiveLine, n as highlightActiveLineGutter, o as lineNumbers, k as keymap$1, p as minimalSetup, j as javascript } from './OrCode-7fce40fd.js';
 import { s as script$1 } from './OrIconButtonV3-adb4e498.js';
 import { s as script$2 } from './OrLabelV3-44afce27.js';
 import { s as script$3 } from './OrMenuItemV3-7b557536.js';

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

@@ -15,8 +15,8 @@ export { default as OrCheckboxGroupV3 } from './OrCheckboxGroupV3/OrCheckboxGrou
 export { s as OrCheckboxTreeV3 } from './OrCheckboxTreeV3-37cb07f2.js';
 export { s as OrCheckboxV3 } from './OrCheckboxV3-fcc61e73.js';
 export { s as OrChip, a as OrChips } from './OrChips-9386b9d6.js';
-export { E as EditorState, a as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './OrCode-7a263a23.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCodeV3-6dedc19c.js';
+export { a as EditorState, E as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './OrCode-7fce40fd.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCodeV3-d326eaeb.js';
 export { default as OrCollapse } from './OrCollapse/OrCollapse.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-8621644d.js';
 export { s as OrCombinedInputV3 } from './OrCombinedInputV3-d79de639.js';
@@ -81,7 +81,7 @@ export { s as OrRangeSliderV3 } from './OrRangeSliderV3-abd9022e.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSliderV3-e1218b6f.js';
 export { s as OrRatingV3 } from './OrRatingV3-b6b47938.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanelV3-23102224.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-a23ed54e.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-6bd823ab.js';
 export { default as OrSearch } from './OrSearch/OrSearch.js';
 export { OrSearchV3 } from './OrSearchV3/index.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControlV3-d7578374.js';

package/dist/bundled/v3/index.js

@@ -8,8 +8,8 @@ export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes
 export { C as CardPadding, s as OrCardV3 } from './components/OrCardV3-a3bb7835.js';
 export { default as OrCheckboxGroupV3 } from './components/OrCheckboxGroupV3/OrCheckboxGroup.js';
 export { s as OrChip, a as OrChips } from './components/OrChips-9386b9d6.js';
-export { E as EditorState, a as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './components/OrCode-7a263a23.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-6dedc19c.js';
+export { a as EditorState, E as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './components/OrCode-7fce40fd.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-d326eaeb.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './components/OrColorPicker-8621644d.js';
 export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-d79de639.js';
 export { s as OrConfirm } from './components/OrConfirm-bbeb5e3c.js';
@@ -43,7 +43,7 @@ export { default as OrRadioGroup } from './components/OrRadioGroup/OrRadioGroup.
 export { default as OrRadioGroupV3 } from './components/OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRangeSliderV3 } from './components/OrRangeSliderV3-abd9022e.js';
 export { s as OrRatingV3 } from './components/OrRatingV3-b6b47938.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-a23ed54e.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-6bd823ab.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './components/OrSegmentedControlV3-d7578374.js';
 export { s as OrSelect } from './components/OrSelect-c0c14dd8.js';
 export { s as OrSelectV3 } from './components/OrSelectV3-e705e2cc.js';

package/dist/esm/v2/{OrCode-d3ad0dbd.js → OrCode-29371ad7.js}

@@ -271,6 +271,8 @@ var script = defineComponent({
     const modalStyles = computed(() => [...CodeModal]);
     const addedExtensionCompartment = new Compartment();
     const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -311,7 +313,7 @@ var script = defineComponent({
     }
     // #region Codemirror
     const theme = useTheme();
-    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorView.domEventHandlers({
       input: event => {
         context.emit('input', event);
       },
@@ -354,7 +356,7 @@ var script = defineComponent({
     })];
     const state = EditorState.create({
       doc: proxyModelValue.value,
-      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions)]
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions), readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]), disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)])]
     });
     const editorView = new EditorView({
       state,
@@ -383,10 +385,16 @@ var script = defineComponent({
         } : selection
       });
     });
-    watch([() => props.extensions, () => props.language], async (_ref, _ref2) => {
-      let [extensions, language] = _ref;
-      let [, prevLanguage] = _ref2;
+    watch([() => props.extensions, () => props.language, () => props.readonly, () => props.disabled], async (_ref, _ref2) => {
+      let [extensions, language, readonly, disabled] = _ref;
+      let [, prevLanguage, pevReadonly, pevDisabled] = _ref2;
       let effects = [];
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
       if (language !== prevLanguage) {
         const languageExt = await getLanguageExtension(language);
         effects.push(languageExtensionCompartment.reconfigure([languageExt]));

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

@@ -24,7 +24,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-d3ad0dbd.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-29371ad7.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from '../OrCollapse-9d22b072.js';

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

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-d3ad0dbd.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-29371ad7.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

package/dist/esm/v2/index.js

@@ -24,7 +24,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-d3ad0dbd.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-29371ad7.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from './OrCollapse-9d22b072.js';

package/dist/esm/v3/{OrCode-914dba5f.js → OrCode-905f9fca.js}

@@ -243,6 +243,8 @@ var script = defineComponent({
     const modalStyles = computed(() => [...CodeModal]);
     const addedExtensionCompartment = new Compartment();
     const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -283,7 +285,7 @@ var script = defineComponent({
     }
     // #region Codemirror
     const theme = useTheme();
-    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+    const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorView.domEventHandlers({
       input: event => {
         context.emit('input', event);
       },
@@ -326,7 +328,7 @@ var script = defineComponent({
     })];
     const state = EditorState.create({
       doc: proxyModelValue.value,
-      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions)]
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions), readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]), disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)])]
     });
     const editorView = new EditorView({
       state,
@@ -355,10 +357,16 @@ var script = defineComponent({
         } : selection
       });
     });
-    watch([() => props.extensions, () => props.language], async (_ref, _ref2) => {
-      let [extensions, language] = _ref;
-      let [, prevLanguage] = _ref2;
+    watch([() => props.extensions, () => props.language, () => props.readonly, () => props.disabled], async (_ref, _ref2) => {
+      let [extensions, language, readonly, disabled] = _ref;
+      let [, prevLanguage, pevReadonly, pevDisabled] = _ref2;
       let effects = [];
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
       if (language !== prevLanguage) {
         const languageExt = await getLanguageExtension(language);
         effects.push(languageExtensionCompartment.reconfigure([languageExt]));

package/dist/esm/v3/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, s as OrCodeV3 } from '../OrCode-914dba5f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-905f9fca.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from '../OrCollapse-d7c0afae.js';

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

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-914dba5f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-905f9fca.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

package/dist/esm/v3/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, s as OrCodeV3 } from './OrCode-914dba5f.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-905f9fca.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.25.0",
+  "version": "8.25.1",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -178,5 +178,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "ef8bdf3c1a87f67642f03caf29b43d7c04483113"
+  "gitHead": "c27639b6a2446b221cdb2349845879fa776ce57c"
 }

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

@@ -187,6 +187,8 @@ export default defineComponent({
 
     const addedExtensionCompartment = new Compartment();
     const languageExtensionCompartment = new Compartment();
+    const readonlyExtensionCompartment = new Compartment();
+    const disabledExtensionCompartment = new Compartment();
 
     // State
     const controlAttributes = reactive({
@@ -241,9 +243,6 @@ export default defineComponent({
         indentWithTab,
       ]),
 
-      EditorState.readOnly.of(props.readonly),
-      EditorView.editable.of(!props.disabled),
-
       EditorView.domEventHandlers({
         input: (event) => {
           context.emit('input', event);
@@ -306,6 +305,8 @@ export default defineComponent({
         ...defaultExtensions,
         languageExtensionCompartment.of([]),
         addedExtensionCompartment.of(props.extensions),
+        readonlyExtensionCompartment.of([EditorState.readOnly.of(props.readonly)]),
+        disabledExtensionCompartment.of([EditorView.editable.of(!props.disabled)]),
       ],
     });
 
@@ -341,9 +342,22 @@ export default defineComponent({
       });
     });
 
-    watch([() => props.extensions, () => props.language], async ([extensions, language], [, prevLanguage]) => {
+    watch([
+      () => props.extensions,
+      () => props.language,
+      () => props.readonly,
+      () => props.disabled,
+    ], async ([extensions, language, readonly, disabled], [, prevLanguage, pevReadonly, pevDisabled]) => {
       let effects = [];
 
+      if (readonly !== pevReadonly) {
+        effects.push(readonlyExtensionCompartment.reconfigure(EditorState.readOnly.of(readonly)));
+      }
+
+      if (disabled !== pevDisabled) {
+        effects.push(disabledExtensionCompartment.reconfigure(EditorView.editable.of(!disabled)));
+      }
+
       if (language !== prevLanguage) {
         const languageExt = await getLanguageExtension(language as CodeLanguage);