dragon-editor 3.2.1 → 3.2.3

package/dist/module.json

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

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

@@ -85,21 +85,21 @@
             </div>
         </div>
 
-        <div class="de-control-bar" :class="{ '--active': editorStore.controlBar.active === true }" :style="{ top: `${editorStore.controlBar.y}px`, left: `${editorStore.controlBar.x}px` }" ref="$controlBar">
+        <div v-if="editorStore.$currentBlock !== null" class="de-control-bar" :class="{ '--active': editorStore.controlBar.active === true }" :style="{ top: `${editorStore.controlBar.y}px`, left: `${editorStore.controlBar.x}px` }" ref="$controlBar">
             <div v-if="['code'].includes(curruntType) === true" class="de-col">
                 <p class="de-name">Theme :</p>
                 <select class="de-selector" v-model="codeBlockTheme" @change="codeBlockThemeChangeEvent">
                     <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">
@@ -133,7 +133,7 @@ import { _findScrollingElement, _findContentEditableElement } from "../utils/ele
 import { _elementKeyEvent, _hotKeyEvent, _copyEvent, _pasteEvent } from "../utils/keyboardEvent";
 import { _getBlockType, _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock, _createCodeBlock } from "../utils/block";
 import { _setNodeStyle, _setTextAlign } from "../utils/style";
-import { _setCursorData, _clenupCursor } from "../utils/cursor";
+import { _setCursor, _setCursorData, _clenupCursor } from "../utils/cursor";
 import { _getContentData, _setContentData } from "../utils/convertor";
 import { _addBlockToContent } from "../utils/content";
 import "../type.d.ts";
@@ -306,7 +306,18 @@ function checkOthersideClick(event: MouseEvent) {
 // 블럭 삭제
 function deleteBlock() {
     if (editorStore.$currentBlock !== null) {
+        const childCount: number = editorStore.$content?.childElementCount ?? 1;
+
         editorStore.$currentBlock.remove();
+        editorStore.setCurrentBlock(null);
+
+        if (childCount < 2) {
+            // 모든 엘리먼트를 지우려는 경우
+            const $block = _createTextBlock();
+
+            editorStore.$content?.insertAdjacentElement("beforeend", $block);
+            _setCursor($block, 0);
+        }
     }
 }
 

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.d.ts

@@ -4,7 +4,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"editorStor
     setContentElement(value: HTMLDivElement): void;
     setParentWrapElement(value: HTMLElement | Window): void;
     setCursorData(data: DEditorCursor): void;
-    setCurrentBlock(block: HTMLElement): void;
+    setCurrentBlock(block: HTMLElement | null): void;
     setContrulBar(value: HTMLDivElement): void;
     controlBarActive(): void;
     controlBarDeactive(): void;

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/dist/runtime/utils/keyboardEvent.mjs

@@ -28,7 +28,7 @@ export function _elementKeyEvent(event, store) {
       keyEventCount += 1;
       setTimeout(() => {
         keyEventCount = 0;
-      }, 150);
+      }, 200);
       break;
     case "Backspace":
       elementBackspaceEvent(event, store);
@@ -44,7 +44,7 @@ export function _elementKeyEvent(event, store) {
       keyEventCount += 1;
       setTimeout(() => {
         keyEventCount = 0;
-      }, 150);
+      }, 200);
       break;
     case "Space":
       break;
@@ -187,12 +187,15 @@ function defaultBlockEnterEvent(store, $element) {
             const text = node.textContent;
             const preSpan = document.createElement("span");
             const nextSpan = document.createElement("span");
+            const nextText = text.slice(store.cursorData.startOffset);
             preSpan.classList.add(...originalClassList);
             preSpan.textContent = text.slice(0, store.cursorData.startOffset);
             preStructure.push(preSpan);
-            nextSpan.classList.add(...originalClassList);
-            nextSpan.textContent = text.slice(store.cursorData.startOffset);
-            nextStructure.push(nextSpan);
+            if (nextText !== "") {
+              nextSpan.classList.add(...originalClassList);
+              nextSpan.textContent = nextText;
+              nextStructure.push(nextSpan);
+            }
           }
         }
       });
@@ -292,7 +295,7 @@ function defaultBlockEnterEvent(store, $element) {
         }
       });
     }
-    const $nextBlock = _createTextBlock(store);
+    const $nextBlock = _createTextBlock({ type: "text", classList: [], textContent: "" });
     $textBlock.insertAdjacentElement("afterend", $nextBlock);
     $textBlock.replaceChildren(...preStructure);
     $nextBlock.replaceChildren(...nextStructure);

package/dist/runtime/utils/style.mjs

@@ -40,7 +40,7 @@ export function _setNodeStyle(className, store) {
                 _setCursor($element.childNodes[targetIdx], cursorOffset);
               } else {
                 if ($parentElement.tagName === "SPAN") {
-                  const classList = [...$parentElement.classList];
+                  const classList = $parentElement.classList.value.split(" ");
                   const classIdx = classList.indexOf(className);
                   if (classIdx === -1) {
                     $parentElement.classList.add(className);
@@ -92,7 +92,7 @@ export function _setNodeStyle(className, store) {
             } else {
               const $target = cursorData.startNode;
               if ($target.tagName !== "A") {
-                const classList = [...$target.classList];
+                const classList = $target.classList.value.split(" ");
                 const classIdx = classList.indexOf(className);
                 if (classIdx === -1) {
                   if (cursorData.startOffset !== 0) {
@@ -157,7 +157,7 @@ export function _setNodeStyle(className, store) {
                     isDuble = true;
                   }
                 } else {
-                  const classList = [...$elementNode.classList];
+                  const classList = $elementNode.classList.value.split(" ");
                   const classIdx = classList.indexOf(className);
                   if ($elementNode.tagName === "SPAN") {
                     if (classIdx === -1) {
@@ -196,7 +196,7 @@ export function _setNodeStyle(className, store) {
                     structureArray.push(childNode.textContent);
                   }
                 } else {
-                  const classList = [...$elementNode.classList];
+                  const classList = $elementNode.classList.value.split(" ");
                   const classIdx = classList.indexOf(className);
                   if ($elementNode.tagName === "SPAN") {
                     if (isWrap === true) {
@@ -236,7 +236,7 @@ export function _setNodeStyle(className, store) {
                     structureArray.push(childNode.textContent);
                   }
                 } else {
-                  const classList = [...$elementNode.classList];
+                  const classList = $elementNode.classList.value.split(" ");
                   const classIdx = classList.indexOf(className);
                   if ($elementNode.tagName === "SPAN") {
                     if (isWrap === true) {
@@ -351,12 +351,15 @@ export function _setTextAlign(type, store) {
       if ($element.classList.contains(className) === true) {
         $element.classList.remove(className);
       } else {
-        const curruntClassname = alignClassList.filter((text) => [...$element.classList].includes(text) === true)[0];
+        const curruntClassname = alignClassList.filter((text) => $element.classList.contains(text) === true)[0];
         if (curruntClassname !== void 0) {
           $element.classList.remove(curruntClassname);
         }
         $element.classList.add(className);
       }
+      if (store.$currentBlock.classList.contains("de-image-block") !== true) {
+        _setCursor($element, 0);
+      }
     }
   }
 }

package/package.json

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