dragon-editor 3.4.5 → 3.5.1

package/dist/runtime/type.d.ts

@@ -1,4 +1,28 @@
-interface EditorStore {
+export type DEContentData = DEBlockData[];
+
+export type DEBlockData = DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECodeBlock | DECustomBlock;
+
+export type DEIconKind = "plus" | "bold" | "italic" | "underline" | "strikethrough" | "codeblock" | "add-link" | "remove-link" | "image" | "align-center" | "align-left" | "align-right" | "align-justify" | "move-up" | "move-down" | "indent-decrease" | "indent-increase";
+
+export type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
+
+export type DETextalign = "left" | "right" | "center" | "justify";
+
+export type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code" | "custom";
+
+export type DEBlockMenutype = "text" | "heading1" | "heading2" | "heading3" | "ul" | "ol" | "image" | "code" | "custom";
+
+export type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
+
+export type DECodeblockTheme = "github" | "github-dark-dimmed";
+
+export type DECodeblockLang = "text" | "bash" | "csharp" | "c" | "cpp" | "css" | "django" | "dockerfile" | "go" | "html" | "json" | "java" | "js" | "ts" | "kotlin" | "lua" | "md" | "nginx" | "php" | "python" | "ruby" | "scss" | "sql" | "shell" | "swift" | "yml";
+
+export type DEBlockElement = HTMLParagraphElement | HTMLHeadingElement | HTMLElement | HTMLDivElement;
+
+export type DEListElementName = "ul" | "ol";
+
+export interface DragonEditorStore {
     cursorData: DEditorCursor | null;
     message: { [key: string]: string };
     controlBar: {
@@ -7,13 +31,55 @@ interface EditorStore {
         y: number;
         $element: HTMLDivElement | null;
     };
+    useMenuBar: boolean;
+    imageHostURL: string;
+    firstData: DEContentData;
+    menuBarTop: number;
+    activeStatus: {
+        addBlockMenu: boolean;
+        anchorInputArea: boolean;
+        imageResizeEvent: boolean;
+    };
+    eventStatus: {
+        preComposing: boolean;
+        imageResizeEventStartX: number;
+        imageResizeEventType: "right" | "left";
+        imageResizeEventEndX: number;
+        imageResizeCurrentWidth: number;
+        keyboardEnterCount: number;
+    };
+    controlStatus: {
+        isMobile: boolean;
+        anchorValidation: boolean;
+        currentBlockType: DEBlock;
+        codeBlockTheme: DECodeblockTheme;
+        codeBlockLang: DECodeblockLang;
+        listBlockStyle: DEListStyle;
+        anchorTabType: "url" | "heading";
+        anchorHeadingList: DEHeadingItem[];
+        anchorHref: string;
+        previousCorsorData: DEditorCursor | null;
+        $anchorInput: HTMLInputElement | null;
+        $currentBlock: HTMLDivElement | null;
+    };
+    codeBlockTheme: DECodeItem<DECodeblockTheme>[];
+    listUlType: DECodeItem<DEListStyle>[];
+    listOlType: DECodeItem<DEListStyle>[];
     $editor: HTMLDivElement | null;
-    $content: HTMLDivElement | null;
-    $currentBlock: HTMLElement | null;
+    $body: HTMLDivElement | null;
+    $controlBar: HTMLDivElement | null;
     $parentWrap: HTMLElement | Window | null;
+    windowClickEvent(event: MouseEvent): void;
+    windowResizeEvent(event: Event): void;
+    windowMouseUpEvent(event: MouseEvent): void;
+    parentWrapScollEvent(event: Event): void;
+    emit: {
+        (e: "update:modelValue", data: DEContentData): void;
+        (e: "uploadImageEvent", file: File): void;
+    };
 }
 
-interface DEditorCursor {
+export interface DEditorCursor {
     type: "Range" | "Caret" | "None";
     startNode: Node;
     startOffset: number;
@@ -21,7 +87,7 @@ interface DEditorCursor {
     endOffset: number;
 }
 
-interface DEArrangeCursorData {
+export interface DEArrangeCursorData {
     startNode: Node;
     startNodeIdx: number;
     startOffset: number;
@@ -30,70 +96,53 @@ interface DEArrangeCursorData {
     endOffset: number;
 }
 
-interface DEImage {
-    src: string;
-    width: number;
-    height: number;
-    classList?: string[];
-    caption?: string;
-}
-
-interface DECodeItem {
+export interface DECodeItem<T = string> {
     text: string;
-    code: string;
+    code: T;
 }
 
-interface DEHeadingItem {
+export interface DEHeadingItem {
     name: string;
     id: string;
 }
 
-type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
-
-type DETextalign = "left" | "right" | "center" | "justify";
-
-type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code";
-
 // 컴포넌트 메서드용 타입
-interface DragonEditor {
-    addBlock: (type: DEBlock) => void;
-    addImageBlock: (data: DEImage) => void;
+export interface DragonEditor {
+    addBlock: (type: DEBlockData) => void;
     setDecoration: (data: DEDecoration) => void;
     setTextAlign: (type: DETextalign) => void;
-    getContentData: () => DEContentData;
-    setContentData: (data: DEContentData) => void;
-    addCustomBlock: (HTML: string, classList: string[]) => void;
 }
 
-interface DETextBlock {
+export interface DETextBlock {
     type: "text";
     classList: string[];
+    depth?: number;
     textContent: string;
 }
 
-interface DEHeadingBlock {
+export interface DEHeadingBlock {
     type: "heading";
     level: number;
     id: string;
+    depth?: number;
     classList: string[];
     textContent: string;
 }
 
-interface DEListItem {
+export interface DEListItem {
     classList: string[];
     textContent: string;
 }
 
-type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
-
-interface DEListBlock {
+export interface DEListBlock {
     type: "list";
-    element: "ul" | "ol";
+    element: DEListElementName;
+    depth?: number;
     style: DEListStyle;
     child: DEListItem[];
 }
 
-interface DEImageBlock {
+export interface DEImageBlock {
     type: "image";
     maxWidth: number;
     src: string;
@@ -103,18 +152,16 @@ interface DEImageBlock {
     classList: string[];
 }
 
-interface DECodeBlock {
+export interface DECodeBlock {
     type: "code";
-    language: string;
-    theme: string;
+    language: DECodeblockLang;
+    theme: DECodeblockTheme;
     filename: string;
     textContent: string;
 }
 
-interface DECustomBlock {
+export interface DECustomBlock {
     type: "custom";
     classList: string[];
     textContent: string;
 }
-
-type DEContentData = (DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECustomBlock | DECodeBlock)[];

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";