@onereach/ui-components 6.4.2 → 6.5.0-beta.3403.0

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

@@ -1,5 +1,5 @@
-import { E as EditorView, a as EditorState, k as keymap } from '../../index-3cae2d25.js';
-import { b as basicSetup, i as indentWithTab } from '../../index-62bb1bac.js';
+import { E as EditorView, a as EditorState, k as keymap } from '../../index-d5c13979.js';
+import { b as basicSetup, i as indentWithTab } from '../../index-d4e4f8a8.js';
 import { u as useElementHover } from '../../index-a488b35e.js';
 import { defineComponent, ref } from 'vue-demi';
 import __vue_component__$3 from '../OrTeleport/OrTeleport.js';

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

@@ -1,5 +1,7 @@
 export { default as OrCode } from './OrCode.js';
 export { OrCodeLanguages } from './constants.js';
-export { b as basicSetup, a as lintGutter, l as linter } from '../../index-62bb1bac.js';
-export { j as javascript } from '../../index-60e4eacf.js';
-export { h as html, j as json, a as jsonParseLinter } from '../../index-eca317e0.js';
+export { b as basicSetup } from '../../index-d4e4f8a8.js';
+export { a as lintGutter, l as linter } from '../../index-5465a04e.js';
+export { javascript } from '../../index-5fa53f66.js';
+export { json, jsonParseLinter } from '../../index-5df3b1d8.js';
+export { html } from '../../index-bd08fe6f.js';

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

