dragon-editor 3.4.4 → 3.5.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 (70) hide show
  1. package/README.md +9 -15
  2. package/dist/module.d.mts +5 -0
  3. package/dist/module.json +8 -1
  4. package/dist/module.mjs +5 -3
  5. package/dist/runtime/components/DragonEditor.vue +252 -720
  6. package/dist/runtime/components/DragonEditorViewer.vue +59 -45
  7. package/dist/runtime/scss/editor.css +83 -34
  8. package/dist/runtime/scss/viewer.css +31 -4
  9. package/dist/runtime/type.d.ts +78 -23
  10. package/dist/runtime/utils/event/block.d.ts +0 -0
  11. package/dist/runtime/utils/event/block.js +78 -0
  12. package/dist/runtime/utils/event/cursor.d.ts +0 -0
  13. package/dist/runtime/utils/{cursor.mjs → event/cursor.js} +4 -16
  14. package/dist/runtime/utils/event/data.d.ts +0 -0
  15. package/dist/runtime/utils/event/data.js +342 -0
  16. package/dist/runtime/utils/event/index.d.ts +8 -0
  17. package/dist/runtime/utils/event/index.js +8 -0
  18. package/dist/runtime/utils/event/keyboard.d.ts +0 -0
  19. package/dist/runtime/utils/event/keyboard.js +1368 -0
  20. package/dist/runtime/utils/event/mouse.d.ts +0 -0
  21. package/dist/runtime/utils/event/mouse.js +70 -0
  22. package/dist/runtime/utils/event/scroll.d.ts +0 -0
  23. package/dist/runtime/utils/event/scroll.js +29 -0
  24. package/dist/runtime/utils/event/touch.d.ts +0 -0
  25. package/dist/runtime/utils/event/touch.js +10 -0
  26. package/dist/runtime/utils/event/window.d.ts +0 -0
  27. package/dist/runtime/utils/event/window.js +32 -0
  28. package/dist/runtime/utils/layout/block.d.ts +0 -0
  29. package/dist/runtime/utils/layout/block.js +105 -0
  30. package/dist/runtime/utils/layout/body.d.ts +0 -0
  31. package/dist/runtime/utils/layout/body.js +22 -0
  32. package/dist/runtime/utils/layout/controlbar.d.ts +0 -0
  33. package/dist/runtime/utils/layout/controlbar.js +99 -0
  34. package/dist/runtime/utils/layout/icon.d.ts +0 -0
  35. package/dist/runtime/utils/layout/icon.js +156 -0
  36. package/dist/runtime/utils/layout/index.d.ts +5 -0
  37. package/dist/runtime/utils/layout/index.js +5 -0
  38. package/dist/runtime/utils/layout/menuBar.d.ts +0 -0
  39. package/dist/runtime/utils/layout/menuBar.js +358 -0
  40. package/dist/runtime/utils/node/block.d.ts +0 -0
  41. package/dist/runtime/utils/node/block.js +235 -0
  42. package/dist/runtime/utils/{element.d.ts → node/element.d.ts} +1 -0
  43. package/dist/runtime/utils/{element.mjs → node/element.js} +19 -4
  44. package/dist/runtime/utils/node/index.d.ts +2 -0
  45. package/dist/runtime/utils/node/index.js +2 -0
  46. package/dist/runtime/utils/style/anchor.d.ts +0 -0
  47. package/dist/runtime/utils/style/anchor.js +240 -0
  48. package/dist/runtime/utils/style/decoration.d.ts +0 -0
  49. package/dist/runtime/utils/style/decoration.js +378 -0
  50. package/dist/runtime/utils/style/index.d.ts +2 -0
  51. package/dist/runtime/utils/style/index.js +2 -0
  52. package/dist/types.d.mts +7 -0
  53. package/dist/types.d.ts +3 -3
  54. package/package.json +15 -16
  55. package/dist/runtime/store.d.ts +0 -11
  56. package/dist/runtime/store.mjs +0 -51
  57. package/dist/runtime/utils/block.d.ts +0 -13
  58. package/dist/runtime/utils/block.mjs +0 -144
  59. package/dist/runtime/utils/content.d.ts +0 -2
  60. package/dist/runtime/utils/content.mjs +0 -19
  61. package/dist/runtime/utils/controlBar.d.ts +0 -9
  62. package/dist/runtime/utils/controlBar.mjs +0 -172
  63. package/dist/runtime/utils/convertor.d.ts +0 -3
  64. package/dist/runtime/utils/convertor.mjs +0 -138
  65. package/dist/runtime/utils/cursor.d.ts +0 -6
  66. package/dist/runtime/utils/keyboardEvent.d.ts +0 -10
  67. package/dist/runtime/utils/keyboardEvent.mjs +0 -978
  68. package/dist/runtime/utils/style.d.ts +0 -5
  69. package/dist/runtime/utils/style.mjs +0 -617
  70. /package/dist/runtime/{plugin.mjs → plugin.js} +0 -0
