yh-codemirror 1.0.0

package/CodeMirror.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="yh-code-mirror-container">
+    <div class="code-slot">
+      <slot name="pre-code"></slot>
+    </div>
+    <div ref="codeMirrorEditorRef"></div>
+    <div class="code-slot">
+      <slot name="next-code"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } 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 } from "vue";
+
+const codeMirrorEditorRef = ref();
+let view: null | EditorView = null;
+let state: null | EditorState = null;
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    language?: string | string[];
+    autocomplete?: any;
+  }>(),
+  {
+    modelValue: "",
+    language: "javascript",
+    autocomplete: {},
+  }
+);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (state) {
+      let end = state.doc.length;
+      state.update({
+        changes: [
+          {
+            from: 0,
+            to: end,
+            insert: val,
+          },
+        ],
+      });
+    }
+  }
+);
+
+const emits = defineEmits(["update:modelvalue"]);
+
+onMounted(() => {
+  const extensions: Extension[] = [
+    basicSetup,
+    solarizedDark,
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((v: ViewUpdate) => {
+      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%;
+  .code-slot {
+    width: 100%;
+    line-height: 25px;
+    font-size: 14px;
+    padding-left: 29.77px;
+    color: #ffffff;
+    background-color: #173541;
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "yh-codemirror",
+  "version": "1.0.0",
+  "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.9.0",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-java": "^6.0.1",
+    "@codemirror/lang-javascript": "^6.1.8",
+    "@codemirror/lang-sql": "^6.5.3",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/language": "^6.9.0",
+    "@codemirror/view": "^6.16.0",
+    "codemirror": "^6.0.1"
+  },
+  "peerDependencies": {
+    "vue-i18n": "9.8.0",
+    "vue": "3.2.47",
+    "element-plus": "2.3.8"
+  },
+  "author": "Liubin"
+}

package/util.ts

@@ -0,0 +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]();
+};