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.
- package/README.md +40 -115
- package/dist/module.json +1 -1
- package/dist/module.mjs +10 -8
- package/dist/runtime/components/DragonEditor.vue +441 -0
- package/dist/runtime/plugin.d.ts +2 -0
- package/dist/runtime/plugin.mjs +10 -0
- package/dist/runtime/scss/editor.css +262 -0
- package/dist/runtime/scss/viewer.css +129 -0
- package/dist/runtime/store.d.ts +7 -0
- package/dist/runtime/store.mjs +27 -0
- package/dist/runtime/type.d.ts +24 -0
- package/dist/runtime/utils/block.d.ts +9 -0
- package/dist/runtime/utils/block.mjs +70 -0
- package/dist/runtime/utils/cursor.d.ts +6 -0
- package/dist/runtime/utils/cursor.mjs +132 -0
- package/dist/runtime/utils/element.d.ts +3 -0
- package/dist/runtime/utils/element.mjs +39 -0
- package/dist/runtime/utils/keyboardEvent.d.ts +10 -0
- package/dist/runtime/utils/keyboardEvent.mjs +781 -0
- package/dist/runtime/utils/style.d.ts +1 -0
- package/dist/runtime/utils/style.mjs +330 -0
- package/dist/runtime/utils/ui.d.ts +1 -0
- package/dist/runtime/utils/ui.mjs +35 -0
- package/package.json +10 -4
- package/README_en.md +0 -30
- package/dist/runtime/core/components/SvgIcon.d.ts +0 -10
- package/dist/runtime/core/components/SvgIcon.mjs +0 -98
- package/dist/runtime/core/components/editor/ImageBlock.vue +0 -175
- package/dist/runtime/core/components/editor/OlBlock.vue +0 -162
- package/dist/runtime/core/components/editor/TextBlock.vue +0 -172
- package/dist/runtime/core/components/editor/UlBlock.vue +0 -162
- package/dist/runtime/core/style/common.css +0 -496
- package/dist/runtime/core/style/viewer.css +0 -205
- package/dist/runtime/core/utils/converter.d.ts +0 -2
- package/dist/runtime/core/utils/converter.mjs +0 -90
- package/dist/runtime/core/utils/cursor.d.ts +0 -4
- package/dist/runtime/core/utils/cursor.mjs +0 -84
- package/dist/runtime/core/utils/element.d.ts +0 -3
- package/dist/runtime/core/utils/element.mjs +0 -40
- package/dist/runtime/core/utils/global.d.ts +0 -3
- package/dist/runtime/core/utils/global.mjs +0 -81
- package/dist/runtime/core/utils/index.d.ts +0 -7
- package/dist/runtime/core/utils/index.mjs +0 -7
- package/dist/runtime/core/utils/keyboard.d.ts +0 -6
- package/dist/runtime/core/utils/keyboard.mjs +0 -565
- package/dist/runtime/core/utils/style.d.ts +0 -6
- package/dist/runtime/core/utils/style.mjs +0 -374
- package/dist/runtime/core/utils/ui.d.ts +0 -4
- package/dist/runtime/core/utils/ui.mjs +0 -13
- package/dist/runtime/shared/components/DragonEditor.d.ts +0 -16
- package/dist/runtime/shared/components/DragonEditor.mjs +0 -62
- package/dist/runtime/shared/components/DragonEditor.vue +0 -695
- package/dist/runtime/shared/components/DragonEditorComment.vue +0 -172
- package/dist/runtime/shared/components/DragonEditorViewer.d.ts +0 -14
- 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,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,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,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;
|