yh-codemirror 1.0.4 → 1.0.6

package/CodeMirror.vue

@@ -1,287 +1,283 @@
-<template>
-  <div
-    class="yh-code-mirror-container"
-    ref="YhCodemirrorContainer"
-    :style="codeMirrorStyle">
-    <div class="code-slot">
-      <slot name="pre-code"></slot>
-    </div>
-    <div
-      class="codemirror-editor"
-      ref="codeMirrorEditorRef"
-      :style="codeMirrorEditorStyle"></div>
-    <div class="code-slot">
-      <slot name="next-code"></slot>
-    </div>
-    <div class="editor-operation-btn">
-      <i
-        title="全屏"
-        class="iconfont icon-fullscreen"
-        @click="fullscreen"></i>
-      <i
-        title="美化"
-        class="iconfont icon-magic-stick"
-        @click="onEditorBtnClick('beautify')"></i>
-      <i
-        title="全选"
-        class="iconfont icon-check-square"
-        @click="onEditorBtnClick('checkAll')"></i>
-      <i
-        title="复制"
-        class="iconfont icon-document-copy"
-        @click="onEditorBtnClick('copy')"></i>
-      <i
-        title="清空"
-        class="iconfont icon-clear"
-        @click="onEditorBtnClick('clear')"></i>
-      <slot name="operation-btn"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-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';
-// @ts-ignore
-import {js_beautify} from 'js-beautify';
-import {ElMessage} from 'element-plus';
-
-const YhCodemirrorContainer = ref();
-function fullscreen() {
-  if (document.fullscreenElement && document.fullscreenElement === YhCodemirrorContainer.value) {
-    document.exitFullscreen();
-  } else {
-    YhCodemirrorContainer.value.requestFullscreen();
-  }
-}
-
-const codeMirrorEditorRef = ref();
-
-let view: null | EditorView = null;
-let state: null | EditorState = null;
-// js-beautify 自定义配置
-const codeBeautifyConfig = {
-  indent_size: 2,
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string;
-    language?: string | string[];
-    autocomplete?: any;
-    height?: number;
-  }>(),
-  {
-    modelValue: '',
-    language: 'javascript',
-    autocomplete: {},
-  }
-);
-
-const codeMirrorStyle = computed(() => {
-  let style: any = {};
-  if (props.height !== undefined && !isNaN(props.height)) {
-    style.height = `${props.height}px`;
-    style.display = 'flex';
-    style.flexDirection = 'column';
-  }
-  return style;
-});
-
-const codeMirrorEditorStyle = computed(() => {
-  let style: any = {};
-  if (props.height !== undefined && !isNaN(props.height)) {
-    style.flex = `1`;
-    style.overflow = 'auto';
-  }
-  return style;
-});
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (view && state && val != view.state.doc.toString()) {
-      let end = view.state.doc.toString().length;
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: end,
-            insert: val,
-          },
-        ],
-      });
-    }
-  }
-);
-
-const emits = defineEmits(['update:modelValue']);
-
-// 代码编辑器操作按钮
-const onEditorBtnClick = (type) => {
-  if (view) {
-    const state = toRaw(view.state);
-    const pos = state.doc.toString().length;
-    if (type == 'beautify') {
-      const beautifyCode = js_beautify(props.modelValue, codeBeautifyConfig);
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: pos,
-            insert: beautifyCode,
-          },
-        ],
-      });
-    } 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 = '';
-      if (state.selection.ranges.some((range) => !range.empty)) {
-        const selection = state.selection.ranges[0];
-        selectedText = state.sliceDoc(selection.from, selection.to);
-      } else {
-        selectedText = state.doc.toString();
-      }
-      navigator.clipboard.writeText(selectedText);
-      ElMessage({
-        message: '复制成功！',
-        type: 'success',
-      });
-    } else if (type == 'clear') {
-      view.dispatch({
-        changes: [
-          {
-            from: 0,
-            to: pos,
-            insert: '',
-          },
-        ],
-      });
-    }
-    view.focus();
-  }
-};
-
-onMounted(() => {
-  const extensions: Extension[] = [
-    basicSetup,
-    solarizedDark,
-    EditorView.lineWrapping,
-    EditorView.updateListener.of((v: ViewUpdate) => {
-      if (v.docChanged) {
-        emits('update:modelValue', v.state.doc.toString());
-      }
-    }),
-  ];
-  const language = props.language;
-  if (language) {
-    if (Array.isArray(language)) {
-      language.forEach((l) => {
-        extensions.push(getCodeLanguagePlugin(l));
-        if (props.autocomplete[l] && l === 'javascript') {
-          extensions.push(
-            javascriptLanguage.data.of({
-              autocomplete: props.autocomplete[l],
-            })
-          );
-        }
-      });
-    } else {
-      extensions.push(getCodeLanguagePlugin(language));
-      if (props.autocomplete[language] && language === 'javascript') {
-        extensions.push(
-          javascriptLanguage.data.of({
-            autocomplete: props.autocomplete[language],
-          })
-        );
-      }
-    }
-  }
-  let doc = props.modelValue;
-  if (typeof doc !== 'string') {
-    doc = '';
-  }
-  state = EditorState.create({
-    doc,
-    extensions,
-  });
-  if (state) {
-    view = new EditorView({
-      state: state,
-      parent: codeMirrorEditorRef.value,
-    });
-  }
-});
-</script>
-<style lang="scss">
-.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';
-    line-height: 25px;
-    font-size: 16px;
-    padding-left: 29.77px;
-    color: #ffffff;
-  }
-  .cm-editor {
-    .cm-line {
-      font-size: 16px;
-      line-height: 25px;
-      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
-    }
-  }
-  .codemirror-editor {
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-      background-color: #173541;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #f5f5f5;
-      &:hover {
-        background-color: #fff;
-      }
-    }
-  }
-  .editor-operation-btn {
-    position: absolute;
-    bottom: 1px;
-    right: 1px;
-    padding: 0 3px;
-    display: flex;
-    align-items: center;
-    border-radius: 3px;
-    opacity: 0.5;
-    background: #409eff;
-    transition: all 0.3s ease;
-    i {
-      font-size: 16px;
-      color: #fff;
-      margin: 0 5px;
-      cursor: pointer;
-      line-height: 24px;
-    }
-    &:hover {
-      opacity: 1;
-      background: #409eff;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="yh-code-mirror-container"
+    ref="YhCodemirrorContainer"
+    :style="codeMirrorStyle">
+    <div class="code-slot">
+      <slot name="pre-code"></slot>
+    </div>
+    <div
+      class="codemirror-editor"
+      ref="codeMirrorEditorRef"
+      :style="codeMirrorEditorStyle"></div>
+    <div class="code-slot">
+      <slot name="next-code"></slot>
+    </div>
+    <div class="editor-operation-btn">
+      <i
+        title="全屏"
+        class="iconfont icon-fullscreen"
+        @click="fullscreen"></i>
+      <i
+        title="美化"
+        class="iconfont icon-magic-stick"
+        @click="onEditorBtnClick('beautify')"></i>
+      <i
+        title="全选"
+        class="iconfont icon-check-square"
+        @click="onEditorBtnClick('checkAll')"></i>
+      <i
+        title="复制"
+        class="iconfont icon-document-copy"
+        @click="onEditorBtnClick('copy')"></i>
+      <i
+        title="清空"
+        class="iconfont icon-clear"
+        @click="onEditorBtnClick('clear')"></i>
+      <slot name="operation-btn"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+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';
+// @ts-ignore
+import {js_beautify} from 'js-beautify';
+import {ElMessage} from 'element-plus';
+
+const YhCodemirrorContainer = ref();
+function fullscreen() {
+  if (document.fullscreenElement && document.fullscreenElement === YhCodemirrorContainer.value) {
+    document.exitFullscreen();
+  } else {
+    YhCodemirrorContainer.value.requestFullscreen();
+  }
+}
+
+const codeMirrorEditorRef = ref();
+
+let view: null | EditorView = null;
+let state: null | EditorState = null;
+// js-beautify 自定义配置
+const codeBeautifyConfig = {
+  indent_size: 2,
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    language?: string | string[];
+    autocomplete?: any;
+    height?: number;
+  }>(),
+  {
+    modelValue: '',
+    language: 'javascript',
+    autocomplete: {},
+  }
+);
+
+const codeMirrorStyle = computed(() => {
+  let style: any = {};
+  if (props.height !== undefined && !isNaN(props.height)) {
+    style.height = `${props.height}px`;
+    style.display = 'flex';
+    style.flexDirection = 'column';
+  }
+  return style;
+});
+
+const codeMirrorEditorStyle = computed(() => {
+  let style: any = {};
+  if (props.height !== undefined && !isNaN(props.height)) {
+    style.flex = `1`;
+    style.overflow = 'auto';
+  }
+  return style;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (view && state && val != view.state.doc.toString()) {
+      let end = view.state.doc.toString().length;
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: end,
+            insert: val,
+          },
+        ],
+      });
+    }
+  }
+);
+
+const emits = defineEmits(['update:modelValue']);
+
+// 代码编辑器操作按钮
+const onEditorBtnClick = (type) => {
+  if (view) {
+    const state = toRaw(view.state);
+    const pos = state.doc.toString().length;
+    if (type == 'beautify') {
+      const beautifyCode = js_beautify(props.modelValue, codeBeautifyConfig);
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: pos,
+            insert: beautifyCode,
+          },
+        ],
+      });
+    } 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 = '';
+      if (state.selection.ranges.some((range) => !range.empty)) {
+        const selection = state.selection.ranges[0];
+        selectedText = state.sliceDoc(selection.from, selection.to);
+      } else {
+        selectedText = state.doc.toString();
+      }
+      navigator.clipboard.writeText(selectedText);
+      ElMessage({
+        message: '复制成功！',
+        type: 'success',
+      });
+    } else if (type == 'clear') {
+      view.dispatch({
+        changes: [
+          {
+            from: 0,
+            to: pos,
+            insert: '',
+          },
+        ],
+      });
+    }
+    view.focus();
+  }
+};
+
+onMounted(() => {
+  const extensions: Extension[] = [
+    basicSetup,
+    solarizedDark,
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((v: ViewUpdate) => {
+      if (v.docChanged) {
+        emits('update:modelValue', v.state.doc.toString());
+      }
+    }),
+  ];
+  const language = props.language;
+  if (language) {
+    if (Array.isArray(language)) {
+      language.forEach((l) => {
+        extensions.push(getCodeLanguagePlugin(l));
+        if (props.autocomplete[l] && l === 'javascript') {
+          extensions.push(
+            javascriptLanguage.data.of({
+              autocomplete: props.autocomplete[l],
+            })
+          );
+        }
+      });
+    } else {
+      extensions.push(getCodeLanguagePlugin(language));
+      if (props.autocomplete[language] && language === 'javascript') {
+        extensions.push(
+          javascriptLanguage.data.of({
+            autocomplete: props.autocomplete[language],
+          })
+        );
+      }
+    }
+  }
+
+  state = EditorState.create({
+    doc: props.modelValue,
+    extensions,
+  });
+  if (state) {
+    view = new EditorView({
+      state: state,
+      parent: codeMirrorEditorRef.value,
+    });
+  }
+});
+</script>
+<style lang="scss">
+.yh-code-mirror-container {
+  width: 100%;
+  position: relative;
+  background-color: #173541;
+  .code-slot {
+    width: 100%;
+    font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+    line-height: 25px;
+    font-size: 12px;
+    padding-left: 29.77px;
+    color: #ffffff;
+  }
+  .cm-editor {
+    .cm-line {
+      font-size: 16px;
+      line-height: 25px;
+      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+    }
+  }
+  .codemirror-editor {
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      background-color: #173541;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #f5f5f5;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+  .editor-operation-btn {
+    position: absolute;
+    bottom: 1px;
+    right: 1px;
+    padding: 0 3px;
+    display: flex;
+    align-items: center;
+    border-radius: 3px;
+    opacity: 0.5;
+    background: #409eff;
+    transition: all 0.3s ease;
+    i {
+      font-size: 16px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+      line-height: 24px;
+    }
+    &:hover {
+      opacity: 1;
+      background: #409eff;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,27 +1,27 @@
-{
-  "name": "yh-codemirror",
-  "version": "1.0.4",
-  "description": "wraper codemirror with vue3",
-  "main": "index.js",
-  "scripts": {
-    "pub": "npm publish --registry https://registry.npmjs.org/ --no-git-checks && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks"
-  },
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.16.3",
-    "@codemirror/lang-css": "^6.2.1",
-    "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-sql": "^6.7.0",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/view": "^6.28.2",
-    "codemirror": "^6.0.1",
-    "js-beautify": "^1.15.1"
-  },
-  "peerDependencies": {
-    "vue-i18n": "9.8.0",
-    "vue": "3.2.47",
-    "element-plus": "2.3.8"
-  },
-  "author": "Liubin"
+{
+  "name": "yh-codemirror",
+  "version": "1.0.6",
+  "description": "wraper codemirror with vue3",
+  "main": "index.js",
+  "scripts": {
+    "pub": "npm publish --registry https://registry.npmjs.org/ && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-sql": "^6.7.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/view": "^6.28.2",
+    "codemirror": "^6.0.1",
+    "js-beautify": "^1.15.1"
+  },
+  "peerDependencies": {
+    "vue-i18n": "^9.8.0",
+    "vue": "^3.0.0",
+    "element-plus": "^2.3.8"
+  },
+  "author": "Liubin"
 }

package/util.ts

@@ -1,17 +1,17 @@
-import { javascript } from "@codemirror/lang-javascript";
-import { java } from "@codemirror/lang-java";
-import { css } from "@codemirror/lang-css";
-import { sql } from "@codemirror/lang-sql";
-import { html } from "@codemirror/lang-html";
-
-const plugins = {
-  javascript: () => javascript(),
-  sql: () => sql(),
-  css: () => css(),
-  java: () => java(),
-  html: () => html(),
-};
-
-export const getCodeLanguagePlugin = function (language) {
-  return plugins[language]();
-};
+import { javascript } from "@codemirror/lang-javascript";
+import { java } from "@codemirror/lang-java";
+import { css } from "@codemirror/lang-css";
+import { sql } from "@codemirror/lang-sql";
+import { html } from "@codemirror/lang-html";
+
+const plugins = {
+  javascript: () => javascript(),
+  sql: () => sql(),
+  css: () => css(),
+  java: () => java(),
+  html: () => html(),
+};
+
+export const getCodeLanguagePlugin = function (language) {
+  return plugins[language]();
+};