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

package/dist/runtime/core/style/viewer.css

@@ -0,0 +1,191 @@
+.dragon-editor-viewer {
+  width: 100%;
+  padding: 10px;
+  line-height: 1.6;
+}
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6,
+.dragon-editor-viewer p,
+.dragon-editor-viewer blockquote,
+.dragon-editor-viewer pre,
+.dragon-editor-viewer dl,
+.dragon-editor-viewer dd,
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer fieldset,
+.dragon-editor-viewer legend,
+.dragon-editor-viewer figure,
+.dragon-editor-viewer menu {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.dragon-editor-viewer table,
+.dragon-editor-viewer th,
+.dragon-editor-viewer td {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.dragon-editor-viewer ol,
+.dragon-editor-viewer ul,
+.dragon-editor-viewer li {
+  list-style: none;
+}
+.dragon-editor-viewer h1,
+.dragon-editor-viewer h2,
+.dragon-editor-viewer h3,
+.dragon-editor-viewer h4,
+.dragon-editor-viewer h5,
+.dragon-editor-viewer h6 {
+  font-size: 1em;
+  font-weight: normal;
+}
+.dragon-editor-viewer input,
+.dragon-editor-viewer textarea,
+.dragon-editor-viewer select,
+.dragon-editor-viewer button {
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  outline: 0;
+  vertical-align: middle;
+}
+.dragon-editor-viewer a,
+.dragon-editor-viewer button,
+.dragon-editor-viewer input[type=submit],
+.dragon-editor-viewer input[type=button],
+.dragon-editor-viewer input[type=reset] {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.dragon-editor-viewer img {
+  border: 0;
+  vertical-align: top;
+}
+.dragon-editor-viewer .d-align-left {
+  text-align: left;
+}
+.dragon-editor-viewer .d-align-center {
+  text-align: center;
+}
+.dragon-editor-viewer .d-align-right {
+  text-align: right;
+}
+.dragon-editor-viewer .d-deco-bold {
+  font-weight: bold;
+}
+.dragon-editor-viewer .d-deco-italic {
+  font-style: italic;
+}
+.dragon-editor-viewer .d-deco-underline {
+  text-decoration: underline;
+}
+.dragon-editor-viewer .d-deco-underline.d-deco-through {
+  text-decoration: underline line-through;
+}
+.dragon-editor-viewer .d-deco-through {
+  text-decoration: line-through;
+}
+.dragon-editor-viewer .d-deco-through.d-deco-underline, .dragon-editor-viewer .d-deco-through.d-deco-link {
+  text-decoration: line-through underline;
+}
+.dragon-editor-viewer .d-deco-code {
+  padding: 2px 5px;
+  margin: 0 2px;
+  background: #f1f1f1;
+  color: #c52e2e;
+  border-radius: 2px;
+  font-family: Inconsolata, monospace, sans-serif;
+}
+.dragon-editor-viewer .d-deco-link {
+  color: inherit;
+}
+.dragon-editor-viewer .d-text-block:empty {
+  min-height: 1.6em;
+}
+.dragon-editor-viewer .d-image-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 5px;
+}
+.dragon-editor-viewer .d-image-block.d-align-left {
+  align-items: flex-start;
+}
+.dragon-editor-viewer .d-image-block.d-align-right {
+  align-items: flex-end;
+}
+.dragon-editor-viewer .d-image-block.--1 .d-image-area {
+  width: 5%;
+}
+.dragon-editor-viewer .d-image-block.--2 .d-image-area {
+  width: 10%;
+}
+.dragon-editor-viewer .d-image-block.--3 .d-image-area {
+  width: 15%;
+}
+.dragon-editor-viewer .d-image-block.--4 .d-image-area {
+  width: 20%;
+}
+.dragon-editor-viewer .d-image-block.--5 .d-image-area {
+  width: 25%;
+}
+.dragon-editor-viewer .d-image-block.--6 .d-image-area {
+  width: 30%;
+}
+.dragon-editor-viewer .d-image-block.--7 .d-image-area {
+  width: 35%;
+}
+.dragon-editor-viewer .d-image-block.--8 .d-image-area {
+  width: 40%;
+}
+.dragon-editor-viewer .d-image-block.--9 .d-image-area {
+  width: 45%;
+}
+.dragon-editor-viewer .d-image-block.--10 .d-image-area {
+  width: 50%;
+}
+.dragon-editor-viewer .d-image-block.--11 .d-image-area {
+  width: 55%;
+}
+.dragon-editor-viewer .d-image-block.--12 .d-image-area {
+  width: 60%;
+}
+.dragon-editor-viewer .d-image-block.--13 .d-image-area {
+  width: 65%;
+}
+.dragon-editor-viewer .d-image-block.--14 .d-image-area {
+  width: 70%;
+}
+.dragon-editor-viewer .d-image-block.--15 .d-image-area {
+  width: 75%;
+}
+.dragon-editor-viewer .d-image-block.--16 .d-image-area {
+  width: 80%;
+}
+.dragon-editor-viewer .d-image-block.--17 .d-image-area {
+  width: 85%;
+}
+.dragon-editor-viewer .d-image-block.--18 .d-image-area {
+  width: 90%;
+}
+.dragon-editor-viewer .d-image-block.--19 .d-image-area {
+  width: 95%;
+}
+.dragon-editor-viewer .d-image-block.--20 .d-image-area {
+  width: 100%;
+}
+.dragon-editor-viewer .d-image-block .d-image-area .d-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor-viewer .d-image-block .d-caption {
+  width: 100%;
+  color: #ccc;
+  font-size: 1rem;
+}

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

@@ -1,4 +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;
+export declare function getArrangementCursorData(parentCursorData: any): arrangementCursorData;

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

@@ -9,6 +9,10 @@ export function setCursor(target, idx) {
     }
     const select = window.getSelection();
     const range = document.createRange();
+    const realLength = $target.textContent?.length;
+    if (realLength < idx) {
+      idx = realLength;
+    }
     range.setStart($target, idx);
     range.collapse(true);
     select.removeAllRanges();
@@ -25,10 +29,18 @@ export function getCursor() {
     endOffset: select.focusOffset
   };
 }
-export function getArrangementCursorData() {
-  const cursorData = getCursor();
-  const startNode = cursorData.startNode;
-  const editableElement = findEditableElement(startNode);
+export function getArrangementCursorData(parentCursorData) {
+  let cursorData = getCursor();
+  if (cursorData.startNode === null) {
+    cursorData = parentCursorData;
+  }
+  let startNode = cursorData.startNode;
+  let editableElement = findEditableElement(startNode);
+  if (editableElement === null) {
+    cursorData = parentCursorData;
+    startNode = cursorData.startNode;
+    editableElement = findEditableElement(startNode);
+  }
   let childNode;
   let childIdx = -1;
   let fixIdx = 0;

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

@@ -3,11 +3,15 @@ export function findEditableElement(node) {
     if (node.constructor.name === "Text") {
       return findEditableElement(node.parentNode);
     } else {
-      const hasAttr = node.getAttribute("contenteditable") !== null;
-      if (hasAttr) {
-        return node;
+      if (node.getAttribute) {
+        const hasAttr = node.getAttribute("contenteditable") !== null;
+        if (hasAttr) {
+          return node;
+        } else {
+          return findEditableElement(node.parentNode);
+        }
       } else {
-        return findEditableElement(node.parentNode);
+        return null;
       }
     }
   } else {

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

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

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

@@ -6,19 +6,60 @@ function generateId() {
   }
   return str;
 }
-export function createTextBlock() {
+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: "text",
+    type: "image",
     id: generateId(),
-    classList: [],
-    content: ""
+    classList,
+    src: data.src,
+    width: data.width,
+    height: data.height,
+    webp: data.webp,
+    caption: data.caption
   };
 }
-export function createBlock(name) {
+export function createBlock(name, value) {
+  let blockData;
   switch (name) {
+    case "image":
+      blockData = createImageBlock(value);
+      break;
     default:
-      return createTextBlock();
+      blockData = createTextBlock(value);
   }
+  return blockData;
 }
 export * from "./keyboard.mjs";
 export * from "./cursor.mjs";

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

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

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

@@ -1,35 +1,150 @@
 import { getCursor, setCursor } from "./cursor.mjs";
 import { findEditableElement, findChildNumber } from "./element.mjs";
+import { getTagName } from "./style.mjs";
 let enterCount = 0;
-function enterEvent(type, event, addAction) {
+function enterEvent(type, event, action) {
   if (event.code === "Enter") {
-    if (enterCount === 0) {
-      enterCount += 1;
-      const useShift = event.shiftKey;
-      switch (type) {
-        case "comment":
-          event.preventDefault();
+    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();
-          break;
-        default:
-          if (useShift === false) {
-            event.preventDefault();
-            addAction("addBlock", "text");
+        }
+    }
+    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");
+        }
       }
-      setTimeout(() => {
-        enterCount = 0;
-      }, 150);
-    } else {
-      event.preventDefault();
-      setTimeout(() => {
-        enterCount = 0;
-      }, 150);
     }
   }
 }
-export function keyboardEvent(type, event, addAction) {
-  enterEvent(type, event, addAction);
+export function keyboardEvent(type, event, action, update) {
+  enterEvent(type, event, action);
+  backspaceEvent(type, event, action, update);
 }
 export function getClipboardData(data) {
   let type, clipboardData;
@@ -62,7 +177,7 @@ export function pasteText(type, value) {
   const range = document.createRange();
   let textNode;
   if (type !== "codeBlock") {
-    textNode = document.createTextNode(value.replaceAll("\n", "").replaceAll(/  +/g, " "));
+    textNode = document.createTextNode(value.replace("\n", "").replace(/  +/g, " "));
   } else {
     textNode = document.createTextNode(value);
   }
@@ -74,25 +189,134 @@ export function pasteText(type, value) {
   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();
+  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 {
-      setCursor(childList[childIdx + 1], 0);
+      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

@@ -1,2 +1,6 @@
-import type { allBlock } from "../../../types";
-export declare function styleSettings(type: string, blockData: allBlock, $target: HTMLElement): allBlock;
+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;
+};