dragon-editor 3.5.18 → 3.5.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "nuxt": ">=3.0.0"
5
5
  },
6
6
  "configKey": "dragon-editor",
7
- "version": "3.5.18",
7
+ "version": "3.5.20",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <component :is="mainStrucutre()"></component>
2
+ <component :is="mainStrucutre"></component>
3
3
  </template>
4
4
 
5
5
  <script setup lang="ts">
6
- import { ref, h, onMounted, onBeforeUnmount } from "vue";
7
- import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure } from "../utils/layout";
6
+ import { ref, h, onMounted, onBeforeUnmount, watch } from "vue";
7
+ import { _getBodyVNodeStructure, _getMenuBarVNodeStructure, _getControlbarVNodeStructure, _updateBodyStructure } from "../utils/layout";
8
8
  import { _eidtorMountEvent, _eidtorUnmountEvent, _editorMousemoveEvent, _editorMouseupEvent, _editorMouseleaveEvent, _editorTouchmoveEvent, _editorTouchendEvent, _checkOthersideClick, _parentWrapScollEvent, _editorContextMenuEvent, _windowResizeEvent } from "../utils/event";
9
9
  import { _addBlock } from "../utils/node";
10
10
  import { _setDecoration, _setTextAlign } from "../utils/style";
@@ -193,6 +193,14 @@ function setAlign(align: DETextalign): void {
193
193
  _setTextAlign(align, editorStore);
194
194
  }
195
195
 
196
+ // 데이터 변경용 함수
197
+ function changeEditorData(data: DEContentData): void {
198
+ if (editorStore.value.$body !== null) {
199
+ editorStore.value.$body.innerHTML = "";
200
+ _updateBodyStructure(data, editorStore);
201
+ }
202
+ }
203
+
196
204
  onMounted(() => {
197
205
  _eidtorMountEvent(editorStore);
198
206
  });
@@ -205,6 +213,7 @@ defineExpose({
205
213
  addBlock,
206
214
  setDecoration,
207
215
  setAlign,
216
+ changeEditorData,
208
217
  });
209
218
  </script>
210
219
 
@@ -112,6 +112,7 @@ interface DragonEditor {
112
112
  addBlock: (type: DEBlockData) => void;
113
113
  setDecoration: (data: DEDecoration) => void;
114
114
  setTextAlign: (type: DETextalign) => void;
115
+ changeEditorData: (data: DEContentData) => void;
115
116
  }
116
117
 
117
118
  interface DETextBlock {
@@ -1,3 +0,0 @@
1
- import type { VNode, Ref } from "vue";
2
- import type { DragonEditorStore } from "../../type.js";
3
- export declare function _getBodyVNodeStructure(store: Ref<DragonEditorStore>): VNode;
@@ -1,6 +1,7 @@
1
1
  import { h } from "vue";
2
2
  import { _createBlockList } from "./index.js";
3
- import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent } from "../event/index.js";
3
+ import { _contentKeydownEvent, _contentKeyupEvent, _contentPasteEvent, _contentMouseupEvent, _contentMousedownEvnet, _contentTouchstartEvent, _getDefaultBlockData, _updateModelData } from "../event/index.js";
4
+ import { _createTextBlock, _createHeadingBlock, _createListBlock, _createImageBlock, _createCodeBlock, _createCustomBlock } from "../node/index.js";
4
5
  export function _getBodyVNodeStructure(store) {
5
6
  return h(
6
7
  "div",
@@ -20,3 +21,37 @@ export function _getBodyVNodeStructure(store) {
20
21
  })
21
22
  );
22
23
  }
24
+ export function _updateBodyStructure(bodyData, store) {
25
+ if (store.value.$body !== null) {
26
+ let htmlSturcutre = "";
27
+ if (bodyData.length === 0) {
28
+ htmlSturcutre += _createTextBlock(_getDefaultBlockData("text")).outerHTML;
29
+ } else {
30
+ bodyData.forEach((data) => {
31
+ switch (data.type) {
32
+ case "text":
33
+ htmlSturcutre += _createTextBlock(data).outerHTML;
34
+ break;
35
+ case "heading":
36
+ htmlSturcutre += _createHeadingBlock(data).outerHTML;
37
+ break;
38
+ case "image":
39
+ htmlSturcutre += _createImageBlock(data, store.value.imageHostURL).outerHTML;
40
+ break;
41
+ case "list":
42
+ htmlSturcutre += _createListBlock(data).outerHTML;
43
+ break;
44
+ case "code":
45
+ htmlSturcutre += _createCodeBlock(data, store).outerHTML;
46
+ break;
47
+ default:
48
+ htmlSturcutre += _createCustomBlock(data).outerHTML;
49
+ }
50
+ });
51
+ }
52
+ store.value.$body.innerHTML = htmlSturcutre;
53
+ setTimeout(() => {
54
+ _updateModelData(store);
55
+ }, 250);
56
+ }
57
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
- "version": "3.5.18",
3
+ "version": "3.5.20",
4
4
  "description": "Javascript WYSIWYG editor in Nuxt3!",
5
5
  "repository": {
6
6
  "type": "git",