dragon-editor 3.4.4 → 3.5.0

package/dist/runtime/utils/event/block.js

@@ -0,0 +1,78 @@
+import { _updateModelData } from "./index.js";
+import { _updateCurrentBlock } from "../node/index.js";
+export function _imageResizeEventStart(event, store) {
+  const $target = event.target;
+  if ($target !== null) {
+    const $block = $target.closest(".de-block");
+    if ($block !== null && $block.classList.contains("de-image-block") === true && $target.classList.contains("de-btn") === true) {
+      _updateCurrentBlock(event, store);
+      store.value.activeStatus.imageResizeEvent = true;
+      if (event.type === "touchstart") {
+        store.value.eventStatus.imageResizeEventStartX = event.touches[0].clientX;
+      } else {
+        store.value.eventStatus.imageResizeEventStartX = event.clientX;
+      }
+      if ($target.classList.contains("de-btn-left") === true) {
+        store.value.eventStatus.imageResizeEventType = "left";
+      } else {
+        store.value.eventStatus.imageResizeEventType = "right";
+      }
+      const $imgArea = $block.querySelector(".de-image-area");
+      store.value.eventStatus.imageResizeEventEndX = store.value.eventStatus.imageResizeEventStartX;
+      store.value.eventStatus.imageResizeCurrentWidth = parseInt($imgArea.dataset["maxwidth"] ?? "25");
+    }
+  }
+}
+export function _imageResizeEvent(event, store) {
+  if (store.value.activeStatus.imageResizeEvent === true && store.value.controlStatus.$currentBlock !== null && store.value.$body !== null) {
+    const $imgArea = store.value.controlStatus.$currentBlock.querySelector(".de-image-area");
+    const contentWidth = store.value.$body.offsetWidth / 2;
+    let gap = 0;
+    if (event.type === "touchmove") {
+      store.value.eventStatus.imageResizeEventEndX = event.touches[0].clientX;
+    } else {
+      store.value.eventStatus.imageResizeEventEndX = event.clientX;
+    }
+    if (store.value.eventStatus.imageResizeEventType === "right") {
+      gap = Math.floor(store.value.eventStatus.imageResizeEventStartX - store.value.eventStatus.imageResizeEventEndX);
+    } else {
+      gap = Math.floor(store.value.eventStatus.imageResizeEventEndX - store.value.eventStatus.imageResizeEventStartX);
+    }
+    const percent = 100 / contentWidth * gap;
+    let value = Math.floor(store.value.eventStatus.imageResizeCurrentWidth - percent);
+    if (value < 25) {
+      value = 25;
+    }
+    if (value > 100) {
+      value = 100;
+    }
+    $imgArea.dataset["maxwidth"] = String(value);
+  }
+}
+export function _imageResizeEventEnd(event, store) {
+  if (store.value.activeStatus.imageResizeEvent === true) {
+    store.value.activeStatus.imageResizeEvent = false;
+    _updateModelData(store);
+  }
+}
+export function _moveBlock(type, store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const $block = store.value.controlStatus.$currentBlock;
+    let $target;
+    if (type === "up") {
+      $target = $block.previousElementSibling;
+    } else {
+      $target = $block.nextElementSibling;
+    }
+    if ($target !== null) {
+      $target.insertAdjacentHTML(type === "up" ? "beforebegin" : "afterend", $block.outerHTML);
+      $block.remove();
+      if (type === "up") {
+        store.value.controlStatus.$currentBlock = $target.previousElementSibling;
+      } else {
+        store.value.controlStatus.$currentBlock = $target.nextElementSibling;
+      }
+    }
+    _updateModelData(store);
+  }
+}

package/dist/runtime/utils/{cursor.mjs → event/cursor.js}

