feat(codeEditor): add type and config && add use case (#3829)

* chore(codeEditor): add type and config && add use case * type(codeEditor): perf the config * fix annotate * fix annotate
vbenjs · May 10, 2024 · 0ee7211 · 0ee7211
1 parent b66a0de
commit 0ee7211
Show file tree

Hide file tree

Showing 9 changed files with 373 additions and 544 deletions.
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
@@ -6,6 +6,7 @@
       :mode="mode"
       :readonly="readonly"
       :bordered="bordered"
+      :config="config"
     />
   </div>
 </template>
@@ -14,7 +15,7 @@
   import CodeMirrorEditor from './codemirror/CodeMirror.vue';
   import { isString } from '@/utils/is';
   import { MODE } from './typing';
-
+  import type { EditorConfiguration } from 'codemirror';
   const props = defineProps({
     value: { type: [Object, String] as PropType<Record<string, any> | string> },
     mode: {
@@ -28,6 +29,7 @@
     readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
     bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: {} },
   });
 
   const emit = defineEmits(['change', 'update:value', 'format-error']);

diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -22,15 +22,22 @@
   import { useDebounceFn } from '@vueuse/core';
   import { useAppStore } from '@/store/modules/app';
   import CodeMirror from 'codemirror';
-  import { MODE } from './../typing';
+  import type { EditorConfiguration } from 'codemirror';
+  import { MODE, parserDynamicImport } from './../typing';
   // css
-  import './codemirror.css';
+  import 'codemirror/lib/codemirror.css';
   import 'codemirror/theme/idea.css';
   import 'codemirror/theme/material-palenight.css';
-  // modes
-  import 'codemirror/mode/javascript/javascript';
-  import 'codemirror/mode/css/css';
-  import 'codemirror/mode/htmlmixed/htmlmixed';
+
+  // 代码段折叠功能
+  import 'codemirror/addon/fold/foldgutter.css';
+  import 'codemirror/addon/fold/foldcode.js';
+  import 'codemirror/addon/fold/foldgutter';
+  import 'codemirror/addon/fold/brace-fold';
+  import 'codemirror/addon/fold/comment-fold';
+  import 'codemirror/addon/fold/markdown-fold';
+  import 'codemirror/addon/fold/xml-fold';
+  import 'codemirror/addon/fold/indent-fold';
 
   const props = defineProps({
     mode: {
@@ -44,6 +51,7 @@
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
     bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: {} },
   });
 
   const emit = defineEmits(['change']);
@@ -66,7 +74,8 @@
     { flush: 'post' },
   );
 
-  watchEffect(() => {
+  watchEffect(async () => {
+    await parserDynamicImport(props.mode)();
     editor?.setOption('mode', props.mode);
   });
 
@@ -96,7 +105,7 @@
       autoCloseBrackets: true,
       autoCloseTags: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers'],
+      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     };
 
     editor = CodeMirror(el.value!, {
@@ -108,6 +117,7 @@
       lineWrapping: true,
       lineNumbers: true,
       ...addonOptions,
+      ...props.config,
     });
     editor?.setValue(props.value);
     setTheme();