dragon-editor 3.2.1 → 3.2.2

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "3.2.1"
+  "version": "3.2.2"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponent, addTypeTemplate, installModule } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, addTypeTemplate, installModule, addPluginTemplate } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -20,6 +20,11 @@ const module = defineNuxtModule({
       write: true
     });
     await installModule("@pinia/nuxt");
+    addPluginTemplate({
+      src: resolver.resolve("./runtime/plugin.mjs"),
+      filename: "hljs.plugin.mjs"
+    });
+    nuxt.options.build.transpile.push("highlight.js");
   }
 });
 

package/dist/runtime/components/DragonEditor.vue

@@ -92,14 +92,14 @@
                     <option v-for="(item, i) in _getCodeBlockTheme()" :value="item.code" :key="`codeBlockTheme-${i}`">{{ item.text }}</option>
                 </select>
             </div>
-<!--
+
             <div v-if="['code'].includes(curruntType) === true" class="de-col">
                 <p class="de-name">Language :</p>
                 <select class="de-selector" v-model="codeblockLanguage" @change="codeblockLanguageChangeEvent">
                     <option v-for="(item, i) in _getCodeBlockLanguage()" :value="item.code" :key="`codeBlockLanuage-${i}`">{{ item.text }}</option>
                 </select>
             </div>
--->
+
             <div v-if="['list'].includes(curruntType) === true" class="de-col">
                 <p class="de-name">List Style :</p>
                 <select class="de-selector" v-model="listBlockStyle" @change="listBlockStyleChangeEvent">

package/dist/runtime/plugin.d.mts

@@ -0,0 +1,2 @@
+declare function _default(nuxtApp: any): void;
+export default _default;

package/dist/runtime/plugin.mjs

@@ -0,0 +1,6 @@
+import hljs from "highlight.js";
+
+export default (nuxtApp) => {
+    nuxtApp.vueApp.provide("hljs", hljs);
+    nuxtApp.provide("hljs", hljs);
+};

package/dist/runtime/store.mjs

@@ -37,10 +37,12 @@ export const useEditorStore = defineStore("editorStore", {
       this.controlBar.$element = value;
     },
     controlBarActive() {
-      const currentRect = this.$currentBlock.getBoundingClientRect();
-      this.controlBar.active = true;
-      this.controlBar.x = Math.floor(currentRect.x + currentRect.width / 2);
-      this.controlBar.y = Math.floor(currentRect.y - 50);
+      if (this.$currentBlock !== null) {
+        const currentRect = this.$currentBlock.getBoundingClientRect();
+        this.controlBar.active = true;
+        this.controlBar.x = Math.floor(currentRect.x + currentRect.width / 2);
+        this.controlBar.y = Math.floor(currentRect.y - 50);
+      }
     },
     controlBarDeactive() {
       this.controlBar.active = false;

package/dist/runtime/utils/controlBar.mjs

@@ -1,4 +1,5 @@
 import { _getBlockType } from "./block.mjs";
+import hljs from "highlight.js";
 import "../type.d.ts";
 export function _getCodeBlockTheme() {
   return [
@@ -134,6 +135,9 @@ export function _setCodeBlockLanguage(store, lang) {
     if (type === "code") {
       const $langText = $element.querySelector(".de-language");
       const $code = $element.querySelector(".de-code-content");
+      const convert = hljs.highlight($code.textContent ?? "", { language: lang });
+      $langText.textContent = convert._top.name ?? "";
+      $code.innerHTML = convert.value;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.2.1",
+    "version": "3.2.2",
     "description": "Javascript WYSIWYG editor in Nuxt3!",
     "repository": {
         "type": "git",