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,90 +0,0 @@
1
- import { h } from "vue";
2
- export function convertViewBlock(data, mediaUrl) {
3
- const childList = [];
4
- data.forEach((row) => {
5
- let hObject;
6
- switch (row.type) {
7
- case "text":
8
- const textBlockData = row;
9
- hObject = h("p", {
10
- class: ["d-text-block", ...textBlockData.classList],
11
- innerHTML: textBlockData.content
12
- });
13
- break;
14
- case "image":
15
- const imageBlockData = row;
16
- const imageChildList = [];
17
- const imageUrl = mediaUrl ? mediaUrl + imageBlockData.src : imageBlockData.src;
18
- imageChildList.push(
19
- h(
20
- "div",
21
- { class: ["d-image-area"] },
22
- h("img", {
23
- class: ["d-img"],
24
- src: imageUrl,
25
- width: imageBlockData.width,
26
- height: imageBlockData.height,
27
- alt: imageBlockData.caption,
28
- loading: "lazy"
29
- })
30
- )
31
- );
32
- if (imageBlockData.caption !== "") {
33
- imageChildList.push(
34
- h("p", {
35
- class: ["d-caption"],
36
- innerHTML: imageBlockData.caption
37
- })
38
- );
39
- }
40
- hObject = h("div", { class: ["d-image-block", ...imageBlockData.classList] }, imageChildList);
41
- break;
42
- case "ol":
43
- const olBlockData = row;
44
- const olChildList = [];
45
- olBlockData.childList.forEach((child) => {
46
- olChildList.push(
47
- h("li", {
48
- class: ["d-li-item", ...child.classList],
49
- innerHTML: child.content
50
- })
51
- );
52
- });
53
- hObject = h(
54
- "ol",
55
- {
56
- class: ["d-ol-block", ...olBlockData.classList]
57
- },
58
- olChildList
59
- );
60
- break;
61
- case "ul":
62
- const ulBlockData = row;
63
- const ulChildList = [];
64
- ulBlockData.childList.forEach((child) => {
65
- ulChildList.push(
66
- h("li", {
67
- class: ["d-li-item", ...child.classList],
68
- innerHTML: child.content
69
- })
70
- );
71
- });
72
- hObject = h(
73
- "ul",
74
- {
75
- class: ["d-ul-block", ...ulBlockData.classList]
76
- },
77
- ulChildList
78
- );
79
- break;
80
- default:
81
- const defaultData = row;
82
- hObject = h("div", {
83
- class: ["d-other-block"],
84
- innerHTML: defaultData.innerHTML
85
- });
86
- }
87
- childList.push(hObject);
88
- });
89
- return childList;
90
- }
@@ -1,4 +0,0 @@
1
- import type { cursorSelection, arrangementCursorData } from "../../../types";
2
- export declare function setCursor(target: Node, idx: number): void;
3
- export declare function getCursor(): cursorSelection;
4
- export declare function getArrangementCursorData(parentCursorData: any): arrangementCursorData;
@@ -1,84 +0,0 @@
1
- import { findEditableElement } from "./element.mjs";
2
- export function setCursor(target, idx) {
3
- if (target) {
4
- let $target;
5
- if (target.constructor.name === "Text") {
6
- $target = target;
7
- } else {
8
- $target = target.childNodes.length > 0 ? target.childNodes[0] : target;
9
- }
10
- const select = window.getSelection();
11
- const range = document.createRange();
12
- const realLength = $target.textContent?.length;
13
- if (realLength < idx) {
14
- idx = realLength;
15
- }
16
- range.setStart($target, idx);
17
- range.collapse(true);
18
- select.removeAllRanges();
19
- select.addRange(range);
20
- }
21
- }
22
- export function getCursor() {
23
- const select = window.getSelection();
24
- return {
25
- type: select.type,
26
- startNode: select.anchorNode,
27
- startOffset: select.anchorOffset,
28
- endNode: select.focusNode,
29
- endOffset: select.focusOffset
30
- };
31
- }
32
- export function getArrangementCursorData(parentCursorData) {
33
- let cursorData = getCursor();
34
- if (cursorData.startNode === null) {
35
- cursorData = parentCursorData;
36
- }
37
- let startNode = cursorData.startNode;
38
- let editableElement = findEditableElement(startNode);
39
- if (editableElement === null) {
40
- cursorData = parentCursorData;
41
- startNode = cursorData.startNode;
42
- editableElement = findEditableElement(startNode);
43
- }
44
- let childNode;
45
- let childIdx = -1;
46
- let fixIdx = 0;
47
- let preNodeType = "";
48
- let childLength = 0;
49
- if (startNode.parentNode === editableElement) {
50
- childNode = startNode;
51
- } else {
52
- childNode = startNode.parentNode;
53
- }
54
- editableElement.childNodes.forEach((child, count) => {
55
- if (child === childNode) {
56
- childIdx = count;
57
- }
58
- });
59
- editableElement.childNodes.forEach((child, count) => {
60
- if (count <= childIdx + fixIdx) {
61
- const type = child.constructor.name;
62
- if (preNodeType !== type) {
63
- childLength = 0;
64
- }
65
- if (type === "Text") {
66
- if (preNodeType === type) {
67
- childIdx -= 1;
68
- fixIdx += 1;
69
- childLength += child.textContent?.length ?? 0;
70
- } else {
71
- childLength = child.textContent?.length ?? 0;
72
- }
73
- } else {
74
- childLength = child.textContent?.length ?? 0;
75
- }
76
- preNodeType = type;
77
- }
78
- });
79
- return {
80
- editableNode: editableElement,
81
- childCount: childIdx,
82
- length: childLength
83
- };
84
- }
@@ -1,3 +0,0 @@
1
- export declare function findEditableElement(node: Node): HTMLElement | null;
2
- export declare function findLiElement(node: Node): HTMLElement | null;
3
- export declare function findChildNumber(parent: HTMLElement, child: Node): number;
@@ -1,40 +0,0 @@
1
- export function findEditableElement(node) {
2
- if (node) {
3
- if (node.constructor.name === "Text") {
4
- return findEditableElement(node.parentNode);
5
- } else {
6
- if (node.getAttribute) {
7
- const hasAttr = node.getAttribute("contenteditable") !== null;
8
- if (hasAttr) {
9
- return node;
10
- } else {
11
- return findEditableElement(node.parentNode);
12
- }
13
- } else {
14
- return null;
15
- }
16
- }
17
- } else {
18
- return null;
19
- }
20
- }
21
- export function findLiElement(node) {
22
- if (node) {
23
- if (node.constructor.name !== "HTMLLIElement") {
24
- return findLiElement(node.parentNode);
25
- } else {
26
- return node;
27
- }
28
- } else {
29
- return null;
30
- }
31
- }
32
- export function findChildNumber(parent, child) {
33
- let idx = 0;
34
- parent.childNodes.forEach((item, count) => {
35
- if (item === child) {
36
- idx = count;
37
- }
38
- });
39
- return idx;
40
- }
@@ -1,3 +0,0 @@
1
- import type { allBlock } from "../../../types/index";
2
- export declare function generateId(): string;
3
- export declare function createBlock(name: string, value?: object): allBlock;
@@ -1,81 +0,0 @@
1
- export function generateId() {
2
- const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
3
- let str = "";
4
- for (let i = 0; i < 20; i++) {
5
- str += chars.charAt(Math.floor(Math.random() * chars.length));
6
- }
7
- return str;
8
- }
9
- function createTextBlock(data) {
10
- if (data) {
11
- return {
12
- type: "text",
13
- id: generateId(),
14
- classList: data.classList,
15
- content: data.content
16
- };
17
- } else {
18
- return {
19
- type: "text",
20
- id: generateId(),
21
- classList: [],
22
- content: ""
23
- };
24
- }
25
- }
26
- function createImageBlock(data) {
27
- const totalSize = data.width + data.height;
28
- const w = Math.round(100 / totalSize * data.width);
29
- const h = Math.round(100 / totalSize * data.height);
30
- const contrast = w - h;
31
- let classList = ["d-align-center"];
32
- switch (true) {
33
- case contrast < -40:
34
- classList.push("--5");
35
- break;
36
- case contrast < -15:
37
- classList.push("--10");
38
- break;
39
- default:
40
- classList.push("--20");
41
- }
42
- return {
43
- type: "image",
44
- id: generateId(),
45
- classList,
46
- src: data.src,
47
- width: data.width,
48
- height: data.height,
49
- caption: data.caption
50
- };
51
- }
52
- function createListBlock(type = "ul") {
53
- return {
54
- type,
55
- id: generateId(),
56
- classList: [],
57
- childList: [
58
- {
59
- classList: [],
60
- content: ""
61
- }
62
- ]
63
- };
64
- }
65
- export function createBlock(name, value) {
66
- let blockData;
67
- switch (name) {
68
- case "ul":
69
- blockData = createListBlock();
70
- break;
71
- case "ol":
72
- blockData = createListBlock("ol");
73
- break;
74
- case "image":
75
- blockData = createImageBlock(value);
76
- break;
77
- default:
78
- blockData = createTextBlock(value);
79
- }
80
- return blockData;
81
- }
@@ -1,7 +0,0 @@
1
- export * from "./global";
2
- export * from "./keyboard";
3
- export * from "./cursor";
4
- export * from "./style";
5
- export * from "./element";
6
- export * from "./converter";
7
- export * from "./ui";
@@ -1,7 +0,0 @@
1
- export * from "./global.mjs";
2
- export * from "./keyboard.mjs";
3
- export * from "./cursor.mjs";
4
- export * from "./style.mjs";
5
- export * from "./element.mjs";
6
- export * from "./converter.mjs";
7
- export * from "./ui.mjs";
@@ -1,6 +0,0 @@
1
- export declare function keyboardEvent(type: string, event: KeyboardEvent, action: Function, update: Function): void;
2
- export declare function getClipboardData(data: DataTransfer): {
3
- type: any;
4
- value: any;
5
- };
6
- export declare function pasteText(type: string, value: string): void;