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

package/README.md

@@ -1,14 +1,35 @@
-[![Github stars](https://img.shields.io/github/stars/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/stargazers)
-[![Github issues](https://img.shields.io/github/issues/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/issues)
-[![Github forks](https://img.shields.io/github/forks/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/network/members)
-[![Github top language](https://img.shields.io/github/languages/top/lovefields/dragonEditor)](https://github.com/lovefields/dragonEditor/)
-[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Flovefields%2FdragonEditor&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
+[stars-src]: https://img.shields.io/github/stars/lovefields/dragonEditor
+[stars-href]: https://github.com/lovefields/dragonEditor/stargazers
+[issues-src]: https://img.shields.io/github/issues/lovefields/dragonEditor
+[issues-href]: https://github.com/lovefields/dragonEditor/issues
+[forks-src]: https://img.shields.io/github/forks/lovefields/dragonEditor
+[forks-href]: https://github.com/lovefields/dragonEditor/network/members
+[language-src]: https://img.shields.io/github/languages/top/lovefields/dragonEditor
+[language-href]: https://github.com/lovefields/dragonEditor/
+[hits-src]: https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Flovefields%2FdragonEditor&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false
+[hits-href]: https://hits.seeyoufarm.com
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://www.npmjs.com/package/dragon-editor
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://www.npmjs.com/package/dragon-editor
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://www.npmjs.com/package/dragon-editor
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
+[readme-ko]: https://github.com/lovefields/dragonEditor/blob/main/README.md
+[readme-en]: https://github.com/lovefields/dragonEditor/blob/main/README_en.md
+
+[![Github stars](stars-src)](stars-href)
+[![Github issues](issues-src)](issues-href)
+[![Github forks](forks-src)](forks-href)
+[![Github top language](language-src)](language-href)
+[![Hits](hits-src)](hits-href)
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-[KO](https://github.com/lovefields/dragonEditor/blob/main/README.md) / [EN](https://github.com/lovefields/dragonEditor/blob/main/README_en.md)
+[KO](readme-ko) / [EN](readme-en)
 
 # DragonEditor
 
@@ -102,14 +123,3 @@ const contentData = ref([]); // 에디터로 저장한 데이터
 ## 문서
 
 -   [DragonEditor Document](https://lovefields.github.io/dragonEditor-doc/) -->
-
-<!-- Badges -->
-
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://www.npmjs.com/package/dragon-edito
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://www.npmjs.com/package/dragon-edito
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://www.npmjs.com/package/dragon-edito
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "dragon-editor",
   "configKey": "dragon-editor",
-  "version": "2.0.0-beta.2"
+  "version": "2.0.0-beta.2.1.1"
 }

package/dist/runtime/core/components/editor/ImageBlock.vue

@@ -6,13 +6,13 @@
 
             <template v-if="data.webp">
                 <picture>
-                    <source :srcset="data.src.replace(/\.(jpg|png)/g, '.webp')">
-                    <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy">
+                    <source :srcset="data.src.replace(/\.(jpg|png|jpeg|apng|gif)/g, '.webp')" />
+                    <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy" />
                 </picture>
             </template>
 
             <template v-else>
-                <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy">
+                <img class="d-img" :src="data.src" :width="data.width" :height="data.height" :alt="data.caption" loading="lazy" />
             </template>
         </div>
         <p class="d-caption" v-html="data.caption" @keydown="textKeyboardEvent" ref="$caption" contenteditable></p>
@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+// @ts-ignore
 import { ref, unref } from "#imports";
 import { keyboardEvent, pasteText, styleSettings } from "../../utils/index";
 import { imageBlock, cursorSelection, styleFunctionArgument } from "../../../../types/index";

package/dist/runtime/core/components/editor/OlBlock.vue

@@ -0,0 +1,135 @@
+<template>
+    <ol class="d-ol-block" :class="data.classList" @keydown="textKeyboardEvent">
+        <li class="d-li-item" contenteditable ref="$olItem"></li>
+    </ol>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { cursorSelection, listBlock, styleFunctionArgument } from "../../../../types";
+import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent } from "../../utils";
+
+const $olItem = ref();
+const data = ref<listBlock>({
+    type: "",
+    id: "",
+    classList: [],
+    childList: [],
+});
+const props = defineProps<{ modelValue: listBlock; cursorData: cursorSelection }>();
+const emit = defineEmits<{
+    (e: "update:modelValue", modelValue: listBlock): void;
+    (e: "addBlock", {}: { name: string; value: object }): void;
+    (e: "deleteBlockLocal", index?: number): void;
+}>();
+data.value = unref(props.modelValue) as listBlock;
+
+if(data.value.childList.length === 0){
+
+}
+
+// 키보드 이벤트 할당
+function textKeyboardEvent(e: KeyboardEvent) {
+    keyboardEvent("ol", e, emit, updateBlockData);
+}
+
+/**
+ * 외부용 함수
+ */
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    // const blockClassList = [...$block.value.classList];
+    // blockClassList.splice(0, 1);
+    // const pushList = blockClassList.filter((item) => data.value.classList.indexOf(item) === -1);
+    // data.value.classList = data.value.classList.concat(pushList);
+    // // 클레스 검수
+    // const checkClassIdx = data.value.classList.indexOf("d-text-block");
+    // if (checkClassIdx > -1) {
+    //     data.value.classList.splice(checkClassIdx, 1);
+    // }
+    // // 커서위치 재지정
+    // if ($block.value.innerHTML.length > 0) {
+    //     const cursorData = getArrangementCursorData(props.cursorData);
+    //     data.value.content = $block.value.innerHTML;
+    //     emit("update:modelValue", data.value);
+    //     setTimeout(() => {
+    //         if ($block.value) {
+    //             setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
+    //             // 구조 검수
+    //             $block.value.childNodes.forEach((child: ChildNode) => {
+    //                 const $child = child as HTMLElement;
+    //                 if (child.constructor.name !== "Text") {
+    //                     // 텍스트가 아닐경우
+    //                     if (child.constructor.name !== "HTMLBRElement") {
+    //                         // br 태그 유지
+    //                         if (child.textContent === "") {
+    //                             // 빈 태그 삭제
+    //                             child.remove();
+    //                         } else if ($child.classList.length === 0) {
+    //                             // 클레스 없는 엘리먼트 처리
+    //                             $child.insertAdjacentHTML("afterend", $child.innerHTML);
+    //                             child.remove();
+    //                         }
+    //                     } else {
+    //                         $child.removeAttribute("class");
+    //                     }
+    //                 }
+    //             });
+    //         }
+    //     }, 100);
+    // } else {
+    //     emit("update:modelValue", data.value);
+    // }
+}
+
+// 포커스
+function focus(type: string = "first") {
+    // if (type === "first") {
+    //     setCursor($block.value, 0);
+    // } else {
+    //     const childCount = $block.value.childNodes.length;
+    //     const targetChild = $block.value.childNodes[childCount - 1];
+    //     setCursor(targetChild, 0);
+    // }
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    // return $block.value.parentNode.getBoundingClientRect();
+}
+
+// 타입 전달
+function getType() {
+    return data.value.type;
+}
+
+// 붙여넣기 이벤트
+function pasteEvent(text: string) {
+    pasteText("text", text);
+}
+
+// 텍스트 스타일 지정
+function setStyles({ type, url }: styleFunctionArgument) {
+    data.value = styleSettings({
+        kind: type,
+        blockData: data.value,
+        $target: undefined,
+        url: url,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    focus,
+    getType,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>

package/dist/runtime/core/components/editor/TextBlock.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+// @ts-ignore
 import { ref, unref } from "#imports";
 import { keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData } from "../../utils/index";
 import { textBlock, styleFunctionArgument, cursorSelection } from "../../../../types/index";
@@ -48,16 +49,41 @@ function updateBlockData() {
 
     // 커서위치 재지정
     if ($block.value.innerHTML.length > 0) {
-        const cursorData = getArrangementCursorData(props.cursorData);
-
-        data.value.content = $block.value.innerHTML;
-        emit("update:modelValue", data.value);
-
-        setTimeout(() => {
+        if (props.cursorData.endOffset !== null) {
+            const cursorData = getArrangementCursorData(props.cursorData);
+
+            data.value.content = $block.value.innerHTML;
+            emit("update:modelValue", data.value);
+
+            setTimeout(() => {
+                if ($block.value) {
+                    setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
+
+                    // 구조 검수
+                    $block.value.childNodes.forEach((child: ChildNode) => {
+                        const $child = child as HTMLElement;
+
+                        if (child.constructor.name !== "Text") {
+                            // 텍스트가 아닐경우
+                            if (child.constructor.name !== "HTMLBRElement") {
+                                // br 태그 유지
+                                if (child.textContent === "") {
+                                    // 빈 태그 삭제
+                                    child.remove();
+                                } else if ($child.classList.length === 0) {
+                                    // 클레스 없는 엘리먼트 처리
+                                    $child.insertAdjacentHTML("afterend", $child.innerHTML);
+                                    child.remove();
+                                }
+                            } else {
+                                $child.removeAttribute("class");
+                            }
+                        }
+                    });
+                }
+            }, 100);
+        } else {
             if ($block.value) {
-                setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
-
-                // 구조 검수
                 $block.value.childNodes.forEach((child: ChildNode) => {
                     const $child = child as HTMLElement;
 
@@ -78,8 +104,11 @@ function updateBlockData() {
                         }
                     }
                 });
+
+                data.value.content = $block.value.innerHTML;
+                emit("update:modelValue", data.value);
             }
-        }, 100);
+        }
     } else {
         emit("update:modelValue", data.value);
     }

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

@@ -2,7 +2,10 @@
   position: relative;
   width: 100%;
   padding: 10px 10px 50px;
+  background: #fff;
+  border-radius: 10px;
   line-height: 1.6;
+  box-sizing: border-box;
 }
 .dragon-editor.--comment {
   padding: 10px;
@@ -109,6 +112,24 @@
 .dragon-editor .d-deco-link {
   color: inherit;
 }
+.dragon-editor .d-h1 {
+  font-size: 2em;
+}
+.dragon-editor .d-h2 {
+  font-size: 1.5em;
+}
+.dragon-editor .d-h3 {
+  font-size: 1.17em;
+}
+.dragon-editor .d-h4 {
+  font-size: 1em;
+}
+.dragon-editor .d-h5 {
+  font-size: 0.83em;
+}
+.dragon-editor .d-h6 {
+  font-size: 0.67em;
+}
 .dragon-editor .d-row-block {
   padding-left: 50px;
   border-radius: 5px;
@@ -130,6 +151,23 @@
   content: "Write text";
   color: #ccc;
 }
+.dragon-editor .d-ol-block {
+  padding-left: 30px;
+  cursor: text;
+  list-style: decimal;
+}
+.dragon-editor .d-ol-block .d-li-item {
+  list-style: inherit;
+  outline: 0;
+}
+.dragon-editor .d-ol-block .d-li-item:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-ol-block .d-li-item:empty::after {
+  display: inline;
+  content: "Write text";
+  color: #ccc;
+}
 .dragon-editor .d-image-block {
   display: flex;
   flex-direction: column;
@@ -362,6 +400,7 @@
 .dragon-editor .d-style-menu .d-column {
   display: flex;
   column-gap: 2px;
+  position: relative;
   padding: 5px;
   border-right: 1px solid #eee;
   box-sizing: border-box;
@@ -380,6 +419,27 @@
 .dragon-editor .d-style-menu .d-btn.--active {
   fill: blue;
 }
+.dragon-editor .d-style-menu .d-btn.--hug {
+  width: auto;
+  min-width: 60px;
+}
+.dragon-editor .d-style-menu .d-child-list {
+  display: none;
+  flex-direction: column;
+  row-gap: 4px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #f1f1f1;
+  border-top: 0;
+  border-radius: 0 0 5px 5px;
+}
+.dragon-editor .d-style-menu .d-child-list.--active {
+  display: flex;
+}
 .dragon-editor .d-link-box {
   display: flex;
   justify-content: space-between;

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

@@ -1,2 +1,3 @@
-export declare function findEditableElement(node: Node): (HTMLElement | null);
+export declare function findEditableElement(node: Node): HTMLElement | null;
+export declare function findLiElement(node: Node): HTMLElement | null;
 export declare function findChildNumber(parent: HTMLElement, child: Node): number;

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

@@ -18,6 +18,17 @@ export function findEditableElement(node) {
     return null;
   }
 }
+export function findLiElement(node) {
+  if (node) {
+    if (node.constructor.name !== "HTMLLIElement") {
+      return findLiElement(node.parentNode);
+    } else {
+      return node;
+    }
+  } else {
+    return null;
+  }
+}
 export function findChildNumber(parent, child) {
   let idx = 0;
   parent.childNodes.forEach((item, count) => {

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

@@ -50,9 +50,25 @@ function createImageBlock(data) {
     caption: data.caption
   };
 }
+function createlistBlock(type = "ul") {
+  return {
+    type,
+    id: generateId(),
+    classList: [],
+    childList: [
+      {
+        classList: [],
+        content: ""
+      }
+    ]
+  };
+}
 export function createBlock(name, value) {
   let blockData;
   switch (name) {
+    case "ol":
+      blockData = createlistBlock("ol");
+      break;
     case "image":
       blockData = createImageBlock(value);
       break;

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

@@ -1,5 +1,5 @@
 import { getCursor, setCursor } from "./cursor.mjs";
-import { findEditableElement, findChildNumber } from "./element.mjs";
+import { findEditableElement, findChildNumber, findLiElement } from "./element.mjs";
 import { getTagName } from "./style.mjs";
 let enterCount = 0;
 function enterEvent(type, event, action) {
@@ -7,6 +7,15 @@ function enterEvent(type, event, action) {
     event.preventDefault();
     const useShift = event.shiftKey;
     switch (type) {
+      case "ol":
+        if (useShift === false) {
+          if (enterCount == 0) {
+            listEnterEvent(event, action);
+          }
+        } else {
+          addBrEvent();
+        }
+        break;
       case "image":
         action("addBlock", {
           name: "text"
@@ -30,6 +39,99 @@ function enterEvent(type, event, action) {
     }, 150);
   }
 }
+function listEnterEvent(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 textEnterEvent(event, action) {
   const cursorData = getCursor();
   if (cursorData.startNode) {
@@ -320,3 +422,136 @@ function addBrEvent() {
     }
   }
 }
+function addBrEventWithList() {
+  const cursorData = getCursor();
+  if (cursorData.startNode) {
+    let $target = cursorData.startNode;
+    const preEditableElement = findLiElement($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 {
+      const brTag = document.createElement("br");
+      const selection = window.getSelection();
+      const range = document.createRange();
+      console.log("br");
+      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.mjs

@@ -13,6 +13,19 @@ function arrangementAlignClass(originList, className) {
   }
   return array;
 }
+const headingClassList = ["d-h1", "d-h2", "d-h3", "d-h4", "d-h5", "d-h6"];
+function arrangementHeadingClass(originList, className) {
+  const hasClass = originList.indexOf(className) > -1;
+  let array = originList;
+  if (hasClass) {
+    originList.splice(originList.indexOf(className), 1);
+    array = originList;
+  } else {
+    array = originList.filter((item) => headingClassList.indexOf(item) === -1);
+    array.push(className);
+  }
+  return array;
+}
 function getNextNode($target, node) {
   const childNode = $target.childNodes;
   let idx = -1;
@@ -252,13 +265,7 @@ function defaultDecorationMake({ originData, $target, className, tagName = "span
   }
   return originData;
 }
-export function styleSettings({
-  kind,
-  blockData,
-  $target,
-  url,
-  cursorData
-}) {
+export function styleSettings({ kind, blockData, $target, url, cursorData }) {
   let rawData = blockData;
   switch (kind) {
     case "alignLeft":
@@ -271,44 +278,36 @@ export function styleSettings({
       rawData.classList = arrangementAlignClass(rawData.classList, "d-align-right");
       break;
     case "decorationBold":
-      rawData = defaultDecorationMake(
-        {
-          originData: rawData,
-          $target,
-          className: "d-deco-bold",
-          parentCursorData: cursorData
-        }
-      );
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-bold",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationItalic":
-      rawData = defaultDecorationMake(
-        {
-          originData: rawData,
-          $target,
-          className: "d-deco-italic",
-          parentCursorData: cursorData
-        }
-      );
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-italic",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationUnderline":
-      rawData = defaultDecorationMake(
-        {
-          originData: rawData,
-          $target,
-          className: "d-deco-underline",
-          parentCursorData: cursorData
-        }
-      );
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-underline",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationStrikethrough":
-      rawData = defaultDecorationMake(
-        {
-          originData: rawData,
-          $target,
-          className: "d-deco-through",
-          parentCursorData: cursorData
-        }
-      );
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: "d-deco-through",
+        parentCursorData: cursorData
+      });
       break;
     case "decorationCode":
       rawData = defaultDecorationMake({
@@ -329,15 +328,31 @@ export function styleSettings({
         parentCursorData: cursorData
       });
       break;
+    case "heading-1":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h1");
+      break;
+    case "heading-2":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h2");
+      break;
+    case "heading-3":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h3");
+      break;
+    case "heading-4":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h4");
+      break;
+    case "heading-5":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h5");
+      break;
+    case "heading-6":
+      rawData.classList = arrangementHeadingClass(rawData.classList, "d-h6");
+      break;
     default:
-      rawData = defaultDecorationMake(
-        {
-          originData: rawData,
-          $target,
-          className: kind,
-          parentCursorData: cursorData
-        }
-      );
+      rawData = defaultDecorationMake({
+        originData: rawData,
+        $target,
+        className: kind,
+        parentCursorData: cursorData
+      });
   }
   return rawData;
 }

package/dist/runtime/shared/components/DragonEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dragon-editor" @paste="pasteEvent" ref="$wrap" @mouseleave="deactiveMenuEvent" @keydown="deactiveMenuEvent" :key="totalKey">
+    <div class="dragon-editor" @paste="pasteEvent" ref="$wrap" @mouseleave="deactiveMenuEvent" @keydown="deactiveMenuEvent">
         <div class="d-left-menu" :class="{ '--active': activeMenu }" :style="{ top: `${leftMenuPosition}px` }">
             <div class="d-add-block">
                 <button class="d-btn-menu-pop" @click="toggleBlockAddMenu"></button>
@@ -17,23 +17,21 @@
                 <button class="d-btn-block-pop" @click="toggleBlockControlMenu"></button>
 
                 <div class="d-block-list" :class="{ '--active': activeBlockColtrolMenu }">
-                    <button class="d-btn-block" @click="moveBlock('up')">
-                        <SvgIcon kind="arrowUp" />Up
-                    </button>
-                    <button class="d-btn-block" @click="moveBlock('down')">
-                        <SvgIcon kind="arrowDown" />Down
-                    </button>
-                    <button class="d-btn-block">
-                        <SvgIcon kind="delete" />Delete
-                    </button>
+                    <button class="d-btn-block" @click="moveBlock('up')"> <SvgIcon kind="arrowUp" />Up </button>
+                    <button class="d-btn-block" @click="moveBlock('down')"> <SvgIcon kind="arrowDown" />Down </button>
+                    <button class="d-btn-block"> <SvgIcon kind="delete" />Delete </button>
                 </div>
             </div>
         </div>
 
-        <div class="d-link-box" :class="{ '--active': activeLinkBox }" :style="{
-            top: `${linkBoxPosition.top}px`,
-            left: `${linkBoxPosition.left}px`,
-        }">
+        <div
+            class="d-link-box"
+            :class="{ '--active': activeLinkBox }"
+            :style="{
+                top: `${linkBoxPosition.top}px`,
+                left: `${linkBoxPosition.left}px`,
+            }"
+        >
             <template v-if="styleButtonList[2][0].active">
                 <p class="d-input">{{ linkValue }}</p>
                 <button class="d-btn-link" @click="decoLinkControl">
@@ -51,23 +49,32 @@
         <div class="d-style-menu" :class="{ '--active': activeMenu }" :style="{ top: `${styleMenuPosition}px` }">
             <div v-for="(column, count) in styleButtonList" :key="count" class="d-column">
                 <template v-for="(item, j) in column">
-                    <button v-if="item.target.indexOf(content[activeIdx].type) > -1" class="d-btn" :class="{ '--active': item.active }" @click="item.action">
-                        <SvgIcon :kind="item.icon" />
-                    </button>
+                    <template v-if="item.type === 'single'">
+                        <button v-if="item.target.indexOf(content[activeIdx].type) > -1" class="d-btn" :class="{ '--active': item.active }" @click="item.action">
+                            <SvgIcon :kind="item.icon" />
+                        </button>
+                    </template>
+
+                    <template v-else>
+                        <button v-if="item.target.indexOf(content[activeIdx].type) > -1" class="d-btn --hug" @click="item.action(count, j)">{{ `${item.name} : ${item.value}` }}</button>
+
+                        <div class="d-child-list" :class="{ '--active': item.active }">
+                            <button class="d-child-btn" v-for="(child, k) in item.childList" :key="k" @click="child.action(count, j)">{{ child.name }}</button>
+                        </div>
+                    </template>
                 </template>
             </div>
-            <div v-if="customStyleMenu.length > 0" class="d-column">
-                <!--                customStyleMenu-->
-            </div>
+            <div v-if="customStyleMenu.length > 0" class="d-column"></div>
         </div>
 
-        <div class="d-row-block" v-for="(row, count) in content" :key="count" @click="activeIdx = count" @mouseenter="activeMenuEvent(count, $event)" @mousemove="activeMenuEvent(count, $event)" @mouseup="activeMenuEvent(count, $event)">
-            <component ref="$child" v-model="content[count]" :key="`${row.type}-count`" :is="setComponentKind(row.type)" :cursorData="cursorData" @addBlock="addBlockLocal" @deleteBlockLocal="deleteBlockLocal" />
+        <div class="d-row-block" v-for="(row, count) in content" :key="`${row.id}-wrap`" @click="activeIdx = count" @mouseenter="activeMenuEvent(count, $event)" @mousemove="activeMenuEvent(count, $event)" @mouseup="activeMenuEvent(count, $event)">
+            <component ref="$child" v-model="content[count]" :key="row.id" :is="setComponentKind(row.type)" :cursorData="cursorData" @addBlock="addBlockLocal" @deleteBlockLocal="deleteBlockLocal" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+// @ts-ignore
 import { ref, unref, onMounted } from "#imports";
 import { createBlock, getClipboardData, getCursor } from "../../core/utils";
 import type { editorOptions, editorMenu, editorContentType, userCustomMenu, userStyleMenu, cursorSelection } from "../../../types/index";
@@ -76,6 +83,7 @@ import type { editorOptions, editorMenu, editorContentType, userCustomMenu, user
 import SvgIcon from "../../core/components/SvgIcon.vue";
 import textBlock from "../../core/components/editor/TextBlock.vue";
 import imageBlock from "../../core/components/editor/ImageBlock.vue";
+import olBlock from "../../core/components/editor/OlBlock.vue";
 
 // 기본 정보
 const props = defineProps<{
@@ -130,6 +138,7 @@ const cursorData = ref<cursorSelection>({
 const styleButtonList = ref([
     [
         {
+            type: "single",
             name: "Align Left",
             icon: "alignLeft",
             active: false,
@@ -139,6 +148,7 @@ const styleButtonList = ref([
             },
         },
         {
+            type: "single",
             name: "Align Center",
             icon: "alignCenter",
             target: ["text", "image", "table", "ul", "ol"],
@@ -148,6 +158,7 @@ const styleButtonList = ref([
             },
         },
         {
+            type: "single",
             name: "Align right",
             icon: "alignRight",
             target: ["text", "image", "table", "ul", "ol"],
@@ -159,6 +170,7 @@ const styleButtonList = ref([
     ],
     [
         {
+            type: "single",
             name: "Decoration Bold",
             icon: "decorationBold",
             target: ["text", "table", "ul", "ol"],
@@ -168,6 +180,7 @@ const styleButtonList = ref([
             },
         },
         {
+            type: "single",
             name: "Decoration Italic",
             icon: "decorationItalic",
             target: ["text", "table", "ul", "ol"],
@@ -177,6 +190,7 @@ const styleButtonList = ref([
             },
         },
         {
+            type: "single",
             name: "Decoration Underline",
             icon: "decorationUnderline",
             target: ["text", "table", "ul", "ol"],
@@ -186,6 +200,7 @@ const styleButtonList = ref([
             },
         },
         {
+            type: "single",
             name: "Decoration Strikethrough",
             icon: "decorationStrikethrough",
             target: ["text", "table", "ul", "ol"],
@@ -197,6 +212,7 @@ const styleButtonList = ref([
     ],
     [
         {
+            type: "single",
             name: "Link",
             icon: "link",
             active: false,
@@ -208,6 +224,7 @@ const styleButtonList = ref([
     ],
     [
         {
+            type: "single",
             name: "Decoration Code",
             icon: "codeBlock",
             target: ["text", "table", "ul", "ol"],
@@ -217,8 +234,69 @@ const styleButtonList = ref([
             },
         },
     ],
+    [
+        {
+            type: "list",
+            name: "Font Size",
+            value: "default",
+            target: ["text"],
+            active: false,
+            action: (count, j) => {
+                styleButtonList.value[count][j].active = !styleButtonList.value[count][j].active;
+            },
+            childList: [
+                {
+                    name: "default",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-4");
+                        styleButtonList.value[count][j].value = "default";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+                {
+                    name: "h1",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-1");
+                        styleButtonList.value[count][j].value = "h1";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+                {
+                    name: "h2",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-2");
+                        styleButtonList.value[count][j].value = "h2";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+                {
+                    name: "h3",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-3");
+                        styleButtonList.value[count][j].value = "h3";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+                {
+                    name: "h5",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-5");
+                        styleButtonList.value[count][j].value = "h5";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+                {
+                    name: "h6",
+                    action: (count, j) => {
+                        setBlockDecoEvent("heading-6");
+                        styleButtonList.value[count][j].value = "h6";
+                        styleButtonList.value[count][j].active = false;
+                    },
+                },
+            ],
+        },
+    ],
 ]);
-const totalKey = ref<number>(1);
 
 // 블럭 추가 메뉴 설정
 blockMenu.value = setEditorMenu(option.value.blockMenu as string[], unref(option.value.customBlockMenu) as userCustomMenu[]);
@@ -253,6 +331,7 @@ function checkAlignActive(className: string) {
     return value;
 }
 
+// 스타일 메뉴 엑티브 상황
 function checkDecoActive() {
     styleButtonList.value[0][0].active = checkAlignActive("d-align-left");
     styleButtonList.value[0][1].active = checkAlignActive("d-align-center");
@@ -263,8 +342,10 @@ function checkDecoActive() {
     styleButtonList.value[1][3].active = hasClassNameCheckLogic("d-deco-through");
     styleButtonList.value[2][0].active = hasClassNameCheckLogic("d-deco-link");
     styleButtonList.value[3][0].active = hasClassNameCheckLogic("d-deco-code");
+    styleButtonList.value[4][0].value = checkHeadingClass();
 }
 
+// 텍스트 스타일 확인용 함수
 function hasClassNameCheckLogic(className: string) {
     const cursorData = getCursor();
     let value = false;
@@ -297,6 +378,33 @@ function hasClassNameCheckLogic(className: string) {
     return value;
 }
 
+// 글자크기 클레스 확인
+function checkHeadingClass(): string {
+    let value: string = "";
+
+    switch (true) {
+        case hasClassNameCheckLogic("d-h1"):
+            value = "h1";
+            break;
+        case hasClassNameCheckLogic("d-h2"):
+            value = "h2";
+            break;
+        case hasClassNameCheckLogic("d-h3"):
+            value = "h3";
+            break;
+        case hasClassNameCheckLogic("d-h5"):
+            value = "h5";
+            break;
+        case hasClassNameCheckLogic("d-h6"):
+            value = "h6";
+            break;
+        default:
+            value = "default";
+    }
+
+    return value;
+}
+
 function setEditorMenu(vanillaData: string[], customData?: userCustomMenu[]) {
     const dataList: editorMenu[] = [];
 
@@ -338,6 +446,22 @@ function activeMenuEvent(count: number, e?: MouseEvent) {
 
     if (e) {
         $target = e.currentTarget as HTMLElement;
+
+        if (e.type === "mouseup") {
+            const wrap = $target.parentElement as HTMLElement;
+            const child = wrap.querySelectorAll(".d-row-block");
+            let idx: number = -1;
+
+            [...child].filter((item, count) => {
+                if (item === $target) {
+                    idx = count;
+                }
+            });
+
+            if (idx > -1) {
+                activeIdx.value = idx;
+            }
+        }
     } else {
         $target = $child.value[activeIdx.value];
     }
@@ -345,13 +469,15 @@ function activeMenuEvent(count: number, e?: MouseEvent) {
     setMenuPosition($target);
     checkDecoActive();
     activeMenu.value = true;
+    styleButtonList.value[4][0].active = false;
 }
 
 // 관련 메뉴 닫기
-function deactiveMenuEvent(e?: (MouseEvent | KeyboardEvent)) {
+function deactiveMenuEvent(e?: MouseEvent | KeyboardEvent) {
     activeMenu.value = false;
     activeBlockAddMenu.value = false;
     activeBlockColtrolMenu.value = false;
+    styleButtonList.value[4][0].active = false;
 
     if (e && e.type === "mouseleave") {
         activeLinkBox.value = false;
@@ -418,7 +544,9 @@ function pasteEvent(e: ClipboardEvent) {
         const targetComponent = $child.value[activeIdx.value];
         const componentType = targetComponent.getType();
 
-        if (componentType !== "other") {
+        if (componentType === "other") {
+            // TODO : add block
+        } else {
             targetComponent.pasteEvent(data.value);
         }
     }
@@ -427,7 +555,11 @@ function pasteEvent(e: ClipboardEvent) {
 // 블럭 종류 정의
 function setComponentKind(kind: string) {
     let componentData: any;
+
     switch (kind) {
+        case "ol":
+            componentData = olBlock;
+            break;
         case "image":
             componentData = imageBlock;
             break;
@@ -504,8 +636,6 @@ async function moveBlock(type: string) {
         content.value.splice(targetIdx, 1, thisData);
         content.value.splice(activeIdx.value, 1, targetData);
         activeIdx.value = targetIdx;
-
-        totalKey.value += 1;
         deactiveMenuEvent();
     }
 }

package/dist/runtime/shared/components/DragonEditorComment.vue

@@ -1,22 +1,13 @@
 <template>
     <div class="dragon-editor --comment">
-        <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent"
-            @paste="pasteEvent" ref="$block"></p>
+        <p class="d-text-block" :class="data.classList" contenteditable v-html="data.content" @keydown="textKeyboardEvent" @paste="pasteEvent" ref="$block"></p>
     </div>
 </template>
 
 <script setup lang="ts">
+// @ts-ignore
 import { ref, unref } from "#imports";
-import {
-    keyboardEvent,
-    setCursor,
-    pasteText,
-    styleSettings,
-    getArrangementCursorData,
-    getClipboardData,
-    getCursor,
-    findEditableElement
-} from "../../core/utils/index";
+import { keyboardEvent, setCursor, pasteText, styleSettings, getArrangementCursorData, getClipboardData, getCursor, findEditableElement } from "../../core/utils/index";
 import { commentBlock, cursorSelection } from "../../../types/index";
 
 const $block = ref();
@@ -40,7 +31,7 @@ const blockCursorData = ref<cursorSelection>({
 data.value = unref(props.modelValue) as commentBlock;
 
 function textKeyboardEvent(e: KeyboardEvent) {
-    keyboardEvent("comment", e, emit);
+    keyboardEvent("comment", e, emit, updateBlockData);
 }
 
 function pasteEvent(e: ClipboardEvent) {
@@ -57,9 +48,7 @@ function updateBlockData() {
     // 데이터 정규화 및 검수
     const blockClassList = [...$block.value.classList];
     blockClassList.splice(0, 1);
-    const pushList = blockClassList.filter(
-        (item) => data.value.classList.indexOf(item) === -1
-    );
+    const pushList = blockClassList.filter((item) => data.value.classList.indexOf(item) === -1);
 
     data.value.classList = data.value.classList.concat(pushList);
 
@@ -71,18 +60,19 @@ function updateBlockData() {
         emit("update:modelValue", data.value);
 
         setTimeout(() => {
-            setCursor(
-                $block.value.childNodes[cursorData.childCount],
-                cursorData.length
-            );
+            setCursor($block.value.childNodes[cursorData.childCount], cursorData.length);
 
             // 구조 검수
             $block.value.childNodes.forEach((child: ChildNode) => {
-                if (child.constructor.name !== "Text") { // 텍스트가 아닐경우
-                    if (child.constructor.name !== "HTMLBRElement") { // br 태그 유지
-                        if (child.textContent === "") { // 빈 태그 삭제
+                if (child.constructor.name !== "Text") {
+                    // 텍스트가 아닐경우
+                    if (child.constructor.name !== "HTMLBRElement") {
+                        // br 태그 유지
+                        if (child.textContent === "") {
+                            // 빈 태그 삭제
                             child.remove();
-                        } else if ((child as HTMLElement).classList.length === 0) { // 클레스 없는 엘리먼트 처리
+                        } else if ((child as HTMLElement).classList.length === 0) {
+                            // 클레스 없는 엘리먼트 처리
                             (child as HTMLElement).insertAdjacentHTML("afterend", child.textContent as string);
                             child.remove();
                         }
@@ -103,15 +93,13 @@ function focus() {
 }
 
 function setStyles(kind: string, url?: string) {
-    data.value = styleSettings(
-        {
-            kind: kind,
-            blockData: data.value,
-            $target: $block.value,
-            url: url,
-            cursorData: blockCursorData.value
-        }
-    );
+    data.value = styleSettings({
+        kind: kind,
+        blockData: data.value,
+        $target: $block.value,
+        url: url,
+        cursorData: blockCursorData.value,
+    });
     setTimeout(() => {
         updateBlockData();
     }, 250);
@@ -142,7 +130,7 @@ defineExpose({
     updateBlockData,
     focus,
     setStyles,
-    getCursorClassList
+    getCursorClassList,
 });
 </script>
 

package/dist/runtime/shared/components/DragonEditorViewer.vue

@@ -8,7 +8,7 @@
                 <template v-else>
                     <div class="d-image-block" :class="row.classList">
                         <div class="d-image-area">
-                            <img class="d-img" :src="row.src" :width="row.width" :height="row.height" :alt="row.caption" loading="lazy">
+                            <img class="d-img" :src="row.src" :width="row.width" :height="row.height" :alt="row.caption" loading="lazy" />
                         </div>
                         <p class="d-caption" v-if="row.caption" v-html="row.caption"></p>
                     </div>
@@ -19,8 +19,10 @@
 </template>
 
 <script setup lang="ts">
+import { editorContentType } from "../../../types";
+
 const props = defineProps<{
-    content: any[];
+    content: editorContentType;
 }>();
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragon-editor",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.2.1.1",
   "description": "WYSIWYG editor on Nuxt.js",
   "repository": {
     "type": "git",