From 5fdea06fbfc49a8ae8f20054db6b27fcf4ade75f Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 04 七月 2024 00:34:19 +0800
Subject: [PATCH] 一些更新
---
src/components/CodeEditor/src/codemirror/CodeMirror.vue | 35 +++++++++++++++++++++++++----------
1 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index af3017f..96ec138 100644
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -1,5 +1,9 @@
<template>
- <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
+ <div
+ class="relative !h-full w-full overflow-hidden"
+ :class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
+ ref="el"
+ ></div>
</template>
<script lang="ts" setup>
@@ -16,17 +20,24 @@
import type { Nullable } from '@vben/types';
import { useWindowSizeFn } from '@vben/hooks';
import { useDebounceFn } from '@vueuse/core';
- import { useAppStore } from '/@/store/modules/app';
+ 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: {
@@ -39,6 +50,8 @@
},
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']);
@@ -61,7 +74,8 @@
{ flush: 'post' },
);
- watchEffect(() => {
+ watchEffect(async () => {
+ await parserDynamicImport(props.mode)();
editor?.setOption('mode', props.mode);
});
@@ -91,7 +105,7 @@
autoCloseBrackets: true,
autoCloseTags: true,
foldGutter: true,
- gutters: ['CodeMirror-linenumbers'],
+ gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
};
editor = CodeMirror(el.value!, {
@@ -103,6 +117,7 @@
lineWrapping: true,
lineNumbers: true,
...addonOptions,
+ ...props.config,
});
editor?.setValue(props.value);
setTheme();
--
Gitblit v1.9.3