dragon-editor 2.0.0-beta.1.3 → 2.0.0-beta.2

package/dist/runtime/core/utils/element.mjs

@@ -0,0 +1,29 @@
+export function findEditableElement(node) {
+  if (node) {
+    if (node.constructor.name === "Text") {
+      return findEditableElement(node.parentNode);
+    } else {
+      if (node.getAttribute) {
+        const hasAttr = node.getAttribute("contenteditable") !== null;
+        if (hasAttr) {
+          return node;
+        } else {
+          return findEditableElement(node.parentNode);
+        }
+      } else {
+        return null;
+      }
+    }
+  } else {
+    return null;
+  }
+}
+export function findChildNumber(parent, child) {
+  let idx = 0;
+  parent.childNodes.forEach((item, count) => {
+    if (item === child) {
+      idx = count;
+    }
+  });
+  return idx;
+}

package/dist/runtime/core/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { allBlock } from "../../../types/index";
+export declare function createBlock(name: string, value?: object): allBlock;
+export * from "./keyboard";
+export * from "./cursor";
+export * from "./style";
+export * from "./element";

package/dist/runtime/core/utils/index.mjs

@@ -0,0 +1,67 @@
+function generateId() {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let str = "";
+  for (let i = 0; i < 20; i++) {
+    str += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return str;
+}
+function createTextBlock(data) {
+  if (data) {
+    return {
+      type: "text",
+      id: generateId(),
+      classList: data.classList,
+      content: data.content
+    };
+  } else {
+    return {
+      type: "text",
+      id: generateId(),
+      classList: [],
+      content: ""
+    };
+  }
+}
+function createImageBlock(data) {
+  const totalSize = data.width + data.height;
+  const w = Math.round(100 / totalSize * data.width);
+  const h = Math.round(100 / totalSize * data.height);
+  const contrast = w - h;
+  let classList = ["d-align-center"];
+  switch (true) {
+    case contrast < -40:
+      classList.push("--5");
+      break;
+    case contrast < -15:
+      classList.push("--10");
+      break;
+    default:
+      classList.push("--20");
+  }
+  return {
+    type: "image",
+    id: generateId(),
+    classList,
+    src: data.src,
+    width: data.width,
+    height: data.height,
+    webp: data.webp,
+    caption: data.caption
+  };
+}
+export function createBlock(name, value) {
+  let blockData;
+  switch (name) {
+    case "image":
+      blockData = createImageBlock(value);
+      break;
+    default:
+      blockData = createTextBlock(value);
+  }
+  return blockData;
+}
+export * from "./keyboard.mjs";
+export * from "./cursor.mjs";
+export * from "./style.mjs";
+export * from "./element.mjs";

package/dist/runtime/core/utils/keyboard.d.ts

@@ -0,0 +1,6 @@
+export declare function keyboardEvent(type: string, event: KeyboardEvent, action: Function, update: Function): void;
+export declare function getClipboardData(data: DataTransfer): {
+    type: any;
+    value: any;
+};
+export declare function pasteText(type: string, value: string): void;

package/dist/runtime/core/utils/keyboard.mjs

@@ -0,0 +1,322 @@
+import { getCursor, setCursor } from "./cursor.mjs";
+import { findEditableElement, findChildNumber } from "./element.mjs";
+import { getTagName } from "./style.mjs";
+let enterCount = 0;
+function enterEvent(type, event, action) {
+  if (event.code === "Enter") {
+    event.preventDefault();
+    const useShift = event.shiftKey;
+    switch (type) {
+      case "image":
+        action("addBlock", {
+          name: "text"
+        });
+        break;
+      case "comment":
+        addBrEvent();
+        break;
+      default:
+        if (useShift === false) {
+          if (enterCount == 0) {
+            textEnterEvent(event, action);
+          }
+        } else {
+          addBrEvent();
+        }
+    }
+    enterCount += 1;
+    setTimeout(() => {
+      enterCount = 0;
+    }, 150);
+  }
+}
+function textEnterEvent(event, action) {
+  const cursorData = getCursor();
+  if (cursorData.startNode) {
+    const editableElement = findEditableElement(cursorData.startNode);
+    const editableElementClassList = [...editableElement.classList].slice(0, 1);
+    const startNode = cursorData.startNode;
+    const endNode = cursorData.endNode;
+    let startChild = startNode;
+    let endChild = endNode;
+    if (startNode.parentNode !== editableElement) {
+      startChild = startNode.parentNode;
+    }
+    if (endNode.parentNode !== editableElement) {
+      endChild = endNode.parentNode;
+    }
+    const startChildIdx = findChildNumber(editableElement, startChild);
+    const endChildIdx = findChildNumber(editableElement, endChild);
+    let startIdx = 0;
+    let endIdx = 0;
+    let startOffset = 0;
+    let endOffset = 0;
+    let preHTMLStructor = "";
+    let nextHTMLStructor = "";
+    if (startChildIdx > endChildIdx) {
+      startIdx = endChildIdx;
+      endIdx = startChildIdx;
+      startOffset = cursorData.endOffset;
+      endOffset = cursorData.startOffset;
+    } else {
+      startIdx = startChildIdx;
+      endIdx = endChildIdx;
+      startOffset = cursorData.startOffset;
+      endOffset = cursorData.endOffset;
+    }
+    if (editableElement.childNodes.length === 0 || endChildIdx === editableElement.childNodes.length - 1 && editableElement.childNodes[endChildIdx].textContent.length === endOffset) {
+      action("addBlock", {
+        name: "text"
+      });
+    } else {
+      editableElement.childNodes.forEach((child, count) => {
+        const text = child.textContent;
+        if (count < startChildIdx) {
+          if (child.constructor.name === "Text") {
+            preHTMLStructor += child.textContent;
+          } else {
+            preHTMLStructor += child.outerHTML;
+          }
+        } else if (count > endChildIdx) {
+          if (child.constructor.name === "Text") {
+            nextHTMLStructor += child.textContent;
+          } else {
+            nextHTMLStructor += child.outerHTML;
+          }
+        } else {
+          if (startChildIdx === endChildIdx) {
+            if (child.constructor.name === "Text") {
+              preHTMLStructor += text.substring(0, startOffset);
+              nextHTMLStructor += text.substring(endOffset, text.length);
+            } else {
+              const childClassList = [...child.classList];
+              const originTag = getTagName(child);
+              preHTMLStructor += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
+              nextHTMLStructor += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
+            }
+          } else {
+            if (count === startChildIdx) {
+              if (child.constructor.name === "Text") {
+                preHTMLStructor += text.substring(0, startOffset);
+              } else {
+                const childClassList = [...child.classList];
+                const originTag = getTagName(child);
+                preHTMLStructor += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
+              }
+            } else if (count === endChildIdx) {
+              if (child.constructor.name === "Text") {
+                nextHTMLStructor += text.substring(endOffset, text.length);
+              } else {
+                const childClassList = [...child.classList];
+                const originTag = getTagName(child);
+                nextHTMLStructor += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
+              }
+            }
+          }
+        }
+      });
+      editableElement.innerHTML = preHTMLStructor;
+      action("addBlock", {
+        name: "text",
+        value: { classList: editableElementClassList, content: nextHTMLStructor }
+      });
+    }
+  }
+}
+function backspaceEvent(type, event, action, update) {
+  if (event.code === "Backspace") {
+    if (type === "text") {
+      const cursorData = getCursor();
+      if (cursorData.type === "Caret" && cursorData.startOffset === 0) {
+        const editableElement = findEditableElement(cursorData.startNode);
+        let $target = cursorData.startNode;
+        if ($target.constructor.name === "Text") {
+          $target = $target.parentNode;
+        }
+        if ($target === editableElement) {
+          update();
+          event.preventDefault();
+          action("deleteBlockLocal");
+        }
+      }
+    }
+  }
+}
+export function keyboardEvent(type, event, action, update) {
+  enterEvent(type, event, action);
+  backspaceEvent(type, event, action, update);
+}
+export function getClipboardData(data) {
+  let type, clipboardData;
+  if (!data) {
+    type = null;
+  }
+  const items = data.items;
+  if (items === void 0) {
+    type = null;
+  }
+  const count = items.length;
+  for (let i = 0; i < count; i += 1) {
+    if (items[i].type.indexOf("image") === 0) {
+      type = "image";
+      clipboardData = items[i].getAsFile();
+      break;
+    }
+    type = "text";
+  }
+  if (type === "text") {
+    clipboardData = data.getData("text");
+  }
+  return {
+    type,
+    value: clipboardData
+  };
+}
+export function pasteText(type, value) {
+  const selection = window.getSelection();
+  const range = document.createRange();
+  let textNode;
+  if (type !== "codeBlock") {
+    textNode = document.createTextNode(value.replace("\n", "").replace(/  +/g, " "));
+  } else {
+    textNode = document.createTextNode(value);
+  }
+  selection.deleteFromDocument();
+  selection.getRangeAt(0).insertNode(textNode);
+  range.setStart(textNode, textNode.length);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function addBrEvent() {
+  const cursorData = getCursor();
+  if (cursorData.startNode) {
+    let $target = cursorData.startNode;
+    const preEditableElement = findEditableElement($target);
+    if ($target.constructor.name === "Text") {
+      $target = $target.parentNode;
+    }
+    if (preEditableElement !== $target && $target.constructor.name !== "HTMLBRElement") {
+      let startNode = cursorData.startNode;
+      let endNode = cursorData.endNode;
+      let startChild = startNode;
+      let endChild = endNode;
+      if (startNode.parentNode !== preEditableElement) {
+        startChild = startNode.parentNode;
+      }
+      if (endNode.parentNode !== preEditableElement) {
+        endChild = endNode.parentNode;
+      }
+      const startChildIdx = findChildNumber(preEditableElement, startChild);
+      const endChildIdx = findChildNumber(preEditableElement, endChild);
+      let startIdx = 0;
+      let endIdx = 0;
+      let startOffset = 0;
+      let endOffset = 0;
+      let htmlStructure = "";
+      if (startChildIdx > endChildIdx) {
+        startIdx = endChildIdx;
+        endIdx = startChildIdx;
+        startOffset = cursorData.endOffset;
+        endOffset = cursorData.startOffset;
+      } else {
+        startIdx = startChildIdx;
+        endIdx = endChildIdx;
+        startOffset = cursorData.startOffset;
+        endOffset = cursorData.endOffset;
+      }
+      if (enterCount === 1) {
+        const text = startChild.textContent;
+        startChild.textContent = text.substring(1, text.length);
+        setCursor(startChild, 0);
+      } else {
+        if (startNode === endNode) {
+          const text = startChild.textContent;
+          const childClassList = [...startChild.classList];
+          const tagData = getTagName(startChild);
+          htmlStructure += `<${tagData.name} ${tagData.href ? `href="${tagData.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${tagData.name}>`;
+          htmlStructure += `<br>`;
+          htmlStructure += `<${tagData.name} ${tagData.href ? `href="${tagData.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${tagData.name}>`;
+          startChild.insertAdjacentHTML("beforebegin", htmlStructure);
+          setCursor(preEditableElement.childNodes[startChildIdx + 2], 0);
+          startChild.remove();
+        } else {
+          preEditableElement.childNodes.forEach((child, count) => {
+            const type = child.constructor.name;
+            const text = child.textContent;
+            if (count > startIdx && count < endIdx) {
+            } else if (count === startIdx) {
+              if (type === "Text") {
+                htmlStructure += text.substring(0, startOffset);
+              } else {
+                const childClassList = [...child.classList];
+                const tagData = getTagName(child);
+                htmlStructure += `<${tagData.name} ${tagData.href ? `href="${tagData.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${tagData.name}><br>`;
+              }
+            } else if (count === endIdx) {
+              if (type === "Text") {
+                htmlStructure += text.substring(endOffset, text.length);
+              } else {
+                const childClassList = [...child.classList];
+                const tagData = getTagName(child);
+                htmlStructure += `<${tagData.name} ${tagData.href ? `href="${tagData.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${tagData.name}><br>`;
+              }
+            } else {
+              if (type === "Text") {
+                htmlStructure += child.textContent;
+              } else {
+                htmlStructure += child.outerHTML;
+              }
+            }
+          });
+          preEditableElement.innerHTML = htmlStructure;
+        }
+      }
+    } else {
+      const brTag = document.createElement("br");
+      const selection = window.getSelection();
+      const range = document.createRange();
+      if (enterCount === 1) {
+        const nextCursorData = getCursor();
+        const editableElement = findEditableElement(nextCursorData.startNode);
+        const childList = editableElement.childNodes;
+        const childIdx = findChildNumber(editableElement, nextCursorData.startNode);
+        setCursor(childList[childIdx + 2], 0);
+      } else {
+        selection.deleteFromDocument();
+        selection.getRangeAt(0).insertNode(brTag);
+        range.setStart(brTag, 0);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        const nextCursorData = getCursor();
+        const editableElement = findEditableElement(nextCursorData.startNode);
+        const childList = editableElement.childNodes;
+        const childIdx = findChildNumber(editableElement, nextCursorData.startNode);
+        let hasText = false;
+        childList.forEach((row) => {
+          if (row.constructor.name === "Text") {
+            hasText = true;
+          }
+        });
+        if (hasText) {
+          if (childList[childIdx + 1].textContent?.length === 0) {
+            if (childList[childIdx + 2]) {
+              if (childList[childIdx + 2].constructor.name == "HTMLBRElement") {
+                setCursor(childList[childIdx + 1], 0);
+              } else {
+                childList[childIdx].insertAdjacentHTML("beforebegin", "<br>");
+              }
+            } else {
+              childList[childIdx].insertAdjacentHTML("beforebegin", "<br>");
+            }
+          } else {
+            setCursor(childList[childIdx + 1], 0);
+          }
+        } else {
+          childList[childIdx].insertAdjacentHTML("beforebegin", "<br>");
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+import type { allBlock, styleUtilArgument } from "../../../types";
+export declare function styleSettings({ kind, blockData, $target, url, cursorData }: styleUtilArgument): allBlock;
+export declare function getTagName(node: HTMLElement): {
+    name: string;
+    href: string | null;
+};