dragon-editor 2.1.1 → 3.0.0-beta

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 (55) hide show
  1. package/README.md +40 -115
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +10 -8
  4. package/dist/runtime/components/DragonEditor.vue +441 -0
  5. package/dist/runtime/plugin.d.ts +2 -0
  6. package/dist/runtime/plugin.mjs +10 -0
  7. package/dist/runtime/scss/editor.css +262 -0
  8. package/dist/runtime/scss/viewer.css +129 -0
  9. package/dist/runtime/store.d.ts +7 -0
  10. package/dist/runtime/store.mjs +27 -0
  11. package/dist/runtime/type.d.ts +24 -0
  12. package/dist/runtime/utils/block.d.ts +9 -0
  13. package/dist/runtime/utils/block.mjs +70 -0
  14. package/dist/runtime/utils/cursor.d.ts +6 -0
  15. package/dist/runtime/utils/cursor.mjs +132 -0
  16. package/dist/runtime/utils/element.d.ts +3 -0
  17. package/dist/runtime/utils/element.mjs +39 -0
  18. package/dist/runtime/utils/keyboardEvent.d.ts +10 -0
  19. package/dist/runtime/utils/keyboardEvent.mjs +781 -0
  20. package/dist/runtime/utils/style.d.ts +1 -0
  21. package/dist/runtime/utils/style.mjs +330 -0
  22. package/dist/runtime/utils/ui.d.ts +1 -0
  23. package/dist/runtime/utils/ui.mjs +35 -0
  24. package/package.json +10 -4
  25. package/README_en.md +0 -30
  26. package/dist/runtime/core/components/SvgIcon.d.ts +0 -10
  27. package/dist/runtime/core/components/SvgIcon.mjs +0 -98
  28. package/dist/runtime/core/components/editor/ImageBlock.vue +0 -175
  29. package/dist/runtime/core/components/editor/OlBlock.vue +0 -162
  30. package/dist/runtime/core/components/editor/TextBlock.vue +0 -172
  31. package/dist/runtime/core/components/editor/UlBlock.vue +0 -162
  32. package/dist/runtime/core/style/common.css +0 -496
  33. package/dist/runtime/core/style/viewer.css +0 -205
  34. package/dist/runtime/core/utils/converter.d.ts +0 -2
  35. package/dist/runtime/core/utils/converter.mjs +0 -90
  36. package/dist/runtime/core/utils/cursor.d.ts +0 -4
  37. package/dist/runtime/core/utils/cursor.mjs +0 -84
  38. package/dist/runtime/core/utils/element.d.ts +0 -3
  39. package/dist/runtime/core/utils/element.mjs +0 -40
  40. package/dist/runtime/core/utils/global.d.ts +0 -3
  41. package/dist/runtime/core/utils/global.mjs +0 -81
  42. package/dist/runtime/core/utils/index.d.ts +0 -7
  43. package/dist/runtime/core/utils/index.mjs +0 -7
  44. package/dist/runtime/core/utils/keyboard.d.ts +0 -6
  45. package/dist/runtime/core/utils/keyboard.mjs +0 -565
  46. package/dist/runtime/core/utils/style.d.ts +0 -6
  47. package/dist/runtime/core/utils/style.mjs +0 -374
  48. package/dist/runtime/core/utils/ui.d.ts +0 -4
  49. package/dist/runtime/core/utils/ui.mjs +0 -13
  50. package/dist/runtime/shared/components/DragonEditor.d.ts +0 -16
  51. package/dist/runtime/shared/components/DragonEditor.mjs +0 -62
  52. package/dist/runtime/shared/components/DragonEditor.vue +0 -695
  53. package/dist/runtime/shared/components/DragonEditorComment.vue +0 -172
  54. package/dist/runtime/shared/components/DragonEditorViewer.d.ts +0 -14
  55. 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;