dragon-editor 3.2.2 → 3.2.3

package/dist/module.json

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

package/dist/runtime/components/DragonEditor.vue

@@ -85,7 +85,7 @@
             </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">
@@ -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/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/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.2",
+    "version": "3.2.3",
     "description": "Javascript WYSIWYG editor in Nuxt3!",
     "repository": {
         "type": "git",