dragon-editor 3.1.1 → 3.2.0

package/dist/runtime/store.mjs

@@ -6,6 +6,12 @@ export const useEditorStore = defineStore("editorStore", {
     message: {
       linkTextNoStyle: "Link text can't set any style."
     },
+    controlBar: {
+      active: false,
+      x: 0,
+      y: 0,
+      $element: null
+    },
     $currentBlock: null,
     $editor: null,
     $content: null,
@@ -26,6 +32,18 @@ export const useEditorStore = defineStore("editorStore", {
     },
     setCurrentBlock(block) {
       this.$currentBlock = block;
+    },
+    setContrulBar(value) {
+      this.controlBar.$element = value;
+    },
+    controlBarActive() {
+      const currentRect = this.$currentBlock.getBoundingClientRect();
+      this.controlBar.active = true;
+      this.controlBar.x = Math.floor(currentRect.x + currentRect.width / 2);
+      this.controlBar.y = Math.floor(currentRect.y - 50);
+    },
+    controlBarDeactive() {
+      this.controlBar.active = false;
     }
   }
 });

package/dist/runtime/type.d.ts

@@ -1,6 +1,12 @@
 interface EditorStore {
     cursorData: DEditorCursor | null;
     message: { [key: string]: string };
+    controlBar: {
+        active: boolean;
+        x: number;
+        y: number;
+        $element: HTMLDivElement | null;
+    };
     $editor: HTMLDivElement | null;
     $content: HTMLDivElement | null;
     $currentBlock: HTMLElement | null;
@@ -32,11 +38,16 @@ interface DEImage {
     caption?: string;
 }
 
+interface DECodeItem {
+    text: string;
+    code: string;
+}
+
 type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
 
 type DETextalign = "left" | "right" | "center" | "justify";
 
-type DEBlock = "text" | "heading" | "ul" | "ol" | "image";
+type DEBlock = "text" | "heading" | "ul" | "ol" | "image" | "code";
 
 // 컴포넌트 메서드용 타입
 interface DragonEditor {
@@ -68,14 +79,12 @@ interface DEListItem {
     textContent: string;
 }
 
-interface DEUListBlock {
-    type: "ul";
-    child: DEListItem[];
-}
+type DEListStyle = "disc" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 
-interface DEOListBlock {
-    type: "ol";
-    pattern: "a" | "i" | "1" | "A" | "I";
+interface DEListBlock {
+    type: "list";
+    element: "ul" | "ol";
+    style: DEListStyle;
     child: DEListItem[];
 }
 
@@ -89,10 +98,18 @@ interface DEImageBlock {
     classList: string[];
 }
 
+interface DECodeBlock {
+    type: "code";
+    language: string;
+    theme: string;
+    filename: string;
+    textContent: string;
+}
+
 interface DECustomBlock {
     type: "custom";
     classList: string[];
     textContent: string;
 }
 
-type DEContentData = (DETextBlock | DEHeadingBlock | DEUListBlock | DEOListBlock | DEImageBlock | DECustomBlock)[];
+type DEContentData = (DETextBlock | DEHeadingBlock | DEListBlock | DEImageBlock | DECustomBlock | DECodeBlock)[];

package/dist/runtime/utils/block.d.ts

@@ -1,11 +1,13 @@
+import "../type.d.ts";
 export declare function _getBlockType(element: HTMLElement): {
     $element: Element;
     type: string;
 };
 export declare function _createTextBlock(data?: DETextBlock): HTMLParagraphElement;
 export declare function _createHeadingBlock(data: DEHeadingBlock): HTMLHeadingElement;
-export declare function _createListBlock(data: DEUListBlock | DEOListBlock): HTMLElement;
+export declare function _createListBlock(data: DEListBlock): HTMLElement;
 export declare function _createListItemBlock(child?: DEListItem): HTMLLIElement;
 export declare function _createImageBlock(data: DEImageBlock): HTMLDivElement;
-export declare function generateId(): string;
+export declare function _createCodeBlock(data: DECodeBlock): HTMLDivElement;
+export declare function _generateId(): string;
 export declare function _createCustomBlock(data: DECustomBlock): HTMLDivElement;

package/dist/runtime/utils/block.mjs

@@ -1,3 +1,4 @@
+import "../type.d.ts";
 export function _getBlockType(element) {
   const $block = element.closest(".de-block");
   let typeName;
@@ -14,6 +15,9 @@ export function _getBlockType(element) {
     case $block.classList.contains("de-image-block"):
       typeName = "image";
       break;
+    case $block.classList.contains("de-code-block"):
+      typeName = "code";
+      break;
     default:
       typeName = "other";
   }
@@ -34,7 +38,7 @@ export function _createTextBlock(data = { type: "text", classList: [], textConte
 export function _createHeadingBlock(data) {
   const $headingBlock = document.createElement(`h${data.level}`);
   if (data.id === "") {
-    $headingBlock.id = generateId();
+    $headingBlock.id = _generateId();
   } else {
     $headingBlock.id = data.id;
   }
@@ -47,11 +51,9 @@ export function _createHeadingBlock(data) {
   return $headingBlock;
 }
 export function _createListBlock(data) {
-  const $block = document.createElement(data.type);
+  const $block = document.createElement(data.element);
   $block.classList.add("de-block", "de-list-block");
-  if (data.type === "ol") {
-    $block.type = data.pattern ?? "1";
-  }
+  $block.dataset["style"] = data.style;
   data.child.forEach((child) => {
     $block.appendChild(_createListItemBlock(child));
   });
@@ -75,12 +77,16 @@ export function _createImageBlock(data) {
   const $p = document.createElement("p");
   $wrap.classList.add("de-block", "de-image-block", ...data.classList);
   $div.classList.add("de-image-area");
-  $div.dataset["maxwidth"] = String(data.maxWidth);
   $leftBtn.classList.add("de-btn", "de-btn-left");
   $rightBtn.classList.add("de-btn", "de-btn-right");
   $image.classList.add("de-img");
   $p.contentEditable = "true";
   $p.classList.add("de-caption");
+  if (data.width / data.height < 1) {
+    $div.dataset["maxwidth"] = "40";
+  } else {
+    $div.dataset["maxwidth"] = String(data.maxWidth);
+  }
   $image.src = data.src;
   $image.width = data.width;
   $image.height = data.height;
@@ -95,7 +101,34 @@ export function _createImageBlock(data) {
   $wrap.appendChild($p);
   return $wrap;
 }
-export function generateId() {
+export function _createCodeBlock(data) {
+  const $wrap = document.createElement("div");
+  const $file = document.createElement("p");
+  const $lang = document.createElement("p");
+  const $pre = document.createElement("pre");
+  const $code = document.createElement("code");
+  $wrap.classList.add("de-block", "de-code-block");
+  $wrap.dataset["theme"] = data.theme;
+  $file.contentEditable = "true";
+  $file.classList.add("de-filename");
+  $lang.textContent = data.language;
+  $lang.classList.add("de-language");
+  $pre.classList.add("de-pre");
+  $code.contentEditable = "true";
+  $code.classList.add("de-code-content");
+  if (data.filename !== "") {
+    $file.textContent = data.filename;
+  }
+  if (data.textContent !== "") {
+    $code.innerHTML = data.textContent;
+  }
+  $pre.appendChild($code);
+  $wrap.appendChild($file);
+  $wrap.appendChild($lang);
+  $wrap.appendChild($pre);
+  return $wrap;
+}
+export function _generateId() {
   const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let str = "";
   for (let i = 0; i < 6; i++) {

package/dist/runtime/utils/content.mjs

@@ -1,15 +1,19 @@
 import { _clenupCursor } from "./cursor.mjs";
 import "../type.d.ts";
 export function _addBlockToContent($block, store) {
-  if (store.cursorData === null) {
+  if (store.cursorData === null && store.$currentBlock === null) {
     store.$content.insertAdjacentElement("beforeend", $block);
   } else {
     _clenupCursor(store);
-    let $target = store.cursorData.startNode;
-    if ($target.constructor.name === "Text") {
-      $target = $target.parentNode;
+    if (store.$currentBlock === null) {
+      let $target = store.cursorData.startNode;
+      if ($target.constructor.name === "Text") {
+        $target = $target.parentNode;
+      }
+      const $targetBlock = $target.closest(".de-block");
+      $targetBlock.insertAdjacentElement("afterend", $block);
+    } else {
+      store.$currentBlock.insertAdjacentElement("afterend", $block);
     }
-    const $targetBlock = $target.closest(".de-block");
-    $targetBlock.insertAdjacentElement("afterend", $block);
   }
 }

package/dist/runtime/utils/controlBar.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from "vue";
+import "../type.d.ts";
+export declare function _getCodeBlockTheme(): DECodeItem[];
+export declare function _getCodeBlockLanguage(): DECodeItem[];
+export declare function _setCodeBlockTheme(store: any, theme: string): void;
+export declare function _setCodeBlockLanguage(store: any, lang: string): void;
+export declare function _updateCodeBlockStyle(store: any, themeRef: Ref<string>, langRef: Ref<string>): void;
+export declare function _setListBlockStyle(store: any, style: DEListStyle): void;
+export declare function _updateListBlockStyle(store: any, styleRef: Ref<DEListStyle>): void;

package/dist/runtime/utils/controlBar.mjs

@@ -0,0 +1,172 @@
+import { _getBlockType } from "./block.mjs";
+import hljs from "highlight.js";
+import "../type.d.ts";
+export function _getCodeBlockTheme() {
+  return [
+    {
+      text: "GitHub",
+      code: "github"
+    },
+    {
+      text: "GitHub Dark Dimmed",
+      code: "github-dark-dimmed"
+    }
+  ];
+}
+export function _getCodeBlockLanguage() {
+  return [
+    {
+      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 _setCodeBlockTheme(store, theme) {
+  if (store.$currentBlock !== null) {
+    const { $element, type } = _getBlockType(store.$currentBlock);
+    if (type === "code") {
+      $element.dataset["theme"] = theme;
+    }
+  }
+}
+export function _setCodeBlockLanguage(store, lang) {
+  if (store.$currentBlock !== null) {
+    const { $element, type } = _getBlockType(store.$currentBlock);
+    if (type === "code") {
+      const $langText = $element.querySelector(".de-language");
+      const $code = $element.querySelector(".de-code-content");
+      const convert = hljs.highlight($code.textContent ?? "", { language: lang });
+      $langText.textContent = convert._top.name ?? "";
+      $code.innerHTML = convert.value;
+    }
+  }
+}
+export function _updateCodeBlockStyle(store, themeRef, langRef) {
+  if (store.$currentBlock !== null) {
+    const { $element, type } = _getBlockType(store.$currentBlock);
+    if (type === "code") {
+      const theme = $element.dataset["theme"] ?? "github";
+      const $langText = $element.querySelector(".de-language").textContent;
+      const langItem = _getCodeBlockLanguage().find((item) => item.text === $langText);
+      themeRef.value = theme;
+      langRef.value = langItem?.code ?? "Plain Text";
+    }
+  }
+}
+export function _setListBlockStyle(store, style) {
+  if (store.$currentBlock !== null) {
+    const { $element, type } = _getBlockType(store.$currentBlock);
+    if (type === "list") {
+      $element.dataset["style"] = style;
+    }
+  }
+}
+export function _updateListBlockStyle(store, styleRef) {
+  if (store.$currentBlock !== null) {
+    const { $element, type } = _getBlockType(store.$currentBlock);
+    if (type === "list") {
+      const style = $element.dataset["style"];
+      styleRef.value = style;
+    }
+  }
+}

package/dist/runtime/utils/convertor.mjs

@@ -1,4 +1,4 @@
-import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCustomBlock } from "./block.mjs";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "./block.mjs";
 import "../type.d.ts";
 export function _getContentData($content) {
   const childList = $content.children;
@@ -19,12 +19,8 @@ export function _getContentData($content) {
         data.push(converteHeadingToData($child, 3));
         break;
       case "UL":
-        data.push(converteUListToData($child));
-        break;
       case "OL":
-        data.push(converteOListToData($child));
-        break;
-      case "PRE":
+        data.push(converteListToData($child));
         break;
       case "DIV":
         data.push(converteDivToData($child));
@@ -43,22 +39,14 @@ export function _setContentData(data, store) {
       case "heading":
         childList.push(_createHeadingBlock(item));
         break;
-      case "ul":
-      case "ol":
+      case "list":
         childList.push(_createListBlock(item));
         break;
       case "image":
-        childList.push(
-          _createImageBlock({
-            type: item.type,
-            src: item.src,
-            maxWidth: item.maxWidth,
-            width: item.width,
-            height: item.height,
-            caption: item.caption,
-            classList: item.classList
-          })
-        );
+        childList.push(_createImageBlock(item));
+        break;
+      case "code":
+        childList.push(_createCodeBlock(item));
         break;
       case "custom":
         childList.push(_createCustomBlock(item));
@@ -83,21 +71,11 @@ function converteHeadingToData($child, level) {
     textContent: $child.innerHTML
   };
 }
-function converteUListToData($child) {
-  return {
-    type: "ul",
-    child: [...$child.children].map(($li) => {
-      return {
-        classList: getClassListWithoutDefaultClass($li),
-        textContent: $li.innerHTML
-      };
-    })
-  };
-}
-function converteOListToData($child) {
+function converteListToData($child) {
   return {
-    type: "ol",
-    pattern: $child.type,
+    type: "list",
+    element: $child.tagName.toLowerCase(),
+    style: $child.dataset["style"],
     child: [...$child.children].map(($li) => {
       return {
         classList: getClassListWithoutDefaultClass($li),
@@ -112,6 +90,9 @@ function converteDivToData($child) {
     case $child.classList.contains("de-image-block"):
       data = convertImageBlock($child);
       break;
+    case $child.classList.contains("de-code-block"):
+      data = convertCodeBlock($child);
+      break;
     case $child.classList.contains("de-custom-block"):
       data = convertCustomBlock($child);
       break;
@@ -132,6 +113,18 @@ function convertImageBlock($imageBlock) {
     classList: getClassListWithoutDefaultClass($imageBlock)
   };
 }
+function convertCodeBlock($codeBlock) {
+  const $code = $codeBlock.querySelector(".de-code-content");
+  const $file = $codeBlock.querySelector(".de-filename");
+  const $lang = $codeBlock.querySelector(".de-language");
+  return {
+    type: "code",
+    theme: $codeBlock.dataset["theme"],
+    filename: $file?.textContent ?? "",
+    language: $lang?.textContent ?? "text",
+    textContent: $code?.innerHTML ?? ""
+  };
+}
 function convertCustomBlock($block) {
   return {
     type: "custom",

package/dist/runtime/utils/keyboardEvent.d.ts

@@ -6,5 +6,5 @@ export declare function _hotKeyEvent(event: KeyboardEvent, store: any): void;
 /**
  * 복사 & 붙여넣기 이벤트
  */
-export declare function copyEvent(event: KeyboardEvent, store: any): void;
-export declare function pasteEvent(event: KeyboardEvent, store: any): void;
+export declare function _copyEvent(event: ClipboardEvent, store: any): void;
+export declare function _pasteEvent(event: ClipboardEvent, store: any, emit: any): Promise<void>;