dragon-editor 2.0.0-beta.2.1.2 → 2.0.0

package/README.md

@@ -66,6 +66,13 @@ editor.value.addImageBlock({
 });
 ```
 
+2. 저장
+
+```typescript
+editor.value.updateBlockData();
+// do somthing
+```
+
 ### 코멘트
 
 ```vue
@@ -104,6 +111,19 @@ editor.value.setStyles("decorationBold");
 -   `decorationUnderline` : 밑줄
 -   `decorationStrikethrough` : 취소선
 
+2. 저장
+
+```typescript
+editor.value.updateBlockData();
+// do somthing
+```
+
+3. 포커스
+
+```typescript
+editor.value.focus();
+```
+
 ### 뷰어
 
 ```vue

package/dist/module.json

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

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

@@ -1,21 +1,28 @@
 <template>
-    <ol class="d-ol-block" :class="data.classList" @keydown="textKeyboardEvent">
-        <li class="d-li-item" contenteditable ref="$olItem"></li>
+    <ol class="d-ol-block" @keydown="textKeyboardEvent" ref="$ol" :key="updateCount">
+        <li class="d-li-item" v-for="(row, i) in data.childList" :key="i" :class="row.classList" contenteditable ref="$item" v-html="row.content"></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";
+import { cursorSelection, liItem, listBlock, styleFunctionArgument } from "../../../../types";
+import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent, getCursor, findEditableElement } from "../../utils";
 
-const $olItem = ref();
+const updateCount = ref<number>(0);
+const $ol = ref();
+const $item = ref();
+const itemIdx = ref<number>(0);
 const data = ref<listBlock>({
     type: "",
     id: "",
-    classList: [],
-    childList: [],
+    childList: [
+        {
+            classList: [],
+            content: "",
+        },
+    ],
 });
 const props = defineProps<{ modelValue: listBlock; cursorData: cursorSelection }>();
 const emit = defineEmits<{
@@ -25,13 +32,12 @@ const emit = defineEmits<{
 }>();
 data.value = unref(props.modelValue) as listBlock;
 
-if(data.value.childList.length === 0){
-
+if (data.value.childList.length === 0) {
 }
 
 // 키보드 이벤트 할당
 function textKeyboardEvent(e: KeyboardEvent) {
-    keyboardEvent("ol", e, emit, updateBlockData);
+    keyboardEvent("list", e, emit, updateBlockData);
 }
 
 /**
@@ -40,64 +46,85 @@ function textKeyboardEvent(e: KeyboardEvent) {
 
 // 데이터 정규화 및 검수
 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);
-    // }
+    const $block = $ol.value;
+    const $childList = $block.querySelectorAll("li");
+    const childData: liItem[] = [];
+    const cursorData = getCursor();
+
+    $childList.forEach((row) => {
+        row.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");
+                }
+            }
+        });
+
+        childData.push({
+            classList: [...row.classList].splice(1),
+            content: row.innerHTML,
+        });
+    });
+
+    data.value.childList = childData;
+    emit("update:modelValue", data.value);
+    updateCount.value += 1;
+
+    if (cursorData.startNode) {
+        const editableNode = findEditableElement(cursorData.startNode);
+        let childIdx = -1;
+
+        $childList.forEach((row, count) => {
+            if (row === editableNode) {
+                childIdx = count;
+            }
+        });
+
+        if (childIdx > -1) {
+            // 기본 로직
+            itemIdx.value = childIdx;
+            setTimeout(() => {
+                const afterChildList = $ol.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        } else {
+            // 중간 엔터
+            $childList.forEach((row, count) => {
+                if (row === (cursorData.startNode as Node).parentNode) {
+                    childIdx = count;
+                }
+            });
+
+            setTimeout(() => {
+                const afterChildList = $ol.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        }
+    }
 }
 
 // 포커스
-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 focus() {
+    const childList = $ol.value.querySelectorAll(".d-li-item");
+    setCursor(childList[itemIdx.value], 0);
 }
 
 // 블럭 위치 주기
 function getBoundingClientRect() {
-    // return $block.value.parentNode.getBoundingClientRect();
+    return $ol.value.parentNode.getBoundingClientRect();
 }
 
 // 타입 전달
@@ -115,7 +142,7 @@ function setStyles({ type, url }: styleFunctionArgument) {
     data.value = styleSettings({
         kind: type,
         blockData: data.value,
-        $target: undefined,
+        $target: $item[itemIdx.value],
         url: url,
         cursorData: props.cursorData,
     });

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

@@ -117,7 +117,13 @@ function updateBlockData() {
 // 포커스
 function focus(type: string = "first") {
     if (type === "first") {
-        setCursor($block.value, 0);
+        if ($block.value.childNodes.length > 0) {
+            setTimeout(() => {
+                setCursor($block.value.childNodes[0], 0);
+            }, 100);
+        } else {
+            setCursor($block.value, 0);
+        }
     } else {
         const childCount = $block.value.childNodes.length;
         const targetChild = $block.value.childNodes[childCount - 1];

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

@@ -0,0 +1,162 @@
+<template>
+    <ul class="d-ul-block" @keydown="textKeyboardEvent" ref="$ul" :key="updateCount">
+        <li class="d-li-item" v-for="(row, i) in data.childList" :key="i" :class="row.classList" contenteditable ref="$item" v-html="row.content"></li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore
+import { ref, unref } from "#imports";
+import { cursorSelection, liItem, listBlock, styleFunctionArgument } from "../../../../types";
+import { getArrangementCursorData, setCursor, pasteText, styleSettings, keyboardEvent, getCursor, findEditableElement } from "../../utils";
+
+const updateCount = ref<number>(0);
+const $ul = ref();
+const $item = ref();
+const itemIdx = ref<number>(0);
+const data = ref<listBlock>({
+    type: "",
+    id: "",
+    childList: [
+        {
+            classList: [],
+            content: "",
+        },
+    ],
+});
+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("list", e, emit, updateBlockData);
+}
+
+/**
+ * 외부용 함수
+ */
+
+// 데이터 정규화 및 검수
+function updateBlockData() {
+    const $block = $ul.value;
+    const $childList = $block.querySelectorAll("li");
+    const childData: liItem[] = [];
+    const cursorData = getCursor();
+
+    $childList.forEach((row) => {
+        row.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");
+                }
+            }
+        });
+
+        childData.push({
+            classList: [...row.classList].splice(1),
+            content: row.innerHTML,
+        });
+    });
+
+    data.value.childList = childData;
+    emit("update:modelValue", data.value);
+    updateCount.value += 1;
+
+    if (cursorData.startNode) {
+        const editableNode = findEditableElement(cursorData.startNode);
+        let childIdx = -1;
+
+        $childList.forEach((row, count) => {
+            if (row === editableNode) {
+                childIdx = count;
+            }
+        });
+
+        if (childIdx > -1) {
+            // 기본 로직
+            itemIdx.value = childIdx;
+            setTimeout(() => {
+                const afterChildList = $ul.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        } else {
+            // 중간 엔터
+            $childList.forEach((row, count) => {
+                if (row === (cursorData.startNode as Node).parentNode) {
+                    childIdx = count;
+                }
+            });
+
+            setTimeout(() => {
+                const afterChildList = $ul.value.querySelectorAll("li");
+                setCursor(afterChildList[childIdx], cursorData.startOffset as number);
+            }, 100);
+        }
+    }
+}
+
+// 포커스
+function focus() {
+    const childList = $ul.value.querySelectorAll(".d-li-item");
+    setCursor(childList[itemIdx.value], 0);
+}
+
+// 블럭 위치 주기
+function getBoundingClientRect() {
+    return $ul.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: $item[itemIdx.value],
+        url: url,
+        cursorData: props.cursorData,
+    });
+    setTimeout(() => {
+        updateBlockData();
+    }, 250);
+}
+
+defineExpose({
+    updateBlockData,
+    focus,
+    getType,
+    pasteEvent,
+    setStyles,
+    getBoundingClientRect,
+});
+</script>

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

@@ -168,6 +168,23 @@
   content: "Write text";
   color: #ccc;
 }
+.dragon-editor .d-ul-block {
+  padding-left: 30px;
+  cursor: text;
+  list-style: disc;
+}
+.dragon-editor .d-ul-block .d-li-item {
+  list-style: inherit;
+  outline: 0;
+}
+.dragon-editor .d-ul-block .d-li-item:empty {
+  min-height: 1.6em;
+}
+.dragon-editor .d-ul-block .d-li-item:empty::after {
+  display: inline;
+  content: "Write text";
+  color: #ccc;
+}
 .dragon-editor .d-image-block {
   display: flex;
   flex-direction: column;

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

@@ -189,3 +189,17 @@
   color: #ccc;
   font-size: 1rem;
 }
+.dragon-editor-viewer .d-ol-block {
+  padding-left: 30px;
+  list-style: decimal;
+}
+.dragon-editor-viewer .d-ol-block .d-li-item {
+  list-style: inherit;
+}
+.dragon-editor-viewer .d-ul-block {
+  padding-left: 30px;
+  list-style: disc;
+}
+.dragon-editor-viewer .d-ul-block .d-li-item {
+  list-style: inherit;
+}

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

@@ -0,0 +1,2 @@
+import { editorContentType } from "../../../types";
+export declare function convertToHTML(data: editorContentType): string;

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

@@ -0,0 +1,39 @@
+export function convertToHTML(data) {
+  let htmlStructure = "";
+  data.forEach((row) => {
+    switch (row.type) {
+      case "text":
+        htmlStructure += `<p class="d-text-block ${row.classList.join(" ")}">${row.content}</p>`;
+        break;
+      case "image":
+        htmlStructure += `
+                <div class="d-image-block ${row.classList.join(" ")}">
+                    <div class="d-image-area">
+                        <img class="d-img" src="${row.src}" width="${row.width}" height="${row.height}" alt="${row.caption}" loading="lazy">
+                    </div>
+                `;
+        if (row.caption) {
+          htmlStructure += `<p class="d-caption">${row.caption}</p>`;
+        }
+        htmlStructure += `</div>`;
+        break;
+      case "ol":
+        htmlStructure += `<ol class="d-ol-block ${row.classList.join(" ")}">`;
+        row.childList.forEach((child) => {
+          htmlStructure += `<li class="d-li-item ${child.classList.join(" ")}">${child.content}</li>`;
+        });
+        htmlStructure += `</ol>`;
+        break;
+      case "ul":
+        htmlStructure += `<ul class="d-ul-block ${row.classList.join(" ")}">`;
+        row.childList.forEach((child) => {
+          htmlStructure += `<li class="d-li-item ${child.classList.join(" ")}">${child.content}</li>`;
+        });
+        htmlStructure += `</ul>`;
+        break;
+      default:
+        htmlStructure += row.innerHTML;
+    }
+  });
+  return htmlStructure;
+}

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

@@ -4,3 +4,4 @@ export * from "./keyboard";
 export * from "./cursor";
 export * from "./style";
 export * from "./element";
+export * from "./convertor";

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

@@ -46,7 +46,6 @@ function createImageBlock(data) {
     src: data.src,
     width: data.width,
     height: data.height,
-    webp: data.webp,
     caption: data.caption
   };
 }
@@ -66,6 +65,9 @@ function createlistBlock(type = "ul") {
 export function createBlock(name, value) {
   let blockData;
   switch (name) {
+    case "ul":
+      blockData = createlistBlock();
+      break;
     case "ol":
       blockData = createlistBlock("ol");
       break;
@@ -81,3 +83,4 @@ export * from "./keyboard.mjs";
 export * from "./cursor.mjs";
 export * from "./style.mjs";
 export * from "./element.mjs";
+export * from "./convertor.mjs";

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

@@ -2,15 +2,15 @@ import { getCursor, setCursor } from "./cursor.mjs";
 import { findEditableElement, findChildNumber, findLiElement } from "./element.mjs";
 import { getTagName } from "./style.mjs";
 let enterCount = 0;
-function enterEvent(type, event, action) {
+function enterEvent(type, event, action, update) {
   if (event.code === "Enter") {
     event.preventDefault();
     const useShift = event.shiftKey;
     switch (type) {
-      case "ol":
+      case "list":
         if (useShift === false) {
           if (enterCount == 0) {
-            listEnterEvent(event, action);
+            listEnterEvent(action, update);
           }
         } else {
           addBrEvent();
@@ -27,7 +27,7 @@ function enterEvent(type, event, action) {
       default:
         if (useShift === false) {
           if (enterCount == 0) {
-            textEnterEvent(event, action);
+            textEnterEvent(action);
           }
         } else {
           addBrEvent();
@@ -39,7 +39,7 @@ function enterEvent(type, event, action) {
     }, 150);
   }
 }
-function listEnterEvent(event, action) {
+function listEnterEvent(action, update) {
   const cursorData = getCursor();
   if (cursorData.startNode) {
     const editableElement = findEditableElement(cursorData.startNode);
@@ -74,9 +74,16 @@ function listEnterEvent(event, action) {
       endOffset = cursorData.endOffset;
     }
     if (editableElement.childNodes.length === 0 || endChildIdx === editableElement.childNodes.length - 1 && editableElement.childNodes[endChildIdx].textContent.length === endOffset) {
-      action("addBlock", {
-        name: "text"
-      });
+      if (editableElement.childNodes.length === 0) {
+        editableElement.remove();
+        action("addBlock", {
+          name: "text"
+        });
+      } else {
+        editableElement.insertAdjacentHTML("afterend", `<li class="d-li-item"  contenteditable></li>`);
+        setCursor(editableElement.nextSibling, 0);
+        update();
+      }
     } else {
       editableElement.childNodes.forEach((child, count) => {
         const text = child.textContent;
@@ -125,14 +132,15 @@ function listEnterEvent(event, action) {
         }
       });
       editableElement.innerHTML = preHTMLStructor;
-      action("addBlock", {
-        name: "text",
-        value: { classList: editableElementClassList, content: nextHTMLStructor }
-      });
+      editableElement.insertAdjacentHTML("afterend", `<li class="d-li-item ${editableElementClassList.join(" ")}">${nextHTMLStructor}</li>`);
+      setTimeout(() => {
+        setCursor(editableElement.nextSibling.childNodes[0], 0);
+        update();
+      }, 100);
     }
   }
 }
-function textEnterEvent(event, action) {
+function textEnterEvent(action) {
   const cursorData = getCursor();
   if (cursorData.startNode) {
     const editableElement = findEditableElement(cursorData.startNode);
@@ -245,7 +253,7 @@ function backspaceEvent(type, event, action, update) {
   }
 }
 export function keyboardEvent(type, event, action, update) {
-  enterEvent(type, event, action);
+  enterEvent(type, event, action, update);
   backspaceEvent(type, event, action, update);
 }
 export function getClipboardData(data) {

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

@@ -58,7 +58,7 @@
                     <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 }">
+                        <div v-if="item.target.indexOf(content[activeIdx].type) > -1" 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>
@@ -84,6 +84,7 @@ 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";
+import ulBlock from "../../core/components/editor/UlBlock.vue";
 
 // 기본 정보
 const props = defineProps<{
@@ -92,7 +93,7 @@ const props = defineProps<{
 }>();
 const modelValue = ref<editorContentType>([]);
 const option = ref<editorOptions>({
-    blockMenu: ["text"],
+    blockMenu: ["text", "ol", "ul"],
     // blockMenu: ["text", "ol", "ul", "table", "quotation"], // TODO : 다른 블럭 만들기
 });
 
@@ -557,6 +558,9 @@ function setComponentKind(kind: string) {
     let componentData: any;
 
     switch (kind) {
+        case "ul":
+            componentData = ulBlock;
+            break;
         case "ol":
             componentData = olBlock;
             break;
@@ -675,7 +679,7 @@ function addImageBlock({ src, width, height, webp, caption }: { src: string; wid
 // 함수 내보내기
 defineExpose({
     addImageBlock,
-    dataUpdateAction
+    dataUpdateAction,
 });
 
 /**

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

@@ -12,7 +12,6 @@ import { commentBlock, cursorSelection } from "../../../types/index";
 
 const $block = ref();
 const data = ref<commentBlock>({
-    type: "comment",
     classList: [],
     content: "",
 });
@@ -54,34 +53,68 @@ function updateBlockData() {
 
     // 커서위치 재지정
     if ($block.value.innerHTML.length > 0) {
-        const cursorData = getArrangementCursorData(blockCursorData.value);
-
-        data.value.content = $block.value.innerHTML;
-        emit("update:modelValue", data.value);
-
-        setTimeout(() => {
-            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 === "") {
-                            // 빈 태그 삭제
-                            child.remove();
-                        } else if ((child as HTMLElement).classList.length === 0) {
-                            // 클레스 없는 엘리먼트 처리
-                            (child as HTMLElement).insertAdjacentHTML("afterend", child.textContent as string);
-                            child.remove();
+        const preCursorData = getCursor();
+
+        if (preCursorData.startNode !== null) {
+            const cursorData = getArrangementCursorData(blockCursorData.value);
+
+            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");
+                            }
                         }
-                    } else {
-                        (child as HTMLElement).removeAttribute("class");
-                    }
+                    });
                 }
-            });
-        }, 100);
+            }, 100);
+        } else {
+            if ($block.value) {
+                $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");
+                        }
+                    }
+                });
+
+                data.value.content = $block.value.innerHTML;
+                emit("update:modelValue", data.value);
+            }
+        }
     } else {
         emit("update:modelValue", data.value);
     }

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

@@ -1,25 +1,10 @@
 <template>
-    <div class="dragon-editor-viewer">
-        <template v-for="(row, count) in props.content">
-            <p class="d-text-block" v-if="row.type === 'text'" :class="row.classList" v-html="row.content"></p>
-
-            <template v-if="row.type === 'image'">
-                <template v-if="row.webp"> </template>
-                <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" />
-                        </div>
-                        <p class="d-caption" v-if="row.caption" v-html="row.caption"></p>
-                    </div>
-                </template>
-            </template>
-        </template>
-    </div>
+    <div class="dragon-editor-viewer" v-html="convertToHTML(props.content)"></div>
 </template>
 
 <script setup lang="ts">
 import { editorContentType } from "../../../types";
+import { convertToHTML } from "../../core/utils";
 
 const props = defineProps<{
     content: editorContentType;

package/package.json

@@ -1,58 +1,58 @@
 {
-  "name": "dragon-editor",
-  "version": "2.0.0-beta.2.1.2",
-  "description": "WYSIWYG editor on Nuxt.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lovefields/dragonEditor.git"
-  },
-  "license": "MIT",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
-    }
-  },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch"
-  },
-  "dependencies": {
-    "@nuxt/kit": "^3.5.0"
-  },
-  "devDependencies": {
-    "@nuxt/eslint-config": "^0.1.1",
-    "@nuxt/module-builder": "^0.3.1",
-    "@nuxt/schema": "^3.5.0",
-    "@nuxt/test-utils": "^3.5.0",
-    "@types/node": "^18",
-    "changelogen": "^0.5.3",
-    "eslint": "^8.40.0",
-    "nuxt": "^3.5.0",
-    "vitest": "^0.31.0"
-  },
-  "keywords": [
-    "editor",
-    "wysiwyg-editor",
-    "korean",
-    "language"
-  ],
-  "author": "Lovefields <lovefield@dico.me> (https://dico.me)",
-  "bugs": {
-    "url": "https://github.com/lovefields/dragonEditor/issues"
-  },
-  "homepage": "https://github.com/lovefields/dragonEditor#readme"
-}
+    "name": "dragon-editor",
+    "version": "2.0.0",
+    "description": "WYSIWYG editor on Nuxt.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lovefields/dragonEditor.git"
+    },
+    "license": "MIT",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/types.d.ts",
+            "import": "./dist/module.mjs",
+            "require": "./dist/module.cjs"
+        }
+    },
+    "main": "./dist/module.cjs",
+    "types": "./dist/types.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "prepack": "nuxt-module-build",
+        "dev": "nuxi dev playground",
+        "dev:build": "nuxi build playground",
+        "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+        "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+        "lint": "eslint .",
+        "test": "vitest run",
+        "test:watch": "vitest watch"
+    },
+    "dependencies": {
+        "@nuxt/kit": "^3.5.0"
+    },
+    "devDependencies": {
+        "@nuxt/eslint-config": "^0.1.1",
+        "@nuxt/module-builder": "^0.3.1",
+        "@nuxt/schema": "^3.5.0",
+        "@nuxt/test-utils": "^3.5.0",
+        "@types/node": "^18",
+        "changelogen": "^0.5.3",
+        "eslint": "^8.40.0",
+        "nuxt": "^3.5.0",
+        "vitest": "^0.31.0"
+    },
+    "keywords": [
+        "editor",
+        "wysiwyg-editor",
+        "korean",
+        "language"
+    ],
+    "author": "Lovefields <lovefield@dico.me> (https://dico.me)",
+    "bugs": {
+        "url": "https://github.com/lovefields/dragonEditor/issues"
+    },
+    "homepage": "https://github.com/lovefields/dragonEditor#readme"
+}