dragon-editor 3.0.0-beta → 3.0.0

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.
Files changed (11) hide show
  1. package/README.md +65 -4
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/DragonEditor.vue +21 -5
  4. package/dist/runtime/components/DragonEditorViewer.vue +228 -0
  5. package/dist/runtime/scss/editor.css +2 -3
  6. package/dist/runtime/scss/viewer.css +69 -0
  7. package/dist/runtime/utils/block.d.ts +4 -4
  8. package/dist/runtime/utils/block.mjs +13 -13
  9. package/dist/runtime/utils/convertor.d.ts +2 -0
  10. package/dist/runtime/utils/convertor.mjs +86 -0
  11. package/package.json +2 -2
package/README.md CHANGED
@@ -13,6 +13,8 @@
13
13
  [npm-downloads-src]: https://img.shields.io/npm/dm/dragon-editor.svg?style=flat&colorA=18181B&colorB=28CF8D
14
14
  [npm-downloads-href]: https://www.npmjs.com/package/dragon-editor
15
15
  [license-src]: https://img.shields.io/npm/l/dragon-editor
16
+ [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
17
+ [nuxt-href]: https://nuxt.com
16
18
 
17
19
  [![stars-src]](stars-href)
18
20
  [![forks-src]](forks-href)
@@ -22,6 +24,7 @@
22
24
  [![npm-version-src]][npm-version-href]
23
25
  [![npm-downloads-src]][npm-downloads-href]
24
26
  ![NPM][license-src]
27
+ [![Nuxt][nuxt-src]][nuxt-href]
25
28
 
26
29
  # DragonEditor
27
30
 
@@ -31,7 +34,7 @@ This module support Nuxt3 only.
31
34
 
32
35
  # Dependencies
33
36
 
34
- - @pinia/nuxt
37
+ - @pinia/nuxt
35
38
 
36
39
  ## Install
37
40
 
@@ -65,10 +68,68 @@ Second. Use Component
65
68
  </template>
66
69
 
67
70
  <script setup lang="ts">
68
- const $editor = ref<any>();
71
+ const $editor = ref<any>();
69
72
  </script>
70
73
  ```
71
74
 
72
- Done!
75
+ Done!
73
76
 
74
- <!-- More information is here [Document](123) -->
77
+ ## View Page
78
+
79
+ ```html
80
+ <template>
81
+ <div class="view-area">
82
+ <DragonEditorViewer :content="data" />
83
+ </div>
84
+ </template>
85
+
86
+ <script setup lang="ts">
87
+ const data = ref([]); // content data
88
+ </script>
89
+ ```
90
+
91
+ ## Method
92
+
93
+ ### getContentData
94
+
95
+ ```html
96
+ <template>
97
+ <div class="editor-area">
98
+ <ClientOnly>
99
+ <DragonEditor ref="$editor" />
100
+ </ClientOnly>
101
+ <button @click="getData()">Get Data</button>
102
+ </div>
103
+ </template>
104
+
105
+ <script setup lang="ts">
106
+ const $editor = ref<any>();
107
+
108
+ function getData() {
109
+ console.log($editor.value.getContentData());
110
+ }
111
+ </script>
112
+ ```
113
+
114
+ ### setContentData
115
+
116
+ ```html
117
+ <template>
118
+ <div class="editor-area">
119
+ <ClientOnly>
120
+ <DragonEditor ref="$editor" />
121
+ </ClientOnly>
122
+ <button @click="setData()">Set Data</button>
123
+ </div>
124
+ </template>
125
+
126
+ <script setup lang="ts">
127
+ const $editor = ref<any>();
128
+
129
+ function setData() {
130
+ $editor.value.getContentData([...]);
131
+ }
132
+ </script>
133
+ ```
134
+
135
+ <!-- More information is here [Document](123) -->
package/dist/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
3
  "configKey": "dragon-editor",
4
- "version": "3.0.0-beta"
4
+ "version": "3.0.0"
5
5
  }
package/dist/runtime/components/DragonEditor.vue CHANGED
@@ -66,6 +66,7 @@ import { _elementKeyEvent, _hotKeyEvent } from "../utils/keyboardEvent";
66
66
  import { _createTextBlock, _createHeadingBlock, _createListBlock } from "../utils/block";
67
67
  import { _setNodeStyle } from "../utils/style";
68
68
  import { _setCursorData, _clenupCursor } from "../utils/cursor";
69
+ import { _getContentData, _setContentData } from "../utils/convertor";
69
70
  import "../type.d.ts";
70
71
 
71
72
  const props = defineProps({
@@ -105,7 +106,6 @@ function updateCursorData(e: MouseEvent) {
105
106
  */
106
107
 
107
108
  function addBlock(type: string) {
108
- _clenupCursor(editorStore);
109
109
  isActiveAddBlockMenu.value = false;
110
110
 
111
111
  let blockStructure: HTMLElement | null = null;
@@ -129,6 +129,7 @@ function addBlock(type: string) {
129
129
  if (editorStore.cursorData === null) {
130
130
  (editorStore.$content as HTMLDivElement).insertAdjacentElement("beforeend", blockStructure);
131
131
  } else {
132
+ _clenupCursor(editorStore);
132
133
  let $target = editorStore.cursorData.startNode;
133
134
 
134
135
  if ($target.constructor.name === "Text") {
@@ -155,6 +156,18 @@ function setDecoration(type: string) {
155
156
  _setNodeStyle(`de-${type}`, editorStore);
156
157
  }
157
158
 
159
+ function getContentData() {
160
+ if (editorStore.$content !== null) {
161
+ return _getContentData(editorStore.$content);
162
+ } else {
163
+ console.error("[DragonEditor] Con't find content Element.");
164
+ }
165
+ }
166
+
167
+ function setContentData(data: any[]) {
168
+ _setContentData(data, editorStore);
169
+ }
170
+
158
171
  onMounted(() => {
159
172
  if ($editor.value !== undefined) {
160
173
  editorStore.setWrapElement($editor.value);
@@ -168,10 +181,14 @@ onMounted(() => {
168
181
  // TODO : set scroll event
169
182
  });
170
183
 
171
- onUnmounted(() => {});
184
+ onUnmounted(() => {
185
+ // TODO : remove scroll event
186
+ });
172
187
 
173
188
  defineExpose({
174
189
  addBlock,
190
+ getContentData,
191
+ setContentData,
175
192
  });
176
193
  </script>
177
194
 
@@ -321,6 +338,7 @@ defineExpose({
321
338
  display: grid;
322
339
  gap: 4px;
323
340
  padding: 20px;
341
+ line-height: 1.6;
324
342
  }
325
343
  .dragon-editor .de-control-bar {
326
344
  position: absolute;
@@ -373,19 +391,17 @@ defineExpose({
373
391
  cursor: text;
374
392
  }
375
393
  .dragon-editor .de-heading-block {
394
+ min-height: 1.6em;
376
395
  outline: 0;
377
396
  }
378
397
  .dragon-editor .de-heading-block[data-level="1"] {
379
398
  font-size: 2em;
380
- min-height: 2em;
381
399
  }
382
400
  .dragon-editor .de-heading-block[data-level="2"] {
383
401
  font-size: 1.5em;
384
- min-height: 1.5em;
385
402
  }
386
403
  .dragon-editor .de-heading-block[data-level="3"] {
387
404
  font-size: 1.17em;
388
- min-height: 1.17em;
389
405
  }
390
406
  .dragon-editor .de-heading-block:empty:hover::before, .dragon-editor .de-heading-block:empty:focus::before {
391
407
  display: inline;
package/dist/runtime/components/DragonEditorViewer.vue ADDED
@@ -0,0 +1,228 @@
1
+ <template>
2
+ <div class="dragon-editor-viewer">
3
+ <template v-for="item in props.content">
4
+ <p v-if="item.type === 'text'" class="de-block de-text-block" v-html="item.textContent"></p>
5
+
6
+ <template v-if="item.type === 'heading'">
7
+ <h1 v-if="item.level === 1" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h1>
8
+ <h2 v-if="item.level === 2" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h2>
9
+ <h3 v-if="item.level === 3" class="de-block de-heading-block" :data-level="item.level" v-html="item.textContent"></h3>
10
+ </template>
11
+
12
+ <ul v-if="item.type === 'ul'" class="de-block de-list-block">
13
+ <li v-for="li in item.child" class="de-item" v-html="li"></li>
14
+ </ul>
15
+
16
+ <ol v-if="item.type === 'ol'" class="de-block de-list-block" :type="item.pattern">
17
+ <li v-for="li in item.child" class="de-item" v-html="li"></li>
18
+ </ol>
19
+ </template>
20
+ </div>
21
+ </template>
22
+
23
+ <script setup lang="ts">
24
+ const props = defineProps<{
25
+ content: any[];
26
+ }>();
27
+ </script>
28
+
29
+ <style>
30
+ @charset "UTF-8";
31
+ .dragon-editor,
32
+ .dragon-editor-viewer {
33
+ /**
34
+ * Reset style start
35
+ */
36
+ }
37
+ .dragon-editor h1,
38
+ .dragon-editor h2,
39
+ .dragon-editor h3,
40
+ .dragon-editor h4,
41
+ .dragon-editor h5,
42
+ .dragon-editor h6,
43
+ .dragon-editor p,
44
+ .dragon-editor blockquote,
45
+ .dragon-editor pre,
46
+ .dragon-editor dl,
47
+ .dragon-editor dd,
48
+ .dragon-editor ol,
49
+ .dragon-editor ul,
50
+ .dragon-editor fieldset,
51
+ .dragon-editor legend,
52
+ .dragon-editor figure,
53
+ .dragon-editor menu,
54
+ .dragon-editor-viewer h1,
55
+ .dragon-editor-viewer h2,
56
+ .dragon-editor-viewer h3,
57
+ .dragon-editor-viewer h4,
58
+ .dragon-editor-viewer h5,
59
+ .dragon-editor-viewer h6,
60
+ .dragon-editor-viewer p,
61
+ .dragon-editor-viewer blockquote,
62
+ .dragon-editor-viewer pre,
63
+ .dragon-editor-viewer dl,
64
+ .dragon-editor-viewer dd,
65
+ .dragon-editor-viewer ol,
66
+ .dragon-editor-viewer ul,
67
+ .dragon-editor-viewer fieldset,
68
+ .dragon-editor-viewer legend,
69
+ .dragon-editor-viewer figure,
70
+ .dragon-editor-viewer menu {
71
+ margin: 0;
72
+ padding: 0;
73
+ border: 0;
74
+ }
75
+ .dragon-editor table,
76
+ .dragon-editor th,
77
+ .dragon-editor td,
78
+ .dragon-editor-viewer table,
79
+ .dragon-editor-viewer th,
80
+ .dragon-editor-viewer td {
81
+ border-spacing: 0;
82
+ border-collapse: collapse;
83
+ }
84
+ .dragon-editor ol,
85
+ .dragon-editor ul,
86
+ .dragon-editor li,
87
+ .dragon-editor-viewer ol,
88
+ .dragon-editor-viewer ul,
89
+ .dragon-editor-viewer li {
90
+ list-style: none;
91
+ }
92
+ .dragon-editor h1,
93
+ .dragon-editor h2,
94
+ .dragon-editor h3,
95
+ .dragon-editor h4,
96
+ .dragon-editor h5,
97
+ .dragon-editor h6,
98
+ .dragon-editor-viewer h1,
99
+ .dragon-editor-viewer h2,
100
+ .dragon-editor-viewer h3,
101
+ .dragon-editor-viewer h4,
102
+ .dragon-editor-viewer h5,
103
+ .dragon-editor-viewer h6 {
104
+ font-size: 1em;
105
+ font-weight: normal;
106
+ }
107
+ .dragon-editor input,
108
+ .dragon-editor textarea,
109
+ .dragon-editor select,
110
+ .dragon-editor button,
111
+ .dragon-editor-viewer input,
112
+ .dragon-editor-viewer textarea,
113
+ .dragon-editor-viewer select,
114
+ .dragon-editor-viewer button {
115
+ margin: 0;
116
+ padding: 0;
117
+ border-radius: 0;
118
+ outline: 0;
119
+ vertical-align: middle;
120
+ }
121
+ .dragon-editor a,
122
+ .dragon-editor button,
123
+ .dragon-editor input[type=submit],
124
+ .dragon-editor input[type=button],
125
+ .dragon-editor input[type=reset],
126
+ .dragon-editor-viewer a,
127
+ .dragon-editor-viewer button,
128
+ .dragon-editor-viewer input[type=submit],
129
+ .dragon-editor-viewer input[type=button],
130
+ .dragon-editor-viewer input[type=reset] {
131
+ border: 0;
132
+ background: transparent;
133
+ cursor: pointer;
134
+ }
135
+ .dragon-editor img,
136
+ .dragon-editor-viewer img {
137
+ border: 0;
138
+ vertical-align: top;
139
+ }
140
+ .dragon-editor .de-block[data-depth="1"],
141
+ .dragon-editor-viewer .de-block[data-depth="1"] {
142
+ padding-left: 30px;
143
+ }
144
+ .dragon-editor .de-block[data-depth="2"],
145
+ .dragon-editor-viewer .de-block[data-depth="2"] {
146
+ padding-left: 60px;
147
+ }
148
+ .dragon-editor .de-block[data-depth="3"],
149
+ .dragon-editor-viewer .de-block[data-depth="3"] {
150
+ padding-left: 90px;
151
+ }
152
+ .dragon-editor .de-block[data-depth="4"],
153
+ .dragon-editor-viewer .de-block[data-depth="4"] {
154
+ padding-left: 120px;
155
+ }
156
+ .dragon-editor .de-block[data-depth="5"],
157
+ .dragon-editor-viewer .de-block[data-depth="5"] {
158
+ padding-left: 150px;
159
+ }
160
+
161
+ /**
162
+ * 노드 스타일
163
+ */
164
+ .dragon-editor-viewer {
165
+ display: grid;
166
+ gap: 4px;
167
+ width: 100%;
168
+ height: 100%;
169
+ padding: 20px;
170
+ line-height: 1.6;
171
+ }
172
+ .dragon-editor-viewer .de-text-block {
173
+ min-height: 1.6em;
174
+ outline: 0;
175
+ }
176
+ .dragon-editor-viewer .de-heading-block {
177
+ min-height: 1.6em;
178
+ outline: 0;
179
+ }
180
+ .dragon-editor-viewer .de-heading-block[data-level="1"] {
181
+ font-size: 2em;
182
+ }
183
+ .dragon-editor-viewer .de-heading-block[data-level="2"] {
184
+ font-size: 1.5em;
185
+ }
186
+ .dragon-editor-viewer .de-heading-block[data-level="3"] {
187
+ font-size: 1.17em;
188
+ }
189
+ .dragon-editor-viewer .de-list-block {
190
+ display: flex;
191
+ flex-direction: column;
192
+ row-gap: 4px;
193
+ padding-left: 24px;
194
+ list-style: disc;
195
+ }
196
+ .dragon-editor-viewer .de-list-block .de-item {
197
+ min-height: 1.6em;
198
+ outline: 0;
199
+ list-style: inherit;
200
+ }
201
+ .dragon-editor-viewer ol.de-list-block {
202
+ list-style: decimal;
203
+ }
204
+ .dragon-editor-viewer .de-bold {
205
+ font-weight: 700;
206
+ }
207
+ .dragon-editor-viewer .de-italic {
208
+ font-style: italic;
209
+ }
210
+ .dragon-editor-viewer .de-underline {
211
+ text-decoration: underline;
212
+ }
213
+ .dragon-editor-viewer .de-underline.de-strikethrough {
214
+ text-decoration: underline line-through;
215
+ }
216
+ .dragon-editor-viewer .de-strikethrough {
217
+ text-decoration: line-through;
218
+ }
219
+ .dragon-editor-viewer .de-strikethrough.de-underline {
220
+ text-decoration: line-through underline;
221
+ }
222
+ .dragon-editor-viewer .de-code {
223
+ padding: 2px 4px;
224
+ background: #f1f1f1;
225
+ color: #ff0000;
226
+ border-radius: 5px;
227
+ }
228
+ </style>
package/dist/runtime/scss/editor.css CHANGED
@@ -143,6 +143,7 @@
143
143
  display: grid;
144
144
  gap: 4px;
145
145
  padding: 20px;
146
+ line-height: 1.6;
146
147
  }
147
148
  .dragon-editor .de-control-bar {
148
149
  position: absolute;
@@ -195,19 +196,17 @@
195
196
  cursor: text;
196
197
  }
197
198
  .dragon-editor .de-heading-block {
199
+ min-height: 1.6em;
198
200
  outline: 0;
199
201
  }
200
202
  .dragon-editor .de-heading-block[data-level="1"] {
201
203
  font-size: 2em;
202
- min-height: 2em;
203
204
  }
204
205
  .dragon-editor .de-heading-block[data-level="2"] {
205
206
  font-size: 1.5em;
206
- min-height: 1.5em;
207
207
  }
208
208
  .dragon-editor .de-heading-block[data-level="3"] {
209
209
  font-size: 1.17em;
210
- min-height: 1.17em;
211
210
  }
212
211
  .dragon-editor .de-heading-block:empty:hover::before, .dragon-editor .de-heading-block:empty:focus::before {
213
212
  display: inline;
package/dist/runtime/scss/viewer.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  .dragon-editor,
2
3
  .dragon-editor-viewer {
3
4
  /**
@@ -126,4 +127,72 @@
126
127
  .dragon-editor .de-block[data-depth="5"],
127
128
  .dragon-editor-viewer .de-block[data-depth="5"] {
128
129
  padding-left: 150px;
130
+ }
131
+
132
+ /**
133
+ * 노드 스타일
134
+ */
135
+ .dragon-editor-viewer {
136
+ display: grid;
137
+ gap: 4px;
138
+ width: 100%;
139
+ height: 100%;
140
+ padding: 20px;
141
+ line-height: 1.6;
142
+ }
143
+ .dragon-editor-viewer .de-text-block {
144
+ min-height: 1.6em;
145
+ outline: 0;
146
+ }
147
+ .dragon-editor-viewer .de-heading-block {
148
+ min-height: 1.6em;
149
+ outline: 0;
150
+ }
151
+ .dragon-editor-viewer .de-heading-block[data-level="1"] {
152
+ font-size: 2em;
153
+ }
154
+ .dragon-editor-viewer .de-heading-block[data-level="2"] {
155
+ font-size: 1.5em;
156
+ }
157
+ .dragon-editor-viewer .de-heading-block[data-level="3"] {
158
+ font-size: 1.17em;
159
+ }
160
+ .dragon-editor-viewer .de-list-block {
161
+ display: flex;
162
+ flex-direction: column;
163
+ row-gap: 4px;
164
+ padding-left: 24px;
165
+ list-style: disc;
166
+ }
167
+ .dragon-editor-viewer .de-list-block .de-item {
168
+ min-height: 1.6em;
169
+ outline: 0;
170
+ list-style: inherit;
171
+ }
172
+ .dragon-editor-viewer ol.de-list-block {
173
+ list-style: decimal;
174
+ }
175
+ .dragon-editor-viewer .de-bold {
176
+ font-weight: 700;
177
+ }
178
+ .dragon-editor-viewer .de-italic {
179
+ font-style: italic;
180
+ }
181
+ .dragon-editor-viewer .de-underline {
182
+ text-decoration: underline;
183
+ }
184
+ .dragon-editor-viewer .de-underline.de-strikethrough {
185
+ text-decoration: underline line-through;
186
+ }
187
+ .dragon-editor-viewer .de-strikethrough {
188
+ text-decoration: line-through;
189
+ }
190
+ .dragon-editor-viewer .de-strikethrough.de-underline {
191
+ text-decoration: line-through underline;
192
+ }
193
+ .dragon-editor-viewer .de-code {
194
+ padding: 2px 4px;
195
+ background: #f1f1f1;
196
+ color: #ff0000;
197
+ border-radius: 5px;
129
198
  }
package/dist/runtime/utils/block.d.ts CHANGED
@@ -2,8 +2,8 @@ export declare function _getBlockType(element: HTMLElement): {
2
2
  $element: Element;
3
3
  type: string;
4
4
  };
5
- export declare function _createTextBlock(content?: string, isEdit?: boolean): HTMLParagraphElement;
6
- export declare function _createHeadingBlock(type: string, content?: string, isEdit?: boolean): HTMLElement;
7
- export declare function _createListBlock(type: string, content?: string[], isEdit?: boolean): HTMLElement;
8
- export declare function _createListItemBlock(content?: string, isEdit?: boolean): HTMLLIElement;
5
+ export declare function _createTextBlock(content?: string): HTMLParagraphElement;
6
+ export declare function _createHeadingBlock(type: string, content?: string): HTMLElement;
7
+ export declare function _createListBlock(type: string, content?: string[], pattern?: string): HTMLElement;
8
+ export declare function _createListItemBlock(content?: string): HTMLLIElement;
9
9
  export declare function generateId(): string;
package/dist/runtime/utils/block.mjs CHANGED
@@ -19,44 +19,44 @@ export function _getBlockType(element) {
19
19
  type: typeName
20
20
  };
21
21
  }
22
- export function _createTextBlock(content = "", isEdit = true) {
22
+ export function _createTextBlock(content = "") {
23
23
  const $paragraph = document.createElement("p");
24
24
  $paragraph.classList.add("de-block", "de-text-block");
25
- if (isEdit === true) {
26
- $paragraph.setAttribute("contenteditable", "true");
27
- }
25
+ $paragraph.setAttribute("contenteditable", "true");
28
26
  if (content !== "") {
29
27
  $paragraph.innerHTML = content;
30
28
  }
31
29
  return $paragraph;
32
30
  }
33
- export function _createHeadingBlock(type, content = "", isEdit = true) {
31
+ export function _createHeadingBlock(type, content = "") {
34
32
  const level = parseInt(type.replace("heading", ""));
35
33
  const $headingBlock = document.createElement(`h${level}`);
36
34
  $headingBlock.classList.add("de-block", "de-heading-block");
37
35
  $headingBlock.id = generateId();
38
36
  $headingBlock.dataset["level"] = String(level);
39
- if (isEdit === true) {
40
- $headingBlock.setAttribute("contenteditable", "true");
41
- }
37
+ $headingBlock.setAttribute("contenteditable", "true");
42
38
  if (content !== "") {
43
39
  $headingBlock.innerHTML = content;
44
40
  }
45
41
  return $headingBlock;
46
42
  }
47
- export function _createListBlock(type, content = [""], isEdit = true) {
43
+ export function _createListBlock(type, content = [""], pattern) {
48
44
  const $block = document.createElement(type);
49
45
  $block.classList.add("de-block", "de-list-block");
46
+ if (type === "ol") {
47
+ $block.type = pattern ?? "1";
48
+ }
50
49
  content.forEach((text) => {
51
- $block.appendChild(_createListItemBlock(text, isEdit));
50
+ $block.appendChild(_createListItemBlock(text));
52
51
  });
53
52
  return $block;
54
53
  }
55
- export function _createListItemBlock(content = "", isEdit = true) {
54
+ export function _createListItemBlock(content = "") {
56
55
  const $li = document.createElement("li");
57
56
  $li.classList.add("de-item");
58
- if (isEdit === true) {
59
- $li.setAttribute("contenteditable", "true");
57
+ $li.setAttribute("contenteditable", "true");
58
+ if (content !== "") {
59
+ $li.innerHTML = content;
60
60
  }
61
61
  return $li;
62
62
  }
package/dist/runtime/utils/convertor.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function _getContentData($content: HTMLDivElement): any[];
2
+ export declare function _setContentData(data: any[], store: any): void;
package/dist/runtime/utils/convertor.mjs ADDED
@@ -0,0 +1,86 @@
1
+ import { _createTextBlock, _createHeadingBlock, _createListBlock } from "./block.mjs";
2
+ export function _getContentData($content) {
3
+ const childList = $content.children;
4
+ const data = [];
5
+ [...childList].forEach(($child) => {
6
+ const tagName = $child.tagName;
7
+ switch (tagName) {
8
+ case "P":
9
+ data.push(converteParagraphToData($child));
10
+ break;
11
+ case "H1":
12
+ data.push(converteHeadingToData($child, 1));
13
+ break;
14
+ case "H2":
15
+ data.push(converteHeadingToData($child, 2));
16
+ break;
17
+ case "H3":
18
+ data.push(converteHeadingToData($child, 3));
19
+ break;
20
+ case "UL":
21
+ data.push(converteUListToData($child));
22
+ break;
23
+ case "OL":
24
+ data.push(converteOListToData($child));
25
+ break;
26
+ case "PRE":
27
+ break;
28
+ case "DIV":
29
+ break;
30
+ }
31
+ });
32
+ return data;
33
+ }
34
+ export function _setContentData(data, store) {
35
+ const childList = [];
36
+ data.forEach((item) => {
37
+ switch (item.type) {
38
+ case "text":
39
+ childList.push(_createTextBlock(item.textContent));
40
+ break;
41
+ case "heading":
42
+ childList.push(_createHeadingBlock(`heading${item.level}`, item.textContent));
43
+ break;
44
+ case "ul":
45
+ childList.push(_createListBlock("ul", item.child));
46
+ break;
47
+ case "ol":
48
+ childList.push(_createListBlock("ol", item.child, item.pattern));
49
+ break;
50
+ case "":
51
+ break;
52
+ }
53
+ });
54
+ store.$content.replaceChildren(...childList);
55
+ }
56
+ function converteParagraphToData($child) {
57
+ return {
58
+ type: "text",
59
+ textContent: $child.innerHTML
60
+ };
61
+ }
62
+ function converteHeadingToData($child, level) {
63
+ return {
64
+ type: "heading",
65
+ level,
66
+ id: $child.id,
67
+ textContent: $child.innerHTML
68
+ };
69
+ }
70
+ function converteUListToData($child) {
71
+ return {
72
+ type: "ul",
73
+ child: [...$child.children].map(($li) => {
74
+ return $li.innerHTML;
75
+ })
76
+ };
77
+ }
78
+ function converteOListToData($child) {
79
+ return {
80
+ type: "ol",
81
+ pattern: $child.type,
82
+ child: [...$child.children].map(($li) => {
83
+ return $li.innerHTML;
84
+ })
85
+ };
86
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "dragon-editor",
3
- "version": "3.0.0-beta",
4
- "description": "Javascript WYSIWYG editor!",
3
+ "version": "3.0.0",
4
+ "description": "Javascript WYSIWYG editor in Nuxt3!",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/lovefields/dragonEditor.git"