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

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

@@ -0,0 +1,359 @@
+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, url, tagName }) {
+  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)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startIdx, endIdx)}</${tagName}>${text.substring(endIdx, textLength)}`;
+}
+function defaultDecorationMake({ originData, $target, className, tagName = "span", url, parentCursorData }) {
+  let cursorData = getCursor();
+  if (cursorData.startNode === null) {
+    cursorData = parentCursorData;
+  }
+  let startNode = cursorData.startNode;
+  let endNode = cursorData.endNode;
+  if (startNode !== null) {
+    let editableElement = findEditableElement(startNode);
+    if (editableElement === null) {
+      cursorData = parentCursorData;
+      startNode = cursorData.startNode;
+      endNode = cursorData.endNode;
+      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({
+            node: parentNode.childNodes[childNumber],
+            startOffset,
+            endOffset,
+            className,
+            tagName,
+            url
+          });
+          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 originTag = getTagName(parentNode);
+          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 = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${middleClassList.join(" ")}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
+          } else {
+            htmlStructure = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${classList.join(" ")} ${className}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
+          }
+          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 += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${child.textContent}</${tagName}>`;
+            } 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)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
+            } else {
+              const childClassList = [...child.classList];
+              const originTag = getTagName(child);
+              if (hasClassName) {
+                if (childClassList.length === 1) {
+                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(0, startOffset)}</${originTag.name}>${text.substring(startOffset, text.length)}`;
+                } else {
+                  const classIdx = childClassList.indexOf(className);
+                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
+                  childClassList.splice(classIdx, 1);
+                  htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</${tagName}>`;
+                }
+              } else {
+                htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
+                htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
+              }
+            }
+          } else if (count === endIdx) {
+            if (type === "Text") {
+              htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(0, endOffset)}</${tagName}>${text.substring(endOffset, text.length)}`;
+            } else {
+              const childClassList = [...child.classList];
+              const originTag = getTagName(child);
+              if (hasClassName) {
+                if (childClassList.length === 1) {
+                  htmlStructure += `${text.substring(0, endOffset)}<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
+                } else {
+                  const classIdx = childClassList.indexOf(className);
+                  const newClassList = [...child.classList];
+                  newClassList.splice(classIdx, 1);
+                  htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${newClassList.join(" ")}">${text.substring(0, endOffset)}</${tagName}>`;
+                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
+                }
+              } else {
+                htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(0, endOffset)}</${tagName}>`;
+                htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
+              }
+            }
+          } 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({
+  kind,
+  blockData,
+  $target,
+  url,
+  cursorData
+}) {
+  let rawData = blockData;
+  switch (kind) {
+    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(
+        {
+          originData: rawData,
+          $target,
+          className: "d-deco-bold",
+          parentCursorData: cursorData
+        }
+      );
+      break;
+    case "decorationItalic":
+      rawData = defaultDecorationMake(
+        {
+          originData: rawData,
+          $target,
+          className: "d-deco-italic",
+          parentCursorData: cursorData
+        }
+      );
+      break;
+    case "decorationUnderline":
+      rawData = defaultDecorationMake(
+        {
+          originData: rawData,
+          $target,
+          className: "d-deco-underline",
+          parentCursorData: cursorData
+        }
+      );
+      break;
+    case "decorationStrikethrough":
+      rawData = defaultDecorationMake(
+        {
+          originData: rawData,
+          $target,
+          className: "d-deco-through",
+          parentCursorData: cursorData
+        }
+      );
+      break;
+    case "decorationCode":
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-code",
+        tagName: "code",
+        parentCursorData: cursorData
+      });
+      break;
+    case "decorationLink":
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-link",
+        tagName: "a",
+        url,
+        parentCursorData: cursorData
+      });
+      break;
+    default:
+      rawData = defaultDecorationMake(
+        {
+          originData: rawData,
+          $target,
+          className: kind,
+          parentCursorData: cursorData
+        }
+      );
+  }
+  return rawData;
+}
+export function getTagName(node) {
+  const value = {
+    name: "span",
+    href: null
+  };
+  switch (node.tagName) {
+    case "CODE":
+      value.name = "code";
+      break;
+    case "A":
+      value.name = "a";
+      value.href = node.getAttribute("href");
+      break;
+  }
+  return value;
+}