dragon-editor 2.1.2 → 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 (58) hide show
  1. package/README.md +82 -96
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +10 -12
  4. package/dist/runtime/components/DragonEditor.vue +457 -0
  5. package/dist/runtime/components/DragonEditorViewer.vue +228 -0
  6. package/dist/runtime/plugin.d.ts +2 -0
  7. package/dist/runtime/plugin.mjs +10 -0
  8. package/dist/runtime/scss/editor.css +261 -0
  9. package/dist/runtime/scss/viewer.css +198 -0
  10. package/dist/runtime/store.d.ts +7 -0
  11. package/dist/runtime/store.mjs +27 -0
  12. package/dist/runtime/type.d.ts +24 -0
  13. package/dist/runtime/utils/block.d.ts +9 -0
  14. package/dist/runtime/utils/block.mjs +70 -0
  15. package/dist/runtime/utils/convertor.d.ts +2 -0
  16. package/dist/runtime/utils/convertor.mjs +86 -0
  17. package/dist/runtime/utils/cursor.d.ts +6 -0
  18. package/dist/runtime/utils/cursor.mjs +132 -0
  19. package/dist/runtime/utils/element.d.ts +3 -0
  20. package/dist/runtime/utils/element.mjs +39 -0
  21. package/dist/runtime/utils/keyboardEvent.d.ts +10 -0
  22. package/dist/runtime/utils/keyboardEvent.mjs +781 -0
  23. package/dist/runtime/utils/style.d.ts +1 -0
  24. package/dist/runtime/utils/style.mjs +330 -0
  25. package/dist/runtime/utils/ui.d.ts +1 -0
  26. package/dist/runtime/utils/ui.mjs +35 -0
  27. package/package.json +10 -4
  28. package/README_en.md +0 -30
  29. package/dist/runtime/core/components/SvgIcon.d.ts +0 -10
  30. package/dist/runtime/core/components/SvgIcon.mjs +0 -98
  31. package/dist/runtime/core/components/editor/ImageBlock.vue +0 -175
  32. package/dist/runtime/core/components/editor/OlBlock.vue +0 -162
  33. package/dist/runtime/core/components/editor/TextBlock.vue +0 -172
  34. package/dist/runtime/core/components/editor/UlBlock.vue +0 -162
  35. package/dist/runtime/core/style/common.css +0 -496
  36. package/dist/runtime/core/style/viewer.css +0 -205
  37. package/dist/runtime/core/utils/converter.d.ts +0 -2
  38. package/dist/runtime/core/utils/converter.mjs +0 -90
  39. package/dist/runtime/core/utils/cursor.d.ts +0 -4
  40. package/dist/runtime/core/utils/cursor.mjs +0 -84
  41. package/dist/runtime/core/utils/element.d.ts +0 -3
  42. package/dist/runtime/core/utils/element.mjs +0 -40
  43. package/dist/runtime/core/utils/global.d.ts +0 -3
  44. package/dist/runtime/core/utils/global.mjs +0 -81
  45. package/dist/runtime/core/utils/index.d.ts +0 -7
  46. package/dist/runtime/core/utils/index.mjs +0 -7
  47. package/dist/runtime/core/utils/keyboard.d.ts +0 -6
  48. package/dist/runtime/core/utils/keyboard.mjs +0 -565
  49. package/dist/runtime/core/utils/style.d.ts +0 -6
  50. package/dist/runtime/core/utils/style.mjs +0 -374
  51. package/dist/runtime/core/utils/ui.d.ts +0 -4
  52. package/dist/runtime/core/utils/ui.mjs +0 -13
  53. package/dist/runtime/shared/components/DragonEditor.vue +0 -695
  54. package/dist/runtime/shared/components/DragonEditorComment.vue +0 -172
  55. package/dist/runtime/shared/components/DragonEditorNew.d.ts +0 -16
  56. package/dist/runtime/shared/components/DragonEditorNew.mjs +0 -62
  57. package/dist/runtime/shared/components/DragonEditorViewer.d.ts +0 -14
  58. package/dist/runtime/shared/components/DragonEditorViewer.mjs +0 -15