@@ -1,6 +1,8 @@
-import { c as css, h as html, j as json } from '../../index-eca317e0.js';
-import { j as javascript } from '../../index-60e4eacf.js';
-import { m as markdown } from '../../index-ceea3e83.js';
+import { html } from '../../index-bd08fe6f.js';
+import { css } from '../../index-317a90b7.js';
+import { json } from '../../index-5df3b1d8.js';
+import { javascript } from '../../index-5fa53f66.js';
+import { markdown } from '../../index-7caa3ac5.js';
 import { OrCodeLanguages } from './constants.js';
 
 const JS = javascript({

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

@@ -1,3 +1,5 @@
-export { b as basicSetup, a as lintGutter, l as linter } from '../../index-62bb1bac.js';
-export { j as javascript } from '../../index-60e4eacf.js';
-export { h as html, j as json, a as jsonParseLinter } from '../../index-eca317e0.js';
+export { b as basicSetup } from '../../index-d4e4f8a8.js';
+export { a as lintGutter, l as linter } from '../../index-5465a04e.js';
+export { javascript } from '../../index-5fa53f66.js';
+export { json, jsonParseLinter } from '../../index-5df3b1d8.js';
+export { html } from '../../index-bd08fe6f.js';

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

@@ -1,4 +1,4 @@
-import { E as EditorView, aq as HighlightStyle, ac as tags, X as syntaxHighlighting } from '../../index-3cae2d25.js';
+import { E as EditorView, am as HighlightStyle, a4 as tags, L as syntaxHighlighting } from '../../index-d5c13979.js';
 
 // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
 const chalky = 'var(--c-warning-darken-20)',

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

@@ -1,9 +1,6 @@
-import { b as basicSetup, i as indentWithTab } from '../../index-62bb1bac.js';
-import { j as json, c as css, h as html } from '../../index-eca317e0.js';
-import { j as javascript } from '../../index-60e4eacf.js';
-import { m as markdown } from '../../index-ceea3e83.js';
-import { E as EditorView, k as keymap, a as EditorState } from '../../index-3cae2d25.js';
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
+import { b as basicSetup, i as indentWithTab } from '../../index-d4e4f8a8.js';
+import { C as Compartment, k as keymap, a as EditorState, E as EditorView } from '../../index-d5c13979.js';
 import { CodeLanguage } from './props.js';
 import { CodeControlRoot, CodeControl, Code, CodeModal } from './styles.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
@@ -222,7 +219,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'focus', 'blur'],
+  expose: ['root', 'editorView', 'focus', 'blur'],
   setup(props, context) {
     // Refs
     const root = ref();
@@ -233,6 +230,8 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-code-v3', ...Code]);
     const controlStyles = computed(() => [...CodeControl]);
     const modalStyles = computed(() => [...CodeModal]);
+    const addedExtensionCompartment = new Compartment();
+    const languageExtensionCompartment = new Compartment();
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -240,24 +239,24 @@ 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();
+          return (await import('../../index-bd08fe6f.js')).html();
         case CodeLanguage.CSS:
-          return css();
+          return (await import('../../index-317a90b7.js')).css();
         case CodeLanguage.JS:
-          return javascript();
+          return (await import('../../index-5fa53f66.js')).javascript();
         case CodeLanguage.TS:
-          return javascript({
+          return (await import('../../index-5fa53f66.js')).javascript({
             typescript: true
           });
         case CodeLanguage.JSON:
-          return json();
+          return (await import('../../index-5df3b1d8.js')).json();
         case CodeLanguage.MD:
-          return markdown();
+          return (await import('../../index-7caa3ac5.js')).markdown();
       }
-    });
+    };
     // Methods
     function focus() {
       var _a;
@@ -272,14 +271,8 @@ var script = defineComponent({
       ((_a = modal.value) === null || _a === void 0 ? void 0 : _a.open)();
     }
     // #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);
       },
@@ -314,19 +307,48 @@ 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 state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [...defaultExtensions, languageExtensionCompartment.of([]), addedExtensionCompartment.of(props.extensions)]
+    });
+    const editorView = new EditorView({
+      state,
+      dispatch: transaction => {
+        editorView.update([transaction]);
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      }
+    });
+    watch(proxyModelValue, value => {
+      const modelValue = value !== null && value !== void 0 ? value : '';
       const {
         selection
       } = editorView.state;
-      editorView.setState(EditorState.create({
-        doc: modelValue,
-        extensions,
+      editorView.dispatch({
+        changes: {
+          from: 0,
+          to: editorView.state.doc.length,
+          insert: modelValue
+        },
         selection: selection.ranges.some(range => range.to > modelValue.length) ? {
           anchor: modelValue.length
         } : selection
-      }));
+      });
+    });
+    watch([() => props.extensions, () => props.language], async (_ref, _ref2) => {
+      let [extensions, language] = _ref;
+      let [, prevLanguage] = _ref2;
+      let effects = [];
+      if (language !== prevLanguage) {
+        const languageExt = await getLanguageExtension(language);
+        effects.push(languageExtensionCompartment.reconfigure([languageExt]));
+      }
+      effects.push(addedExtensionCompartment.reconfigure(extensions));
+      editorView.dispatch({
+        effects
+      });
     }, {
       immediate: true
     });
@@ -354,6 +376,7 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
+      editorView,
       root,
       control,
       fullscreenControl,
