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

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

@@ -57,19 +57,20 @@
 </template>
 
 <script lang="ts">
-import { indentWithTab } from '@codemirror/commands';
-import { css } from '@codemirror/lang-css';
-import { html } from '@codemirror/lang-html';
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import { markdown } from '@codemirror/lang-markdown';
-import { EditorState, Extension } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import { basicSetup } from 'codemirror';
 import { PropType, computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRef, watch } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useTheme, useValidationAttributes } from '../../hooks';
+
+/* Codemirror core */
+import { basicSetup } from 'codemirror';
+
+import { EditorView, keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { EditorState, Extension, Compartment } from '@codemirror/state';
+
+/* Components */
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
+
 import { CodeLanguage } from './props';
 import { Code, CodeControl, CodeModal } from './styles';
 import OrCodeControl from './partials/OrCodeControl.vue';
@@ -150,6 +151,7 @@ export default defineComponent({
 
   expose: [
     'root',
+    'editorView',
 
     'focus',
     'blur',
@@ -177,6 +179,9 @@ export default defineComponent({
       ...CodeModal,
     ]);
 
+    const addedExtensionCompartment = new Compartment();
+    const languageExtensionCompartment = new Compartment();
+
     // State
     const controlAttributes = reactive({
       id: useIdAttribute(),
@@ -186,27 +191,27 @@ 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();
+          return (await import('@codemirror/lang-html')).html();
 
         case CodeLanguage.CSS:
-          return css();
+          return (await import('@codemirror/lang-css')).css();
 
         case CodeLanguage.JS:
-          return javascript();
+          return (await import('@codemirror/lang-javascript')).javascript();
 
         case CodeLanguage.TS:
-          return javascript({ typescript: true });
+          return (await import('@codemirror/lang-javascript')).javascript({ typescript: true });
 
         case CodeLanguage.JSON:
-          return json();
+          return (await import('@codemirror/lang-json')).json();
 
         case CodeLanguage.MD:
-          return markdown();
+          return (await import('@codemirror/lang-markdown')).markdown();
       }
-    });
+    };
 
     // Methods
     function focus(): void {
@@ -222,19 +227,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([
@@ -289,30 +283,56 @@ export default defineComponent({
           backgroundColor: theme.backgroundColor['primary-opacity-0-08'],
         },
       }),
+    ];
+
+    const state = EditorState.create({
+      doc: proxyModelValue.value,
+      extensions: [
+        ...defaultExtensions,
+        languageExtensionCompartment.of([]),
+        addedExtensionCompartment.of(props.extensions),
+      ],
+    });
 
-      proxyLanguage.value,
-      ...props.extensions,
-    ]);
+    const editorView = new EditorView({
+      state,
+      dispatch: (transaction) => {
+        editorView.update([
+          transaction,
+        ]);
 
-    watch([
-      proxyModelValue,
-      extensions,
-    ], ([
-      modelValue = '',
-      extensions,
-    ]) => {
+        if (transaction.docChanged) {
+          proxyModelValue.value = String(editorView.state.doc);
+        }
+      },
+    });
+
+    watch(proxyModelValue, (value) => {
+      const modelValue = 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 ([extensions, language], [, prevLanguage]) => {
+      let effects = [];
+
+      if (language !== prevLanguage) {
+        const languageExt = await getLanguageExtension(language as CodeLanguage);
+
+        effects.push(languageExtensionCompartment.reconfigure([languageExt]));
+      }
+
+      effects.push(addedExtensionCompartment.reconfigure(extensions));
 
-          selection: selection.ranges.some((range) => range.to > modelValue.length)
-            ? { anchor: modelValue.length }
-            : selection,
-        }),
-      );
+      editorView!.dispatch({ effects });
     }, { immediate: true });
     // #endregion
 
@@ -337,6 +357,7 @@ export default defineComponent({
     });
 
     return {
+      editorView,
       root,
       control,
       fullscreenControl,
@@ -346,7 +367,6 @@ export default defineComponent({
       modalStyles,
       controlAttributes,
       proxyModelValue,
-      proxyLanguage,
       focus,
       blur,
       openFullscreen,

package/src/components/or-code-v3/index.ts

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

package/src/components/or-code-v3/libs.ts

@@ -0,0 +1,10 @@
+// used in the bundled expression-components
+
+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';
+