dragon-editor 2.0.0-beta.1.1 → 2.0.0-beta.1.4

package/dist/runtime/core/style/main.mjs

@@ -0,0 +1,24 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+/******/ })()
+;

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

@@ -0,0 +1,4 @@
+import type { cursorSelection, arrangementCursorData } from "../../../types";
+export declare function setCursor(target: Node, idx: number): void;
+export declare function getCursor(): cursorSelection;
+export declare function getArrangementCursorData(): arrangementCursorData;

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

@@ -0,0 +1,72 @@
+import { findEditableElement } from "./element.mjs";
+export function setCursor(target, idx) {
+  if (target) {
+    let $target;
+    if (target.constructor.name === "Text") {
+      $target = target;
+    } else {
+      $target = target.childNodes.length > 0 ? target.childNodes[0] : target;
+    }
+    const select = window.getSelection();
+    const range = document.createRange();
+    range.setStart($target, idx);
+    range.collapse(true);
+    select.removeAllRanges();
+    select.addRange(range);
+  }
+}
+export function getCursor() {
+  const select = window.getSelection();
+  return {
+    type: select.type,
+    startNode: select.anchorNode,
+    startOffset: select.anchorOffset,
+    endNode: select.focusNode,
+    endOffset: select.focusOffset
+  };
+}
+export function getArrangementCursorData() {
+  const cursorData = getCursor();
+  const startNode = cursorData.startNode;
+  const editableElement = findEditableElement(startNode);
+  let childNode;
+  let childIdx = -1;
+  let fixIdx = 0;
+  let preNodeType = "";
+  let childLength = 0;
+  if (startNode.parentNode === editableElement) {
+    childNode = startNode;
+  } else {
+    childNode = startNode.parentNode;
+  }
+  editableElement.childNodes.forEach((child, count) => {
+    if (child === childNode) {
+      childIdx = count;
+    }
+  });
+  editableElement.childNodes.forEach((child, count) => {
+    if (count <= childIdx + fixIdx) {
+      const type = child.constructor.name;
+      if (preNodeType !== type) {
+        childLength = 0;
+      }
+      if (type === "Text") {
+        if (preNodeType === type) {
+          childIdx -= 1;
+          fixIdx += 1;
+          childLength += child.textContent?.length ?? 0;
+        } else {
+          childLength = child.textContent?.length ?? 0;
+        }
+      } else {
+        childLength = child.textContent?.length ?? 0;
+      }
+      preNodeType = type;
+    }
+  });
+  return {
+    editableNode: editableElement,
+    childCount: childIdx,
+    length: childLength
+  };
+}

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

@@ -0,0 +1,2 @@
+export declare function findEditableElement(node: Node): (HTMLElement | null);
+export declare function findChildNumber(parent: HTMLElement, child: Node): number;

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

