dragon-editor 3.0.1 → 3.1.0

package/dist/runtime/utils/convertor.mjs

@@ -1,4 +1,5 @@
-import { _createTextBlock, _createHeadingBlock, _createListBlock } from "./block.mjs";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock } from "./block.mjs";
+import "../type.d.ts";
 export function _getContentData($content) {
   const childList = $content.children;
   const data = [];
@@ -26,6 +27,7 @@ export function _getContentData($content) {
       case "PRE":
         break;
       case "DIV":
+        data.push(converteDivToData($child));
         break;
     }
   });
@@ -36,18 +38,30 @@ export function _setContentData(data, store) {
   data.forEach((item) => {
     switch (item.type) {
       case "text":
-        childList.push(_createTextBlock(item.textContent));
+        childList.push(_createTextBlock(item));
         break;
       case "heading":
-        childList.push(_createHeadingBlock(`heading${item.level}`, item.textContent));
+        childList.push(_createHeadingBlock(item));
         break;
       case "ul":
-        childList.push(_createListBlock("ul", item.child));
-        break;
       case "ol":
-        childList.push(_createListBlock("ol", item.child, item.pattern));
+        childList.push(_createListBlock(item));
+        break;
+      case "image":
+        childList.push(
+          _createImageBlock({
+            type: item.type,
+            src: item.src,
+            maxWidth: item.maxWidth,
+            width: item.width,
+            height: item.height,
+            caption: item.caption,
+            classList: item.classList
+          })
+        );
         break;
-      case "":
+      case "custom":
+        childList.push(_createCustomBlock(item));
         break;
     }
   });
@@ -56,6 +70,7 @@ export function _setContentData(data, store) {
 function converteParagraphToData($child) {
   return {
     type: "text",
+    classList: getClassListWithoutDefaultClass($child),
     textContent: $child.innerHTML
   };
 }
@@ -64,6 +79,7 @@ function converteHeadingToData($child, level) {
     type: "heading",
     level,
     id: $child.id,
+    classList: getClassListWithoutDefaultClass($child),
     textContent: $child.innerHTML
   };
 }
@@ -71,7 +87,10 @@ function converteUListToData($child) {
   return {
     type: "ul",
     child: [...$child.children].map(($li) => {
-      return $li.innerHTML;
+      return {
+        classList: getClassListWithoutDefaultClass($li),
+        textContent: $li.innerHTML
+      };
     })
   };
 }
@@ -80,7 +99,47 @@ function converteOListToData($child) {
     type: "ol",
     pattern: $child.type,
     child: [...$child.children].map(($li) => {
-      return $li.innerHTML;
+      return {
+        classList: getClassListWithoutDefaultClass($li),
+        textContent: $li.innerHTML
+      };
     })
   };
 }
+function converteDivToData($child) {
+  let data;
+  switch (true) {
+    case $child.classList.contains("de-image-block"):
+      data = convertImageBlock($child);
+      break;
+    case $child.classList.contains("de-custom-block"):
+      data = convertCustomBlock($child);
+      break;
+  }
+  return data;
+}
+function convertImageBlock($imageBlock) {
+  const $imgArea = $imageBlock.querySelector(".de-image-area");
+  const $img = $imageBlock.querySelector(".de-img");
+  const $caption = $imageBlock.querySelector(".de-caption");
+  return {
+    type: "image",
+    src: $img.src,
+    maxWidth: parseInt($imgArea.dataset["maxwidth"]),
+    width: $img.width,
+    height: $img.height,
+    caption: $caption.textContent ?? "",
+    classList: getClassListWithoutDefaultClass($imageBlock)
+  };
+}
+function convertCustomBlock($block) {
+  return {
+    type: "custom",
+    classList: getClassListWithoutDefaultClass($block),
+    textContent: $block.innerHTML
+  };
+}
+function getClassListWithoutDefaultClass($element) {
+  const defaultClassList = ["de-block", "de-text-block", "de-heading-block", "de-list-block", "de-image-block"];
+  return [...$element.classList].filter((className) => defaultClassList.includes(className) === false);
+}

package/dist/runtime/utils/keyboardEvent.mjs

