dragon-editor 3.5.19 → 3.5.20

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "dragon-editor",
-  "version": "3.5.19",
+  "version": "3.5.20",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/DragonEditor.vue

@@ -1,10 +1,10 @@
 <template>
-    <component :is="editorStructure"></component>
+    <component :is="mainStrucutre"></component>
 </template>
 
 <script setup lang="ts">
 import { ref, h, onMounted, onBeforeUnmount, watch } from "vue";
-import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure } from "../utils/layout";
+import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure, _updateBodyStructure } from "../utils/layout";
 import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent } from "../utils/event";
 import { _addBlock } from "../utils/node";
 import { _setDecoration, _setTextAlign } from "../utils/style";
@@ -127,7 +127,6 @@ const editorStore = ref<DragonEditorStore>({
         _parentWrapScollEvent(event, editorStore);
     },
 });
-const editorStructure = ref<VNode>(mainStrucutre());
 
 function mainStrucutre(): VNode {
     const childList: VNode[] = [];
@@ -194,13 +193,13 @@ function setAlign(align: DETextalign): void {
     _setTextAlign(align, editorStore);
 }
 
-watch(
-    () => props.modelValue,
-    (newData) => {
-        editorStore.value.firstData = newData;
-        editorStructure.value = mainStrucutre();
+// 데이터 변경용 함수
+function changeEditorData(data: DEContentData): void {
+    if (editorStore.value.$body !== null) {
+        editorStore.value.$body.innerHTML = "";
+        _updateBodyStructure(data, editorStore);
     }
-);
+}
 
 onMounted(() => {
     _eidtorMountEvent(editorStore);
@@ -214,6 +213,7 @@ defineExpose({
     addBlock,
     setDecoration,
     setAlign,
+    changeEditorData,
 });
 </script>
 

package/dist/runtime/type.d.ts

@@ -112,6 +112,7 @@ interface DragonEditor {
     addBlock: (type: DEBlockData) => void;
     setDecoration: (data: DEDecoration) => void;
     setTextAlign: (type: DETextalign) => void;
+    changeEditorData: (data: DEContentData) => void;
 }
 
 interface DETextBlock {

package/dist/runtime/utils/layout/body.d.ts

@@ -1,3 +0,0 @@
-import type { VNode, Ref } from "vue";
-import type { DragonEditorStore } from "../../type.js";
-export declare function _getBodyVNodeStructure(store: Ref<DragonEditorStore>): VNode;

package/dist/runtime/utils/layout/body.js

@@ -1,6 +1,7 @@
 import { h } from "vue";
 import { _createBlockList } from "./index.js";
-import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent } from "../event/index.js";
+import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent, _getDefaultBlockData, _updateModelData } from "../event/index.js";
+import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "../node/index.js";
 export function _getBodyVNodeStructure(store) {
   return h(
     "div",
@@ -20,3 +21,37 @@ export function _getBodyVNodeStructure(store) {
     })
   );
 }
+export function _updateBodyStructure(bodyData, store) {
+  if (store.value.$body !== null) {
+    let htmlSturcutre = "";
+    if (bodyData.length === 0) {
+      htmlSturcutre += _createTextBlock(_getDefaultBlockData("text")).outerHTML;
+    } else {
+      bodyData.forEach((data) => {
+        switch (data.type) {
+          case "text":
+            htmlSturcutre += _createTextBlock(data).outerHTML;
+            break;
+          case "heading":
+            htmlSturcutre += _createHeadingBlock(data).outerHTML;
+            break;
+          case "image":
+            htmlSturcutre += _createImageBlock(data, store.value.imageHostURL).outerHTML;
+            break;
+          case "list":
+            htmlSturcutre += _createListBlock(data).outerHTML;
+            break;
+          case "code":
+            htmlSturcutre += _createCodeBlock(data, store).outerHTML;
+            break;
+          default:
+            htmlSturcutre += _createCustomBlock(data).outerHTML;
+        }
+      });
+    }
+    store.value.$body.innerHTML = htmlSturcutre;
+    setTimeout(() => {
+      _updateModelData(store);
+    }, 250);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dragon-editor",
-    "version": "3.5.19",
+    "version": "3.5.20",
     "description": "Javascript WYSIWYG editor in Nuxt3!",
     "repository": {
         "type": "git",