dragon-editor 4.0.3 → 4.0.4

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Block/Code.vue

@@ -64,10 +64,9 @@
 
 <script setup>
 import { useEditorStore } from "../../store/editor";
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, onMounted } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { _moveCodeBlockEvent, _codeBlockShiftEnterEvent, _codeBlockTabEvent, _normalPasteEvent } from "../../utils/event";
-import { _highlightingCode } from "../../utils/data";
 const editorStore = useEditorStore();
 const props = defineProps({
   data: { type: null, required: true },
@@ -161,11 +160,12 @@ function contentKeydownEvent(event) {
 async function setLanguageEvent(lang) {
   if ($content.value !== null) {
     const textContent = $content.value.textContent;
+    const highlights = hljs.highlight(textContent, { language: lang });
     const newData = JSON.parse(JSON.stringify(props.data));
     isLanguageListActive.value = false;
     abortEdit();
     newData.language = lang;
-    newData.textContent = _highlightingCode(textContent, lang);
+    newData.textContent = highlights.value;
     emit("update", newData);
     await nextTick();
     setEdit();
@@ -174,8 +174,9 @@ async function setLanguageEvent(lang) {
 function setStyleEvent() {
   if ($content.value !== null) {
     const textContent = $content.value.textContent;
+    const highlights = hljs.highlight(textContent, { language: props.data.language });
     const newData = JSON.parse(JSON.stringify(props.data));
-    newData.textContent = _highlightingCode(textContent, props.data.language);
+    newData.textContent = highlights.value;
     emit("update", newData);
   }
 }
@@ -188,4 +189,12 @@ onClickOutside(
     ignore: [$btnLanguageList]
   }
 );
+onMounted(() => {
+  if (window.hljs === void 0) {
+    const script = document.createElement("script");
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js";
+    script.async = true;
+    document.head.appendChild(script);
+  }
+});
 </script>

package/dist/runtime/utils/data/node.d.ts

@@ -1,4 +1,3 @@
-export declare function _highlightingCode(text: string, language: string): string;
 export declare function _arrangementNodeList(list: Node[], cursorStartNode: Node | null, cursorStartNodeOffset: number, cursorEndNode: Node | null, cursorEndNodeOffset: number): {
     list: Node[];
     cursorStartNode: Node | null;

package/dist/runtime/utils/data/node.js

@@ -1,8 +1,4 @@
-import * as hljs from "highlight.js";
 import { _isStrictlyEqualArrays } from "./index.js";
-export function _highlightingCode(text, language) {
-  return hljs.default.highlight(text, { language }).value;
-}
 export function _arrangementNodeList(list, cursorStartNode, cursorStartNodeOffset, cursorEndNode, cursorEndNodeOffset) {
   const arrangementNodeList = [];
   list.forEach((node) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "description": "Javascript WYSIWYG editor in Nuxt!",
     "repository": {
         "type": "git",