dragon-editor 3.4.5 → 3.5.1

package/dist/runtime/utils/event/keyboard.js

@@ -0,0 +1,1368 @@
+import { _updateModelData, _updateCursorData, _setCursor, _sortingCursorDataOnElement, _generateId } from "./index.js";
+import { _getCurrentBlock, _createTextBlock, _createHeadingBlock, _createListBlock, _getParentElementIfNodeIsText, _findContentEditableElement, _createListItemBlock, _updateCurrentBlock, _createCodeBlock } from "../node/index.js";
+import { _getDefaultBlockData } from "../event/index.js";
+import { _setDecoration } from "../style/index.js";
+export function _contentKeydownEvent(event, store) {
+  _updateCurrentBlock(event, store);
+  _updateCursorData(store);
+  switch (event.key) {
+    case "Enter":
+      if (store.value.eventStatus.preComposing === false && event.isComposing === false) {
+        __enterEvent(event, store);
+      } else {
+        if (store.value.eventStatus.keyboardEnterCount % 2 === 0) {
+          __enterEvent(event, store);
+        } else {
+          event.preventDefault();
+        }
+      }
+      store.value.eventStatus.keyboardEnterCount += 1;
+      break;
+    case "Backspace":
+      __backspaceEvent(event, store);
+      break;
+    case "Delete":
+      __deleteEvent(event, store);
+      break;
+    case "Tab":
+      __tabEvent(event, store);
+      break;
+    case " ":
+      __spaceEvent(event, store);
+      break;
+    case "ArrowUp":
+      _moveToBlockEvent(event, store, "up");
+      break;
+    case "ArrowDown":
+      _moveToBlockEvent(event, store, "down");
+      break;
+    case "`":
+      __backtickEvent(event, store);
+      break;
+  }
+  _hotKeyEvent(event, store);
+  store.value.eventStatus.preComposing = event.isComposing;
+}
+export async function _contentPasteEvent(event, store) {
+  event.preventDefault();
+  const text = await navigator.clipboard.readText();
+  const $block = event.target.closest(".de-block");
+  if ($block !== null) {
+    if (text === "") {
+      const clipboardItems = await navigator.clipboard.read();
+      const imageItem = clipboardItems[0].types.find((type) => type.startsWith("image/"));
+      if (imageItem !== void 0) {
+        const blob = await clipboardItems[0].getType(imageItem);
+        const file = new File([blob], `${_generateId()}.${imageItem.split("/")[1]}`);
+        store.value.emit("uploadImageEvent", file);
+      }
+    } else {
+      const selection = window.getSelection();
+      const textNode = document.createTextNode(text);
+      selection.deleteFromDocument();
+      selection.getRangeAt(0).insertNode(textNode);
+      _setCursor(textNode, textNode.length);
+    }
+  }
+}
+function __enterEvent(event, store) {
+  if (event.shiftKey === true) {
+    switch (store.value.controlStatus.currentBlockType) {
+      case "image":
+        event.preventDefault();
+        break;
+      case "code":
+        __codeBlockShiftEnterEvent(event, store);
+        break;
+      case "ol":
+      case "ul":
+        __listBlockShiftEnterEvent(event, store);
+        break;
+      default:
+        __defaultBlockShiftEnterEvent(event, store);
+    }
+  } else {
+    switch (store.value.controlStatus.currentBlockType) {
+      case "image":
+        event.preventDefault();
+        if (store.value.controlStatus.$currentBlock !== null) {
+          const $block = store.value.controlStatus.$currentBlock;
+          const $newTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+          $block.insertAdjacentElement("afterend", $newTextBlock);
+          $newTextBlock.focus();
+        }
+        break;
+      case "code":
+        break;
+      case "ol":
+      case "ul":
+        __listBlockEnterEvent(event, store);
+        break;
+      default:
+        __defaultBlockEnterEvent(event, store);
+    }
+  }
+}
+function __defaultBlockEnterEvent(event, store) {
+  event.preventDefault();
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null) {
+    const cursorData = store.value.cursorData;
+    const $block = store.value.controlStatus.$currentBlock;
+    if (store.value.cursorData.type === "Caret") {
+      if ($block.textContent === "") {
+        if ($block.hasChildNodes() === false) {
+          const $newTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+          $block.insertAdjacentElement("afterend", $newTextBlock);
+          $newTextBlock.focus();
+        } else {
+          const brList = $block.querySelectorAll("br");
+          if (brList.length === 1) {
+            const $newTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+            $block.insertAdjacentElement("afterend", $newTextBlock);
+            $newTextBlock.focus();
+          } else {
+            const $nextTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+            let preStructure = [];
+            let nextStructure = [];
+            brList.forEach((_, i) => {
+              const $br = document.createElement("br");
+              if (cursorData.startOffset < i) {
+                preStructure.push($br);
+              } else {
+                nextStructure.push($br);
+              }
+            });
+            $block.replaceChildren(...preStructure);
+            $block.insertAdjacentElement("afterend", $nextTextBlock);
+            if (nextStructure.length === 0) {
+              $nextTextBlock.focus();
+            } else {
+              if (nextStructure.length === 1) {
+                nextStructure.push(document.createElement("br"));
+              }
+              $nextTextBlock.replaceChildren(...nextStructure);
+              _setCursor(nextStructure[0], 0);
+            }
+          }
+        }
+      } else {
+        const childNodeList = Array.from($block.childNodes);
+        const preStructure = [];
+        const nextStructure = [];
+        const $targetNode = _getParentElementIfNodeIsText(store.value.cursorData.startNode, $block);
+        let nodeIdx = -1;
+        for (let i = 0; childNodeList.length > i; i += 1) {
+          if (childNodeList[i] === $targetNode) {
+            nodeIdx = i;
+            break;
+          }
+        }
+        childNodeList.forEach((node, i) => {
+          if (nodeIdx < i) {
+            nextStructure.push(node);
+          } else if (nodeIdx > i) {
+            preStructure.push(node);
+          } else if (nodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const text = node.textContent;
+              const preText = document.createTextNode(text.slice(0, cursorData.startOffset));
+              const nextText = document.createTextNode(text.slice(cursorData.startOffset));
+              preStructure.push(preText);
+              nextStructure.push(nextText);
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent;
+              const preSpan = document.createElement("span");
+              const nextSpan = document.createElement("span");
+              const nextText = text.slice(cursorData.startOffset);
+              preSpan.classList.add(...originalClassList);
+              preSpan.textContent = text.slice(0, cursorData.startOffset);
+              preStructure.push(preSpan);
+              if (nextText !== "") {
+                nextSpan.classList.add(...originalClassList);
+                nextSpan.textContent = nextText;
+                nextStructure.push(nextSpan);
+              }
+            }
+          }
+        });
+        const $nextTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+        $block.insertAdjacentElement("afterend", $nextTextBlock);
+        $block.replaceChildren(...preStructure);
+        $nextTextBlock.replaceChildren(...nextStructure);
+        if (nextStructure.length === 0) {
+          $nextTextBlock.focus();
+        } else {
+          _setCursor($nextTextBlock.childNodes[0], 0);
+        }
+      }
+    } else {
+      const childNodeList = $block.childNodes;
+      const srotingCursorData = _sortingCursorDataOnElement(cursorData, $block);
+      const preStructure = [];
+      const nextStructure = [];
+      if (srotingCursorData.startNodeIdx === srotingCursorData.endNodeIdx) {
+        childNodeList.forEach((node, i) => {
+          if (srotingCursorData.startNodeIdx > i) {
+            preStructure.push(node);
+          } else if (srotingCursorData.endNodeIdx < i) {
+            nextStructure.push(node);
+          } else if (srotingCursorData.startNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const preText = node.textContent.slice(0, srotingCursorData.startOffset);
+              const nextText = node.textContent.slice(srotingCursorData.endOffset);
+              if (preText !== "") {
+                const textNode = document.createTextNode(preText);
+                preStructure.push(textNode);
+              }
+              if (nextText !== "") {
+                const textNode = document.createTextNode(nextText);
+                nextStructure.push(textNode);
+              }
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const preText = node.textContent.slice(0, srotingCursorData.startOffset);
+              const nextText = node.textContent.slice(srotingCursorData.endOffset);
+              if (preText !== "") {
+                const $span = document.createElement("span");
+                $span.classList.add(...originalClassList);
+                $span.textContent = preText;
+                preStructure.push($span);
+              }
+              if (nextText !== "") {
+                const $span = document.createElement("span");
+                $span.classList.add(...originalClassList);
+                $span.textContent = nextText;
+                nextStructure.push($span);
+              }
+            }
+          }
+        });
+      } else {
+        childNodeList.forEach((node, i) => {
+          if (srotingCursorData.startNodeIdx > i) {
+            preStructure.push(node);
+          } else if (srotingCursorData.startNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const text = node.textContent.slice(0, srotingCursorData.startOffset);
+              if (text !== "") {
+                const textNode = document.createTextNode(text);
+                preStructure.push(textNode);
+              }
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent.slice(0, srotingCursorData.startOffset);
+              if (text !== "") {
+                const $span = document.createElement("span");
+                $span.classList.add(...originalClassList);
+                $span.textContent = text;
+                preStructure.push($span);
+              }
+            }
+          }
+          if (srotingCursorData.endNodeIdx < i) {
+            nextStructure.push(node);
+          } else if (srotingCursorData.endNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const text = node.textContent.slice(srotingCursorData.endOffset);
+              if (text !== "") {
+                const textNode = document.createTextNode(text);
+                nextStructure.push(textNode);
+              }
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent.slice(srotingCursorData.endOffset);
+              const $span = document.createElement("span");
+              if (text !== "") {
+                $span.classList.add(...originalClassList);
+                $span.textContent = text;
+                nextStructure.push($span);
+              }
+            }
+          }
+        });
+        const $nextBlock = _createTextBlock(_getDefaultBlockData("text"));
+        $block.insertAdjacentElement("afterend", $nextBlock);
+        $block.replaceChildren(...preStructure);
+        $nextBlock.replaceChildren(...nextStructure);
+        if (nextStructure.length === 0) {
+          $nextBlock.focus();
+        } else {
+          _setCursor($nextBlock.childNodes[0], 0);
+        }
+      }
+    }
+  } else {
+    console.error("[Dragon Editor] : Something wrong.");
+  }
+}
+function __defaultBlockShiftEnterEvent(event, store) {
+  event.preventDefault();
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null) {
+    const cursorData = store.value.cursorData;
+    const $block = store.value.controlStatus.$currentBlock;
+    if (cursorData.type === "Caret") {
+      if ($block.textContent === "") {
+        if ($block.hasChildNodes() === false) {
+          $block.insertAdjacentHTML("beforeend", "<br><br>");
+          _setCursor($block.childNodes[1], 0);
+        } else {
+          const $br = document.createElement("br");
+          $block.insertAdjacentElement("beforeend", $br);
+          _setCursor($br, 0);
+        }
+      } else {
+        const childList = $block.childNodes;
+        let targetIdx = -1;
+        let structure = "";
+        let $target = cursorData.startNode;
+        if ($target.constructor.name === "Text") {
+          if ($target.parentNode !== $block) {
+            $target = $target.parentNode;
+          }
+        }
+        if ($block === $target) {
+          $target = $block.childNodes[cursorData.startOffset];
+        }
+        for (let i = 0; childList.length > i; i += 1) {
+          if (childList[i] === $target) {
+            targetIdx = i;
+            break;
+          }
+        }
+        let currentIdx = targetIdx;
+        childList.forEach((child, i) => {
+          if (i === targetIdx) {
+            const constructorName = child.constructor.name;
+            if (constructorName === "Text") {
+              structure += child.textContent.slice(0, cursorData.startOffset) + "<br>" + child.textContent.slice(cursorData.endOffset);
+              if (child.nextSibling === null) {
+                if (child.textContent.slice(cursorData.endOffset) === "") {
+                  structure += `<br>`;
+                }
+                if (child.textContent.slice(0, cursorData.startOffset) === "") {
+                  currentIdx -= 1;
+                }
+              } else {
+                if (child.textContent.slice(cursorData.endOffset) !== "" && child.textContent.slice(0, cursorData.startOffset) === "") {
+                  currentIdx -= 1;
+                }
+              }
+              currentIdx += 1;
+            } else {
+              if (constructorName === "HTMLBRElement") {
+                structure += `<br><br>`;
+              } else {
+                structure += `<span class="${Array.from(child.classList).join(" ")}">${child.textContent.slice(0, cursorData.startOffset)}</span>`;
+                structure += `<br>`;
+                structure += `<span class="${Array.from(child.classList).join(" ")}">${child.textContent.slice(cursorData.startOffset)}</span>`;
+                currentIdx += 1;
+              }
+            }
+          } else {
+            if (child.constructor.name === "Text") {
+              structure += child.textContent;
+            } else {
+              structure += child.outerHTML;
+            }
+          }
+        });
+        $block.innerHTML = structure;
+        if ($block.childNodes[currentIdx + 1] === void 0) {
+          $block.insertAdjacentHTML("beforeend", "<br>");
+        }
+        _setCursor($block.childNodes[currentIdx + 1], 0);
+      }
+    } else {
+      const childNodeList = $block.childNodes;
+      const newCursorData = _sortingCursorDataOnElement(cursorData, $block);
+      let structure = "";
+      childNodeList.forEach((node, i) => {
+        if (newCursorData.startNodeIdx > i) {
+          if (node.constructor.name === "Text") {
+            structure += node.textContent;
+          } else {
+            structure += node.outerHTML;
+          }
+        } else if (newCursorData.startNodeIdx === i) {
+          if (node.constructor.name === "Text") {
+            structure += node.textContent.slice(0, newCursorData.startOffset);
+            structure += `<br>`;
+          } else {
+            if (node.tagName === "BR") {
+              structure += `<br>`;
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent;
+              structure += `<span class="${originalClassList.join(" ")}">${text.slice(0, newCursorData.startOffset)}</span><br>`;
+            }
+          }
+          if (childNodeList.length === i) {
+            structure += `<br>`;
+          }
+        }
+        if (newCursorData.endNodeIdx < i) {
+          if (node.constructor.name === "Text") {
+            structure += node.textContent;
+          } else {
+            structure += node.outerHTML;
+          }
+        } else if (newCursorData.endNodeIdx === i) {
+          if (node.constructor.name === "Text") {
+            structure += node.textContent.slice(newCursorData.endOffset);
+          } else {
+            if (node.tagName === "BR") {
+              structure += `<br>`;
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent;
+              structure += `<span class="${originalClassList.join(" ")}">${text.slice(newCursorData.endOffset)}</span><br>`;
+            }
+          }
+        }
+      });
+      $block.innerHTML = structure;
+      _setCursor($block.childNodes[newCursorData.startNodeIdx + 2], 0);
+    }
+  } else {
+    console.error("[Dragon Editor] : Something wrong.");
+  }
+}
+function __listBlockEnterEvent(event, store) {
+  event.preventDefault();
+  if (store.value.controlStatus.$currentBlock !== null && store.value.cursorData !== null) {
+    const cursorData = store.value.cursorData;
+    const $listBlock = store.value.controlStatus.$currentBlock;
+    const $editableElement = _findContentEditableElement(event.target);
+    const liList = $listBlock.querySelectorAll(".de-item");
+    if ($editableElement !== null) {
+      let liIdx = -1;
+      for (let i = 0; liList.length > i; i += 1) {
+        if (liList[i] === $editableElement) {
+          liIdx = i;
+          break;
+        }
+      }
+      if (cursorData.type === "Caret") {
+        if ($editableElement.textContent === "") {
+          if ($editableElement.hasChildNodes() === false) {
+            if (liList.length - 1 === liIdx) {
+              $changeToTextBlock($listBlock, liList.length, $editableElement);
+            } else {
+              const $liBlock = _createListItemBlock();
+              $editableElement.insertAdjacentElement("afterend", $liBlock);
+              $liBlock.focus();
+            }
+          } else {
+            const brList = $editableElement.querySelectorAll("br");
+            if (brList.length === 1) {
+            } else {
+            }
+          }
+        } else {
+          const childNodeList = $editableElement.childNodes;
+          const targetNode = _getParentElementIfNodeIsText(cursorData.startNode, $editableElement);
+          const preStructure = [];
+          const nextStructure = [];
+          let nodeIdx = -1;
+          for (let i = 0; childNodeList.length > i; i += 1) {
+            if (childNodeList[i] === targetNode) {
+              nodeIdx = i;
+              break;
+            }
+          }
+          childNodeList.forEach((node, i) => {
+            if (nodeIdx < i) {
+              nextStructure.push(node);
+            } else if (nodeIdx > i) {
+              preStructure.push(node);
+            } else if (nodeIdx === i) {
+              if (node.constructor.name === "Text") {
+                const preText = node.textContent.slice(0, cursorData.startOffset);
+                const nextText = node.textContent.slice(cursorData.endOffset);
+                if (preText !== "") {
+                  preStructure.push(document.createTextNode(preText));
+                }
+                if (nextText !== "") {
+                  nextStructure.push(document.createTextNode(nextText));
+                }
+              } else {
+                const originalClassList = Array.from(node.classList);
+                const preText = node.textContent.slice(0, cursorData.startOffset);
+                const nextText = node.textContent.slice(cursorData.endOffset);
+                if (preText !== "") {
+                  const $span = document.createElement("span");
+                  $span.textContent = preText;
+                  $span.classList.add(...originalClassList);
+                  preStructure.push($span);
+                }
+                if (nextText !== "") {
+                  const $span = document.createElement("span");
+                  $span.textContent = nextText;
+                  $span.classList.add(...originalClassList);
+                  nextStructure.push($span);
+                }
+              }
+            }
+          });
+          const $liBlock = _createListItemBlock();
+          $editableElement.insertAdjacentElement("afterend", $liBlock);
+          $editableElement.replaceChildren(...preStructure);
+          $liBlock.replaceChildren(...nextStructure);
+          if (nextStructure.length === 0) {
+            $liBlock.focus();
+          } else {
+            _setCursor($liBlock.childNodes[0], 0);
+          }
+        }
+      } else {
+        const childNodeList = $editableElement.childNodes;
+        const newCursorData = _sortingCursorDataOnElement(cursorData, $editableElement);
+        const preStructure = [];
+        const nextStructure = [];
+        childNodeList.forEach((node, i) => {
+          if (newCursorData.startNodeIdx > i) {
+            preStructure.push(node);
+          } else if (newCursorData.startNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const text = node.textContent.slice(0, newCursorData.startOffset);
+              if (text !== "") {
+                const $textNode = document.createTextNode(text);
+                preStructure.push($textNode);
+              }
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent.slice(0, newCursorData.startOffset);
+              if (text !== "") {
+                const $span = document.createElement("span");
+                $span.classList.add(...originalClassList);
+                $span.textContent = text;
+                preStructure.push($span);
+              }
+            }
+          }
+          if (newCursorData.endNodeIdx < i) {
+            nextStructure.push(node);
+          } else if (newCursorData.endNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              const text = node.textContent.slice(newCursorData.endOffset);
+              if (text !== "") {
+                const $textNode = document.createTextNode(text);
+                nextStructure.push($textNode);
+              }
+            } else {
+              const originalClassList = Array.from(node.classList);
+              const text = node.textContent.slice(newCursorData.endOffset);
+              if (text !== "") {
+                const $span = document.createElement("span");
+                $span.classList.add(...originalClassList);
+                $span.textContent = text;
+                nextStructure.push($span);
+              }
+            }
+          }
+        });
+        const $liBlock = _createListItemBlock();
+        $editableElement.insertAdjacentElement("afterend", $liBlock);
+        $editableElement.replaceChildren(...preStructure);
+        if (nextStructure.length === 0) {
+          $liBlock.focus();
+        } else {
+          $liBlock.replaceChildren(...nextStructure);
+          _setCursor(nextStructure[0], 0);
+        }
+      }
+    }
+  }
+  function $changeToTextBlock($listBlock, licount, $editableElement) {
+    const $textBlock = _createTextBlock(_getDefaultBlockData("text"));
+    $listBlock.insertAdjacentElement("afterend", $textBlock);
+    if (licount === 1) {
+      $listBlock.remove();
+    } else {
+      $editableElement.remove();
+    }
+    $textBlock.focus();
+  }
+}
+function __listBlockShiftEnterEvent(event, store) {
+  event.preventDefault();
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null) {
+    const cursorData = store.value.cursorData;
+    const $editableElement = _findContentEditableElement(event.target);
+    if ($editableElement !== null) {
+      if (cursorData.type === "Caret") {
+        if ($editableElement.textContent === "") {
+          if ($editableElement.hasChildNodes() === false) {
+            $editableElement.insertAdjacentHTML("beforeend", "<br><br>");
+            _setCursor($editableElement.childNodes[1], 0);
+          } else {
+            const $br = document.createElement("br");
+            $editableElement.insertAdjacentElement("beforeend", $br);
+            _setCursor($br, 0);
+          }
+        } else {
+          const childList = $editableElement.childNodes;
+          let targetIdx = -1;
+          let structure = "";
+          let $target = cursorData.startNode;
+          if ($target.constructor.name === "Text") {
+            if ($target.parentNode !== $editableElement) {
+              $target = $target.parentNode;
+            }
+          }
+          if ($editableElement === $target) {
+            $target = $editableElement.childNodes[cursorData.startOffset];
+          }
+          for (let i = 0; childList.length > i; i += 1) {
+            if (childList[i] === $target) {
+              targetIdx = i;
+              break;
+            }
+          }
+          let currentIdx = targetIdx;
+          childList.forEach((child, i) => {
+            if (i === targetIdx) {
+              const constructorName = child.constructor.name;
+              if (constructorName === "Text") {
+                structure += child.textContent.slice(0, cursorData.startOffset) + "<br>" + child.textContent.slice(cursorData.endOffset);
+                if (child.nextSibling === null) {
+                  if (child.textContent.slice(cursorData.endOffset) === "") {
+                    structure += `<br>`;
+                  }
+                  if (child.textContent.slice(0, cursorData.startOffset) === "") {
+                    currentIdx -= 1;
+                  }
+                } else {
+                  if (child.textContent.slice(cursorData.endOffset) !== "" && child.textContent.slice(0, cursorData.startOffset) === "") {
+                    currentIdx -= 1;
+                  }
+                }
+                currentIdx += 1;
+              } else {
+                if (constructorName === "HTMLBRElement") {
+                  structure += `<br><br>`;
+                } else {
+                  structure += `<span class="${Array.from(child.classList).join(" ")}">${child.textContent.slice(0, cursorData.startOffset)}</span>`;
+                  structure += `<br>`;
+                  structure += `<span class="${Array.from(child.classList).join(" ")}">${child.textContent.slice(cursorData.startOffset)}</span>`;
+                  currentIdx += 1;
+                }
+              }
+            } else {
+              if (child.constructor.name === "Text") {
+                structure += child.textContent;
+              } else {
+                structure += child.outerHTML;
+              }
+            }
+          });
+          $editableElement.innerHTML = structure;
+          _setCursor($editableElement.childNodes[currentIdx + 1], 0);
+        }
+      } else {
+        const childNodeList = $editableElement.childNodes;
+        const newCursorData = _sortingCursorDataOnElement(cursorData, $editableElement);
+        let structure = "";
+        childNodeList.forEach((node, i) => {
+          if (newCursorData.startNodeIdx > i) {
+            if (node.constructor.name === "Text") {
+              structure += node.textContent;
+            } else {
+              structure += node.outerHTML;
+            }
+          } else if (newCursorData.startNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              structure += node.textContent.slice(0, newCursorData.startOffset);
+              structure += `<br>`;
+            } else {
+              if (node.tagName === "BR") {
+                structure += `<br>`;
+              } else {
+                const originalClassList = Array.from(node.classList);
+                const text = node.textContent;
+                structure += `<span class="${originalClassList.join(" ")}">${text.slice(0, newCursorData.startOffset)}</span><br>`;
+              }
+            }
+            if (childNodeList.length === i) {
+              structure += `<br>`;
+            }
+          }
+          if (newCursorData.endNodeIdx < i) {
+            if (node.constructor.name === "Text") {
+              structure += node.textContent;
+            } else {
+              structure += node.outerHTML;
+            }
+          } else if (newCursorData.endNodeIdx === i) {
+            if (node.constructor.name === "Text") {
+              structure += node.textContent.slice(newCursorData.endOffset);
+            } else {
+              if (node.tagName === "BR") {
+                structure += `<br>`;
+              } else {
+                const originalClassList = Array.from(node.classList);
+                const text = node.textContent;
+                structure += `<span class="${originalClassList.join(" ")}">${text.slice(newCursorData.endOffset)}</span><br>`;
+              }
+            }
+          }
+        });
+        $editableElement.innerHTML = structure;
+        _setCursor($editableElement.childNodes[newCursorData.startNodeIdx + 2], 0);
+      }
+    }
+  } else {
+    console.error("[Dragon Editor] : Something wrong.");
+  }
+}
+function __codeBlockShiftEnterEvent(event, store) {
+  event.preventDefault();
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const $block = store.value.controlStatus.$currentBlock;
+    const $newTextBlock = _createTextBlock(_getDefaultBlockData("text"));
+    $block.insertAdjacentElement("afterend", $newTextBlock);
+    $newTextBlock.focus();
+  }
+}
+function __backspaceEvent(event, store) {
+  switch (store.value.controlStatus.currentBlockType) {
+    case "image":
+    case "code":
+      break;
+    case "ol":
+    case "ul":
+      ___listBlockBackspaceEvent(event, store);
+      break;
+    default:
+      ___defaultBlockBackspaceEvent(event, store);
+  }
+}
+function ___defaultBlockBackspaceEvent(event, store) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const cursorData = store.value.cursorData;
+    const childList = store.value.$body.querySelectorAll(".de-block");
+    const $block = store.value.controlStatus.$currentBlock;
+    let $target = cursorData.startNode;
+    let elementIdx = -1;
+    for (let i = 0; childList.length > i; i += 1) {
+      if (childList[i] === $block) {
+        elementIdx = i;
+        break;
+      }
+    }
+    if ($target.constructor.name === "Text") {
+      $target = $target.parentNode;
+    }
+    if (elementIdx === 0) {
+      if (cursorData.startOffset === 0 && $target === $block) {
+        if ($target.textContent === "") {
+          $block.insertAdjacentElement("afterend", _createTextBlock(_getDefaultBlockData("text")));
+          _setCursor($block.nextElementSibling, 0);
+          $block.remove();
+        } else {
+          event.preventDefault();
+          if (store.value.controlStatus.currentBlockType !== "text") {
+            const $newBlock = _createTextBlock({ type: "text", classList: [], textContent: $block.textContent ?? "" });
+            $block.insertAdjacentElement("afterend", $newBlock);
+            _setCursor($newBlock, 0);
+            $block.remove();
+          }
+        }
+      }
+    } else {
+      if ($block.textContent === "") {
+        event.preventDefault();
+        let hasChild = false;
+        let childHTML = "";
+        if ($block.hasChildNodes() === true) {
+          const $brList = $block.querySelectorAll("br");
+          if ($brList.length > 1) {
+            hasChild = true;
+            childHTML = $block.innerHTML;
+          }
+        }
+        ____backspackeLogic(hasChild, childHTML, $block, $block);
+      } else {
+        if (cursorData.type === "Caret" && cursorData.startOffset === 0 && ($block.childNodes[0] === cursorData.startNode || $block.childNodes[0] === $target)) {
+          event.preventDefault();
+          let childHTML = $block.innerHTML;
+          ____backspackeLogic(true, childHTML, $block, $block);
+        }
+      }
+    }
+    ____nodeBackspaceEvent(event, cursorData, $block, $target);
+    _updateCursorData(store);
+  }
+}
+function ___listBlockBackspaceEvent(event, store) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const cursorData = store.value.cursorData;
+    const $listBlock = store.value.controlStatus.$currentBlock;
+    const $targetItem = _findContentEditableElement(cursorData.startNode);
+    const $liList = $listBlock.querySelectorAll(".de-item");
+    let $target = cursorData.startNode;
+    let liIdx = -1;
+    if ($target.constructor.name === "Text") {
+      $target = $target.parentNode;
+    }
+    for (let i = 0; $liList.length > i; i += 1) {
+      if ($liList[i] === $targetItem) {
+        liIdx = i;
+        break;
+      }
+    }
+    if ($liList.length === 1) {
+      if ($targetItem.textContent === "") {
+        event.preventDefault();
+        let hasChild = false;
+        let childHTML = "";
+        if ($targetItem.hasChildNodes() === true) {
+          const $brList = $targetItem.querySelectorAll("br");
+          if ($brList.length > 1) {
+            hasChild = true;
+            childHTML = $targetItem.innerHTML;
+          }
+        }
+        ____backspackeLogic(hasChild, childHTML, $listBlock, $targetItem);
+        $listBlock.remove();
+      } else {
+        if (cursorData.type === "Caret" && cursorData.startOffset === 0 && ($targetItem.childNodes[0] === cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+          event.preventDefault();
+          let childHTML = $targetItem.innerHTML;
+          ____backspackeLogic(true, childHTML, $listBlock, $targetItem);
+          $listBlock.remove();
+        }
+      }
+    } else {
+      if (liIdx === 0) {
+        if ($targetItem.textContent === "") {
+          event.preventDefault();
+          let hasChild = false;
+          let childHTML = "";
+          if ($targetItem.hasChildNodes() === true) {
+            const $brList = $targetItem.querySelectorAll("br");
+            if ($brList.length > 1) {
+              hasChild = true;
+              childHTML = $targetItem.innerHTML;
+            }
+          }
+          ____backspackeLogic(hasChild, childHTML, $listBlock, $targetItem);
+        } else {
+          if (cursorData.type === "Caret" && cursorData.startOffset === 0 && ($targetItem.childNodes[0] === cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+            event.preventDefault();
+            let childHTML = $targetItem.innerHTML;
+            ____backspackeLogic(true, childHTML, $listBlock, $targetItem);
+          }
+        }
+      } else {
+        if ($targetItem.textContent === "") {
+          event.preventDefault();
+          const $preLi = $targetItem.previousElementSibling;
+          const hasChild = $preLi.hasChildNodes();
+          let childHTML = "";
+          if ($targetItem.hasChildNodes() === true) {
+            const $brList = $targetItem.querySelectorAll("br");
+            if ($brList.length > 1) {
+              childHTML = $targetItem.innerHTML;
+            }
+          }
+          if ($preLi.hasChildNodes() === true) {
+            const textBlockChildList = $preLi.childNodes;
+            const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+            if (hasChild === true) {
+              $preLi.insertAdjacentHTML("beforeend", childHTML);
+            }
+            _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+          } else {
+            if (hasChild === true) {
+              $preLi.insertAdjacentHTML("beforeend", childHTML);
+            }
+            _setCursor($preLi, 0);
+          }
+          $targetItem.remove();
+        } else {
+          if (cursorData.type === "Caret" && cursorData.startOffset === 0 && ($targetItem.childNodes[0] === cursorData.startNode || $targetItem.childNodes[0] === $target)) {
+            event.preventDefault();
+            const $preLi = $targetItem.previousElementSibling;
+            const hasChild = $preLi.hasChildNodes();
+            let childHTML = $targetItem.innerHTML;
+            if ($preLi.hasChildNodes() === true) {
+              const textBlockChildList = $preLi.childNodes;
+              const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+              if (hasChild === true) {
+                $preLi.insertAdjacentHTML("beforeend", childHTML);
+              }
+              _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+            } else {
+              if (hasChild === true) {
+                $preLi.insertAdjacentHTML("beforeend", childHTML);
+              }
+              _setCursor($preLi, 0);
+            }
+            $targetItem.remove();
+          }
+        }
+      }
+    }
+  }
+}
+function ____backspackeLogic(hasChild, childHTML, $block, $targetItem) {
+  const $preBlock = $block.previousElementSibling;
+  if ($preBlock !== null) {
+    const { type: preBlockType } = _getCurrentBlock($preBlock);
+    let preDelete = false;
+    let $targetBlock = $preBlock;
+    switch (preBlockType) {
+      case "custom":
+      case "image":
+      case "code":
+        preDelete = true;
+        break;
+      case "ul":
+      case "ol":
+        const $liList = $preBlock.querySelectorAll(".de-item");
+        $targetBlock = $liList[$liList.length - 1];
+        break;
+      default:
+        $targetBlock = $preBlock;
+    }
+    if (preDelete === false) {
+      if ($targetBlock.hasChildNodes() === true) {
+        const textBlockChildList = $targetBlock.childNodes;
+        const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
+        if (hasChild === true) {
+          $targetBlock.insertAdjacentHTML("beforeend", childHTML);
+        }
+        _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
+      } else {
+        if (hasChild === true) {
+          $targetBlock.insertAdjacentHTML("beforeend", childHTML);
+        }
+        _setCursor($targetBlock, 0);
+      }
+      $targetItem.remove();
+    } else {
+      $preBlock.remove();
+    }
+  } else {
+    const newTextBlockData = _getDefaultBlockData("text");
+    newTextBlockData.textContent = childHTML;
+    const $newTextBlock = _createTextBlock(newTextBlockData);
+    $block.insertAdjacentElement("afterend", $newTextBlock);
+    $newTextBlock.focus();
+    $block.remove();
+  }
+}
+function ____nodeBackspaceEvent(event, cursorData, $block, $target) {
+  if (cursorData.startOffset === 1 && $target !== $block) {
+    if ($target.textContent.length === 1) {
+      event.preventDefault();
+      const preNode = $target.previousSibling;
+      if (preNode !== null) {
+        $target.remove();
+        _setCursor(preNode, preNode.textContent.length);
+      } else {
+        if ($block.childNodes[1] === void 0) {
+          $block.innerHTML = "";
+          _setCursor($block, 0);
+        } else {
+          _setCursor($block.childNodes[1], 0);
+          $target.remove();
+        }
+      }
+    }
+  }
+}
+function __tabEvent(event, store) {
+  event.preventDefault();
+  switch (store.value.controlStatus.currentBlockType) {
+    case "code":
+    case "custom":
+    case "image":
+      break;
+    default:
+      if (event.shiftKey === true) {
+        _setIndent(store, "minus");
+      } else {
+        _setIndent(store, "plus");
+      }
+  }
+}
+export function _setIndent(store, type) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const $block = store.value.controlStatus.$currentBlock;
+    let value = $block.dataset["depth"] === void 0 ? 0 : parseInt($block.dataset["depth"]);
+    if (type === "minus") {
+      if (value !== 0) {
+        value -= 1;
+      }
+    } else {
+      if (value < 5) {
+        value += 1;
+      }
+    }
+    if (value === 0) {
+      delete $block.dataset["depth"];
+    } else {
+      $block.dataset["depth"] = String(value);
+    }
+    _updateModelData(store);
+  }
+}
+function __deleteEvent(event, store) {
+  switch (store.value.controlStatus.currentBlockType) {
+    case "image":
+    case "code":
+      break;
+    case "ol":
+    case "ul":
+      ___listBlockDeleteEvent(event, store);
+      break;
+    default:
+      ___defaultBlockDeleteEvent(event, store);
+  }
+}
+function ___defaultBlockDeleteEvent(event, store) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const cursorData = store.value.cursorData;
+    const $block = store.value.controlStatus.$currentBlock;
+    let $target = cursorData.startNode;
+    if ($target.constructor.name === "Text") {
+      $target = $target.parentNode;
+    }
+    if ($block.textContent === "") {
+      event.preventDefault();
+      let hasChild = false;
+      if ($block.hasChildNodes() === true) {
+        const $brList = $block.querySelectorAll("br");
+        if ($brList.length === 1) {
+          $block.innerHTML = "";
+        } else {
+          hasChild = true;
+        }
+      }
+      ____deleteLogic($block, $block);
+    } else {
+      const lastChild = $block.childNodes[$block.childNodes.length - 1];
+      if (cursorData.type === "Caret" && lastChild !== void 0 && lastChild.textContent && cursorData.startOffset === lastChild.textContent.length && (lastChild === cursorData.startNode || lastChild === $target)) {
+        event.preventDefault();
+        ____deleteLogic($block, $block);
+      }
+    }
+  }
+}
+function ___listBlockDeleteEvent(event, store) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const cursorData = store.value.cursorData;
+    const $listBlock = store.value.controlStatus.$currentBlock;
+    const $targetItem = _findContentEditableElement(cursorData.startNode);
+    const $liList = $listBlock.querySelectorAll(".de-item");
+    let $target = cursorData.startNode;
+    let liIdx = -1;
+    if ($target.constructor.name === "Text") {
+      $target = $target.parentNode;
+    }
+    for (let i = 0; $liList.length > i; i += 1) {
+      if ($liList[i] === $targetItem) {
+        liIdx = i;
+        break;
+      }
+    }
+    if ($liList.length === 1) {
+      if ($targetItem.textContent === "") {
+        event.preventDefault();
+        ____deleteLogic($targetItem, $listBlock);
+      } else {
+        const lastChild = $targetItem.childNodes[$targetItem.childNodes.length - 1];
+        if (cursorData.type === "Caret" && lastChild !== void 0 && lastChild.textContent && cursorData.startOffset === lastChild.textContent.length && (lastChild === cursorData.startNode || lastChild === $target)) {
+          event.preventDefault();
+          ____deleteLogic($targetItem, $listBlock);
+        }
+      }
+    } else {
+      const $nextLi = $targetItem.nextElementSibling;
+      if ($nextLi === null) {
+        if ($targetItem.textContent === "") {
+          event.preventDefault();
+          ____deleteLogic($targetItem, $listBlock);
+        } else {
+          const lastChild = $targetItem.childNodes[$targetItem.childNodes.length - 1];
+          if (cursorData.type === "Caret" && lastChild !== void 0 && lastChild.textContent && cursorData.startOffset === lastChild.textContent.length && (lastChild === cursorData.startNode || lastChild === $target)) {
+            event.preventDefault();
+            ____deleteLogic($targetItem, $listBlock);
+          }
+        }
+      } else {
+        if ($targetItem.textContent === "") {
+          event.preventDefault();
+          ____deleteLogic($targetItem, $targetItem);
+        } else {
+          const lastChild = $targetItem.childNodes[$targetItem.childNodes.length - 1];
+          if (cursorData.type === "Caret" && lastChild !== void 0 && lastChild.textContent && cursorData.startOffset === lastChild.textContent.length && (lastChild === cursorData.startNode || lastChild === $target)) {
+            event.preventDefault();
+            ____deleteLogic($targetItem, $targetItem);
+          }
+        }
+      }
+    }
+  }
+}
+function ____deleteLogic($targetElement, $block) {
+  let $nextBlock = $block.nextElementSibling;
+  if ($nextBlock !== null) {
+    const { type: nextBlockType } = _getCurrentBlock($nextBlock);
+    let nextDelete = false;
+    switch (nextBlockType) {
+      case "custom":
+      case "image":
+      case "code":
+        nextDelete = true;
+        break;
+      case "ul":
+      case "ol":
+        if ($block.tagName !== "LI") {
+          const $liList = $nextBlock.querySelectorAll(".de-item");
+          $nextBlock = $liList[0];
+        }
+        break;
+    }
+    if (nextDelete === false) {
+      if ($nextBlock.hasChildNodes() === true) {
+        const childHTML = $nextBlock.innerHTML;
+        if ($targetElement.hasChildNodes() === true) {
+          $targetElement.insertAdjacentHTML("beforeend", childHTML);
+        } else {
+          $targetElement.innerHTML = childHTML;
+        }
+      }
+      $nextBlock.remove();
+    } else {
+      $nextBlock.remove();
+    }
+  }
+}
+function __spaceEvent(event, store) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const cursorData = store.value.cursorData;
+    const $block = store.value.controlStatus.$currentBlock;
+    const $targetItem = _findContentEditableElement(cursorData.startNode);
+    if (store.value.controlStatus.currentBlockType === "text" && $targetItem !== null && $targetItem.textContent !== "") {
+      switch ($targetItem.textContent) {
+        case "#":
+          event.preventDefault();
+          const $newHeading1Block = _createHeadingBlock(_getDefaultBlockData("heading1"));
+          $block.insertAdjacentElement("afterend", $newHeading1Block);
+          $newHeading1Block.focus();
+          $block.remove();
+          break;
+        case "##":
+          event.preventDefault();
+          const $newHeading2Block = _createHeadingBlock(_getDefaultBlockData("heading2"));
+          $block.insertAdjacentElement("afterend", $newHeading2Block);
+          $newHeading2Block.focus();
+          $block.remove();
+          break;
+        case "###":
+          event.preventDefault();
+          const $newHeading3Block = _createHeadingBlock(_getDefaultBlockData("heading3"));
+          $block.insertAdjacentElement("afterend", $newHeading3Block);
+          $newHeading3Block.focus();
+          $block.remove();
+          break;
+        case "-":
+          event.preventDefault();
+          const $newUlBlock = _createListBlock(_getDefaultBlockData("ul"));
+          $block.insertAdjacentElement("afterend", $newUlBlock);
+          $newUlBlock.children[0].focus();
+          $block.remove();
+          break;
+        case "1.":
+          event.preventDefault();
+          const $newOlBlock = _createListBlock(_getDefaultBlockData("ol"));
+          $block.insertAdjacentElement("afterend", $newOlBlock);
+          $newOlBlock.children[0].focus();
+          $block.remove();
+          break;
+      }
+    }
+  }
+}
+function _moveToBlockEvent(event, store, keyType) {
+  if (store.value.cursorData !== null && store.value.controlStatus.$currentBlock !== null) {
+    const cursorData = store.value.cursorData;
+    const $editableElement = _findContentEditableElement(cursorData.startNode);
+    const $block = store.value.controlStatus.$currentBlock;
+    if ($editableElement !== null && $block !== null) {
+      const $brList = $editableElement.querySelectorAll("br");
+      let $targetElement = null;
+      let suitable = false;
+      if ($brList.length !== 0) {
+        if (keyType === "up") {
+          suitable = __isCursorFirstLine(cursorData.startNode, $brList[0]);
+        } else {
+          suitable = __isCursorLastLine(cursorData.startNode, $brList[$brList.length - 1]);
+        }
+      } else {
+        suitable = true;
+      }
+      if (suitable === true) {
+        switch (store.value.controlStatus.currentBlockType) {
+          case "code":
+            break;
+          case "ol":
+          case "ul":
+            if (keyType === "up") {
+              $targetElement = $editableElement.previousElementSibling;
+              if ($targetElement === null) {
+                $targetElement = $block.previousElementSibling;
+              }
+            } else {
+              $targetElement = $editableElement.nextElementSibling;
+              if ($targetElement === null) {
+                $targetElement = $block.nextElementSibling;
+              }
+            }
+            break;
+          default:
+            if (keyType === "up") {
+              $targetElement = $block.previousElementSibling;
+            } else {
+              $targetElement = $block.nextElementSibling;
+            }
+        }
+        if ($targetElement !== null) {
+          const { type, $element } = _getCurrentBlock($targetElement);
+          switch (type) {
+            case "image":
+              if ($element !== null) {
+                const $caption = $element.querySelector(".de-caption");
+                if ($caption !== null) {
+                  $targetElement = $caption;
+                }
+              }
+              break;
+            case "ol":
+            case "ul":
+              if ($targetElement.tagName !== "LI" && $element !== null) {
+                const $childList = $element.querySelectorAll(".de-item");
+                if (keyType === "up") {
+                  $targetElement = $childList[$childList.length - 1];
+                } else {
+                  $targetElement = $childList[0];
+                }
+              }
+              break;
+          }
+          _setCursor($targetElement, 0);
+        }
+      }
+    }
+  }
+}
+function __isCursorFirstLine(node, $br) {
+  let suitable = false;
+  let $previousNode = $br.previousSibling;
+  if ($previousNode !== null) {
+    if ($previousNode === node) {
+      suitable = true;
+    } else {
+      suitable = __isCursorFirstLine(node, $previousNode);
+    }
+  }
+  return suitable;
+}
+function __isCursorLastLine(node, $br) {
+  let suitable = false;
+  let $nextNode = $br.nextSibling;
+  if ($nextNode !== null) {
+    if ($nextNode === node) {
+      suitable = true;
+    } else {
+      suitable = __isCursorLastLine(node, $nextNode);
+    }
+  }
+  return suitable;
+}
+export function _hotKeyEvent(event, store) {
+  const isControlKeyActive = event.ctrlKey || event.metaKey;
+  if (isControlKeyActive === true) {
+    switch (event.key) {
+      case "b":
+        event.preventDefault();
+        _setDecoration("de-bold", store);
+        break;
+      case "i":
+        event.preventDefault();
+        _setDecoration("de-italic", store);
+        break;
+      case "u":
+        event.preventDefault();
+        _setDecoration("de-underline", store);
+        break;
+      case "s":
+        if (event.shiftKey === true) {
+          event.preventDefault();
+          _setDecoration("de-strikethrough", store);
+        }
+        break;
+      case "c":
+        if (event.shiftKey === true) {
+          event.preventDefault();
+          _setDecoration("de-code", store);
+        }
+        break;
+    }
+  }
+}
+function __backtickEvent(event, store) {
+  if (store.value.controlStatus.$currentBlock !== null && store.value.controlStatus.currentBlockType === "text") {
+    const $block = store.value.controlStatus.$currentBlock;
+    if ($block.textContent === "``") {
+      event.preventDefault();
+      const $newBlock = _createCodeBlock(_getDefaultBlockData("code"), store);
+      $block.insertAdjacentElement("afterend", $newBlock);
+      $block.remove();
+      const $code = $newBlock.querySelector(".de-code-content");
+      if ($code !== null) {
+        _setCursor($code, 0);
+      }
+    }
+  }
+}
+let contentKeyupEvent;
+export function _contentKeyupEvent(event, store) {
+  _updateCurrentBlock(event, store);
+  _updateCursorData(store);
+  __checkBlock(store);
+  store.value.eventStatus.keyboardEnterCount = 0;
+  clearTimeout(contentKeyupEvent);
+  contentKeyupEvent = setTimeout(() => {
+    _updateModelData(store);
+  }, 250);
+}
+function __checkBlock(store) {
+  if (store.value.$body !== null) {
+    const blockList = store.value.$body.querySelectorAll(".de-block");
+    blockList.forEach(($block) => {
+      const { type } = _getCurrentBlock($block);
+      switch (type) {
+        case "ol":
+        case "ul":
+          if ($block.hasChildNodes() === false) {
+            $block.remove();
+          }
+          break;
+        case "text":
+        case "heading":
+          if ($block.textContent === "" && $block.hasChildNodes() === true) {
+            const textNodeType = $block.childNodes[0].constructor.name;
+            if (textNodeType === "HTMLBRElement") {
+              $block.innerHTML = "";
+            }
+          }
+          break;
+      }
+    });
+  }
+}