dragon-editor 3.0.2 → 3.1.1

package/dist/runtime/scss/viewer.css

@@ -172,6 +172,285 @@
 .dragon-editor-viewer ol.de-list-block {
   list-style: decimal;
 }
+.dragon-editor-viewer .de-image-block {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.dragon-editor-viewer .de-image-block.de-align-left {
+  align-items: flex-start;
+}
+.dragon-editor-viewer .de-image-block.de-align-left .de-caption {
+  text-align: left;
+}
+.dragon-editor-viewer .de-image-block.de-align-right {
+  align-items: flex-end;
+}
+.dragon-editor-viewer .de-image-block.de-align-right .de-caption {
+  text-align: right;
+}
+.dragon-editor-viewer .de-image-block .de-image-area {
+  position: relative;
+  max-width: 25%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="25"] {
+  max-width: 25%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="26"] {
+  max-width: 26%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="27"] {
+  max-width: 27%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="28"] {
+  max-width: 28%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="29"] {
+  max-width: 29%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="30"] {
+  max-width: 30%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="31"] {
+  max-width: 31%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="32"] {
+  max-width: 32%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="33"] {
+  max-width: 33%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="34"] {
+  max-width: 34%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="35"] {
+  max-width: 35%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="36"] {
+  max-width: 36%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="37"] {
+  max-width: 37%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="38"] {
+  max-width: 38%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="39"] {
+  max-width: 39%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="40"] {
+  max-width: 40%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="41"] {
+  max-width: 41%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="42"] {
+  max-width: 42%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="43"] {
+  max-width: 43%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="44"] {
+  max-width: 44%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="45"] {
+  max-width: 45%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="46"] {
+  max-width: 46%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="47"] {
+  max-width: 47%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="48"] {
+  max-width: 48%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="49"] {
+  max-width: 49%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="50"] {
+  max-width: 50%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="51"] {
+  max-width: 51%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="52"] {
+  max-width: 52%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="53"] {
+  max-width: 53%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="54"] {
+  max-width: 54%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="55"] {
+  max-width: 55%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="56"] {
+  max-width: 56%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="57"] {
+  max-width: 57%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="58"] {
+  max-width: 58%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="59"] {
+  max-width: 59%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="60"] {
+  max-width: 60%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="61"] {
+  max-width: 61%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="62"] {
+  max-width: 62%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="63"] {
+  max-width: 63%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="64"] {
+  max-width: 64%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="65"] {
+  max-width: 65%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="66"] {
+  max-width: 66%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="67"] {
+  max-width: 67%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="68"] {
+  max-width: 68%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="69"] {
+  max-width: 69%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="70"] {
+  max-width: 70%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="71"] {
+  max-width: 71%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="72"] {
+  max-width: 72%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="73"] {
+  max-width: 73%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="74"] {
+  max-width: 74%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="75"] {
+  max-width: 75%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="76"] {
+  max-width: 76%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="77"] {
+  max-width: 77%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="78"] {
+  max-width: 78%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="79"] {
+  max-width: 79%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="80"] {
+  max-width: 80%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="81"] {
+  max-width: 81%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="82"] {
+  max-width: 82%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="83"] {
+  max-width: 83%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="84"] {
+  max-width: 84%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="85"] {
+  max-width: 85%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="86"] {
+  max-width: 86%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="87"] {
+  max-width: 87%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="88"] {
+  max-width: 88%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="89"] {
+  max-width: 89%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="90"] {
+  max-width: 90%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="91"] {
+  max-width: 91%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="92"] {
+  max-width: 92%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="93"] {
+  max-width: 93%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="94"] {
+  max-width: 94%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="95"] {
+  max-width: 95%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="96"] {
+  max-width: 96%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="97"] {
+  max-width: 97%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="98"] {
+  max-width: 98%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="99"] {
+  max-width: 99%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area[data-maxwidth="100"] {
+  max-width: 100%;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-img {
+  width: 100%;
+  height: auto;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 100px;
+  background: #ccc;
+  border: 1px solid #333;
+  transform: translate(-50%, -50%);
+  cursor: col-resize;
+  user-select: none;
+  z-index: 100;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-left {
+  left: 0;
+}
+.dragon-editor-viewer .de-image-block .de-image-area .de-btn.de-btn-right {
+  left: 100%;
+}
+.dragon-editor-viewer .de-image-block .de-caption {
+  width: 100%;
+  min-height: 1.6em;
+  color: #909090;
+  text-align: center;
+  outline: 0;
+}
 .dragon-editor-viewer .de-bold {
   font-weight: 700;
 }
@@ -195,4 +474,16 @@
   background: #f1f1f1;
   color: #ff0000;
   border-radius: 5px;
+}
+.dragon-editor-viewer .de-align-left {
+  text-align: left;
+}
+.dragon-editor-viewer .de-align-right {
+  text-align: right;
+}
+.dragon-editor-viewer .de-align-center {
+  text-align: center;
+}
+.dragon-editor-viewer .de-align-justify {
+  text-align: justify;
 }

package/dist/runtime/store.d.ts

@@ -4,4 +4,5 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"editorStor
     setContentElement(value: HTMLDivElement): void;
     setParentWrapElement(value: HTMLElement | Window): void;
     setCursorData(data: DEditorCursor): void;
+    setCurrentBlock(block: HTMLElement): void;
 }>;

package/dist/runtime/store.mjs

@@ -6,6 +6,7 @@ export const useEditorStore = defineStore("editorStore", {
     message: {
       linkTextNoStyle: "Link text can't set any style."
     },
+    $currentBlock: null,
     $editor: null,
     $content: null,
     $parentWrap: null
@@ -22,6 +23,9 @@ export const useEditorStore = defineStore("editorStore", {
     },
     setCursorData(data) {
       this.cursorData = data;
+    },
+    setCurrentBlock(block) {
+      this.$currentBlock = block;
     }
   }
 });

package/dist/runtime/type.d.ts

@@ -3,6 +3,7 @@ interface EditorStore {
     message: { [key: string]: string };
     $editor: HTMLDivElement | null;
     $content: HTMLDivElement | null;
+    $currentBlock: HTMLElement | null;
     $parentWrap: HTMLElement | Window | null;
 }
 
@@ -23,8 +24,34 @@ interface DEArrangeCursorData {
     endOffset: number;
 }
 
+interface DEImage {
+    src: string;
+    width: number;
+    height: number;
+    classList?: string[];
+    caption?: string;
+}
+
+type DEDecoration = "bold" | "italic" | "underline" | "strikethrough" | "code";
+
+type DETextalign = "left" | "right" | "center" | "justify";
+
+type DEBlock = "text" | "heading" | "ul" | "ol" | "image";
+
+// 컴포넌트 메서드용 타입
+interface DragonEditor {
+    addBlock: (type: DEBlock) => void;
+    addImageBlock: (data: DEImage) => void;
+    setDecoration: (data: DEDecoration) => void;
+    setTextAlign: (type: DETextalign) => void;
+    getContentData: () => DEContentData;
+    setContentData: (data: DEContentData) => void;
+    addCustomBlock: (HTML: string, classList: string[]) => void;
+}
+
 interface DETextBlock {
     type: "text";
+    classList: string[];
     textContent: string;
 }
 
@@ -32,20 +59,40 @@ interface DEHeadingBlock {
     type: "heading";
     level: number;
     id: string;
+    classList: string[];
+    textContent: string;
+}
+
+interface DEListItem {
+    classList: string[];
     textContent: string;
 }
 
 interface DEUListBlock {
     type: "ul";
-    child: string[];
+    child: DEListItem[];
 }
 
 interface DEOListBlock {
     type: "ol";
     pattern: "a" | "i" | "1" | "A" | "I";
-    child: string[];
+    child: DEListItem[];
 }
 
-type DEContent = DETextBlock | DEHeadingBlock | DEUListBlock | DEOListBlock;
+interface DEImageBlock {
+    type: "image";
+    maxWidth: number;
+    src: string;
+    width: number;
+    height: number;
+    caption: string;
+    classList: string[];
+}
+
+interface DECustomBlock {
+    type: "custom";
+    classList: string[];
+    textContent: string;
+}
 
-type DEContentData = DEContent[];
+type DEContentData = (DETextBlock | DEHeadingBlock | DEUListBlock | DEOListBlock | DEImageBlock | DECustomBlock)[];

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

@@ -2,8 +2,10 @@ export declare function _getBlockType(element: HTMLElement): {
     $element: Element;
     type: string;
 };
-export declare function _createTextBlock(content?: string): HTMLParagraphElement;
-export declare function _createHeadingBlock(type: string, content?: string): HTMLElement;
-export declare function _createListBlock(type: string, content?: string[], pattern?: string): HTMLElement;
-export declare function _createListItemBlock(content?: string): HTMLLIElement;
+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 _createListItemBlock(child?: DEListItem): HTMLLIElement;
+export declare function _createImageBlock(data: DEImageBlock): HTMLDivElement;
 export declare function generateId(): string;
+export declare function _createCustomBlock(data: DECustomBlock): HTMLDivElement;

package/dist/runtime/utils/block.mjs

@@ -11,6 +11,9 @@ export function _getBlockType(element) {
     case $block.classList.contains("de-list-block"):
       typeName = "list";
       break;
+    case $block.classList.contains("de-image-block"):
+      typeName = "image";
+      break;
     default:
       typeName = "other";
   }
@@ -19,47 +22,79 @@ export function _getBlockType(element) {
     type: typeName
   };
 }
-export function _createTextBlock(content = "") {
+export function _createTextBlock(data = { type: "text", classList: [], textContent: "" }) {
   const $paragraph = document.createElement("p");
-  $paragraph.classList.add("de-block", "de-text-block");
+  $paragraph.classList.add("de-block", "de-text-block", ...data.classList);
   $paragraph.setAttribute("contenteditable", "true");
-  if (content !== "") {
-    $paragraph.innerHTML = content;
+  if (data.textContent !== "") {
+    $paragraph.innerHTML = data.textContent;
   }
   return $paragraph;
 }
-export function _createHeadingBlock(type, content = "") {
-  const level = parseInt(type.replace("heading", ""));
-  const $headingBlock = document.createElement(`h${level}`);
-  $headingBlock.classList.add("de-block", "de-heading-block");
-  $headingBlock.id = generateId();
-  $headingBlock.dataset["level"] = String(level);
+export function _createHeadingBlock(data) {
+  const $headingBlock = document.createElement(`h${data.level}`);
+  if (data.id === "") {
+    $headingBlock.id = generateId();
+  } else {
+    $headingBlock.id = data.id;
+  }
+  $headingBlock.classList.add("de-block", "de-heading-block", ...data.classList);
+  $headingBlock.dataset["level"] = String(data.level);
   $headingBlock.setAttribute("contenteditable", "true");
-  if (content !== "") {
-    $headingBlock.innerHTML = content;
+  if (data.textContent !== "") {
+    $headingBlock.innerHTML = data.textContent;
   }
   return $headingBlock;
 }
-export function _createListBlock(type, content = [""], pattern) {
-  const $block = document.createElement(type);
+export function _createListBlock(data) {
+  const $block = document.createElement(data.type);
   $block.classList.add("de-block", "de-list-block");
-  if (type === "ol") {
-    $block.type = pattern ?? "1";
+  if (data.type === "ol") {
+    $block.type = data.pattern ?? "1";
   }
-  content.forEach((text) => {
-    $block.appendChild(_createListItemBlock(text));
+  data.child.forEach((child) => {
+    $block.appendChild(_createListItemBlock(child));
   });
   return $block;
 }
-export function _createListItemBlock(content = "") {
+export function _createListItemBlock(child = { textContent: "", classList: [] }) {
   const $li = document.createElement("li");
-  $li.classList.add("de-item");
+  $li.classList.add("de-item", ...child.classList);
   $li.setAttribute("contenteditable", "true");
-  if (content !== "") {
-    $li.innerHTML = content;
+  if (child.textContent !== "") {
+    $li.innerHTML = child.textContent;
   }
   return $li;
 }
+export function _createImageBlock(data) {
+  const $wrap = document.createElement("div");
+  const $div = document.createElement("div");
+  const $leftBtn = document.createElement("button");
+  const $rightBtn = document.createElement("button");
+  const $image = document.createElement("img");
+  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");
+  $image.src = data.src;
+  $image.width = data.width;
+  $image.height = data.height;
+  $image.draggable = false;
+  if (data.caption !== void 0) {
+    $p.textContent = data.caption;
+  }
+  $div.appendChild($image);
+  $div.appendChild($leftBtn);
+  $div.appendChild($rightBtn);
+  $wrap.appendChild($div);
+  $wrap.appendChild($p);
+  return $wrap;
+}
 export function generateId() {
   const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let str = "";
@@ -68,3 +103,9 @@ export function generateId() {
   }
   return str;
 }
+export function _createCustomBlock(data) {
+  const $block = document.createElement("div");
+  $block.classList.add("de-block", "de-custom-block", ...data.classList);
+  $block.innerHTML = data.textContent;
+  return $block;
+}

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

@@ -0,0 +1,2 @@
+import "../type.d.ts";
+export declare function _addBlockToContent($block: HTMLElement, store: any): void;

package/dist/runtime/utils/content.mjs

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

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

@@ -1,2 +1,3 @@
+import "../type.d.ts";
 export declare function _getContentData($content: HTMLDivElement): DEContentData;
-export declare function _setContentData(data: any[], store: any): void;
+export declare function _setContentData(data: DEContentData, store: any): void;