@@ -1,374 +0,0 @@
1
- import { getCursor, setCursor } from "./cursor.mjs";
2
- import { findEditableElement, findChildNumber } from "./element.mjs";
3
- const alignClassList = ["d-align-left", "d-align-center", "d-align-right"];
4
- function arrangementAlignClass(originList, className) {
5
- const hasClass = originList.indexOf(className) > -1;
6
- let array = originList;
7
- if (hasClass) {
8
- originList.splice(originList.indexOf(className), 1);
9
- array = originList;
10
- } else {
11
- array = originList.filter((item) => alignClassList.indexOf(item) === -1);
12
- array.push(className);
13
- }
14
- return array;
15
- }
16
- const headingClassList = ["d-h1", "d-h2", "d-h3", "d-h4", "d-h5", "d-h6"];
17
- function arrangementHeadingClass(originList, className) {
18
- const hasClass = originList.indexOf(className) > -1;
19
- let array = originList;
20
- if (hasClass) {
21
- originList.splice(originList.indexOf(className), 1);
22
- array = originList;
23
- } else {
24
- array = originList.filter((item) => headingClassList.indexOf(item) === -1);
25
- array.push(className);
26
- }
27
- return array;
28
- }
29
- function getNextNode($target, node) {
30
- const childNode = $target.childNodes;
31
- let idx = -1;
32
- childNode.forEach((item, index) => {
33
- if (item === node) {
34
- idx = index;
35
- }
36
- });
37
- return childNode[idx + 1];
38
- }
39
- function warpStyleNode({ node, startOffset, endOffset, className, url, tagName }) {
40
- const text = node.textContent;
41
- const textLength = text.length;
42
- let startIdx = startOffset;
43
- let endIdx = endOffset;
44
- if (endOffset < startOffset) {
45
- startIdx = endOffset;
46
- endIdx = startOffset;
47
- }
48
- return `${text.substring(0, startIdx)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startIdx, endIdx)}</${tagName}>${text.substring(endIdx, textLength)}`;
49
- }
50
- function defaultDecorationMake({ originData, $target, className, tagName = "span", url, parentCursorData }) {
51
- let cursorData = getCursor();
52
- if (cursorData.startNode === null) {
53
- cursorData = parentCursorData;
54
- }
55
- let startNode = cursorData.startNode;
56
- let endNode = cursorData.endNode;
57
- if (startNode !== null) {
58
- let editableElement = findEditableElement(startNode);
59
- if (editableElement === null) {
60
- cursorData = parentCursorData;
61
- startNode = cursorData.startNode;
62
- endNode = cursorData.endNode;
63
- editableElement = findEditableElement(startNode);
64
- }
65
- if (cursorData.type === "Range") {
66
- if (startNode === endNode) {
67
- const parentNode = startNode.parentNode;
68
- let startOffset = cursorData.startOffset;
69
- let endOffset = cursorData.endOffset;
70
- if (startOffset > endOffset) {
71
- startOffset = cursorData.endOffset;
72
- endOffset = cursorData.startOffset;
73
- }
74
- if (parentNode === editableElement) {
75
- const childNumber = findChildNumber(editableElement, startNode);
76
- const wrpStructure = warpStyleNode({
77
- node: parentNode.childNodes[childNumber],
78
- startOffset,
79
- endOffset,
80
- className,
81
- tagName,
82
- url
83
- });
84
- let htmlStructure = "";
85
- parentNode.childNodes.forEach((child, count) => {
86
- if (count === childNumber) {
87
- htmlStructure += wrpStructure;
88
- } else {
89
- if (child.constructor.name === "Text") {
90
- htmlStructure += child.textContent;
91
- } else {
92
- htmlStructure += child.outerHTML;
93
- }
94
- }
95
- });
96
- parentNode.innerHTML = htmlStructure;
97
- setTimeout(() => {
98
- let $cursorTarget = editableElement.childNodes[childNumber + 1];
99
- if (!$cursorTarget) {
100
- $cursorTarget = editableElement.childNodes[childNumber];
101
- }
102
- const cursorLength = $cursorTarget.textContent.length;
103
- setCursor($cursorTarget, cursorLength);
104
- }, 100);
105
- } else {
106
- const originTag = getTagName(parentNode);
107
- const childNumber = findChildNumber(editableElement, parentNode);
108
- const classList = [...parentNode.classList];
109
- const text = parentNode.textContent;
110
- const hasClassIdx = classList.indexOf(className);
111
- let startOffset2 = cursorData.startOffset;
112
- let endOffset2 = cursorData.endOffset;
113
- let htmlStructure = "";
114
- if (startOffset2 > endOffset2) {
115
- startOffset2 = cursorData.endOffset;
116
- endOffset2 = cursorData.startOffset;
117
- }
118
- if (hasClassIdx > -1) {
119
- const middleClassList = [...parentNode.classList];
120
- middleClassList.splice(hasClassIdx, 1);
121
- htmlStructure = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${middleClassList.join(" ")}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
122
- } else {
123
- htmlStructure = `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(0, startOffset2)}</${originTag.name}><${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${classList.join(" ")} ${className}">${text.substring(startOffset2, endOffset2)}</${tagName}><${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${classList.join(" ")}">${text.substring(endOffset2, text.length)}</${originTag.name}>`;
124
- }
125
- parentNode.insertAdjacentHTML("afterend", htmlStructure);
126
- parentNode.remove();
127
- setTimeout(() => {
128
- setCursor(editableElement.childNodes[childNumber + 1], text.substring(startOffset2, endOffset2).length);
129
- }, 100);
130
- }
131
- } else {
132
- let startChild = startNode;
133
- let endChild = endNode;
134
- if (startNode.parentNode !== editableElement) {
135
- startChild = startNode.parentNode;
136
- }
137
- if (endNode.parentNode !== editableElement) {
138
- endChild = endNode.parentNode;
139
- }
140
- const startChildIdx = findChildNumber(editableElement, startChild);
141
- const endChildIdx = findChildNumber(editableElement, endChild);
142
- let startIdx = 0;
143
- let endIdx = 0;
144
- let startOffset = 0;
145
- let endOffset = 0;
146
- let hasClassName = true;
147
- let htmlStructure = "";
148
- if (startChildIdx > endChildIdx) {
149
- startIdx = endChildIdx;
150
- endIdx = startChildIdx;
151
- startOffset = cursorData.endOffset;
152
- endOffset = cursorData.startOffset;
153
- } else {
154
- startIdx = startChildIdx;
155
- endIdx = endChildIdx;
156
- startOffset = cursorData.startOffset;
157
- endOffset = cursorData.endOffset;
158
- }
159
- editableElement.childNodes.forEach((item, count) => {
160
- if (count >= startIdx && count <= endIdx) {
161
- if (item.constructor.name === "Text") {
162
- hasClassName = false;
163
- } else {
164
- if ([...item.classList].indexOf(className) === -1) {
165
- hasClassName = false;
166
- }
167
- }
168
- }
169
- });
170
- editableElement.childNodes.forEach((child, count) => {
171
- const type = child.constructor.name;
172
- const text = child.textContent;
173
- if (count > startIdx && count < endIdx) {
174
- if (type === "Text") {
175
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${child.textContent}</${tagName}>`;
176
- } else {
177
- if (hasClassName) {
178
- if (child.classList.length === 1) {
179
- htmlStructure += child.textContent;
180
- } else {
181
- child.classList.remove(className);
182
- htmlStructure += child.outerHTML;
183
- }
184
- } else {
185
- child.classList.add(className);
186
- htmlStructure += child.outerHTML;
187
- }
188
- }
189
- } else if (count === startIdx) {
190
- if (type === "Text") {
191
- htmlStructure += `${text.substring(0, startOffset)}<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
192
- } else {
193
- const childClassList = [...child.classList];
194
- const originTag = getTagName(child);
195
- if (hasClassName) {
196
- if (childClassList.length === 1) {
197
- htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(0, startOffset)}</${originTag.name}>${text.substring(startOffset, text.length)}`;
198
- } else {
199
- const classIdx = childClassList.indexOf(className);
200
- htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
201
- childClassList.splice(classIdx, 1);
202
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(startOffset, text.length)}</${tagName}>`;
203
- }
204
- } else {
205
- htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(0, startOffset)}</${originTag.name}>`;
206
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(startOffset, text.length)}</${tagName}>`;
207
- }
208
- }
209
- } else if (count === endIdx) {
210
- if (type === "Text") {
211
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${className}">${text.substring(0, endOffset)}</${tagName}>${text.substring(endOffset, text.length)}`;
212
- } else {
213
- const childClassList = [...child.classList];
214
- const originTag = getTagName(child);
215
- if (hasClassName) {
216
- if (childClassList.length === 1) {
217
- htmlStructure += `${text.substring(0, endOffset)}<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${className}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
218
- } else {
219
- const classIdx = childClassList.indexOf(className);
220
- const newClassList = [...child.classList];
221
- newClassList.splice(classIdx, 1);
222
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${newClassList.join(" ")}">${text.substring(0, endOffset)}</${tagName}>`;
223
- htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
224
- }
225
- } else {
226
- htmlStructure += `<${tagName} ${url ? `href="${url}" rel="nofollow"` : ""} class="${childClassList.join(" ")} ${className}">${text.substring(0, endOffset)}</${tagName}>`;
227
- htmlStructure += `<${originTag.name} ${originTag.href ? `href="${originTag.href}" rel="nofollow"` : ""} class="${childClassList.join(" ")}">${text.substring(endOffset, text.length)}</${originTag.name}>`;
228
- }
229
- }
230
- } else {
231
- if (type === "Text") {
232
- htmlStructure += child.textContent;
233
- } else {
234
- htmlStructure += child.outerHTML;
235
- }
236
- }
237
- });
238
- editableElement.innerHTML = htmlStructure;
239
- setTimeout(() => {
240
- const $target2 = editableElement.childNodes[endIdx + 1];
241
- const length = $target2.textContent.length;
242
- setCursor($target2, length);
243
- }, 100);
244
- }
245
- } else {
246
- if (startNode.constructor.name === "Text") {
247
- const parentNode = startNode.parentNode;
248
- const parentNodeClassList = [...parentNode.classList];
249
- if (parentNodeClassList.indexOf(className) > -1) {
250
- if (parentNodeClassList.length === 1) {
251
- const textContent = parentNode.textContent;
252
- parentNode.insertAdjacentText("afterend", textContent);
253
- setCursor(getNextNode($target, parentNode), textContent.length);
254
- parentNode.remove();
255
- } else {
256
- parentNode.classList.remove(className);
257
- }
258
- } else {
259
- parentNode.classList.add(className);
260
- }
261
- } else {
262
- startNode.classList.toggle(className);
263
- }
264
- }
265
- }
266
- return originData;
267
- }
268
- export function styleSettings({ kind, blockData, $target, url, cursorData }) {
269
- let rawData = blockData;
270
- switch (kind) {
271
- case "alignLeft":
272
- rawData.classList = arrangementAlignClass(rawData.classList, "d-align-left");
273
- break;
274
- case "alignCenter":
275
- rawData.classList = arrangementAlignClass(rawData.classList, "d-align-center");
276
- break;
277
- case "alignRight":
278
- rawData.classList = arrangementAlignClass(rawData.classList, "d-align-right");
279
- break;
280
- case "decorationBold":
281
- rawData = defaultDecorationMake({
282
- originData: rawData,
283
- $target,
284
- className: "d-deco-bold",
285
- parentCursorData: cursorData
286
- });
287
- break;
288
- case "decorationItalic":
289
- rawData = defaultDecorationMake({
290
- originData: rawData,
291
- $target,
292
- className: "d-deco-italic",
293
- parentCursorData: cursorData
294
- });
295
- break;
296
- case "decorationUnderline":
297
- rawData = defaultDecorationMake({
298
- originData: rawData,
299
- $target,
300
- className: "d-deco-underline",
301
- parentCursorData: cursorData
302
- });
303
- break;
304
- case "decorationStrikethrough":
305
- rawData = defaultDecorationMake({
306
- originData: rawData,
307
- $target,
308
- className: "d-deco-through",
309
- parentCursorData: cursorData
310
- });
311
- break;
312
- case "decorationCode":
313
- rawData = defaultDecorationMake({
314
- originData: rawData,
315
- $target,
316
- className: "d-deco-code",
317
- tagName: "code",
318
- parentCursorData: cursorData
319
- });
320
- break;
321
- case "decorationLink":
322
- rawData = defaultDecorationMake({
323
- originData: rawData,
324
- $target,
325
- className: "d-deco-link",
326
- tagName: "a",
327
- url,
328
- parentCursorData: cursorData
329
- });
330
- break;
331
- case "heading-1":
332
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h1");
333
- break;
334
- case "heading-2":
335
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h2");
336
- break;
337
- case "heading-3":
338
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h3");
339
- break;
340
- case "heading-4":
341
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h4");
342
- break;
343
- case "heading-5":
344
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h5");
345
- break;
346
- case "heading-6":
347
- rawData.classList = arrangementHeadingClass(rawData.classList, "d-h6");
348
- break;
349
- default:
350
- rawData = defaultDecorationMake({
351
- originData: rawData,
352
- $target,
353
- className: kind,
354
- parentCursorData: cursorData
355
- });
356
- }
357
- return rawData;
358
- }
359
- export function getTagName(node) {
360
- const value = {
361
- name: "span",
362
- href: null
363
- };
364
- switch (node.tagName) {
365
- case "CODE":
366
- value.name = "code";
367
- break;
368
- case "A":
369
- value.name = "a";
370
- value.href = node.getAttribute("href");
371
- break;
372
- }
373
- return value;
374
- }
@@ -1,4 +0,0 @@
1
- import type { EditorContentType } from "../../../types/index";
2
- export declare function createLeftMenu(modelValue: EditorContentType, top: number, isActive: boolean): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
3
- [key: string]: any;
4
- }>;
@@ -1,13 +0,0 @@
1
- import { h } from "vue";
2
- export function createLeftMenu(modelValue, top, isActive) {
3
- console.log(modelValue);
4
- return h("div", {
5
- class: ["d-left-menu", { "--active": isActive }],
6
- onClick: () => {
7
- test();
8
- }
9
- });
10
- function test() {
11
- modelValue = [{ type: "text", classList: [], content: "123" }];
12
- }
13
- }