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

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

@@ -13,6 +13,19 @@ function arrangementAlignClass(originList, className) {
   }
   return array;
 }
+const headingClassList = ["d-h1", "d-h2", "d-h3", "d-h4", "d-h5", "d-h6"];
+function arrangementHeadingClass(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) => headingClassList.indexOf(item) === -1);
+    array.push(className);
+  }
+  return array;
+}
 function getNextNode($target, node) {
   const childNode = $target.childNodes;
   let idx = -1;
@@ -23,7 +36,7 @@ function getNextNode($target, node) {
   });
   return childNode[idx + 1];
 }
-function warpStyleNode(node, startOffset, endOffset, className) {
+function warpStyleNode({ node, startOffset, endOffset, className, url, tagName }) {
   const text = node.textContent;
   const textLength = text.length;
   let startIdx = startOffset;
@@ -32,14 +45,23 @@ function warpStyleNode(node, startOffset, endOffset, className) {
     startIdx = endOffset;
     endIdx = startOffset;
   }
-  return `${text.substring(0, startIdx)}<span class="${className}">${text.substring(startIdx, endIdx)}</span>${text.substring(endIdx, textLength)}`;
+  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) {
-  const cursorData = getCursor();
-  const startNode = cursorData.startNode;
-  const endNode = cursorData.endNode;
+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) {
-    const editableElement = findEditableElement(startNode);
+    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;
@@ -51,7 +73,14 @@ function defaultDecorationMake(originData, $target, className) {
         }
         if (parentNode === editableElement) {
           const childNumber = findChildNumber(editableElement, startNode);
-          const wrpStructure = warpStyleNode(parentNode.childNodes[childNumber], startOffset, endOffset, className);
+          const wrpStructure = warpStyleNode({
+            node: parentNode.childNodes[childNumber],
+            startOffset,
+            endOffset,
+            className,
+            tagName,
+            url
+          });
           let htmlStructure = "";
           parentNode.childNodes.forEach((child, count) => {
             if (count === childNumber) {
@@ -74,6 +103,7 @@ function defaultDecorationMake(originData, $target, className) {
             setCursor($cursorTarget, cursorLength);
           }, 100);
         } else {
+          const originTag = getTagName(parentNode);
           const childNumber = findChildNumber(editableElement, parentNode);
           const classList = [...parentNode.classList];
           const text = parentNode.textContent;
@@ -88,9 +118,9 @@ function defaultDecorationMake(originData, $target, className) {
           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>`;
+            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 = `<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>`;
+            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();
@@ -142,7 +172,7 @@ function defaultDecorationMake(originData, $target, className) {
           const text = child.textContent;
           if (count > startIdx && count < endIdx) {
             if (type === "Text") {
-              htmlStructure += `<span class="${className}">${child.textContent}</span>`;
+              htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${child.textContent}</${tagName}>`;
             } else {
               if (hasClassName) {
                 if (child.classList.length === 1) {
@@ -158,41 +188,43 @@ function defaultDecorationMake(originData, $target, className) {
             }
           } else if (count === startIdx) {
             if (type === "Text") {
-              htmlStructure += `${text.substring(0, startOffset)}<span class="${className}">${text.substring(startOffset, text.length)}</span>`;
+              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 += `<span class="${className}">${text.substring(0, startOffset)}</span>${text.substring(startOffset, text.length)}`;
+                  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 += `<span class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</span>`;
+                  htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
                   childClassList.splice(classIdx, 1);
-                  htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</span>`;
+                  htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</${tagName}>`;
                 }
               } else {
-                htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</span>`;
-                htmlStructure += `<span class="${childClassList.join(" ")} ${className}">${text.substring(startOffset, text.length)}</span>`;
+                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 += `<span class="${className}">${text.substring(0, endOffset)}</span>${text.substring(endOffset, text.length)}`;
+              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)}<span class="${className}">${text.substring(endOffset, text.length)}</span>`;
+                  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 += `<span class="${newClassList.join(" ")}">${text.substring(0, endOffset)}</span>`;
-                  htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</span>`;
+                  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 += `<span class="${childClassList.join(" ")} ${className}">${text.substring(0, endOffset)}</span>`;
-                htmlStructure += `<span class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</span>`;
+                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 {
@@ -233,9 +265,9 @@ function defaultDecorationMake(originData, $target, className) {
   }
   return originData;
 }
-export function styleSettings(type, blockData, $target) {
+export function styleSettings({ kind, blockData, $target, url, cursorData }) {
   let rawData = blockData;
-  switch (type) {
+  switch (kind) {
     case "alignLeft":
       rawData.classList = arrangementAlignClass(rawData.classList, "d-align-left");
       break;
@@ -246,19 +278,97 @@ export function styleSettings(type, blockData, $target) {
       rawData.classList = arrangementAlignClass(rawData.classList, "d-align-right");
       break;
     case "decorationBold":
-      rawData = defaultDecorationMake(rawData, $target, "d-deco-bold");
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-bold",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationItalic":
-      rawData = defaultDecorationMake(rawData, $target, "d-deco-italic");
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-italic",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationUnderline":
-      rawData = defaultDecorationMake(rawData, $target, "d-deco-underline");
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-underline",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationStrikethrough":
-      rawData = defaultDecorationMake(rawData, $target, "d-deco-through");
+      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;
+    case "heading-1":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h1");
+      break;
+    case "heading-2":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h2");
+      break;
+    case "heading-3":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h3");
+      break;
+    case "heading-4":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h4");
+      break;
+    case "heading-5":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h5");
+      break;
+    case "heading-6":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h6");
       break;
     default:
-      rawData = defaultDecorationMake(rawData, $target, type);
+      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;
+}