@@ -1,978 +0,0 @@
1
- import { _setCursor, _setCursorData, _clenupCursor, _soltingCursorDataOnElement } from "./cursor.mjs";
2
- import { _getParentElementIfNodeIsText, _findContentEditableElement } from "./element.mjs";
3
- import { _getBlockType, _createTextBlock, _createListItemBlock, _generateId } from "./block.mjs";
4
- import { _setNodeStyle } from "./style.mjs";
5
- let keyEventCount = 0;
6
- let keyEventFn;
7
- export function _elementKeyEvent(event, store) {
8
- _setCursorData(store);
9
- const { type: blockType } = _getBlockType(event.target);
10
- switch (event.code) {
11
- case "Enter":
12
- if (blockType !== "code") {
13
- event.preventDefault();
14
- }
15
- if (blockType === "code" && event.shiftKey === true) {
16
- event.preventDefault();
17
- }
18
- if (keyEventCount === 0) {
19
- _clenupCursor(store);
20
- setTimeout(() => {
21
- if (event.shiftKey === true) {
22
- elementShiftEnterEvent(event, store);
23
- } else {
24
- elementEnterEvent(event, store);
25
- }
26
- });
27
- }
28
- keyEventCount += 1;
29
- setTimeout(() => {
30
- keyEventCount = 0;
31
- }, 200);
32
- break;
33
- case "Backspace":
34
- elementBackspaceEvent(event, store);
35
- break;
36
- case "Tab":
37
- event.preventDefault();
38
- if (keyEventCount === 0) {
39
- _clenupCursor(store);
40
- setTimeout(() => {
41
- elementTabEvent(event, store);
42
- });
43
- }
44
- keyEventCount += 1;
45
- setTimeout(() => {
46
- keyEventCount = 0;
47
- }, 200);
48
- break;
49
- case "Space":
50
- break;
51
- case "ArrowUp":
52
- if (keyEventCount === 0) {
53
- moveToBlockEvent(event, store, "up");
54
- }
55
- keyEventCount += 1;
56
- setTimeout(() => {
57
- keyEventCount = 0;
58
- }, 250);
59
- break;
60
- case "ArrowDown":
61
- if (keyEventCount === 0) {
62
- moveToBlockEvent(event, store, "down");
63
- }
64
- keyEventCount += 1;
65
- setTimeout(() => {
66
- keyEventCount = 0;
67
- }, 250);
68
- break;
69
- }
70
- clearTimeout(keyEventFn);
71
- keyEventFn = setTimeout(() => {
72
- _clenupCursor(store);
73
- const $block = _findContentEditableElement(store.cursorData.startNode);
74
- if ($block !== null) {
75
- store.setCurrentBlock($block.closest(".de-block"));
76
- }
77
- }, 250);
78
- }
79
- function elementEnterEvent(event, store) {
80
- const { $element, type } = _getBlockType(event.target);
81
- switch (type) {
82
- case "text":
83
- case "heading":
84
- defaultBlockEnterEvent(store, $element);
85
- break;
86
- case "list":
87
- listBlockEnterEvent(event, store, $element);
88
- break;
89
- case "code":
90
- break;
91
- }
92
- }
93
- function elementShiftEnterEvent(event, store) {
94
- const { $element, type } = _getBlockType(event.target);
95
- switch (type) {
96
- case "text":
97
- case "heading":
98
- defaultBlockShiftEnterEvent(store, $element);
99
- break;
100
- case "list":
101
- listBlockEnterEvent(event, store, $element);
102
- break;
103
- case "code":
104
- codeBlockShiftEnterEvent($element);
105
- break;
106
- }
107
- }
108
- function elementBackspaceEvent(e, store) {
109
- const { $element, type } = _getBlockType(e.target);
110
- switch (type) {
111
- case "text":
112
- case "heading":
113
- defaultBlockBackspaceEvent(e, store, $element);
114
- break;
115
- case "list":
116
- listBlockBackspaceEvent(e, store, $element);
117
- break;
118
- default:
119
- }
120
- }
121
- function elementTabEvent(e, store) {
122
- const { $element, type } = _getBlockType(e.target);
123
- switch (type) {
124
- case "text":
125
- defaultTabEvent(e.shiftKey, $element);
126
- break;
127
- }
128
- }
129
- function defaultBlockEnterEvent(store, $element) {
130
- const $textBlock = $element;
131
- if (store.cursorData.type === "Caret") {
132
- if ($textBlock.textContent === "") {
133
- if ($textBlock.hasChildNodes() === false) {
134
- const $newTextBlock = _createTextBlock();
135
- $textBlock.insertAdjacentElement("afterend", $newTextBlock);
136
- $newTextBlock.focus();
137
- } else {
138
- let preStructure = [];
139
- let nextStructure = [];
140
- $textBlock.childNodes.forEach((_, i) => {
141
- const $br = document.createElement("br");
142
- if (store.cursorData.startOffset < i) {
143
- preStructure.push($br);
144
- } else {
145
- nextStructure.push($br);
146
- }
147
- });
148
- $textBlock.replaceChildren(...preStructure);
149
- $textBlock.insertAdjacentElement("afterend", _createTextBlock());
150
- const $nextBlock = $textBlock.nextElementSibling;
151
- if (nextStructure.length === 0) {
152
- $nextBlock.focus();
153
- } else {
154
- if (nextStructure.length === 1) {
155
- nextStructure.push(document.createElement("br"));
156
- }
157
- $nextBlock.replaceChildren(...nextStructure);
158
- _setCursor(nextStructure[0], 0);
159
- }
160
- }
161
- } else {
162
- const childNodeList = [...$element.childNodes];
163
- const $targetNode = _getParentElementIfNodeIsText(store.cursorData.startNode, $textBlock);
164
- const preStructure = [];
165
- const nextStructure = [];
166
- let nodeIdx = -1;
167
- for (let i = 0; childNodeList.length > i; i += 1) {
168
- if (childNodeList[i] === $targetNode) {
169
- nodeIdx = i;
170
- break;
171
- }
172
- }
173
- childNodeList.forEach((node, i) => {
174
- if (nodeIdx < i) {
175
- nextStructure.push(node);
176
- } else if (nodeIdx > i) {
177
- preStructure.push(node);
178
- } else if (nodeIdx === i) {
179
- if (node.constructor.name === "Text") {
180
- const text = node.textContent;
181
- const preText = document.createTextNode(text.slice(0, store.cursorData.startOffset));
182
- const nextText = document.createTextNode(text.slice(store.cursorData.startOffset));
183
- preStructure.push(preText);
184
- nextStructure.push(nextText);
185
- } else {
186
- const originalClassList = [...node.classList];
187
- const text = node.textContent;
188
- const preSpan = document.createElement("span");
189
- const nextSpan = document.createElement("span");
190
- const nextText = text.slice(store.cursorData.startOffset);
191
- preSpan.classList.add(...originalClassList);
192
- preSpan.textContent = text.slice(0, store.cursorData.startOffset);
193
- preStructure.push(preSpan);
194
- if (nextText !== "") {
195
- nextSpan.classList.add(...originalClassList);
196
- nextSpan.textContent = nextText;
197
- nextStructure.push(nextSpan);
198
- }
199
- }
200
- }
201
- });
202
- const $nextBlock = _createTextBlock();
203
- $textBlock.insertAdjacentElement("afterend", $nextBlock);
204
- $textBlock.replaceChildren(...preStructure);
205
- $nextBlock.replaceChildren(...nextStructure);
206
- if (nextStructure.length === 0) {
207
- $nextBlock.focus();
208
- } else {
209
- _setCursor($nextBlock.childNodes[0], 0);
210
- }
211
- }
212
- } else {
213
- const childNodeList = $textBlock.childNodes;
214
- const cursorData = _soltingCursorDataOnElement(store.cursorData, $textBlock);
215
- const preStructure = [];
216
- const nextStructure = [];
217
- if (cursorData.startNodeIdx === cursorData.endNodeIdx) {
218
- childNodeList.forEach((node, i) => {
219
- if (cursorData.startNodeIdx > i) {
220
- preStructure.push(node);
221
- } else if (cursorData.endNodeIdx < i) {
222
- nextStructure.push(node);
223
- } else if (cursorData.startNodeIdx === i) {
224
- if (node.constructor.name === "Text") {
225
- const preText = node.textContent.slice(0, cursorData.startOffset);
226
- const nextText = node.textContent.slice(cursorData.endOffset);
227
- if (preText !== "") {
228
- const textNode = document.createTextNode(preText);
229
- preStructure.push(textNode);
230
- }
231
- if (nextText !== "") {
232
- const textNode = document.createTextNode(nextText);
233
- nextStructure.push(textNode);
234
- }
235
- } else {
236
- const originalClassList = [...node.classList];
237
- const preText = node.textContent.slice(0, cursorData.startOffset);
238
- const nextText = node.textContent.slice(cursorData.endOffset);
239
- if (preText !== "") {
240
- const $span = document.createElement("span");
241
- $span.classList.add(...originalClassList);
242
- $span.textContent = preText;
243
- preStructure.push($span);
244
- }
245
- if (nextText !== "") {
246
- const $span = document.createElement("span");
247
- $span.classList.add(...originalClassList);
248
- $span.textContent = nextText;
249
- nextStructure.push($span);
250
- }
251
- }
252
- }
253
- });
254
- } else {
255
- childNodeList.forEach((node, i) => {
256
- if (cursorData.startNodeIdx > i) {
257
- preStructure.push(node);
258
- } else if (cursorData.startNodeIdx === i) {
259
- if (node.constructor.name === "Text") {
260
- const text = node.textContent.slice(0, cursorData.startOffset);
261
- if (text !== "") {
262
- const textNode = document.createTextNode(text);
263
- preStructure.push(textNode);
264
- }
265
- } else {
266
- const originalClassList = [...node.classList];
267
- const text = node.textContent.slice(0, cursorData.startOffset);
268
- if (text !== "") {
269
- const $span = document.createElement("span");
270
- $span.classList.add(...originalClassList);
271
- $span.textContent = text;
272
- preStructure.push($span);
273
- }
274
- }
275
- }
276
- if (cursorData.endNodeIdx < i) {
277
- nextStructure.push(node);
278
- } else if (cursorData.endNodeIdx === i) {
279
- if (node.constructor.name === "Text") {
280
- const text = node.textContent.slice(cursorData.endOffset);
281
- if (text !== "") {
282
- const textNode = document.createTextNode(text);
283
- nextStructure.push(textNode);
284
- }
285
- } else {
286
- const originalClassList = [...node.classList];
287
- const text = node.textContent.slice(cursorData.endOffset);
288
- const $span = document.createElement("span");
289
- if (text !== "") {
290
- $span.classList.add(...originalClassList);
291
- $span.textContent = text;
292
- nextStructure.push($span);
293
- }
294
- }
295
- }
296
- });
297
- }
298
- const $nextBlock = _createTextBlock({ type: "text", classList: [], textContent: "" });
299
- $textBlock.insertAdjacentElement("afterend", $nextBlock);
300
- $textBlock.replaceChildren(...preStructure);
301
- $nextBlock.replaceChildren(...nextStructure);
302
- if (nextStructure.length === 0) {
303
- $nextBlock.focus();
304
- } else {
305
- _setCursor($nextBlock.childNodes[0], 0);
306
- }
307
- }
308
- }
309
- function listBlockEnterEvent(event, store, $element) {
310
- const $listBlock = $element;
311
- const $editableElement = _findContentEditableElement(event.target);
312
- const liList = $listBlock.querySelectorAll(".de-item");
313
- let liIdx = -1;
314
- for (let i = 0; liList.length > i; i += 1) {
315
- if (liList[i] === $editableElement) {
316
- liIdx = i;
317
- break;
318
- }
319
- }
320
- if (store.cursorData.type === "Caret") {
321
- if ($editableElement.textContent === "") {
322
- if (liList.length - 1 === liIdx) {
323
- const $textBlock = _createTextBlock();
324
- $listBlock.insertAdjacentElement("afterend", $textBlock);
325
- if (liList.length === 1) {
326
- $listBlock.remove();
327
- } else {
328
- $editableElement.remove();
329
- }
330
- $textBlock.focus();
331
- } else {
332
- const $liBlock = _createListItemBlock();
333
- $editableElement.insertAdjacentElement("afterend", $liBlock);
334
- $liBlock.focus();
335
- }
336
- } else {
337
- const childNodeList = $editableElement.childNodes;
338
- const targetNode = _getParentElementIfNodeIsText(store.cursorData.startNode, $editableElement);
339
- const preStructure = [];
340
- const nextStructure = [];
341
- let nodeIdx = -1;
342
- for (let i = 0; childNodeList.length > i; i += 1) {
343
- if (childNodeList[i] === targetNode) {
344
- nodeIdx = i;
345
- break;
346
- }
347
- }
348
- childNodeList.forEach((node, i) => {
349
- if (nodeIdx < i) {
350
- nextStructure.push(node);
351
- } else if (nodeIdx > i) {
352
- preStructure.push(node);
353
- } else if (nodeIdx === i) {
354
- if (node.constructor.name === "Text") {
355
- const preText = node.textContent.slice(0, store.cursorData.startOffset);
356
- const nextText = node.textContent.slice(store.cursorData.endOffset);
357
- if (preText !== "") {
358
- preStructure.push(document.createTextNode(preText));
359
- }
360
- if (nextText !== "") {
361
- nextStructure.push(document.createTextNode(nextText));
362
- }
363
- } else {
364
- const originalClassList = [...node.classList];
365
- const preText = node.textContent.slice(0, store.cursorData.startOffset);
366
- const nextText = node.textContent.slice(store.cursorData.endOffset);
367
- if (preText !== "") {
368
- const $span = document.createElement("span");
369
- $span.textContent = preText;
370
- $span.classList.add(...originalClassList);
371
- preStructure.push($span);
372
- }
373
- if (nextText !== "") {
374
- const $span = document.createElement("span");
375
- $span.textContent = nextText;
376
- $span.classList.add(...originalClassList);
377
- nextStructure.push($span);
378
- }
379
- }
380
- }
381
- });
382
- const $liBlock = _createListItemBlock();
383
- $editableElement.insertAdjacentElement("afterend", $liBlock);
384
- $editableElement.replaceChildren(...preStructure);
385
- $liBlock.replaceChildren(...nextStructure);
386
- if (nextStructure.length === 0) {
387
- $liBlock.focus();
388
- } else {
389
- _setCursor($liBlock.childNodes[0], 0);
390
- }
391
- }
392
- } else {
393
- const childNodeList = $editableElement.childNodes;
394
- const cursorData = _soltingCursorDataOnElement(store.cursorData, $editableElement);
395
- const preStructure = [];
396
- const nextStructure = [];
397
- childNodeList.forEach((node, i) => {
398
- if (cursorData.startNodeIdx > i) {
399
- preStructure.push(node);
400
- } else if (cursorData.startNodeIdx === i) {
401
- if (node.constructor.name === "Text") {
402
- const text = node.textContent.slice(0, cursorData.startOffset);
403
- if (text !== "") {
404
- const $textNode = document.createTextNode(text);
405
- preStructure.push($textNode);
406
- }
407
- } else {
408
- const originalClassList = [...node.classList];
409
- const text = node.textContent.slice(0, cursorData.startOffset);
410
- if (text !== "") {
411
- const $span = document.createElement("span");
412
- $span.classList.add(...originalClassList);
413
- $span.textContent = text;
414
- preStructure.push($span);
415
- }
416
- }
417
- }
418
- if (cursorData.endNodeIdx < i) {
419
- nextStructure.push(node);
420
- } else if (cursorData.endNodeIdx === i) {
421
- if (node.constructor.name === "Text") {
422
- const text = node.textContent.slice(cursorData.endOffset);
423
- if (text !== "") {
424
- const $textNode = document.createTextNode(text);
425
- nextStructure.push($textNode);
426
- }
427
- } else {
428
- const originalClassList = [...node.classList];
429
- const text = node.textContent.slice(cursorData.endOffset);
430
- if (text !== "") {
431
- const $span = document.createElement("span");
432
- $span.classList.add(...originalClassList);
433
- $span.textContent = text;
434
- nextStructure.push($span);
435
- }
436
- }
437
- }
438
- });
439
- const $liBlock = _createListItemBlock();
440
- $editableElement.insertAdjacentElement("afterend", $liBlock);
441
- $editableElement.replaceChildren(...preStructure);
442
- if (nextStructure.length === 0) {
443
- $liBlock.focus();
444
- } else {
445
- $liBlock.replaceChildren(...nextStructure);
446
- _setCursor(nextStructure[0], 0);
447
- }
448
- }
449
- }
450
- function defaultBlockShiftEnterEvent(store, $element) {
451
- const $textBlock = $element;
452
- if (store.cursorData.type === "Caret") {
453
- if ($textBlock.textContent === "") {
454
- if ($textBlock.hasChildNodes() === false) {
455
- $textBlock.insertAdjacentHTML("beforeend", "<br><br>");
456
- _setCursor($textBlock.childNodes[1], 0);
457
- } else {
458
- let $target = store.cursorData.startNode;
459
- let childIdx = -1;
460
- if ($textBlock === $target) {
461
- $target = $textBlock.childNodes[store.cursorData.startOffset];
462
- }
463
- for (let i = 0; $textBlock.childNodes.length > i; i += 1) {
464
- if ($textBlock.childNodes[i] === $target) {
465
- childIdx = i;
466
- break;
467
- }
468
- }
469
- $target.insertAdjacentHTML("afterend", "<br>");
470
- _setCursor($textBlock.childNodes[childIdx + 1], 0);
471
- }
472
- } else {
473
- const childList = $textBlock.childNodes;
474
- let targetIdx = -1;
475
- let structure = "";
476
- let $target = store.cursorData.startNode;
477
- if ($target.constructor.name === "Text") {
478
- if ($target.parentNode !== $textBlock) {
479
- $target = $target.parentNode;
480
- }
481
- }
482
- if ($textBlock === $target) {
483
- $target = $textBlock.childNodes[store.cursorData.startOffset];
484
- }
485
- for (let i = 0; childList.length > i; i += 1) {
486
- if (childList[i] === $target) {
487
- targetIdx = i;
488
- break;
489
- }
490
- }
491
- let curruntIdx = targetIdx;
492
- childList.forEach((child, i) => {
493
- if (i === targetIdx) {
494
- const constructorName = child.constructor.name;
495
- if (constructorName === "Text") {
496
- structure += child.textContent.slice(0, store.cursorData.startOffset) + "<br>" + child.textContent.slice(store.cursorData.endOffset);
497
- if (child.nextSibling === null) {
498
- if (child.textContent.slice(store.cursorData.endOffset) === "") {
499
- structure += `<br>`;
500
- }
501
- if (child.textContent.slice(0, store.cursorData.startOffset) === "") {
502
- curruntIdx -= 1;
503
- }
504
- } else {
505
- if (child.textContent.slice(store.cursorData.endOffset) !== "" && child.textContent.slice(0, store.cursorData.startOffset) === "") {
506
- curruntIdx -= 1;
507
- }
508
- }
509
- curruntIdx += 1;
510
- } else {
511
- if (constructorName === "HTMLBRElement") {
512
- structure += `<br><br>`;
513
- } else {
514
- structure += `<span class="${[...child.classList].join(" ")}">${child.textContent.slice(0, store.cursorData.startOffset)}</span>`;
515
- structure += `<br>`;
516
- structure += `<span class="${[...child.classList].join(" ")}">${child.textContent.slice(store.cursorData.startOffset)}</span>`;
517
- curruntIdx += 1;
518
- }
519
- }
520
- } else {
521
- if (child.constructor.name === "Text") {
522
- structure += child.textContent;
523
- } else {
524
- structure += child.outerHTML;
525
- }
526
- }
527
- });
528
- $textBlock.innerHTML = structure;
529
- _setCursor($textBlock.childNodes[curruntIdx + 1], 0);
530
- }
531
- } else {
532
- const childNodeList = $textBlock.childNodes;
533
- let startTargetNode = store.cursorData.startNode;
534
- let startNodeIdx = -1;
535
- let startOffset = store.cursorData.startOffset;
536
- let endTargetNode = store.cursorData.endNode;
537
- let endNodeIdx = -1;
538
- let endOffset = store.cursorData.endOffset;
539
- let structure = "";
540
- if (startTargetNode.constructor.name === "Text") {
541
- if (startTargetNode.parentElement !== $textBlock) {
542
- startTargetNode = startTargetNode.parentElement;
543
- }
544
- }
545
- if (endTargetNode.constructor.name === "Text") {
546
- if (endTargetNode.parentElement !== $textBlock) {
547
- endTargetNode = endTargetNode.parentElement;
548
- }
549
- }
550
- for (let i = 0; childNodeList.length > i; i += 1) {
551
- if (startTargetNode === childNodeList[i]) {
552
- startNodeIdx = i;
553
- }
554
- if (endTargetNode === childNodeList[i]) {
555
- endNodeIdx = i;
556
- }
557
- if (startNodeIdx !== -1 && endNodeIdx !== -1) {
558
- break;
559
- }
560
- }
561
- if (startNodeIdx !== endNodeIdx) {
562
- if (startNodeIdx > endNodeIdx) {
563
- const originalEndNodeIdx = endNodeIdx;
564
- const originalEndOffset = endOffset;
565
- const originalStartNodeIdx = startNodeIdx;
566
- const originalStartOffset = startOffset;
567
- startNodeIdx = originalEndNodeIdx;
568
- startOffset = originalEndOffset;
569
- endNodeIdx = originalStartNodeIdx;
570
- endOffset = originalStartOffset;
571
- }
572
- } else {
573
- if (startOffset > endOffset) {
574
- const originalEndOffset = endOffset;
575
- const originalStartOffset = startOffset;
576
- startOffset = originalEndOffset;
577
- endOffset = originalStartOffset;
578
- }
579
- }
580
- childNodeList.forEach((node, i) => {
581
- if (startNodeIdx > i) {
582
- if (node.constructor.name === "Text") {
583
- structure += node.textContent;
584
- } else {
585
- structure += node.outerHTML;
586
- }
587
- } else if (startNodeIdx === i) {
588
- if (node.constructor.name === "Text") {
589
- structure += node.textContent.slice(0, startOffset);
590
- structure += `<br>`;
591
- } else {
592
- if (node.tagName === "BR") {
593
- structure += `<br>`;
594
- } else {
595
- const originalClassList = [...node.classList];
596
- const text = node.textContent;
597
- structure += `<span class="${originalClassList.join(" ")}">${text.slice(0, startOffset)}</span><br>`;
598
- }
599
- }
600
- if (childNodeList.length === i) {
601
- structure += `<br>`;
602
- }
603
- }
604
- if (endNodeIdx < i) {
605
- if (node.constructor.name === "Text") {
606
- structure += node.textContent;
607
- } else {
608
- structure += node.outerHTML;
609
- }
610
- } else if (endNodeIdx === i) {
611
- if (node.constructor.name === "Text") {
612
- structure += node.textContent.slice(endOffset);
613
- } else {
614
- if (node.tagName === "BR") {
615
- structure += `<br>`;
616
- } else {
617
- const originalClassList = [...node.classList];
618
- const text = node.textContent;
619
- structure += `<span class="${originalClassList.join(" ")}">${text.slice(endOffset)}</span><br>`;
620
- }
621
- }
622
- }
623
- });
624
- $textBlock.innerHTML = structure;
625
- _setCursor($textBlock.childNodes[startNodeIdx + 2], 0);
626
- }
627
- }
628
- function codeBlockShiftEnterEvent($element) {
629
- const $newTextBlock = _createTextBlock();
630
- $element.insertAdjacentElement("afterend", $newTextBlock);
631
- $newTextBlock.focus();
632
- }
633
- function defaultBlockBackspaceEvent(e, store, $element) {
634
- const $textBlock = $element;
635
- const childList = store.$content.querySelectorAll(".de-block");
636
- const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $textBlock);
637
- let elementIdx = -1;
638
- for (let i = 0; childList.length > i; i += 1) {
639
- if (childList[i] === $element) {
640
- elementIdx = i;
641
- break;
642
- }
643
- }
644
- if (elementIdx === 0) {
645
- if (store.cursorData.startOffset === 0 && $target === $textBlock) {
646
- if ($target.textContent === "") {
647
- $textBlock.insertAdjacentElement("afterend", _createTextBlock());
648
- _setCursor($textBlock.nextElementSibling, 0);
649
- $textBlock.remove();
650
- } else {
651
- e.preventDefault();
652
- if ($textBlock.tagName !== "P") {
653
- $textBlock.insertAdjacentElement(
654
- "afterend",
655
- _createTextBlock({
656
- type: "text",
657
- classList: [],
658
- textContent: $textBlock.textContent ?? ""
659
- })
660
- );
661
- _setCursor($textBlock.nextElementSibling, 0);
662
- $textBlock.remove();
663
- }
664
- }
665
- }
666
- } else {
667
- if ($textBlock.hasChildNodes() === false) {
668
- e.preventDefault();
669
- const $preBlock = $textBlock.previousElementSibling;
670
- const { type: preBlockType } = _getBlockType($preBlock);
671
- $textBlock.remove();
672
- if (preBlockType === "text" || preBlockType === "heading") {
673
- if ($preBlock.hasChildNodes() === true) {
674
- const textBlockChildList = $preBlock.childNodes;
675
- const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
676
- _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
677
- } else {
678
- _setCursor($preBlock, 0);
679
- }
680
- }
681
- } else {
682
- if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($textBlock.childNodes[0] === store.cursorData.startNode || $textBlock.childNodes[0] === $target)) {
683
- e.preventDefault();
684
- const $preBlock = $textBlock.previousElementSibling;
685
- const { type: preBlockType } = _getBlockType($preBlock);
686
- if (preBlockType === "text" || preBlockType === "heading") {
687
- if ($preBlock.hasChildNodes() === true) {
688
- const textBlockChildList = $preBlock.childNodes;
689
- const textBlockTargetChildIdx = textBlockChildList.length - 1;
690
- const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
691
- const thisBlockHTML = $textBlock.innerHTML;
692
- $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
693
- _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
694
- } else {
695
- $preBlock.innerHTML = $textBlock.innerHTML;
696
- _setCursor($preBlock, 0);
697
- }
698
- $textBlock.remove();
699
- }
700
- }
701
- }
702
- }
703
- if (store.cursorData.startOffset === 1 && $target !== $textBlock) {
704
- if ($target.textContent.length === 1) {
705
- e.preventDefault();
706
- const preNode = $target.previousSibling;
707
- if (preNode !== null) {
708
- $target.remove();
709
- _setCursor(preNode, preNode.textContent.length);
710
- } else {
711
- if ($textBlock.childNodes[1] === void 0) {
712
- $textBlock.innerHTML = "";
713
- _setCursor($textBlock, 0);
714
- } else {
715
- _setCursor($textBlock.childNodes[1], 0);
716
- $target.remove();
717
- }
718
- }
719
- }
720
- }
721
- _setCursorData(store);
722
- }
723
- function listBlockBackspaceEvent(e, store, $element) {
724
- const $listBlock = $element;
725
- const $targetItem = _findContentEditableElement(store.cursorData.startNode);
726
- const liList = $listBlock.querySelectorAll(".de-item");
727
- const $target = _getParentElementIfNodeIsText(store.cursorData.startNode, $targetItem);
728
- let liIdx = -1;
729
- for (let i = 0; liList.length > i; i += 1) {
730
- if (liList[i] === $targetItem) {
731
- liIdx = i;
732
- break;
733
- }
734
- }
735
- if (liList.length === 1) {
736
- if ($targetItem.textContent === "") {
737
- e.preventDefault();
738
- const $preBlock = $listBlock.previousElementSibling;
739
- const { type: preBlockType } = _getBlockType($preBlock);
740
- $listBlock.remove();
741
- if (preBlockType === "text" || preBlockType === "heading") {
742
- if ($preBlock.hasChildNodes() === true) {
743
- const textBlockChildList = $preBlock.childNodes;
744
- const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
745
- _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
746
- } else {
747
- _setCursor($preBlock, 0);
748
- }
749
- }
750
- } else {
751
- if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
752
- e.preventDefault();
753
- const $preBlock = $listBlock.previousElementSibling;
754
- const { type: preBlockType } = _getBlockType($preBlock);
755
- if (preBlockType === "text" || preBlockType === "heading") {
756
- if ($preBlock.hasChildNodes() === true) {
757
- const textBlockChildList = $preBlock.childNodes;
758
- const textBlockTargetChildIdx = textBlockChildList.length - 1;
759
- const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
760
- const thisBlockHTML = $targetItem.innerHTML;
761
- $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
762
- _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
763
- } else {
764
- $preBlock.innerHTML = $targetItem.innerHTML;
765
- _setCursor($preBlock, 0);
766
- }
767
- $targetItem.remove();
768
- $listBlock.remove();
769
- }
770
- }
771
- }
772
- } else {
773
- if (liIdx === 0) {
774
- if ($targetItem.textContent === "") {
775
- e.preventDefault();
776
- const $preBlock = $listBlock.previousElementSibling;
777
- const { type: preBlockType } = _getBlockType($preBlock);
778
- $targetItem.remove();
779
- if (preBlockType === "text" || preBlockType === "heading") {
780
- if ($preBlock.hasChildNodes() === true) {
781
- const textBlockChildList = $preBlock.childNodes;
782
- const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
783
- _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
784
- } else {
785
- _setCursor($preBlock, 0);
786
- }
787
- }
788
- } else {
789
- if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
790
- e.preventDefault();
791
- const $preBlock = $listBlock.previousElementSibling;
792
- const { type: preBlockType } = _getBlockType($preBlock);
793
- if (preBlockType === "text" || preBlockType === "heading") {
794
- if ($preBlock.hasChildNodes() === true) {
795
- const textBlockChildList = $preBlock.childNodes;
796
- const textBlockTargetChildIdx = textBlockChildList.length - 1;
797
- const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
798
- const thisBlockHTML = $targetItem.innerHTML;
799
- $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
800
- _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
801
- } else {
802
- $preBlock.innerHTML = $targetItem.innerHTML;
803
- _setCursor($preBlock, 0);
804
- }
805
- $targetItem.remove();
806
- }
807
- }
808
- }
809
- } else {
810
- if ($targetItem.textContent === "") {
811
- e.preventDefault();
812
- const $preBlock = liList[liIdx - 1];
813
- $targetItem.remove();
814
- if ($preBlock.hasChildNodes() === true) {
815
- const textBlockChildList = $preBlock.childNodes;
816
- const textBlockTargetChild = textBlockChildList[textBlockChildList.length - 1];
817
- _setCursor(textBlockTargetChild, textBlockTargetChild.textContent.length);
818
- } else {
819
- _setCursor($preBlock, 0);
820
- }
821
- } else {
822
- if (store.cursorData.type === "Caret" && store.cursorData.startOffset === 0 && ($targetItem.childNodes[0] === store.cursorData.startNode || $targetItem.childNodes[0] === $target)) {
823
- e.preventDefault();
824
- const $preBlock = liList[liIdx - 1];
825
- if ($preBlock.hasChildNodes() === true) {
826
- const textBlockChildList = $preBlock.childNodes;
827
- const textBlockTargetChildIdx = textBlockChildList.length - 1;
828
- const textBlockTargetCursorIdx = textBlockChildList[textBlockTargetChildIdx].textContent.length;
829
- const thisBlockHTML = $targetItem.innerHTML;
830
- $preBlock.innerHTML = $preBlock.innerHTML + thisBlockHTML;
831
- _setCursor($preBlock.childNodes[textBlockTargetChildIdx], textBlockTargetCursorIdx);
832
- } else {
833
- $preBlock.innerHTML = $targetItem.innerHTML;
834
- _setCursor($preBlock, 0);
835
- }
836
- $targetItem.remove();
837
- }
838
- }
839
- }
840
- }
841
- }
842
- function defaultTabEvent(useShiftKey, $element) {
843
- const $target = $element;
844
- let value = $target.dataset["depth"] === void 0 ? 0 : parseInt($target.dataset["depth"]);
845
- if (useShiftKey === true) {
846
- if (value !== 0) {
847
- value -= 1;
848
- }
849
- } else {
850
- if (value < 5) {
851
- value += 1;
852
- }
853
- }
854
- if (value === 0) {
855
- delete $target.dataset["depth"];
856
- } else {
857
- $target.dataset["depth"] = String(value);
858
- }
859
- }
860
- function moveToBlockEvent(e, store, keyType) {
861
- const $editableElement = _findContentEditableElement(store.cursorData.startNode);
862
- if ($editableElement !== null) {
863
- const { $element, type } = _getBlockType($editableElement);
864
- let $target;
865
- if (store.cursorData.startIdx > store.cursorData.endIdx) {
866
- _setCursor(store.cursorData.startNode, store.cursorData.endIdx);
867
- } else {
868
- _setCursor(store.cursorData.startNode, store.cursorData.startIdx);
869
- }
870
- switch (type) {
871
- case "list":
872
- e.preventDefault();
873
- if (keyType === "up") {
874
- $target = $editableElement.previousElementSibling;
875
- } else {
876
- $target = $editableElement.nextElementSibling;
877
- }
878
- if ($target === null) {
879
- if (keyType === "up") {
880
- $target = $element.previousElementSibling;
881
- } else {
882
- $target = $element.nextElementSibling;
883
- }
884
- }
885
- break;
886
- case "code":
887
- $target = null;
888
- break;
889
- default:
890
- e.preventDefault();
891
- if (keyType === "up") {
892
- $target = $element.previousElementSibling;
893
- } else {
894
- $target = $element.nextElementSibling;
895
- }
896
- }
897
- if ($target !== null) {
898
- _clenupCursor(store);
899
- setTimeout(() => {
900
- if ($target.classList.contains("de-block") == true) {
901
- const { $element: $element2, type: targetType } = _getBlockType($target);
902
- switch (targetType) {
903
- case "list":
904
- const $targetItem = $element2.querySelectorAll(".de-item");
905
- let $item;
906
- if (keyType === "up") {
907
- $item = $targetItem[$targetItem.length - 1];
908
- } else {
909
- $item = $targetItem[0];
910
- }
911
- _setCursor($item, 0);
912
- break;
913
- default:
914
- _setCursor($element2, 0);
915
- }
916
- } else {
917
- _setCursor($target, 0);
918
- }
919
- });
920
- }
921
- }
922
- }
923
- export function _hotKeyEvent(event, store) {
924
- _setCursorData(store);
925
- const isControlKeyActive = event.ctrlKey || event.metaKey;
926
- if (isControlKeyActive === true) {
927
- switch (event.key) {
928
- case "b":
929
- event.preventDefault();
930
- _setNodeStyle("de-bold", store);
931
- break;
932
- case "i":
933
- event.preventDefault();
934
- _setNodeStyle("de-italic", store);
935
- break;
936
- case "u":
937
- event.preventDefault();
938
- _setNodeStyle("de-underline", store);
939
- break;
940
- case "s":
941
- if (event.shiftKey === true) {
942
- event.preventDefault();
943
- _setNodeStyle("de-strikethrough", store);
944
- }
945
- break;
946
- case "c":
947
- if (event.shiftKey === true) {
948
- event.preventDefault();
949
- _setNodeStyle("de-code", store);
950
- }
951
- break;
952
- }
953
- }
954
- }
955
- export function _copyEvent(event, store) {
956
- }
957
- export async function _pasteEvent(event, store, emit) {
958
- event.preventDefault();
959
- const text = await navigator.clipboard.readText();
960
- const $block = event.target.closest(".de-block");
961
- if ($block !== null) {
962
- if (text === "") {
963
- const clipboardItems = await navigator.clipboard.read();
964
- const imageItem = clipboardItems[0].types.find((type) => type.startsWith("image/"));
965
- if (imageItem !== void 0) {
966
- const blob = await clipboardItems[0].getType(imageItem);
967
- const file = new File([blob], `${_generateId()}.${imageItem.split("/")[1]}`);
968
- emit("uploadImageEvent", file);
969
- }
970
- } else {
971
- const selection = window.getSelection();
972
- const textNode = document.createTextNode(text);
973
- selection.deleteFromDocument();
974
- selection.getRangeAt(0).insertNode(textNode);
975
- _setCursor(textNode, textNode.length);
976
- }
977
- }
978
- }