@@ -1,14 +1,13 @@
-import "../type.d.ts";
-export function _setCursorData(store) {
+export function _updateCursorData(store) {
   const selection = window.getSelection();
   if (selection.type !== "None") {
-    store.setCursorData({
+    store.value.cursorData = {
       type: selection.type,
       startNode: selection.anchorNode,
       startOffset: selection.anchorOffset,
       endNode: selection.focusNode,
       endOffset: selection.focusOffset
-    });
+    };
   }
 }
 export function _setCursor($target, startIdx) {
@@ -62,18 +61,7 @@ export function _setRangeCursor($startTarget, $endTarget, startIdx, endIdx) {
   selection.removeAllRanges();
   selection.addRange(range);
 }
-export function _clenupCursor(store) {
-  _setCursorData(store);
-  if (store.cursorData.startNode !== store.cursorData.endNode || store.cursorData.startOffset !== store.cursorData.endOffset) {
-  } else {
-    if (store.cursorData.startNode.hasChildNodes() === true) {
-      _setCursor(store.cursorData.startNode.childNodes[store.cursorData.startOffset], 0);
-    } else {
-      _setCursor(store.cursorData.startNode, store.cursorData.startOffset);
-    }
-  }
-}
-export function _soltingCursorDataOnElement(cursorData, $element) {
+export function _sortingCursorDataOnElement(cursorData, $element) {
   const childList = $element.childNodes;
   let startNode = cursorData.startNode;
   let startIdx = -1;

package/dist/runtime/utils/event/data.js

@@ -0,0 +1,342 @@
+import { _getCurrentBlock } from "../node/index.js";
+export const CODEBLOCKLANG = [
+  {
+    text: "Plain Text",
+    code: "text"
+  },
+  {
+    text: "Bash",
+    code: "bash"
+  },
+  {
+    text: "C#",
+    code: "csharp"
+  },
+  {
+    text: "C",
+    code: "c"
+  },
+  {
+    text: "C++",
+    code: "cpp"
+  },
+  {
+    text: "CSS",
+    code: "css"
+  },
+  {
+    text: "Django",
+    code: "django"
+  },
+  {
+    text: "Dockerfile",
+    code: "dockerfile"
+  },
+  {
+    text: "Go",
+    code: "go"
+  },
+  {
+    text: "HTML, XML",
+    code: "html"
+  },
+  {
+    text: "JSON",
+    code: "json"
+  },
+  {
+    text: "Java",
+    code: "java"
+  },
+  {
+    text: "JavaScript",
+    code: "js"
+  },
+  {
+    text: "TypeScript",
+    code: "ts"
+  },
+  {
+    text: "Kotlin",
+    code: "kotlin"
+  },
+  {
+    text: "Lua",
+    code: "lua"
+  },
+  {
+    text: "Markdown",
+    code: "md"
+  },
+  {
+    text: "Nginx",
+    code: "nginx"
+  },
+  {
+    text: "PHP",
+    code: "php"
+  },
+  {
+    text: "Python",
+    code: "python"
+  },
+  {
+    text: "Ruby",
+    code: "ruby"
+  },
+  {
+    text: "SCSS",
+    code: "scss"
+  },
+  {
+    text: "SQL",
+    code: "sql"
+  },
+  {
+    text: "Shell",
+    code: "shell"
+  },
+  {
+    text: "Swift",
+    code: "swift"
+  },
+  {
+    text: "YAML",
+    code: "yml"
+  }
+];
+export function _updateModelData(store) {
+  const $body = store.value.$body;
+  if ($body !== null) {
+    const $blockList = $body.querySelectorAll(".de-block");
+    const workList = [];
+    $blockList.forEach(($el) => {
+      let classListText = $el.classList.value.replaceAll("de-block", "");
+      let classList = "";
+      switch (true) {
+        case $el.classList.contains("de-text-block"):
+          workList.push(
+            new Promise((done) => {
+              classList = classListText.replaceAll("de-text-block", "").trim();
+              const textBlockDepth = $el.dataset["depth"];
+              let textBlockData = {
+                type: "text",
+                classList: classList === "" ? [] : classList.split(" "),
+                textContent: $el.innerHTML
+              };
+              if (textBlockDepth !== void 0) {
+                textBlockData.depth = parseInt(textBlockDepth);
+              }
+              done(textBlockData);
+            })
+          );
+          break;
+        case $el.classList.contains("de-heading-block"):
+          workList.push(
+            new Promise((done) => {
+              classList = classListText.replaceAll("de-heading-block", "").trim();
+              const headingBlockDepth = $el.dataset["depth"];
+              let headingBlockData = {
+                type: "heading",
+                id: $el.id,
+                level: parseInt($el.dataset["level"] ?? "3"),
+                classList: classList === "" ? [] : classList.split(" "),
+                textContent: $el.innerHTML
+              };
+              if (headingBlockDepth !== void 0) {
+                headingBlockData.depth = parseInt(headingBlockDepth);
+              }
+              done(headingBlockData);
+            })
+          );
+          break;
+        case $el.classList.contains("de-list-block"):
+          workList.push(
+            new Promise((done) => {
+              const $li = $el.querySelectorAll(".de-item");
+              const liList = [];
+              classList = classListText.replaceAll("de-list-block", "").trim();
+              $li.forEach(($child) => {
+                let childClassName = $child.classList.value.replace("de-item", "");
+                liList.push({
+                  classList: childClassName === "" ? [] : childClassName.split(" "),
+                  textContent: $child.innerHTML
+                });
+              });
+              const listBlockDepth = $el.dataset["depth"];
+              let listBlockData = {
+                type: "list",
+                element: $el.tagName.toLowerCase(),
+                style: $el.dataset["style"],
+                child: liList
+              };
+              if (listBlockDepth !== void 0) {
+                listBlockData.depth = parseInt(listBlockDepth);
+              }
+              done(listBlockData);
+            })
+          );
+          break;
+        case $el.classList.contains("de-image-block"):
+          workList.push(
+            new Promise((done) => {
+              const $imageArea = $el.querySelector(".de-image-area");
+              const $img = $el.querySelector(".de-img");
+              const $caption = $el.querySelector(".de-caption");
+              classList = classListText.replaceAll("de-image-block", "").trim();
+              if ($img.complete === false) {
+                $img.onload = () => {
+                  done({
+                    type: "image",
+                    src: $img.src.replace(store.value.imageHostURL, ""),
+                    maxWidth: parseInt($imageArea.dataset["maxwidth"] ?? "25"),
+                    width: $img.width,
+                    height: $img.height,
+                    caption: $caption?.textContent ?? "",
+                    classList: classList === "" ? [] : classList.split(" ")
+                  });
+                };
+              } else {
+                done({
+                  type: "image",
+                  src: $img.src.replace(store.value.imageHostURL, ""),
+                  maxWidth: parseInt($imageArea.dataset["maxwidth"] ?? "25"),
+                  width: $img.width,
+                  height: $img.height,
+                  caption: $caption?.textContent ?? "",
+                  classList: classList === "" ? [] : classList.split(" ")
+                });
+              }
+            })
+          );
+          break;
+        case $el.classList.contains("de-code-block"):
+          workList.push(
+            new Promise((done) => {
+              const $language = $el.querySelector(".de-language");
+              const $fileName = $el.querySelector(".de-filename");
+              const $codeBlock = $el.querySelector(".de-code-content");
+              let language = "text";
+              classList = classListText.replaceAll("de-code-block", "").trim();
+              if ($language !== null) {
+                const value = $language.textContent ?? "";
+                const targetValue = CODEBLOCKLANG.find((item) => item.text === value);
+                if (targetValue !== void 0) {
+                  language = targetValue.code;
+                }
+              }
+              done({
+                type: "code",
+                theme: $el.dataset["theme"],
+                filename: $fileName?.textContent || "",
+                language,
+                textContent: $codeBlock === null ? "" : $codeBlock.innerHTML
+              });
+            })
+          );
+          break;
+        default:
+          workList.push(
+            new Promise((done) => {
+              classList = classListText.replaceAll("de-custom-block", "").trim();
+              done({
+                type: "custom",
+                classList: classList === "" ? [] : classList.split(" "),
+                textContent: $el.innerHTML
+              });
+            })
+          );
+      }
+    });
+    Promise.all(workList).then((data) => {
+      store.value.emit("update:modelValue", data);
+    });
+  }
+}
+export function _getDefaultBlockData(type) {
+  let data = { type: "text", classList: [], textContent: "" };
+  switch (type) {
+    case "heading1":
+    case "heading2":
+    case "heading3":
+      data = {
+        type: "heading",
+        level: parseInt(type.replace("heading", "")),
+        id: _generateId(),
+        classList: [],
+        textContent: ""
+      };
+      break;
+    case "ol":
+    case "ul":
+      data = {
+        type: "list",
+        element: type,
+        style: type === "ol" ? "decimal" : "disc",
+        child: [
+          {
+            classList: [],
+            textContent: ""
+          }
+        ]
+      };
+      break;
+    case "code":
+      data = {
+        type: "code",
+        language: "text",
+        theme: "github",
+        filename: "",
+        textContent: ""
+      };
+      break;
+  }
+  return data;
+}
+export function _generateId() {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let str = "";
+  for (let i = 0; i < 6; i += 1) {
+    str += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return str;
+}
+export function _updateControlBarStatus(store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const { type } = _getCurrentBlock(store.value.controlStatus.$currentBlock);
+    const allowTypeList = ["code", "ol", "ul"];
+    if (allowTypeList.includes(type) === true) {
+      switch (type) {
+        case "code":
+          __updateCodeBlockStyle(store);
+          break;
+        case "ol":
+        case "ul":
+          __updateListBlockStyle(store);
+          break;
+      }
+    }
+  }
+}
+function __updateCodeBlockStyle(store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const $block = store.value.controlStatus.$currentBlock;
+    const $language = $block.querySelector(".de-language");
+    let language = "text";
+    if ($language !== null) {
+      const value = $language.textContent ?? "";
+      const targetValue = CODEBLOCKLANG.find((item) => item.text === value);
+      if (targetValue !== void 0) {
+        language = targetValue.code;
+      }
+    }
+    store.value.controlStatus.codeBlockTheme = $block.dataset["theme"] ?? "github";
+    store.value.controlStatus.codeBlockLang = language;
+  }
+}
+function __updateListBlockStyle(store) {
+  if (store.value.controlStatus.$currentBlock !== null) {
+    const $block = store.value.controlStatus.$currentBlock;
+    store.value.controlStatus.listBlockStyle = $block.dataset["style"] ?? "disc";
+  }
+}

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

@@ -0,0 +1,8 @@
+export * from "./keyboard.js";
+export * from "./mouse.js";
+export * from "./touch.js";
+export * from "./data.js";
+export * from "./window.js";
+export * from "./scroll.js";
+export * from "./cursor.js";
+export * from "./block.js";

package/dist/runtime/utils/event/index.js

@@ -0,0 +1,8 @@
+export * from "./keyboard.js";
+export * from "./mouse.js";
+export * from "./touch.js";
+export * from "./data.js";
+export * from "./window.js";
+export * from "./scroll.js";
+export * from "./cursor.js";
+export * from "./block.js";