dragon-editor 3.8.7 → 4.0.1
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 +10 -9
- package/dist/module.json +1 -1
- package/dist/module.mjs +9 -7
- package/dist/runtime/components/Block/Code.d.vue.ts +13 -0
- package/dist/runtime/components/Block/Code.vue +193 -0
- package/dist/runtime/components/Block/Code.vue.d.ts +13 -0
- package/dist/runtime/components/Block/Custom.d.vue.ts +9 -0
- package/dist/runtime/components/Block/Custom.vue +28 -0
- package/dist/runtime/components/Block/Custom.vue.d.ts +9 -0
- package/dist/runtime/components/Block/Divider.d.vue.ts +9 -0
- package/dist/runtime/components/Block/Divider.vue +27 -0
- package/dist/runtime/components/Block/Divider.vue.d.ts +9 -0
- package/dist/runtime/components/Block/Heading.d.vue.ts +13 -0
- package/dist/runtime/components/Block/Heading.vue +84 -0
- package/dist/runtime/components/Block/Heading.vue.d.ts +13 -0
- package/dist/runtime/components/Block/Image.d.vue.ts +13 -0
- package/dist/runtime/components/Block/Image.vue +146 -0
- package/dist/runtime/components/Block/Image.vue.d.ts +13 -0
- package/dist/runtime/components/Block/List.d.vue.ts +13 -0
- package/dist/runtime/components/Block/List.vue +170 -0
- package/dist/runtime/components/Block/List.vue.d.ts +13 -0
- package/dist/runtime/components/Block/Text.d.vue.ts +13 -0
- package/dist/runtime/components/Block/Text.vue +84 -0
- package/dist/runtime/components/Block/Text.vue.d.ts +13 -0
- package/dist/runtime/components/DragonEditor.d.vue.ts +27 -22
- package/dist/runtime/components/DragonEditor.vue +311 -474
- package/dist/runtime/components/DragonEditor.vue.d.ts +27 -22
- package/dist/runtime/components/DragonEditorViewer.d.vue.ts +12 -5
- package/dist/runtime/components/DragonEditorViewer.vue +200 -227
- package/dist/runtime/components/DragonEditorViewer.vue.d.ts +12 -5
- package/dist/runtime/components/MenuBar.d.vue.ts +3 -0
- package/dist/runtime/components/MenuBar.vue +385 -0
- package/dist/runtime/components/MenuBar.vue.d.ts +3 -0
- package/dist/runtime/scss/editor.css +237 -283
- package/dist/runtime/scss/viewer.css +184 -210
- package/dist/runtime/store/editor.d.ts +2 -0
- package/dist/runtime/store/editor.js +59 -0
- package/dist/runtime/type.d.mts +101 -124
- package/dist/runtime/utils/data/block.d.ts +20 -0
- package/dist/runtime/utils/data/block.js +663 -0
- package/dist/runtime/utils/data/cursor.d.ts +9 -0
- package/dist/runtime/utils/data/cursor.js +137 -0
- package/dist/runtime/utils/data/index.d.ts +5 -0
- package/dist/runtime/utils/data/index.js +17 -0
- package/dist/runtime/utils/data/node.d.ts +9 -0
- package/dist/runtime/utils/data/node.js +101 -0
- package/dist/runtime/utils/event/cursor.d.ts +3 -6
- package/dist/runtime/utils/event/cursor.js +52 -105
- package/dist/runtime/utils/event/index.d.ts +2 -6
- package/dist/runtime/utils/event/index.js +48 -6
- package/dist/runtime/utils/event/keyboard.d.ts +22 -7
- package/dist/runtime/utils/event/keyboard.js +910 -1406
- package/dist/runtime/utils/layout/body.d.ts +3 -4
- package/dist/runtime/utils/layout/body.js +83 -51
- package/dist/runtime/utils/layout/icon.d.ts +1 -2
- package/dist/runtime/utils/layout/icon.js +64 -67
- package/dist/runtime/utils/layout/index.d.ts +0 -3
- package/dist/runtime/utils/layout/index.js +0 -3
- package/dist/runtime/utils/node/element.d.ts +4 -6
- package/dist/runtime/utils/node/element.js +58 -71
- package/dist/runtime/utils/node/index.d.ts +1 -1
- package/dist/runtime/utils/node/index.js +1 -1
- package/dist/runtime/utils/node/style.d.ts +5 -0
- package/dist/runtime/utils/node/style.js +702 -0
- package/package.json +32 -18
- package/dist/runtime/utils/event/block.d.ts +0 -7
- package/dist/runtime/utils/event/block.js +0 -110
- package/dist/runtime/utils/event/data.d.ts +0 -8
- package/dist/runtime/utils/event/data.js +0 -379
- package/dist/runtime/utils/event/mouse.d.ts +0 -11
- package/dist/runtime/utils/event/mouse.js +0 -85
- package/dist/runtime/utils/event/scroll.d.ts +0 -3
- package/dist/runtime/utils/event/scroll.js +0 -29
- package/dist/runtime/utils/event/touch.d.ts +0 -5
- package/dist/runtime/utils/event/touch.js +0 -10
- package/dist/runtime/utils/event/window.d.ts +0 -5
- package/dist/runtime/utils/event/window.js +0 -47
- package/dist/runtime/utils/layout/block.d.ts +0 -7
- package/dist/runtime/utils/layout/block.js +0 -123
- package/dist/runtime/utils/layout/controlbar.d.ts +0 -3
- package/dist/runtime/utils/layout/controlbar.js +0 -99
- package/dist/runtime/utils/layout/menuBar.d.ts +0 -3
- package/dist/runtime/utils/layout/menuBar.js +0 -408
- package/dist/runtime/utils/node/block.d.ts +0 -19
- package/dist/runtime/utils/node/block.js +0 -256
- package/dist/runtime/utils/style/anchor.d.ts +0 -5
- package/dist/runtime/utils/style/anchor.js +0 -245
- package/dist/runtime/utils/style/decoration.d.ts +0 -4
- package/dist/runtime/utils/style/decoration.js +0 -378
- package/dist/runtime/utils/style/index.d.ts +0 -2
- package/dist/runtime/utils/style/index.js +0 -2
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { useEditorStore } from "../../store/editor.js";
|
|
2
|
+
export function _getMultilinePosition(element) {
|
|
3
|
+
const editorStore = useEditorStore();
|
|
4
|
+
let position = { curruntLine: 1, lineCount: 1 };
|
|
5
|
+
if (editorStore.cursorSelection !== null && editorStore.cursorSelection.rangeCount !== 0) {
|
|
6
|
+
const range = editorStore.cursorSelection.getRangeAt(0);
|
|
7
|
+
const elemRect = element.getBoundingClientRect();
|
|
8
|
+
const computedStyle = window.getComputedStyle(element);
|
|
9
|
+
const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
|
|
10
|
+
const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
|
11
|
+
const elemTop = elemRect.top + paddingTop;
|
|
12
|
+
const elementHeight = Math.floor(elemRect.height - paddingTop - paddingBottom);
|
|
13
|
+
let rect = range.getBoundingClientRect();
|
|
14
|
+
let lineHeight = parseInt(computedStyle.lineHeight);
|
|
15
|
+
if (rect.height === 0) {
|
|
16
|
+
const rects = range.getClientRects();
|
|
17
|
+
if (rects.length > 0) {
|
|
18
|
+
rect = rects[0];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
if (isNaN(lineHeight) == true) {
|
|
22
|
+
lineHeight = parseFloat(computedStyle.fontSize) * 1.2;
|
|
23
|
+
}
|
|
24
|
+
position.curruntLine = Math.floor((rect.top - paddingTop - elemTop) / lineHeight) + 1;
|
|
25
|
+
position.lineCount = Math.floor(elementHeight / lineHeight);
|
|
26
|
+
if (position.curruntLine < 1) {
|
|
27
|
+
position.curruntLine = 1;
|
|
28
|
+
}
|
|
29
|
+
if (position.lineCount < 1) {
|
|
30
|
+
position.lineCount = 1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return position;
|
|
34
|
+
}
|
|
35
|
+
export function _getBeforeAndAfterHTMLOfCursor($target) {
|
|
36
|
+
const editorStore = useEditorStore();
|
|
37
|
+
const data = { beforeHTML: "", afterHTML: "" };
|
|
38
|
+
if (editorStore.cursorSelection !== null) {
|
|
39
|
+
const range = editorStore.cursorSelection.getRangeAt(0);
|
|
40
|
+
const cloneRangeBefore = range.cloneRange();
|
|
41
|
+
const cloneRangeAfter = range.cloneRange();
|
|
42
|
+
cloneRangeBefore.selectNodeContents($target);
|
|
43
|
+
cloneRangeBefore.setEnd(range.endContainer, range.endOffset);
|
|
44
|
+
cloneRangeAfter.selectNodeContents($target);
|
|
45
|
+
cloneRangeAfter.setStart(range.endContainer, range.endOffset);
|
|
46
|
+
const fragmentBefore = cloneRangeBefore.cloneContents();
|
|
47
|
+
const tempDivBefore = document.createElement("div");
|
|
48
|
+
const fragmentAfter = cloneRangeAfter.cloneContents();
|
|
49
|
+
const tempDivAfter = document.createElement("div");
|
|
50
|
+
tempDivBefore.appendChild(fragmentBefore);
|
|
51
|
+
tempDivAfter.appendChild(fragmentAfter);
|
|
52
|
+
data.beforeHTML = tempDivBefore.innerHTML;
|
|
53
|
+
data.afterHTML = tempDivAfter.innerHTML === "<br>" ? "" : tempDivAfter.innerHTML;
|
|
54
|
+
}
|
|
55
|
+
return data;
|
|
56
|
+
}
|
|
57
|
+
export function _isCursorAtLineBoundary() {
|
|
58
|
+
const editorStore = useEditorStore();
|
|
59
|
+
const result = { isStart: false, isEnd: false };
|
|
60
|
+
if (editorStore.cursorSelection !== null) {
|
|
61
|
+
if (editorStore.cursorSelection.rangeCount === 0) {
|
|
62
|
+
return result;
|
|
63
|
+
}
|
|
64
|
+
const originalRange = editorStore.cursorSelection.getRangeAt(0).cloneRange();
|
|
65
|
+
try {
|
|
66
|
+
let currentRect = originalRange.getBoundingClientRect();
|
|
67
|
+
if (currentRect.height === 0) {
|
|
68
|
+
const rects = originalRange.getClientRects();
|
|
69
|
+
if (rects.length > 0) {
|
|
70
|
+
currentRect = rects[0];
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
const currentTop = currentRect.top;
|
|
74
|
+
editorStore.cursorSelection.modify("move", "left", "character");
|
|
75
|
+
let leftRect = editorStore.cursorSelection.getRangeAt(0).getBoundingClientRect();
|
|
76
|
+
if (leftRect.height === 0) {
|
|
77
|
+
const rects = editorStore.cursorSelection.getRangeAt(0).getClientRects();
|
|
78
|
+
if (rects.length > 0) {
|
|
79
|
+
leftRect = rects[0];
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (leftRect.top < currentTop - 5 || leftRect.top === currentTop && leftRect.left === currentRect.left) {
|
|
83
|
+
result.isStart = true;
|
|
84
|
+
}
|
|
85
|
+
editorStore.cursorSelection.removeAllRanges();
|
|
86
|
+
editorStore.cursorSelection.addRange(originalRange);
|
|
87
|
+
editorStore.cursorSelection.modify("move", "right", "character");
|
|
88
|
+
let rightRect = editorStore.cursorSelection.getRangeAt(0).getBoundingClientRect();
|
|
89
|
+
if (rightRect.height === 0) {
|
|
90
|
+
const rects = editorStore.cursorSelection.getRangeAt(0).getClientRects();
|
|
91
|
+
if (rects.length > 0) {
|
|
92
|
+
rightRect = rects[0];
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
if (rightRect.top > currentTop + 5 || rightRect.top === currentTop && rightRect.left === currentRect.left) {
|
|
96
|
+
result.isEnd = true;
|
|
97
|
+
}
|
|
98
|
+
} catch (e) {
|
|
99
|
+
console.error("[Dragon Editor]: Failed to check cursor line boundary", e);
|
|
100
|
+
} finally {
|
|
101
|
+
editorStore.cursorSelection.removeAllRanges();
|
|
102
|
+
editorStore.cursorSelection.addRange(originalRange);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return result;
|
|
106
|
+
}
|
|
107
|
+
export function _getEditorbleEndPosition($element) {
|
|
108
|
+
const data = { nodeIndex: 0, offset: 0 };
|
|
109
|
+
const lastIndex = $element.childNodes.length - 1;
|
|
110
|
+
const $lastChild = $element.childNodes[lastIndex];
|
|
111
|
+
if ($lastChild !== void 0) {
|
|
112
|
+
data.nodeIndex = lastIndex;
|
|
113
|
+
data.offset = $lastChild.textContent?.length ?? 0;
|
|
114
|
+
}
|
|
115
|
+
return data;
|
|
116
|
+
}
|
|
117
|
+
export function _getEditorbleCursorPosition($element) {
|
|
118
|
+
const editorStore = useEditorStore();
|
|
119
|
+
const data = { nodeIndex: 0, offset: 0 };
|
|
120
|
+
if (editorStore.cursorSelection !== null && editorStore.cursorSelection.rangeCount > 0) {
|
|
121
|
+
const range = editorStore.cursorSelection.getRangeAt(0);
|
|
122
|
+
let container = range.startContainer;
|
|
123
|
+
if (container === $element) {
|
|
124
|
+
data.nodeIndex = range.startOffset;
|
|
125
|
+
data.offset = 0;
|
|
126
|
+
} else {
|
|
127
|
+
while (container.parentNode !== null && container.parentNode !== $element) {
|
|
128
|
+
container = container.parentNode;
|
|
129
|
+
}
|
|
130
|
+
if (container.parentNode === $element) {
|
|
131
|
+
data.nodeIndex = Array.prototype.indexOf.call($element.childNodes, container);
|
|
132
|
+
data.offset = range.startOffset;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
return data;
|
|
137
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export * from "./block.js";
|
|
2
|
+
export * from "./cursor.js";
|
|
3
|
+
export * from "./node.js";
|
|
4
|
+
export function _generateId() {
|
|
5
|
+
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
6
|
+
let str = "";
|
|
7
|
+
for (let i = 0; i < 6; i += 1) {
|
|
8
|
+
str += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
9
|
+
}
|
|
10
|
+
return str;
|
|
11
|
+
}
|
|
12
|
+
export function _isStrictlyEqualArrays(arr1, arr2) {
|
|
13
|
+
if (arr1.length !== arr2.length) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
return arr1.every((value, index) => value === arr2[index]);
|
|
17
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function _arrangementNodeList(list: Node[], cursorStartNode: Node | null, cursorStartNodeOffset: number, cursorEndNode: Node | null, cursorEndNodeOffset: number): {
|
|
2
|
+
list: Node[];
|
|
3
|
+
cursorStartNode: Node | null;
|
|
4
|
+
cursorStartNodeOffset: number;
|
|
5
|
+
cursorEndNode: Node | null;
|
|
6
|
+
cursorEndNodeOffset: number;
|
|
7
|
+
};
|
|
8
|
+
export declare function _findHiddenStyleElement($target: HTMLElement): HTMLElement | null;
|
|
9
|
+
export declare function _findScrollingElement($target: HTMLElement): HTMLElement | Window;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { _isStrictlyEqualArrays } from "./index.js";
|
|
2
|
+
export function _arrangementNodeList(list, cursorStartNode, cursorStartNodeOffset, cursorEndNode, cursorEndNodeOffset) {
|
|
3
|
+
const arrangementNodeList = [];
|
|
4
|
+
list.forEach((node) => {
|
|
5
|
+
if (arrangementNodeList.length === 0) {
|
|
6
|
+
arrangementNodeList.push(node);
|
|
7
|
+
} else {
|
|
8
|
+
if (node !== void 0 && node !== null && node.textContent !== "") {
|
|
9
|
+
const prevNode = arrangementNodeList[arrangementNodeList.length - 1];
|
|
10
|
+
if (prevNode.nodeType === Node.TEXT_NODE && node.nodeType === Node.TEXT_NODE) {
|
|
11
|
+
if (prevNode.textContent !== null && node.textContent !== null) {
|
|
12
|
+
if (cursorStartNode === node) {
|
|
13
|
+
cursorStartNode = prevNode;
|
|
14
|
+
cursorStartNodeOffset += prevNode.textContent.length;
|
|
15
|
+
}
|
|
16
|
+
if (cursorEndNode === node) {
|
|
17
|
+
cursorEndNode = prevNode;
|
|
18
|
+
cursorEndNodeOffset += prevNode.textContent.length;
|
|
19
|
+
}
|
|
20
|
+
prevNode.textContent += node.textContent;
|
|
21
|
+
}
|
|
22
|
+
} else if (prevNode.nodeType === Node.ELEMENT_NODE && node.nodeType === Node.ELEMENT_NODE) {
|
|
23
|
+
const $prevNode = prevNode;
|
|
24
|
+
const $node = node;
|
|
25
|
+
if ($prevNode.tagName === "A" && $node.tagName === "A") {
|
|
26
|
+
if ($prevNode.href === $node.href) {
|
|
27
|
+
if (cursorStartNode !== null && cursorStartNode.parentElement === $node) {
|
|
28
|
+
cursorStartNode = $prevNode;
|
|
29
|
+
cursorStartNodeOffset += $prevNode.textContent.length;
|
|
30
|
+
}
|
|
31
|
+
if (cursorEndNode !== null && cursorEndNode.parentElement === $node) {
|
|
32
|
+
cursorEndNode = $prevNode;
|
|
33
|
+
cursorEndNodeOffset += $prevNode.textContent.length;
|
|
34
|
+
}
|
|
35
|
+
$prevNode.textContent += $node.textContent;
|
|
36
|
+
} else {
|
|
37
|
+
arrangementNodeList.push(node);
|
|
38
|
+
}
|
|
39
|
+
} else {
|
|
40
|
+
if (_isStrictlyEqualArrays(Array.from($prevNode.classList), Array.from($node.classList)) === true) {
|
|
41
|
+
if (cursorStartNode !== null && cursorStartNode.parentElement === $node) {
|
|
42
|
+
cursorStartNode = $prevNode;
|
|
43
|
+
cursorStartNodeOffset += $prevNode.textContent.length;
|
|
44
|
+
}
|
|
45
|
+
if (cursorEndNode !== null && cursorEndNode.parentElement === $node) {
|
|
46
|
+
cursorEndNode = $prevNode;
|
|
47
|
+
cursorEndNodeOffset += $prevNode.textContent.length;
|
|
48
|
+
}
|
|
49
|
+
$prevNode.textContent += $node.textContent;
|
|
50
|
+
} else {
|
|
51
|
+
arrangementNodeList.push(node);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
} else {
|
|
55
|
+
arrangementNodeList.push(node);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
return {
|
|
61
|
+
list: arrangementNodeList,
|
|
62
|
+
cursorStartNode,
|
|
63
|
+
cursorStartNodeOffset,
|
|
64
|
+
cursorEndNode,
|
|
65
|
+
cursorEndNodeOffset
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
export function _findHiddenStyleElement($target) {
|
|
69
|
+
const $wrap = $target.parentElement;
|
|
70
|
+
if ($wrap !== null) {
|
|
71
|
+
const style = window.getComputedStyle($wrap);
|
|
72
|
+
if (style.overflow === "hidden") {
|
|
73
|
+
return $wrap;
|
|
74
|
+
} else {
|
|
75
|
+
if ($wrap.tagName === "HTML") {
|
|
76
|
+
return null;
|
|
77
|
+
} else {
|
|
78
|
+
return _findHiddenStyleElement($wrap);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
} else {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
export function _findScrollingElement($target) {
|
|
86
|
+
const $wrap = $target.parentElement;
|
|
87
|
+
if ($wrap !== null) {
|
|
88
|
+
const style = window.getComputedStyle($wrap);
|
|
89
|
+
if (style.overflow !== "visible" && style.overflow !== "hidden") {
|
|
90
|
+
return $wrap;
|
|
91
|
+
} else {
|
|
92
|
+
if ($wrap.tagName === "BODY") {
|
|
93
|
+
return window;
|
|
94
|
+
} else {
|
|
95
|
+
return _findScrollingElement($wrap);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
} else {
|
|
99
|
+
return window;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
4
|
-
export declare function _setCursor($target: Node, startIdx: number): void;
|
|
5
|
-
export declare function _setRangeCursor($startTarget: Element, $endTarget: Element, startIdx: number, endIdx: number): void;
|
|
6
|
-
export declare function _sortingCursorDataOnElement(cursorData: DEditorCursor, $element: HTMLElement): DEArrangeCursorData;
|
|
1
|
+
export declare function _updateCursorData(): void;
|
|
2
|
+
export declare function _setCursorPosition(node: Node, offset: number): void;
|
|
3
|
+
export declare function _setRangeCursorPosition(startNode: Node, startNodeOffset: number, endNode: Node, endNodeOffset: number): void;
|
|
@@ -1,120 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
if ($target.hasChildNodes() === true) {
|
|
20
|
-
if ($target.textContent === "") {
|
|
21
|
-
range.setStart($target.childNodes[startIdx], 0);
|
|
1
|
+
import { useEditorStore } from "../../store/editor.js";
|
|
2
|
+
export function _updateCursorData() {
|
|
3
|
+
const editorStore = useEditorStore();
|
|
4
|
+
if (window !== void 0) {
|
|
5
|
+
editorStore.cursorSelection = null;
|
|
6
|
+
editorStore.cursorSelection = window.getSelection();
|
|
7
|
+
if (editorStore.cursorSelection.rangeCount > 0) {
|
|
8
|
+
const range = editorStore.cursorSelection.getRangeAt(0);
|
|
9
|
+
editorStore.cursorRange = range.cloneRange();
|
|
10
|
+
if (range.startContainer === range.endContainer) {
|
|
11
|
+
if (range.startContainer.nodeType === Node.TEXT_NODE) {
|
|
12
|
+
const $parentElement = range.startContainer.parentElement;
|
|
13
|
+
if ($parentElement !== null && $parentElement.tagName === "A") {
|
|
14
|
+
editorStore.status.anchorHerf = $parentElement.href;
|
|
15
|
+
} else {
|
|
16
|
+
editorStore.status.anchorHerf = "";
|
|
17
|
+
}
|
|
18
|
+
}
|
|
22
19
|
} else {
|
|
23
|
-
|
|
20
|
+
editorStore.status.anchorHerf = "";
|
|
24
21
|
}
|
|
25
|
-
} else {
|
|
26
|
-
range.setStart($target, startIdx);
|
|
27
22
|
}
|
|
23
|
+
} else {
|
|
24
|
+
console.error("[Dragon Editor]: It's not client environment");
|
|
28
25
|
}
|
|
29
|
-
selection.removeAllRanges();
|
|
30
|
-
selection.addRange(range);
|
|
31
26
|
}
|
|
32
|
-
export function
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if ($startTarget.hasChildNodes() === true) {
|
|
39
|
-
if ($startTarget.textContent === "") {
|
|
40
|
-
range.setStart($startTarget.childNodes[startIdx], 0);
|
|
27
|
+
export function _setCursorPosition(node, offset) {
|
|
28
|
+
const editorStore = useEditorStore();
|
|
29
|
+
if (editorStore.cursorSelection !== null) {
|
|
30
|
+
if (node.nodeType !== Node.TEXT_NODE) {
|
|
31
|
+
if (node.childNodes.length !== 0) {
|
|
32
|
+
node = node.childNodes[0];
|
|
41
33
|
} else {
|
|
42
|
-
|
|
34
|
+
offset = 0;
|
|
43
35
|
}
|
|
44
|
-
} else {
|
|
45
|
-
range.setStart($startTarget, startIdx);
|
|
46
36
|
}
|
|
37
|
+
editorStore.cursorSelection.removeAllRanges();
|
|
38
|
+
const range = document.createRange();
|
|
39
|
+
range.setStart(node, offset);
|
|
40
|
+
range.setEnd(node, offset);
|
|
41
|
+
editorStore.cursorSelection.addRange(range);
|
|
47
42
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
}
|
|
44
|
+
export function _setRangeCursorPosition(startNode, startNodeOffset, endNode, endNodeOffset) {
|
|
45
|
+
const editorStore = useEditorStore();
|
|
46
|
+
if (editorStore.cursorSelection !== null) {
|
|
47
|
+
editorStore.cursorSelection.removeAllRanges();
|
|
48
|
+
const newRange = document.createRange();
|
|
49
|
+
if (startNode.nodeType !== Node.TEXT_NODE) {
|
|
50
|
+
if (startNode.childNodes.length !== 0) {
|
|
51
|
+
startNode = startNode.childNodes[0];
|
|
54
52
|
} else {
|
|
55
|
-
|
|
53
|
+
startNodeOffset = 0;
|
|
56
54
|
}
|
|
57
|
-
} else {
|
|
58
|
-
range.setEnd($endTarget, endIdx);
|
|
59
55
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
let startNode = cursorData.startNode;
|
|
67
|
-
let startIdx = -1;
|
|
68
|
-
let startOffset = cursorData.startOffset;
|
|
69
|
-
let endNode = cursorData.endNode;
|
|
70
|
-
let endIdx = -1;
|
|
71
|
-
let endOffset = cursorData.endOffset;
|
|
72
|
-
if (startNode.constructor.name === "Text") {
|
|
73
|
-
if (startNode.parentElement !== $element) {
|
|
74
|
-
startNode = startNode.parentElement;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
if (endNode.constructor.name === "Text") {
|
|
78
|
-
if (endNode.parentElement !== $element) {
|
|
79
|
-
endNode = endNode.parentElement;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
for (let i = 0; childList.length > i; i += 1) {
|
|
83
|
-
if (startIdx !== -1 && endIdx !== -1) {
|
|
84
|
-
break;
|
|
85
|
-
}
|
|
86
|
-
if (startNode === childList[i]) {
|
|
87
|
-
startIdx = i;
|
|
88
|
-
}
|
|
89
|
-
if (endNode === childList[i]) {
|
|
90
|
-
endIdx = i;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (startIdx === endIdx) {
|
|
94
|
-
if (cursorData.startOffset > cursorData.endOffset) {
|
|
95
|
-
startOffset = cursorData.endOffset;
|
|
96
|
-
endOffset = cursorData.startOffset;
|
|
97
|
-
}
|
|
98
|
-
} else {
|
|
99
|
-
if (startIdx > endIdx) {
|
|
100
|
-
const originStartNode = startNode;
|
|
101
|
-
const originStartIdx = startIdx;
|
|
102
|
-
const originEndNode = endNode;
|
|
103
|
-
const originEndIdx = endIdx;
|
|
104
|
-
startNode = originEndNode;
|
|
105
|
-
startIdx = originEndIdx;
|
|
106
|
-
startOffset = cursorData.endOffset;
|
|
107
|
-
endNode = originStartNode;
|
|
108
|
-
endIdx = originStartIdx;
|
|
109
|
-
endOffset = cursorData.startOffset;
|
|
56
|
+
if (endNode.nodeType !== Node.TEXT_NODE) {
|
|
57
|
+
if (endNode.childNodes.length !== 0) {
|
|
58
|
+
endNode = endNode.childNodes[0];
|
|
59
|
+
} else {
|
|
60
|
+
endNodeOffset = 0;
|
|
61
|
+
}
|
|
110
62
|
}
|
|
63
|
+
newRange.setStart(startNode, startNodeOffset);
|
|
64
|
+
newRange.setEnd(endNode, endNodeOffset);
|
|
65
|
+
editorStore.cursorSelection.addRange(newRange);
|
|
111
66
|
}
|
|
112
|
-
return {
|
|
113
|
-
startNode,
|
|
114
|
-
startNodeIdx: startIdx,
|
|
115
|
-
startOffset,
|
|
116
|
-
endNode,
|
|
117
|
-
endNodeIdx: endIdx,
|
|
118
|
-
endOffset
|
|
119
|
-
};
|
|
120
67
|
}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
export * from "./keyboard.js";
|
|
2
|
-
export * from "./mouse.js";
|
|
3
|
-
export * from "./touch.js";
|
|
4
|
-
export * from "./data.js";
|
|
5
|
-
export * from "./window.js";
|
|
6
|
-
export * from "./scroll.js";
|
|
7
2
|
export * from "./cursor.js";
|
|
8
|
-
export
|
|
3
|
+
export declare function _editorMountedEvent(): void;
|
|
4
|
+
export declare function _eidtorUnmountEvent(): void;
|
|
@@ -1,8 +1,50 @@
|
|
|
1
1
|
export * from "./keyboard.js";
|
|
2
|
-
export * from "./mouse.js";
|
|
3
|
-
export * from "./touch.js";
|
|
4
|
-
export * from "./data.js";
|
|
5
|
-
export * from "./window.js";
|
|
6
|
-
export * from "./scroll.js";
|
|
7
2
|
export * from "./cursor.js";
|
|
8
|
-
|
|
3
|
+
import { useEditorStore } from "../../store/editor.js";
|
|
4
|
+
import { _findHiddenStyleElement, _findScrollingElement } from "../data/index.js";
|
|
5
|
+
export function _editorMountedEvent() {
|
|
6
|
+
const editorStore = useEditorStore();
|
|
7
|
+
if (editorStore.element.editor !== null) {
|
|
8
|
+
const $scrollParent = _findScrollingElement(editorStore.element.editor);
|
|
9
|
+
const $hiddenStyleElement = _findHiddenStyleElement(editorStore.element.editor);
|
|
10
|
+
editorStore.status.isParentOverflowHidden = $hiddenStyleElement !== null;
|
|
11
|
+
editorStore.element.scrollParentElement = $scrollParent;
|
|
12
|
+
if (editorStore.element.scrollParentElement !== null) {
|
|
13
|
+
editorStore.element.scrollParentElement.addEventListener("scroll", parentElementScrollEvent);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
export function _eidtorUnmountEvent() {
|
|
18
|
+
const editorStore = useEditorStore();
|
|
19
|
+
if (editorStore.element.scrollParentElement !== null) {
|
|
20
|
+
editorStore.element.scrollParentElement.removeEventListener("scroll", parentElementScrollEvent);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function parentElementScrollEvent() {
|
|
24
|
+
const editorStore = useEditorStore();
|
|
25
|
+
if (editorStore.element.scrollParentElement !== null && editorStore.element.editor !== null) {
|
|
26
|
+
const editorRect = editorStore.element.editor.getBoundingClientRect();
|
|
27
|
+
const $scrollElement = editorStore.element.scrollParentElement;
|
|
28
|
+
let scrollY = 0;
|
|
29
|
+
let value = 0;
|
|
30
|
+
if ($scrollElement instanceof Window) {
|
|
31
|
+
scrollY = $scrollElement.scrollY;
|
|
32
|
+
} else {
|
|
33
|
+
scrollY = $scrollElement.scrollTop;
|
|
34
|
+
}
|
|
35
|
+
let realElementY = editorRect.y + scrollY;
|
|
36
|
+
if ($scrollElement instanceof HTMLElement) {
|
|
37
|
+
const parentRect = $scrollElement.getBoundingClientRect();
|
|
38
|
+
realElementY -= parentRect.y;
|
|
39
|
+
}
|
|
40
|
+
if (scrollY > realElementY) {
|
|
41
|
+
value = scrollY - realElementY - 1;
|
|
42
|
+
} else {
|
|
43
|
+
value = 0;
|
|
44
|
+
}
|
|
45
|
+
if (value > editorRect.height - 34) {
|
|
46
|
+
value = editorRect.height - 34;
|
|
47
|
+
}
|
|
48
|
+
editorStore.status.menuTop = Math.floor(value);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -1,7 +1,22 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
4
|
-
export declare function
|
|
5
|
-
export declare function
|
|
6
|
-
export declare function
|
|
7
|
-
export declare function
|
|
1
|
+
import type { DETextBlock, DEHeadingBlock } from "../../type.d.mts.js";
|
|
2
|
+
export declare function _sliceAndNewTextBlock(event: KeyboardEvent, data: DETextBlock | DEHeadingBlock, index: number): Promise<void>;
|
|
3
|
+
export declare function _imageEnterEvent(event: KeyboardEvent, data: DEImageBlock, index: number): Promise<void>;
|
|
4
|
+
export declare function _listBlockEnterEvent(event: KeyboardEvent, data: DEListBlock, index: number, childIndex: number, setEvent: (liIndex: number, id: string) => void, abortEvent: Function): Promise<void>;
|
|
5
|
+
export declare function _codeBlockShiftEnterEvent(event: KeyboardEvent, index: number): Promise<void>;
|
|
6
|
+
export declare function _blockTabEvent(event: KeyboardEvent, data: DETextBlock | DEHeadingBlock, index: number, setEvent: Function, abortEvent: Function): Promise<void>;
|
|
7
|
+
export declare function _listChildTabEvent(event: KeyboardEvent, data: DEListBlock, index: number, childIndex: number, setEvent: (liIndex: number, id: string) => void, abortEvent: Function): Promise<void>;
|
|
8
|
+
export declare function _codeBlockTabEvent(event: KeyboardEvent): Promise<void>;
|
|
9
|
+
export declare function _moveBlockDefaultEvent(event: KeyboardEvent, type: "up" | "down"): void;
|
|
10
|
+
export declare function _moveListChildEvent(event: KeyboardEvent, data: DEListBlock, index: number, childIndex: number, type: "up" | "down"): void;
|
|
11
|
+
export declare function _moveCodeBlockEvent(event: KeyboardEvent, direction: "up" | "down", type: "filename" | "content", $targetElement: HTMLElement): void;
|
|
12
|
+
export declare function _defaultBackspaceEvent(event: KeyboardEvent): Promise<void>;
|
|
13
|
+
export declare function _listBackspaceEvent(event: KeyboardEvent, childIndex: number): Promise<void>;
|
|
14
|
+
export declare function _defaultDeleteEvent(event: KeyboardEvent, setEvent: (index: number, id: string) => void, abortEvent: Function): Promise<void>;
|
|
15
|
+
export declare function _listDeleteEvent(event: KeyboardEvent, childIndex: number, setEvent: (liIndex: number, id: string) => void, abortEvent: Function): Promise<void>;
|
|
16
|
+
export declare function _allDataPasteEvent(event: ClipboardEvent, setEvent: Function, abortEvent: Function): Promise<void>;
|
|
17
|
+
export declare function _normalPasteEvent(event: ClipboardEvent, setEvent: Function, abortEvent: Function): Promise<void>;
|
|
18
|
+
export declare function _convertTextBlockType(event: KeyboardEvent, data: DETextBlock, index: number): Promise<void>;
|
|
19
|
+
export declare function _convertTextBlockToCodeBlock(event: KeyboardEvent, data: DETextBlock, index: number): Promise<void>;
|
|
20
|
+
export declare function _convertTextBlockToDividerBlock(event: KeyboardEvent, data: DETextBlock, index: number): Promise<void>;
|
|
21
|
+
export declare function _convertHeadingBlockType(event: KeyboardEvent, data: DEHeadingBlock, index: number, setEvent: Function, abortEvent: Function): Promise<void>;
|
|
22
|
+
export declare function _hotKeyEvent(event: KeyboardEvent): void;
|