dragon-editor 3.8.6 → 4.0.0

package/dist/runtime/utils/data/block.js

@@ -0,0 +1,663 @@
+import { nextTick } from "#imports";
+import { useEditorStore } from "../../store/editor.js";
+import { _setCursorPosition } from "../event/index.js";
+import { _generateId, _getEditorbleCursorPosition } from "../data/index.js";
+import { _findEditableElement, _findEditableParent, _findParentBlock } from "../node/index.js";
+export function _arrangementContentData(data) {
+  const editorStore = useEditorStore();
+  data.forEach((block) => {
+    switch (block.type) {
+      case "text":
+        if (block.textContent === "<br>") {
+          block.textContent = "";
+        }
+        break;
+      case "heading":
+        if (block.textContent === "<br>") {
+          block.textContent = "";
+        }
+        break;
+      case "list":
+        if ("classList" in block) {
+          delete block.classList;
+        }
+        if ("style" in block) {
+          delete block.style;
+        }
+        block.child.forEach((child) => {
+          if (child.textContent === "<br>") {
+            child.textContent = "";
+          }
+        });
+        break;
+      case "image":
+        if ("width" in block) {
+          delete block.width;
+        }
+        if ("height" in block) {
+          delete block.height;
+        }
+        if (editorStore.option.mediaHostURL !== "") {
+          block.src = block.src.replace(editorStore.option.mediaHostURL, "");
+        }
+        if (block.caption === "<br>") {
+          block.caption = "";
+        }
+        break;
+      case "code":
+        if ("classList" in block) {
+          delete block.classList;
+        }
+        if ("theme" in block) {
+          delete block.theme;
+        }
+        if (block.filename === "<br>") {
+          block.filename = "";
+        }
+        if (block.textContent === "<br>") {
+          block.textContent = "";
+        }
+        break;
+      case "custom":
+        if ("classList" in block) {
+          delete block.classList;
+        }
+        break;
+    }
+  });
+  return data;
+}
+export function _createTextBlockData(textContent = "") {
+  return {
+    id: _generateId(),
+    classList: [],
+    type: "text",
+    textContent
+  };
+}
+export function _createHeadingBlockData(level, textContent = "") {
+  return {
+    id: _generateId(),
+    type: "heading",
+    classList: [],
+    level,
+    textContent
+  };
+}
+export function _createListBlockData(element, childList = [_createListBlockChildData()]) {
+  return {
+    id: _generateId(),
+    type: "list",
+    element,
+    child: childList
+  };
+}
+export function _createListBlockChildData(textContent = "", depth = 0) {
+  return { id: _generateId(), classList: [], depth: depth === 0 ? void 0 : depth, textContent };
+}
+export function _createImageBlockData(src, caption = "", useHost = true) {
+  const editorStore = useEditorStore();
+  return {
+    id: _generateId(),
+    type: "image",
+    classList: [],
+    maxWidth: 50,
+    src: useHost === true ? editorStore.option.mediaHostURL + src : src,
+    caption
+  };
+}
+export function _createCodeBlockData(language = "text", textContent = "", filename = "") {
+  return {
+    id: _generateId(),
+    type: "code",
+    language,
+    filename,
+    textContent
+  };
+}
+export function _createDividerBlockData() {
+  return {
+    id: _generateId(),
+    type: "divider"
+  };
+}
+export function _createCustomBlockData(textContent = "") {
+  return {
+    id: _generateId(),
+    type: "custom",
+    textContent
+  };
+}
+export function _getBlockType($block) {
+  let type = "text";
+  switch (true) {
+    case $block.classList.contains("de-text-block"):
+      type = "text";
+      break;
+    case $block.classList.contains("de-heading-block"):
+      type = "heading";
+      break;
+    case $block.classList.contains("de-list-block"):
+      type = "list";
+      break;
+    case $block.classList.contains("de-image-block"):
+      type = "image";
+      break;
+    case $block.classList.contains("de-code-block"):
+      type = "code";
+      break;
+    case $block.classList.contains("de-custom-block"):
+      type = "custom";
+      break;
+    case $block.classList.contains("de-divider-block"):
+      type = "divider";
+      break;
+  }
+  return type;
+}
+export async function _addBlock(name, textContent = "") {
+  const editorStore = useEditorStore();
+  const newData = JSON.parse(JSON.stringify(editorStore.data));
+  let newBlock = _createTextBlockData(textContent);
+  let targetIndex = editorStore.selectedBlockIndex;
+  if (editorStore.fn.updateEditorData !== null && editorStore.element.body !== null) {
+    switch (name) {
+      case "text":
+        newBlock = _createTextBlockData(textContent);
+        break;
+      case "heading1":
+        newBlock = _createHeadingBlockData(1, textContent);
+        break;
+      case "heading2":
+        newBlock = _createHeadingBlockData(2, textContent);
+        break;
+      case "heading3":
+        newBlock = _createHeadingBlockData(3, textContent);
+        break;
+      case "unordered-list":
+        newBlock = _createListBlockData("ul", [_createListBlockChildData(textContent)]);
+        break;
+      case "ordered-list":
+        newBlock = _createListBlockData("ol", [_createListBlockChildData(textContent)]);
+        break;
+      case "code":
+        newBlock = _createCodeBlockData("text", textContent);
+        break;
+      case "custom":
+        newBlock = _createCustomBlockData(textContent);
+        break;
+      case "divider":
+        newBlock = _createDividerBlockData();
+        break;
+    }
+    if (targetIndex === -1) {
+      newData.push(newBlock);
+      targetIndex = newData.length - 1;
+    } else {
+      newData.splice(editorStore.selectedBlockIndex + 1, 0, newBlock);
+      targetIndex = editorStore.selectedBlockIndex + 1;
+    }
+    editorStore.fn.updateEditorData(newData);
+    await nextTick();
+    const $targetBlock = editorStore.element.body.children[targetIndex];
+    if ($targetBlock !== void 0) {
+      const $targetNode = _findEditableElement($targetBlock, "down");
+      if ($targetNode !== null) {
+        $targetNode.focus();
+        $targetNode.dispatchEvent(new Event("input"));
+      }
+    }
+  }
+}
+export async function _addImageBlock(src, caption = "") {
+  const editorStore = useEditorStore();
+  const newData = JSON.parse(JSON.stringify(editorStore.data));
+  const imageBlock = _createImageBlockData(src, caption);
+  let targetIndex = editorStore.selectedBlockIndex;
+  if (editorStore.fn.updateEditorData !== null && editorStore.element.body !== null) {
+    if (targetIndex === -1) {
+      newData.push(imageBlock);
+      targetIndex = newData.length - 1;
+    } else {
+      newData.splice(editorStore.selectedBlockIndex + 1, 0, imageBlock);
+      targetIndex = editorStore.selectedBlockIndex + 1;
+    }
+    editorStore.fn.updateEditorData(newData);
+    await nextTick();
+    const $targetBlock = editorStore.element.body.children[targetIndex];
+    if ($targetBlock !== void 0) {
+      const $targetNode = _findEditableElement($targetBlock, "down");
+      if ($targetNode !== null) {
+        $targetNode.focus();
+        $targetNode.dispatchEvent(new Event("input"));
+      }
+    }
+  }
+}
+export async function _convertMarkdownToEditor(textDataList) {
+  const editorStore = useEditorStore();
+  const blockList = [];
+  const unorderListReg = new RegExp("^( +)?(\\+|\\*|-)(?= )( )");
+  const orderListReg = new RegExp("^( +)?(\\d+.)(?= )( )");
+  const codeBlockReg = new RegExp("^```");
+  let tempData = null;
+  let isCodeBlock = false;
+  textDataList.forEach(async (blockData, lineIndex) => {
+    switch (true) {
+      case new RegExp("^(---|___|\\*\\*\\*)").test(blockData):
+        blockList.push(_createDividerBlockData());
+        break;
+      case (codeBlockReg.test(blockData) || isCodeBlock === true):
+        if (isCodeBlock === false) {
+          const startLineText = blockData.split("```");
+          let codeBlockLang = "text";
+          isCodeBlock = true;
+          if (startLineText[1] in editorStore.codeBlockLnaguageList === true) {
+            codeBlockLang = startLineText[1];
+          }
+          tempData = {
+            id: _generateId(),
+            type: "code",
+            filename: "",
+            language: codeBlockLang,
+            textContent: ""
+          };
+        } else {
+          if (tempData !== null) {
+            if (codeBlockReg.test(blockData) !== true) {
+              if (tempData.type === "code") {
+                tempData.textContent += `${blockData}
+`;
+              }
+            } else {
+              if (tempData.type === "code") {
+                tempData.textContent = tempData.textContent.trim();
+                blockList.push(tempData);
+                isCodeBlock = false;
+                tempData = null;
+              }
+            }
+          }
+        }
+        break;
+      case orderListReg.test(blockData):
+        const olSplitText = blockData.split(new RegExp("\\d+.(?= )"));
+        const olDepth = Math.floor(olSplitText[0].length / 4);
+        if (tempData === null) {
+          tempData = _createListBlockData("ol", [_createListBlockChildData(convertMarkdownTextToEditorText(olSplitText[1].trim()), olDepth)]);
+        } else {
+          if (tempData.type === "list") {
+            const nextLine = textDataList[lineIndex + 1];
+            tempData.child.push(_createListBlockChildData(convertMarkdownTextToEditorText(olSplitText[1].trim()), olDepth));
+            if (nextLine !== void 0) {
+              if (orderListReg.test(nextLine) === false) {
+                blockList.push(tempData);
+                tempData = null;
+              }
+            } else {
+              blockList.push(tempData);
+              tempData = null;
+            }
+          }
+        }
+        break;
+      case unorderListReg.test(blockData):
+        const ulSplitText = blockData.split(new RegExp("\\+|\\*|-"));
+        const ulDepth = Math.floor(ulSplitText[0].length / 4);
+        if (tempData === null) {
+          tempData = _createListBlockData("ul", [_createListBlockChildData(convertMarkdownTextToEditorText(ulSplitText[1].trim()), ulDepth)]);
+        } else {
+          if (tempData.type === "list") {
+            const nextLine = textDataList[lineIndex + 1];
+            tempData.child.push(_createListBlockChildData(convertMarkdownTextToEditorText(ulSplitText[1].trim()), ulDepth));
+            if (nextLine !== void 0) {
+              if (unorderListReg.test(nextLine) === false) {
+                blockList.push(tempData);
+                tempData = null;
+              }
+            } else {
+              blockList.push(tempData);
+              tempData = null;
+            }
+          }
+        }
+        break;
+      case new RegExp("^###(?= )").test(blockData):
+        blockList.push(_createHeadingBlockData(3, convertMarkdownTextToEditorText(blockData.substring(4).trim())));
+        break;
+      case new RegExp("^##(?= )").test(blockData):
+        blockList.push(_createHeadingBlockData(2, convertMarkdownTextToEditorText(blockData.substring(3).trim())));
+        break;
+      case new RegExp("^#(?= )").test(blockData):
+        blockList.push(_createHeadingBlockData(1, convertMarkdownTextToEditorText(blockData.substring(2).trim())));
+        break;
+      case new RegExp("^\\!\\[.*(?=\\))").test(blockData):
+        const caption = blockData.match(new RegExp("^\\!\\[(.*)(?=\\])\\]\\(([^ ]*)(\\)?)"))[1];
+        const src = blockData.match(new RegExp("^\\!\\[(.*)(?=\\])\\]\\(([^ ]*)(\\)?)"))[2];
+        if (caption !== void 0 && src !== void 0) {
+          blockList.push(_createImageBlockData(src.replace(")", ""), caption, false));
+        }
+        break;
+      default:
+        blockList.push(_createTextBlockData(convertMarkdownTextToEditorText(blockData)));
+        break;
+    }
+  });
+  return blockList;
+}
+function convertMarkdownTextToEditorText(text) {
+  const convertText = text.replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll(new RegExp("(`)([^`]+)(`)", "g"), `<span class="de-code">$2</span>`).replaceAll(new RegExp("(\\*\\*)([^\\*]+)(?=\\*\\*)(\\*\\*)", "g"), `<span class="de-bold">$2</span>`).replaceAll(new RegExp("(\\_\\_)([^\\_]+)(?=\\_\\_)(\\_\\_)", "g"), `<span class="de-bold">$2</span>`).replaceAll(new RegExp("(\\~\\~)([^\\~]+)(?=\\~\\~)(\\~\\~)", "g"), `<span class="de-strikethrough">$2</span>`).replaceAll(new RegExp("(\\*)([^\\*]+)(?=\\*)(\\*)", "g"), `<span class="de-italic">$2</span>`).replaceAll(new RegExp("(\\_)([^\\_]+)(?=\\_)(\\_)", "g"), `<span class="de-italic">$2</span>`).replaceAll(new RegExp("(\\[)([^\\[\\]]+)(\\])(?=\\()(\\()([^\\(\\)]+)(?=\\))(\\))", "g"), `<a class="de-link" href="$5" target="_blank">$2</a>`);
+  const $block = document.createElement("p");
+  $block.innerHTML = convertText;
+  const newNodes = [];
+  Array.from($block.childNodes).forEach((child) => __collectLeafNodes(child));
+  $block.innerHTML = "";
+  newNodes.forEach((node) => {
+    $block.appendChild(node);
+  });
+  return $block.innerHTML;
+  function __collectLeafNodes(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (node.textContent === "") {
+        return;
+      }
+      let current = node.parentNode;
+      const classes = [];
+      let href = "";
+      let target = "";
+      while (current !== null && current !== $block) {
+        if (current.nodeType === Node.ELEMENT_NODE) {
+          const el = current;
+          el.classList.forEach((cls) => {
+            if (classes.includes(cls) === false) {
+              classes.push(cls);
+            }
+          });
+          if (el.tagName === "A") {
+            href = el.getAttribute("href") || "";
+            target = el.getAttribute("target") || "";
+          }
+        }
+        current = current.parentNode;
+      }
+      if (href !== "") {
+        const $a = document.createElement("a");
+        $a.setAttribute("href", href);
+        if (target !== "") {
+          $a.setAttribute("target", target);
+        }
+        classes.forEach((cls) => $a.classList.add(cls));
+        $a.textContent = node.textContent;
+        newNodes.push($a);
+      } else if (classes.length > 0) {
+        const $span = document.createElement("span");
+        classes.forEach((cls) => $span.classList.add(cls));
+        $span.textContent = node.textContent;
+        newNodes.push($span);
+      } else {
+        newNodes.push(document.createTextNode(node.textContent || ""));
+      }
+    } else {
+      const children = Array.from(node.childNodes);
+      children.forEach((child) => __collectLeafNodes(child));
+    }
+  }
+}
+export async function _moveBlockIndex(duration) {
+  const editorStore = useEditorStore();
+  if (editorStore.selectedBlockIndex !== -1 && editorStore.fn.updateEditorData !== null && editorStore.element.body !== null) {
+    const newData = JSON.parse(JSON.stringify(editorStore.data));
+    const curruntData = newData[editorStore.selectedBlockIndex];
+    if (curruntData !== void 0) {
+      switch (duration) {
+        case "first":
+          newData.splice(editorStore.selectedBlockIndex, 1);
+          newData.splice(0, 0, curruntData);
+          editorStore.selectedBlockIndex = 0;
+          break;
+        case "up":
+          newData.splice(editorStore.selectedBlockIndex, 1);
+          newData.splice(editorStore.selectedBlockIndex - 1, 0, curruntData);
+          editorStore.selectedBlockIndex = editorStore.selectedBlockIndex - 1;
+          break;
+        case "down":
+          newData.splice(editorStore.selectedBlockIndex, 1);
+          newData.splice(editorStore.selectedBlockIndex + 1, 0, curruntData);
+          editorStore.selectedBlockIndex = editorStore.selectedBlockIndex + 1;
+          break;
+        case "last":
+          newData.splice(editorStore.selectedBlockIndex, 1);
+          newData.push(curruntData);
+          editorStore.selectedBlockIndex = newData.length - 1;
+          break;
+      }
+      editorStore.fn.updateEditorData(newData);
+      await nextTick();
+      const $block = editorStore.element.body.children[editorStore.selectedBlockIndex];
+      if ($block !== void 0) {
+        const $editableElement = _findEditableElement($block, "down");
+        if ($editableElement !== null && curruntData.type !== "custom" && curruntData.type !== "divider") {
+          $editableElement.focus();
+          $editableElement.dispatchEvent(new Event("input"));
+        }
+      }
+    }
+  }
+}
+export function _checkCanUseIndent() {
+  const editorStore = useEditorStore();
+  let suitable = false;
+  if (editorStore.selectedBlockIndex > -1) {
+    const blockData = editorStore.data[editorStore.selectedBlockIndex];
+    if (blockData !== void 0) {
+      if (["text", "heading", "list"].includes(blockData.type) === true) {
+        suitable = true;
+      }
+    }
+  }
+  return suitable;
+}
+export async function _setIndentData(type) {
+  const editorStore = useEditorStore();
+  const newData = JSON.parse(JSON.stringify(editorStore.data));
+  const blockData = newData[editorStore.selectedBlockIndex];
+  if (blockData !== void 0 && editorStore.fn.updateEditorData !== null && editorStore.cursorSelection !== null && editorStore.element.body !== null) {
+    const $editableElement = _findEditableParent(editorStore.cursorSelection.anchorNode);
+    if ($editableElement !== null) {
+      const offset = _getEditorbleCursorPosition($editableElement);
+      if (blockData.type === "list") {
+        if (blockData.child.length > 1) {
+          const $block = _findParentBlock($editableElement);
+          let indentType = "plus";
+          if ($block !== null) {
+            const $childList = $block.querySelectorAll(".de-item-text");
+            let childIndex = -1;
+            for (let i = 0; i < $childList.length; i += 1) {
+              const $child = $childList[i];
+              if ($child === $editableElement) {
+                childIndex = i;
+                break;
+              }
+            }
+            const curruntChildData = blockData.child[childIndex];
+            if (curruntChildData !== void 0) {
+              if (type === "increase") {
+                const preChildData = blockData.child[childIndex - 1];
+                if (curruntChildData.depth === void 0) {
+                  curruntChildData.depth = 1;
+                } else {
+                  curruntChildData.depth += 1;
+                }
+                if (curruntChildData.depth > 5) {
+                  curruntChildData.depth = 5;
+                }
+                if (preChildData !== void 0 && curruntChildData.depth > (preChildData.depth || 0)) {
+                  curruntChildData.depth = (preChildData.depth || 0) + 1;
+                }
+              } else {
+                indentType = "minus";
+                if (curruntChildData.depth !== void 0) {
+                  curruntChildData.depth -= 1;
+                  if (curruntChildData.depth <= 0) {
+                    delete curruntChildData.depth;
+                  }
+                }
+              }
+              blockData.child[childIndex] = curruntChildData;
+              for (let i = 0; i < blockData.child.length; i += 1) {
+                const child = blockData.child[i];
+                if (i > childIndex && child !== void 0) {
+                  if ((child.depth || 0) <= (curruntChildData.depth || 0) - 1 || (curruntChildData.depth || 0) === 0) {
+                    break;
+                  } else {
+                    if (indentType === "plus") {
+                      if (child.depth === void 0) {
+                        child.depth = 1;
+                      } else {
+                        child.depth += 1;
+                      }
+                      if (child.depth > 5) {
+                        child.depth = 5;
+                      }
+                    } else {
+                      if (child.depth !== void 0) {
+                        child.depth -= 1;
+                        if (child.depth <= 0) {
+                          delete child.depth;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+              editorStore.selectedBlockId = "";
+              newData[editorStore.selectedBlockIndex] = blockData;
+              editorStore.fn.updateEditorData(newData);
+              await nextTick();
+              const $parentBlock = editorStore.element.body.children[editorStore.selectedBlockIndex];
+              if ($parentBlock !== void 0) {
+                const $textArea = $parentBlock.querySelectorAll(".de-item-text");
+                const $targetTextArea = $textArea[childIndex];
+                if ($targetTextArea !== void 0) {
+                  const $node = $targetTextArea.childNodes[offset.nodeIndex];
+                  $targetTextArea.dispatchEvent(new Event("blur"));
+                  if ($node !== void 0) {
+                    _setCursorPosition($node, offset.offset);
+                  } else {
+                    _setCursorPosition($targetTextArea, 0);
+                  }
+                }
+              }
+            }
+          }
+        }
+      } else {
+        if (type === "increase") {
+          if (blockData.depth === void 0) {
+            blockData.depth = 1;
+          } else {
+            blockData.depth += 1;
+          }
+          if (blockData.depth > 5) {
+            blockData.depth = 5;
+          }
+        } else {
+          if (blockData.depth !== void 0) {
+            blockData.depth -= 1;
+            if (blockData.depth <= 0) {
+              delete blockData.depth;
+            }
+          }
+        }
+        editorStore.selectedBlockId = "";
+        newData.splice(editorStore.selectedBlockIndex, 1, blockData);
+        editorStore.fn.updateEditorData(newData);
+        await nextTick();
+        const $block = editorStore.element.body.children[editorStore.selectedBlockIndex];
+        if ($block !== void 0) {
+          const $node = $block.childNodes[offset.nodeIndex];
+          if ($node !== void 0) {
+            $block.dispatchEvent(new Event("input"));
+            _setCursorPosition($node, offset.offset);
+          }
+        }
+      }
+    }
+  }
+}
+export function _checkCanUseAlign() {
+  const editorStore = useEditorStore();
+  let suitable = false;
+  if (editorStore.selectedBlockIndex > -1) {
+    const blockData = editorStore.data[editorStore.selectedBlockIndex];
+    if (blockData !== void 0) {
+      if (["text", "heading", "list", "image"].includes(blockData.type) === true) {
+        suitable = true;
+      }
+    }
+  }
+  return suitable;
+}
+export function _checkCanUseDecoration() {
+  const editorStore = useEditorStore();
+  let suitable = false;
+  if (editorStore.selectedBlockIndex > -1) {
+    const blockData = editorStore.data[editorStore.selectedBlockIndex];
+    if (blockData !== void 0) {
+      if (["text", "heading", "list"].includes(blockData.type) === true) {
+        suitable = true;
+      }
+    }
+  }
+  return suitable;
+}
+export function _checkDataIsEmpty(data) {
+  const editorStore = useEditorStore();
+  let suitable = true;
+  if (data === void 0) {
+    data = editorStore.data;
+  }
+  data.forEach((blockData) => {
+    switch (blockData.type) {
+      case "text":
+        if (blockData.textContent !== "") {
+          suitable = false;
+        }
+        break;
+      case "heading":
+        if (blockData.textContent !== "") {
+          suitable = false;
+        }
+        break;
+      case "image":
+        if (blockData.caption !== "") {
+          suitable = false;
+        }
+        break;
+      case "list":
+        blockData.child.forEach((child) => {
+          if (child.textContent !== "") {
+            suitable = false;
+          }
+        });
+        break;
+      case "code":
+        if (blockData.filename !== "") {
+          suitable = false;
+        }
+        if (blockData.textContent !== "") {
+          suitable = false;
+        }
+        break;
+      case "divider":
+        suitable = false;
+        break;
+      case "custom":
+        if (blockData.textContent !== "") {
+          suitable = false;
+        }
+        break;
+    }
+  });
+  return suitable;
+}

package/dist/runtime/utils/data/cursor.d.ts

@@ -0,0 +1,9 @@
+import type { DELinePosition, DECurSorPosition, DECursorOffset } from "../../type.mjs.js";
+export declare function _getMultilinePosition(element: HTMLElement): DELinePosition;
+export declare function _getBeforeAndAfterHTMLOfCursor($target: HTMLElement): {
+    beforeHTML: string;
+    afterHTML: string;
+};
+export declare function _isCursorAtLineBoundary(): DECurSorPosition;
+export declare function _getEditorbleEndPosition($element: HTMLElement): DECursorOffset;
+export declare function _getEditorbleCursorPosition($element: HTMLElement): DECursorOffset;