@@ -363,7 +386,6 @@ var script = defineComponent({
       modalStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur,
       openFullscreen

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

@@ -1,7 +1,9 @@
-import { Extension } from '@codemirror/state';
 import { PropType } from 'vue-demi';
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
 import { CodeLanguage } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -35,7 +37,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;
     openFullscreen: () => void;
@@ -135,6 +136,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
+    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -168,7 +170,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;
     openFullscreen: () => void;

package/dist/bundled/v2/components/OrCodeV3/index.d.ts

@@ -1,2 +1,3 @@
 export { default as OrCodeV3 } from './OrCode.vue';
 export * from './props';
+export * from './libs';

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

@@ -1,2 +1,7 @@
 export { default as OrCodeV3 } from './OrCode.js';
 export { CodeLanguage } from './props.js';
+export { a as lintGutter, l as linter } from '../../index-5465a04e.js';
+export { javascript } from '../../index-5fa53f66.js';
+export { json, jsonParseLinter } from '../../index-5df3b1d8.js';
+export { html } from '../../index-bd08fe6f.js';
+export { a as EditorState, E as EditorView } from '../../index-d5c13979.js';

package/dist/bundled/v2/components/OrCodeV3/libs.d.ts

@@ -0,0 +1,6 @@
+export { linter, lintGutter } from '@codemirror/lint';
+export { javascript } from '@codemirror/lang-javascript';
+export { json, jsonParseLinter } from '@codemirror/lang-json';
+export { html } from '@codemirror/lang-html';
+export { EditorView } from '@codemirror/view';
+export { EditorState } from '@codemirror/state';

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

@@ -0,0 +1,5 @@
+export { a as lintGutter, l as linter } from '../../index-5465a04e.js';
+export { javascript } from '../../index-5fa53f66.js';
+export { json, jsonParseLinter } from '../../index-5df3b1d8.js';
+export { html } from '../../index-bd08fe6f.js';
+export { a as EditorState, E as EditorView } from '../../index-d5c13979.js';

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

@@ -1,7 +1,7 @@
 import { N as Node } from '../../../../index-1b2cfcc1.js';
 import CodeMirrorView from './codemirrorView.js';
-import { m as minimalSetup } from '../../../../index-62bb1bac.js';
-import { j as javascript } from '../../../../index-60e4eacf.js';
+import { m as minimalSetup } from '../../../../index-d4e4f8a8.js';
+import { javascript } from '../../../../index-5fa53f66.js';
 
 var codemirrorNode = Node.create({
   name: 'codeBlock',

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

@@ -1,5 +1,5 @@
 import { n as exitCode, T as TextSelection, S as Selection } from '../../../../index-f671afe5.js';
-import { a as EditorState, E as EditorView, a0 as highlightActiveLine, K as highlightActiveLineGutter, J as lineNumbers, k as keymap } from '../../../../index-3cae2d25.js';
+import { a as EditorState, E as EditorView, W as highlightActiveLine, z as highlightActiveLineGutter, y as lineNumbers, k as keymap } from '../../../../index-d5c13979.js';
 import theme from './theme.js';
 
 const computeChange = (oldVal, newVal) => {

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

@@ -1,4 +1,4 @@
-import { E as EditorView, aq as HighlightStyle, ac as tags, X as syntaxHighlighting } from '../../../../index-3cae2d25.js';
+import { E as EditorView, am as HighlightStyle, a4 as tags, L as syntaxHighlighting } from '../../../../index-d5c13979.js';
 import { useTheme } from '../../../../hooks/useTheme.js';
 
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

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

@@ -25,11 +25,14 @@ export { default as OrChip } from './OrChip/OrChip.js';
 export { default as OrChips } from './OrChips/OrChips.js';
 export { default as OrCode } from './OrCode/OrCode.js';
 export { OrCodeLanguages } from './OrCode/constants.js';
-export { b as basicSetup, a as lintGutter, l as linter } from '../index-62bb1bac.js';
-export { j as javascript } from '../index-60e4eacf.js';
-export { h as html, j as json, a as jsonParseLinter } from '../index-eca317e0.js';
+export { b as basicSetup } from '../index-d4e4f8a8.js';
+export { a as lintGutter, l as linter } from '../index-5465a04e.js';
+export { javascript } from '../index-5fa53f66.js';
+export { json, jsonParseLinter } from '../index-5df3b1d8.js';
+export { html } from '../index-bd08fe6f.js';
 export { default as OrCodeV3 } from './OrCodeV3/OrCode.js';
 export { CodeLanguage } from './OrCodeV3/props.js';
+export { a as EditorState, E as EditorView } from '../index-d5c13979.js';
 export { default as OrCollapse } from './OrCollapse/OrCollapse.js';
 export { default as OrColorPicker } from './OrColorPicker/OrColorPicker.js';
 export { amber, black, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, white, yellow } from './OrColorPicker/constants.js';