yh-codemirror 1.0.3 → 1.0.5

package/CodeMirror.vue

@@ -39,19 +39,19 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, toRaw } from "vue";
+import {ref, onMounted, toRaw} from 'vue';
 // @ts-ignore
-import type { Extension } from "codemirror";
-import { EditorView, basicSetup } from "codemirror";
-import { ViewUpdate } from "@codemirror/view";
-import { EditorState, EditorSelection } from "@codemirror/state";
-import { javascriptLanguage } from "@codemirror/lang-javascript";
-import { solarizedDark } from "cm6-theme-solarized-dark";
-import { getCodeLanguagePlugin } from "./util";
-import { watch, computed } from "vue";
+import type {Extension} from 'codemirror';
+import {EditorView, basicSetup} from 'codemirror';
+import {ViewUpdate} from '@codemirror/view';
+import {EditorState, EditorSelection} from '@codemirror/state';
+import {javascriptLanguage} from '@codemirror/lang-javascript';
+import {solarizedDark} from 'cm6-theme-solarized-dark';
+import {getCodeLanguagePlugin} from './util';
+import {watch, computed} from 'vue';
 // @ts-ignore
-import { js_beautify } from "js-beautify";
-import { ElMessage } from "element-plus";
+import {js_beautify} from 'js-beautify';
+import {ElMessage} from 'element-plus';
 
 const YhCodemirrorContainer = ref();
 function fullscreen() {
@@ -79,8 +79,8 @@ const props = withDefaults(
     height?: number;
   }>(),
   {
-    modelValue: "",
-    language: "javascript",
+    modelValue: '',
+    language: 'javascript',
     autocomplete: {},
   }
 );
@@ -89,8 +89,8 @@ const codeMirrorStyle = computed(() => {
   let style: any = {};
   if (props.height !== undefined && !isNaN(props.height)) {
     style.height = `${props.height}px`;
-    style.display = "flex";
-    style.flexDirection = "column";
+    style.display = 'flex';
+    style.flexDirection = 'column';
   }
   return style;
 });
@@ -99,7 +99,7 @@ const codeMirrorEditorStyle = computed(() => {
   let style: any = {};
   if (props.height !== undefined && !isNaN(props.height)) {
     style.flex = `1`;
-    style.overflow = "auto";
+    style.overflow = 'auto';
   }
   return style;
 });
@@ -107,7 +107,7 @@ const codeMirrorEditorStyle = computed(() => {
 watch(
   () => props.modelValue,
   (val) => {
-    if (view && state && val != view.state.doc.toString()) {
+    if (view && state && typeof val === 'string' && val != view.state.doc.toString()) {
       let end = view.state.doc.toString().length;
       view.dispatch({
         changes: [
@@ -119,17 +119,21 @@ watch(
         ],
       });
     }
+  },
+  {
+    deep: true,
+    immediate: true,
   }
 );
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue']);
 
 // 代码编辑器操作按钮
 const onEditorBtnClick = (type) => {
   if (view) {
     const state = toRaw(view.state);
     const pos = state.doc.toString().length;
-    if (type == "beautify") {
+    if (type == 'beautify') {
       const beautifyCode = js_beautify(props.modelValue, codeBeautifyConfig);
       view.dispatch({
         changes: [
@@ -140,15 +144,15 @@ const onEditorBtnClick = (type) => {
           },
         ],
       });
-    } else if (type == "checkAll") {
+    } else if (type == 'checkAll') {
       const tr = state.update({
         // selection: EditorSelection.cursor(pos), // 设置光标
         selection: EditorSelection.range(0, pos),
         scrollIntoView: true,
       });
       view.dispatch(tr);
-    } else if (type == "copy") {
-      let selectedText = "";
+    } else if (type == 'copy') {
+      let selectedText = '';
       if (state.selection.ranges.some((range) => !range.empty)) {
         const selection = state.selection.ranges[0];
         selectedText = state.sliceDoc(selection.from, selection.to);
@@ -157,16 +161,16 @@ const onEditorBtnClick = (type) => {
       }
       navigator.clipboard.writeText(selectedText);
       ElMessage({
-        message: "复制成功！",
-        type: "success",
+        message: '复制成功！',
+        type: 'success',
       });
-    } else if (type == "clear") {
+    } else if (type == 'clear') {
       view.dispatch({
         changes: [
           {
             from: 0,
             to: pos,
-            insert: "",
+            insert: '',
           },
         ],
       });
@@ -182,7 +186,7 @@ onMounted(() => {
     EditorView.lineWrapping,
     EditorView.updateListener.of((v: ViewUpdate) => {
       if (v.docChanged) {
-        emits("update:modelValue", v.state.doc.toString());
+        emits('update:modelValue', v.state.doc.toString());
       }
     }),
   ];
@@ -191,7 +195,7 @@ onMounted(() => {
     if (Array.isArray(language)) {
       language.forEach((l) => {
         extensions.push(getCodeLanguagePlugin(l));
-        if (props.autocomplete[l] && l === "javascript") {
+        if (props.autocomplete[l] && l === 'javascript') {
           extensions.push(
             javascriptLanguage.data.of({
               autocomplete: props.autocomplete[l],
@@ -201,7 +205,7 @@ onMounted(() => {
       });
     } else {
       extensions.push(getCodeLanguagePlugin(language));
-      if (props.autocomplete[language] && language === "javascript") {
+      if (props.autocomplete[language] && language === 'javascript') {
         extensions.push(
           javascriptLanguage.data.of({
             autocomplete: props.autocomplete[language],
@@ -210,11 +214,16 @@ onMounted(() => {
       }
     }
   }
-
-  state = EditorState.create({
-    doc: props.modelValue,
-    extensions,
-  });
+  if (!state) {
+    let doc = props.modelValue;
+    if (typeof doc !== 'string') {
+      doc = '';
+    }
+    state = EditorState.create({
+      doc,
+      extensions,
+    });
+  }
   if (state) {
     view = new EditorView({
       state: state,
@@ -227,20 +236,21 @@ onMounted(() => {
 .yh-code-mirror-container {
   width: 100%;
   position: relative;
+  background-color: #173541;
+  min-height: 70px;
   .code-slot {
     width: 100%;
-    font-family: "Fira Code", "Roboto Mono", Consolas, "Microsoft Yahei";
+    font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
     line-height: 25px;
     font-size: 16px;
     padding-left: 29.77px;
     color: #ffffff;
-    background-color: #173541;
   }
   .cm-editor {
     .cm-line {
       font-size: 16px;
       line-height: 25px;
-      font-family: "Fira Code", "Roboto Mono", Consolas, "Microsoft Yahei";
+      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
     }
   }
   .codemirror-editor {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-codemirror",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "wraper codemirror with vue3",
   "main": "index.js",
   "scripts": {