@@ -2,13 +2,14 @@ import { _setCursor, _setCursorData, _clenupCursor, _soltingCursorDataOnElement
 import { _getParentElementIfNodeIsText, _findContentEditableElement } from "./element.mjs";
 import { _getBlockType, _createTextBlock, _createListItemBlock } from "./block.mjs";
 import { _setNodeStyle } from "./style.mjs";
-let ketEventCount = 0;
+let keyEventCount = 0;
+let keyEventFn;
 export function _elementKeyEvent(event, store) {
   _setCursorData(store);
   switch (event.code) {
     case "Enter":
       event.preventDefault();
-      if (ketEventCount === 0) {
+      if (keyEventCount === 0) {
         _clenupCursor(store);
         setTimeout(() => {
           if (event.shiftKey === true) {
@@ -18,9 +19,9 @@ export function _elementKeyEvent(event, store) {
           }
         });
       }
-      ketEventCount += 1;
+      keyEventCount += 1;
       setTimeout(() => {
-        ketEventCount = 0;
+        keyEventCount = 0;
       }, 150);
       break;
     case "Backspace":
@@ -28,15 +29,15 @@ export function _elementKeyEvent(event, store) {
       break;
     case "Tab":
       event.preventDefault();
-      if (ketEventCount === 0) {
+      if (keyEventCount === 0) {
         _clenupCursor(store);
         setTimeout(() => {
           elementTabEvent(event, store);
         });
       }
-      ketEventCount += 1;
+      keyEventCount += 1;
       setTimeout(() => {
-        ketEventCount = 0;
+        keyEventCount = 0;
       }, 150);
       break;
     case "Space":
@@ -48,6 +49,14 @@ export function _elementKeyEvent(event, store) {
       moveToBlockEvent(event, store, "down");
       break;
   }
+  clearTimeout(keyEventFn);
+  keyEventFn = setTimeout(() => {
+    _clenupCursor(store);
+    const $block = _findContentEditableElement(store.cursorData.startNode);
+    if ($block !== null) {
+      store.setCurrentBlock($block.closest(".de-block"));
+    }
+  }, 250);
 }
 function elementEnterEvent(event, store) {
   const { $element, type } = _getBlockType(event.target);
@@ -86,7 +95,6 @@ function elementBackspaceEvent(e, store) {
       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) {
@@ -439,9 +447,9 @@ function defaultBlockShiftEnterEvent(store, $element) {
       }
     } else {
       const childList = $textBlock.childNodes;
-      let $target = store.cursorData.startNode;
       let targetIdx = -1;
       let structure = "";
+      let $target = store.cursorData.startNode;
       if ($target.constructor.name === "Text") {
         if ($target.parentNode !== $textBlock) {
           $target = $target.parentNode;
@@ -479,7 +487,10 @@ function defaultBlockShiftEnterEvent(store, $element) {
             if (constructorName === "HTMLBRElement") {
               structure += `<br><br>`;
             } else {
-              console.log("TODO: \uC2A4\uD0C0\uC77C \uD0DC\uADF8 \uBD84\uB9AC \uC791\uC5C5");
+              structure += `<span class="${[...child.classList].join(" ")}">${child.textContent.slice(0, store.cursorData.startOffset)}</span>`;
+              structure += `<br>`;
+              structure += `<span class="${[...child.classList].join(" ")}">${child.textContent.slice(store.cursorData.startOffset)}</span>`;
+              curruntIdx += 1;
             }
           }
         } else {
@@ -610,7 +621,14 @@ function defaultBlockBackspaceEvent(e, store, $element) {
       } else {
         e.preventDefault();
         if ($textBlock.tagName !== "P") {
-          $textBlock.insertAdjacentElement("afterend", _createTextBlock($textBlock.textContent));
+          $textBlock.insertAdjacentElement(
+            "afterend",
+            _createTextBlock({
+              type: "text",
+              classList: [],
+              textContent: $textBlock.textContent ?? ""
+            })
+          );
           _setCursor($textBlock.nextElementSibling, 0);
           $textBlock.remove();
         }
@@ -676,17 +694,9 @@ function defaultBlockBackspaceEvent(e, store, $element) {
 function listBlockBackspaceEvent(e, store, $element) {
   const $listBlock = $element;
   const $targetItem = _findContentEditableElement(store.cursorData.startNode);
-  const childList = store.$content.querySelectorAll(".de-block");
   const liList = $listBlock.querySelectorAll(".de-item");
   const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $targetItem);
-  let elementIdx = -1;
   let liIdx = -1;
-  for (let i = 0; childList.length > i; i += 1) {
-    if (childList[i] === $element) {
-      elementIdx = i;
-      break;
-    }
-  }
   for (let i = 0; liList.length > i; i += 1) {
     if (liList[i] === $targetItem) {
       liIdx = i;
@@ -726,6 +736,7 @@ function listBlockBackspaceEvent(e, store, $element) {
             _setCursor($preBlock, 0);
           }
           $targetItem.remove();
+          $listBlock.remove();
         }
       }
     }

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

@@ -1 +1,2 @@
 export declare function _setNodeStyle(className: string, store: any): void;
+export declare function _setTextAlign(type: DETextalign, store: any): void;