@@ -0,0 +1,25 @@
+export function findEditableElement(node) {
+  if (node) {
+    if (node.constructor.name === "Text") {
+      return findEditableElement(node.parentNode);
+    } else {
+      const hasAttr = node.getAttribute("contenteditable") !== null;
+      if (hasAttr) {
+        return node;
+      } else {
+        return findEditableElement(node.parentNode);
+      }
+    }
+  } 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,7 @@
+import { textBlock } from "../../../types/index";
+export declare function createTextBlock(): textBlock;
+export declare function createBlock(name: string): textBlock;
+export * from "./keyboard";
+export * from "./cursor";
+export * from "./style";
+export * from "./element";

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

@@ -0,0 +1,26 @@
+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;
+}
+export function createTextBlock() {
+  return {
+    type: "text",
+    id: generateId(),
+    classList: [],
+    content: ""
+  };
+}
+export function createBlock(name) {
+  switch (name) {
+    default:
+      return createTextBlock();
+  }
+}
+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, addAction: 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,98 @@
+import { getCursor, setCursor } from "./cursor.mjs";
+import { findEditableElement, findChildNumber } from "./element.mjs";
+let enterCount = 0;
+function enterEvent(type, event, addAction) {
+  if (event.code === "Enter") {
+    if (enterCount === 0) {
+      enterCount += 1;
+      const useShift = event.shiftKey;
+      switch (type) {
+        case "comment":
+          event.preventDefault();
+          addBrEvent();
+          break;
+        default:
+          if (useShift === false) {
+            event.preventDefault();
+            addAction("addBlock", "text");
+          }
+      }
+      setTimeout(() => {
+        enterCount = 0;
+      }, 150);
+    } else {
+      event.preventDefault();
+      setTimeout(() => {
+        enterCount = 0;
+      }, 150);
+    }
+  }
+}
+export function keyboardEvent(type, event, addAction) {
+  enterEvent(type, event, addAction);
+}
+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.replaceAll("\n", "").replaceAll(/  +/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 brTag = document.createElement("br");
+  const selection = window.getSelection();
+  const range = document.createRange();
+  selection.deleteFromDocument();
+  selection.getRangeAt(0).insertNode(brTag);
+  range.setStart(brTag, 0);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  const cursorData = getCursor();
+  if (cursorData.startNode.constructor.name !== "Text") {
+    const editableElement = findEditableElement(cursorData.startNode);
+    const childList = editableElement.childNodes;
+    const childIdx = findChildNumber(editableElement, cursorData.startNode);
+    if (childList[childList.length - 1].textContent?.length === 0) {
+      childList[childIdx].insertAdjacentHTML("beforebegin", "<br>");
+      childList[childList.length - 1].remove();
+    } else {
+      setCursor(childList[childIdx + 1], 0);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import type { allBlock } from "../../../types";
+export declare function styleSettings(type: string, blockData: allBlock, $target: HTMLElement): allBlock;

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

@@ -0,0 +1,264 @@
+import { getCursor, setCursor } from "./cursor.mjs";
+import { findEditableElement, findChildNumber } from "./element.mjs";
+const alignClassList = ["d-align-left", "d-align-center", "d-align-right"];
+function arrangementAlignClass(originList, className) {
+  const hasClass = originList.indexOf(className) > -1;
+  let array = originList;
+  if (hasClass) {
+    originList.splice(originList.indexOf(className), 1);
+    array = originList;
+  } else {
+    array = originList.filter((item) => alignClassList.indexOf(item) === -1);
+    array.push(className);
+  }
+  return array;
+}
+function getNextNode($target, node) {
+  const childNode = $target.childNodes;
+  let idx = -1;
+  childNode.forEach((item, index) => {
+    if (item === node) {
+      idx = index;
+    }
+  });
+  return childNode[idx + 1];
+}
+function warpStyleNode(node, startOffset, endOffset, className) {
+  const text = node.textContent;
+  const textLength = text.length;
+  let startIdx = startOffset;
+  let endIdx = endOffset;
+  if (endOffset < startOffset) {
+    startIdx = endOffset;
+    endIdx = startOffset;
+  }
+  return `${text.substring(0, startIdx)}<span class="${className}">${text.substring(startIdx, endIdx)}</span>${text.substring(endIdx, textLength)}`;
+}
+function defaultDecorationMake(originData, $target, className) {
+  const cursorData = getCursor();
+  const startNode = cursorData.startNode;
+  const endNode = cursorData.endNode;
+  if (startNode !== null) {
+    const editableElement = findEditableElement(startNode);
+    if (cursorData.type === "Range") {
+      if (startNode === endNode) {
+        const parentNode = startNode.parentNode;
+        let startOffset = cursorData.startOffset;
+        let endOffset = cursorData.endOffset;
+        if (startOffset > endOffset) {
+          startOffset = cursorData.endOffset;
+          endOffset = cursorData.startOffset;
+        }
+        if (parentNode === editableElement) {
+          const childNumber = findChildNumber(editableElement, startNode);
+          const wrpStructure = warpStyleNode(parentNode.childNodes[childNumber], startOffset, endOffset, className);
+          let htmlStructure = "";
+          parentNode.childNodes.forEach((child, count) => {
+            if (count === childNumber) {
+              htmlStructure += wrpStructure;
+            } else {
+              if (child.constructor.name === "Text") {
+                htmlStructure += child.textContent;
+              } else {
+                htmlStructure += child.outerHTML;
+              }
+            }
+          });
+          parentNode.innerHTML = htmlStructure;
+          setTimeout(() => {
+            let $cursorTarget = editableElement.childNodes[childNumber + 1];
+            if (!$cursorTarget) {
+              $cursorTarget = editableElement.childNodes[childNumber];
+            }
+            const cursorLength = $cursorTarget.textContent.length;
+            setCursor($cursorTarget, cursorLength);
+          }, 100);
+        } else {
+          const childNumber = findChildNumber(editableElement, parentNode);
+          const classList = [...parentNode.classList];
+          const text = parentNode.textContent;
+          const hasClassIdx = classList.indexOf(className);
+          let startOffset2 = cursorData.startOffset;
+          let endOffset2 = cursorData.endOffset;
+          let htmlStructure = "";
+          if (startOffset2 > endOffset2) {
+            startOffset2 = cursorData.endOffset;
+            endOffset2 = cursorData.startOffset;
+          }
+          if (hasClassIdx > -1) {
+            const middleClassList = [...parentNode.classList];
+            middleClassList.splice(hasClassIdx, 1);
+            htmlStructure = `<span class="${classList.join(" ")}">${text.substring(0, startOffset2)}</span><span class="${middleClassList.join(" ")}">${text.substring(startOffset2, endOffset2)}</span><span class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</span>`;
+          } else {
+            htmlStructure = `<span class="${classList.join(" ")}">${text.substring(0, startOffset2)}</span><span class="${classList.join(" ")} ${className}">${text.substring(startOffset2, endOffset2)}</span><span class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</span>`;
+          }
+          parentNode.insertAdjacentHTML("afterend", htmlStructure);
+          parentNode.remove();
+          setTimeout(() => {
+            setCursor(editableElement.childNodes[childNumber + 1], text.substring(startOffset2, endOffset2).length);
+          }, 100);
+        }
+      } else {
+        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 hasClassName = true;
+        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;
+        }
+        editableElement.childNodes.forEach((item, count) => {
+          if (count >= startIdx && count <= endIdx) {
+            if (item.constructor.name === "Text") {
+              hasClassName = false;
+            } else {
+              if ([...item.classList].indexOf(className) === -1) {
+                hasClassName = false;
+              }
+            }
+          }
+        });
+        editableElement.childNodes.forEach((child, count) => {
+          const type = child.constructor.name;
+          const text = child.textContent;
+          if (count > startIdx && count < endIdx) {
+            if (type === "Text") {
+              htmlStructure += `<span class="${className}">${child.textContent}</span>`;
+            } else {
+              if (hasClassName) {
+                if (child.classList.length === 1) {
+                  htmlStructure += child.textContent;
+                } else {
+                  child.classList.remove(className);
+                  htmlStructure += child.outerHTML;
+                }
+              } else {
+                child.classList.add(className);
+                htmlStructure += child.outerHTML;
+              }
+            }
+          } else if (count === startIdx) {
+            if (type === "Text") {
+              htmlStructure += `${text.substring(0, startOffset)}<span class="${className}">${text.substring(startOffset, text.length)}</span>`;
+            } else {
+              const childClassList = [...child.classList];
+              if (hasClassName) {
+                if (childClassList.length === 1) {
+                  htmlStructure += `<span class="${className}">${text.substring(0, startOffset)}</span>${text.substring(startOffset, text.length)}`;
+                } else {
+                  const classIdx = childClassList.indexOf(className);
+                  htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</span>`;
+                  childClassList.splice(classIdx, 1);
+                  htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</span>`;
+                }
+              } else {
+                htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</span>`;
+                htmlStructure += `<span class="${childClassList.join(" ")} ${className}">${text.substring(startOffset, text.length)}</span>`;
+              }
+            }
+          } else if (count === endIdx) {
+            if (type === "Text") {
+              htmlStructure += `<span class="${className}">${text.substring(0, endOffset)}</span>${text.substring(endOffset, text.length)}`;
+            } else {
+              const childClassList = [...child.classList];
+              if (hasClassName) {
+                if (childClassList.length === 1) {
+                  htmlStructure += `${text.substring(0, endOffset)}<span class="${className}">${text.substring(endOffset, text.length)}</span>`;
+                } else {
+                  const classIdx = childClassList.indexOf(className);
+                  const newClassList = [...child.classList];
+                  newClassList.splice(classIdx, 1);
+                  htmlStructure += `<span class="${newClassList.join(" ")}">${text.substring(0, endOffset)}</span>`;
+                  htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</span>`;
+                }
+              } else {
+                htmlStructure += `<span class="${childClassList.join(" ")} ${className}">${text.substring(0, endOffset)}</span>`;
+                htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</span>`;
+              }
+            }
+          } else {
+            if (type === "Text") {
+              htmlStructure += child.textContent;
+            } else {
+              htmlStructure += child.outerHTML;
+            }
+          }
+        });
+        editableElement.innerHTML = htmlStructure;
+        setTimeout(() => {
+          const $target2 = editableElement.childNodes[endIdx + 1];
+          const length = $target2.textContent.length;
+          setCursor($target2, length);
+        }, 100);
+      }
+    } else {
+      if (startNode.constructor.name === "Text") {
+        const parentNode = startNode.parentNode;
+        const parentNodeClassList = [...parentNode.classList];
+        if (parentNodeClassList.indexOf(className) > -1) {
+          if (parentNodeClassList.length === 1) {
+            const textContent = parentNode.textContent;
+            parentNode.insertAdjacentText("afterend", textContent);
+            setCursor(getNextNode($target, parentNode), textContent.length);
+            parentNode.remove();
+          } else {
+            parentNode.classList.remove(className);
+          }
+        } else {
+          parentNode.classList.add(className);
+        }
+      } else {
+        startNode.classList.toggle(className);
+      }
+    }
+  }
+  return originData;
+}
+export function styleSettings(type, blockData, $target) {
+  let rawData = blockData;
+  switch (type) {
+    case "alignLeft":
+      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-left");
+      break;
+    case "alignCenter":
+      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-center");
+      break;
+    case "alignRight":
+      rawData.classList = arrangementAlignClass(rawData.classList, "d-align-right");
+      break;
+    case "decorationBold":
+      rawData = defaultDecorationMake(rawData, $target, "d-deco-bold");
+      break;
+    case "decorationItalic":
+      rawData = defaultDecorationMake(rawData, $target, "d-deco-italic");
+      break;
+    case "decorationUnderline":
+      rawData = defaultDecorationMake(rawData, $target, "d-deco-underline");
+      break;
+    case "decorationStrikethrough":
+      rawData = defaultDecorationMake(rawData, $target, "d-deco-through");
+      break;
+    default:
+      rawData = defaultDecorationMake(rawData, $target, type);
+  }
+  return rawData;
+}