dragon-editor 3.0.0 → 3.0.2

package/README.md

@@ -127,7 +127,7 @@ Done!
     const $editor = ref<any>();
 
     function setData() {
-        $editor.value.getContentData([...]);
+        $editor.value.setContentData([...]);
     }
 </script>
 ```

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "3.0.0"
+  "version": "3.0.2"
 }

package/dist/runtime/components/DragonEditor.vue

@@ -156,15 +156,16 @@ function setDecoration(type: string) {
     _setNodeStyle(`de-${type}`, editorStore);
 }
 
-function getContentData() {
+function getContentData(): DEContentData {
     if (editorStore.$content !== null) {
         return _getContentData(editorStore.$content);
     } else {
         console.error("[DragonEditor] Con't find content Element.");
+        return [];
     }
 }
 
-function setContentData(data: any[]) {
+function setContentData(data: DEContentData) {
     _setContentData(data, editorStore);
 }
 

package/dist/runtime/components/DragonEditorViewer.vue

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 const props = defineProps<{
-    content: any[];
+    content: DEContentData;
 }>();
 </script>
 

package/dist/runtime/type.d.ts

@@ -22,3 +22,30 @@ interface DEArrangeCursorData {
     endNodeIdx: number;
     endOffset: number;
 }
+
+interface DETextBlock {
+    type: "text";
+    textContent: string;
+}
+
+interface DEHeadingBlock {
+    type: "heading";
+    level: number;
+    id: string;
+    textContent: string;
+}
+
+interface DEUListBlock {
+    type: "ul";
+    child: string[];
+}
+
+interface DEOListBlock {
+    type: "ol";
+    pattern: "a" | "i" | "1" | "A" | "I";
+    child: string[];
+}
+
+type DEContent = DETextBlock | DEHeadingBlock | DEUListBlock | DEOListBlock;
+
+type DEContentData = DEContent[];

package/dist/runtime/utils/convertor.d.ts

@@ -1,2 +1,2 @@
-export declare function _getContentData($content: HTMLDivElement): any[];
+export declare function _getContentData($content: HTMLDivElement): DEContentData;
 export declare function _setContentData(data: any[], store: any): void;

package/dist/runtime/utils/keyboardEvent.mjs

@@ -82,10 +82,21 @@ function elementBackspaceEvent(e, store) {
     case "heading":
       defaultBlockBackspaceEvent(e, store, $element);
       break;
+    case "list":
+      listBlockBackspaceEvent(e, store, $element);
+      break;
     default:
       console.log("// TODO : \uB2E4\uB978 \uD0C0\uC785 \uBE14\uB7ED \uBC31\uC2A4\uD398\uC774\uC2A4 \uC774\uBCA4\uD2B8", type);
   }
 }
+function elementTabEvent(e, store) {
+  const { $element, type } = _getBlockType(e.target);
+  switch (type) {
+    case "text":
+      defaultTabEvent(e.shiftKey, $element);
+      break;
+  }
+}
 function defaultBlockEnterEvent(store, $element) {
   const $textBlock = $element;
   if (store.cursorData.type === "Caret") {
@@ -579,21 +590,12 @@ function defaultBlockShiftEnterEvent(store, $element) {
     _setCursor($textBlock.childNodes[startNodeIdx + 2], 0);
   }
 }
-function elementTabEvent(e, store) {
-  const { $element, type } = _getBlockType(e.target);
-  switch (type) {
-    case "text":
-      defaultTabEvent(e.shiftKey, $element);
-      break;
-  }
-}
 function defaultBlockBackspaceEvent(e, store, $element) {
   const $textBlock = $element;
-  const childList = store.wrap.querySelectorAll(".de-block");
-  const childLength = childList.length;
+  const childList = store.$content.querySelectorAll(".de-block");
   const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $textBlock);
   let elementIdx = -1;
-  for (let i = 0; childLength > i; i += 1) {
+  for (let i = 0; childList.length > i; i += 1) {
     if (childList[i] === $element) {
       elementIdx = i;
       break;
@@ -618,39 +620,35 @@ function defaultBlockBackspaceEvent(e, store, $element) {
     if ($textBlock.hasChildNodes() === false) {
       e.preventDefault();
       const $preBlock = $textBlock.previousElementSibling;
-      if ($preBlock !== null) {
-        const { type: preBlockType } = _getBlockType($textBlock);
-        $textBlock.remove();
-        if (preBlockType === "text") {
-          if ($preBlock.hasChildNodes() === true) {
-            const textBlockChildList = $preBlock.childNodes;
-            const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
-            _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
-          } else {
-            _setCursor($preBlock, 0);
-          }
+      const { type: preBlockType } = _getBlockType($preBlock);
+      $textBlock.remove();
+      if (preBlockType === "text" || preBlockType === "heading") {
+        if ($preBlock.hasChildNodes() === true) {
+          const textBlockChildList = $preBlock.childNodes;
+          const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+          _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+        } else {
+          _setCursor($preBlock, 0);
         }
       }
     } else {
       if (store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) {
         e.preventDefault();
         const $preBlock = $textBlock.previousElementSibling;
-        if ($preBlock !== null) {
-          const { type: preBlockType } = _getBlockType($preBlock);
-          if (preBlockType === "text") {
-            if ($preBlock.hasChildNodes() === true) {
-              const textBlockChildList = $preBlock.childNodes;
-              const textBlockTargetChildIdx = textBlockChildList.length - 1;
-              const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
-              const thisBlockHTML = $textBlock.innerHTML;
-              $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
-              _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
-            } else {
-              $preBlock.innerHTML = $textBlock.innerHTML;
-              _setCursor($preBlock, 0);
-            }
-            $textBlock.remove();
+        const { type: preBlockType } = _getBlockType($preBlock);
+        if (preBlockType === "text" || preBlockType === "heading") {
+          if ($preBlock.hasChildNodes() === true) {
+            const textBlockChildList = $preBlock.childNodes;
+            const textBlockTargetChildIdx = textBlockChildList.length - 1;
+            const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
+            const thisBlockHTML = $textBlock.innerHTML;
+            $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
+            _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
+          } else {
+            $preBlock.innerHTML = $textBlock.innerHTML;
+            _setCursor($preBlock, 0);
           }
+          $textBlock.remove();
         }
       }
     }
@@ -675,6 +673,125 @@ function defaultBlockBackspaceEvent(e, store, $element) {
   }
   _setCursorData(store);
 }
+function listBlockBackspaceEvent(e, store, $element) {
+  const $listBlock = $element;
+  const $targetItem = _findContentEditableElement(store.cursorData.startNode);
+  const liList = $listBlock.querySelectorAll(".de-item");
+  const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $targetItem);
+  let liIdx = -1;
+  for (let i = 0; liList.length > i; i += 1) {
+    if (liList[i] === $targetItem) {
+      liIdx = i;
+      break;
+    }
+  }
+  if (liList.length === 1) {
+    if ($targetItem.textContent === "") {
+      e.preventDefault();
+      const $preBlock = $listBlock.previousElementSibling;
+      const { type: preBlockType } = _getBlockType($preBlock);
+      $listBlock.remove();
+      if (preBlockType === "text" || preBlockType === "heading") {
+        if ($preBlock.hasChildNodes() === true) {
+          const textBlockChildList = $preBlock.childNodes;
+          const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+          _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+        } else {
+          _setCursor($preBlock, 0);
+        }
+      }
+    } else {
+      if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+        e.preventDefault();
+        const $preBlock = $listBlock.previousElementSibling;
+        const { type: preBlockType } = _getBlockType($preBlock);
+        if (preBlockType === "text" || preBlockType === "heading") {
+          if ($preBlock.hasChildNodes() === true) {
+            const textBlockChildList = $preBlock.childNodes;
+            const textBlockTargetChildIdx = textBlockChildList.length - 1;
+            const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
+            const thisBlockHTML = $targetItem.innerHTML;
+            $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
+            _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
+          } else {
+            $preBlock.innerHTML = $targetItem.innerHTML;
+            _setCursor($preBlock, 0);
+          }
+          $targetItem.remove();
+          $listBlock.remove();
+        }
+      }
+    }
+  } else {
+    if (liIdx === 0) {
+      if ($targetItem.textContent === "") {
+        e.preventDefault();
+        const $preBlock = $listBlock.previousElementSibling;
+        const { type: preBlockType } = _getBlockType($preBlock);
+        $targetItem.remove();
+        if (preBlockType === "text" || preBlockType === "heading") {
+          if ($preBlock.hasChildNodes() === true) {
+            const textBlockChildList = $preBlock.childNodes;
+            const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+            _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+          } else {
+            _setCursor($preBlock, 0);
+          }
+        }
+      } else {
+        if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+          e.preventDefault();
+          const $preBlock = $listBlock.previousElementSibling;
+          const { type: preBlockType } = _getBlockType($preBlock);
+          if (preBlockType === "text" || preBlockType === "heading") {
+            if ($preBlock.hasChildNodes() === true) {
+              const textBlockChildList = $preBlock.childNodes;
+              const textBlockTargetChildIdx = textBlockChildList.length - 1;
+              const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
+              const thisBlockHTML = $targetItem.innerHTML;
+              $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
+              _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
+            } else {
+              $preBlock.innerHTML = $targetItem.innerHTML;
+              _setCursor($preBlock, 0);
+            }
+            $targetItem.remove();
+          }
+        }
+      }
+    } else {
+      if ($targetItem.textContent === "") {
+        e.preventDefault();
+        const $preBlock = liList[liIdx - 1];
+        $targetItem.remove();
+        if ($preBlock.hasChildNodes() === true) {
+          const textBlockChildList = $preBlock.childNodes;
+          const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+          _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+        } else {
+          _setCursor($preBlock, 0);
+        }
+      } else {
+        if (store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+          e.preventDefault();
+          const $preBlock = liList[liIdx - 1];
+          if ($preBlock.hasChildNodes() === true) {
+            const textBlockChildList = $preBlock.childNodes;
+            const textBlockTargetChildIdx = textBlockChildList.length - 1;
+            const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
+            const thisBlockHTML = $targetItem.innerHTML;
+            $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
+            _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
+          } else {
+            $preBlock.innerHTML = $targetItem.innerHTML;
+            _setCursor($preBlock, 0);
+          }
+          $targetItem.remove();
+        }
+      }
+    }
+  }
+}
 function defaultTabEvent(useShiftKey, $element) {
   const $target = $element;
   let value = $target.dataset["depth"] === void 0 ? 0 : parseInt($target.dataset["depth"]);

package/package.json

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