dragon-editor 3.7.3 → 3.8.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.
package/dist/module.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _updateModelData, _updateCursorData, _setCursor, _sortingCursorDataOnElement, _generateId } from "./index.js";
|
|
2
|
-
import { _getCurrentBlock, _createTextBlock, _createHeadingBlock, _createListBlock, _getParentElementIfNodeIsText, _findContentEditableElement, _createListItemBlock, _updateCurrentBlock, _createCodeBlock } from "../node/index.js";
|
|
2
|
+
import { _addBlock, _getCurrentBlock, _createTextBlock, _createHeadingBlock, _createListBlock, _getParentElementIfNodeIsText, _findContentEditableElement, _createListItemBlock, _updateCurrentBlock, _createCodeBlock } from "../node/index.js";
|
|
3
3
|
import { _getDefaultBlockData } from "../event/index.js";
|
|
4
4
|
import { _setDecoration } from "../style/index.js";
|
|
5
5
|
export function _contentKeydownEvent(event, store) {
|
|
@@ -51,14 +51,201 @@ export async function _contentPasteEvent(event, store) {
|
|
|
51
51
|
store.value.emit("uploadImageEvent", file);
|
|
52
52
|
}
|
|
53
53
|
} else {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
if (store.value.controlStatus.currentBlockType === "code") {
|
|
55
|
+
const selection = window.getSelection();
|
|
56
|
+
const textNode = document.createTextNode(text);
|
|
57
|
+
selection.deleteFromDocument();
|
|
58
|
+
selection.getRangeAt(0).insertNode(textNode);
|
|
59
|
+
_setCursor(textNode, textNode.length);
|
|
60
|
+
} else {
|
|
61
|
+
__pasteToMarkDownFormat(text, store);
|
|
62
|
+
}
|
|
59
63
|
}
|
|
60
64
|
}
|
|
61
65
|
}
|
|
66
|
+
function __pasteToMarkDownFormat(value, store) {
|
|
67
|
+
if (store.value.controlStatus.$currentBlock !== null) {
|
|
68
|
+
const lineList = value.split("\n");
|
|
69
|
+
const blockList = [];
|
|
70
|
+
const unorderListReg = new RegExp("^( +)?(\\*|-)(?= )( )");
|
|
71
|
+
const orderListReg = new RegExp("^( +)?(\\d+.)(?= )( )");
|
|
72
|
+
const codeBlockReg = new RegExp("^```");
|
|
73
|
+
let tempData = null;
|
|
74
|
+
let isCodeBlock = false;
|
|
75
|
+
lineList.forEach((text, lineIndex) => {
|
|
76
|
+
switch (true) {
|
|
77
|
+
case (codeBlockReg.test(text) || isCodeBlock === true):
|
|
78
|
+
if (isCodeBlock === false) {
|
|
79
|
+
const startLineText = text.split("```");
|
|
80
|
+
let codeBlockLang = "text";
|
|
81
|
+
if (["text", "csharp", "c", "cpp", "css", "django", "dockerfile", "go", "html", "json", "java", "javascript", "typescript", "kotlin", "lua", "markdown", "nginx", "php", "python", "ruby", "scss", "sql", "shellscript", "swift", "yaml"].includes(startLineText[1]) === true) {
|
|
82
|
+
codeBlockLang = startLineText[1];
|
|
83
|
+
}
|
|
84
|
+
isCodeBlock = true;
|
|
85
|
+
tempData = {
|
|
86
|
+
type: "code",
|
|
87
|
+
filename: "",
|
|
88
|
+
theme: "github-light",
|
|
89
|
+
language: codeBlockLang,
|
|
90
|
+
textContent: ""
|
|
91
|
+
};
|
|
92
|
+
} else {
|
|
93
|
+
if (tempData !== null) {
|
|
94
|
+
if (codeBlockReg.test(text) !== true) {
|
|
95
|
+
if (tempData.type === "code") {
|
|
96
|
+
tempData.textContent += `${text}
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
} else {
|
|
100
|
+
blockList.push(tempData);
|
|
101
|
+
isCodeBlock = false;
|
|
102
|
+
tempData = null;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
break;
|
|
107
|
+
case orderListReg.test(text):
|
|
108
|
+
const olSplitText = text.split(new RegExp("\\d+.(?= )"));
|
|
109
|
+
const olDepth = olSplitText[0].length / 4;
|
|
110
|
+
if (tempData === null) {
|
|
111
|
+
tempData = {
|
|
112
|
+
type: "list",
|
|
113
|
+
style: ["decimal", "lower-alpha", "upper-alpha", "lower-roman", "upper-roman"][olDepth],
|
|
114
|
+
depth: olDepth,
|
|
115
|
+
element: "ol",
|
|
116
|
+
child: []
|
|
117
|
+
};
|
|
118
|
+
tempData.child.push({
|
|
119
|
+
classList: [],
|
|
120
|
+
textContent: ___replaceTextData(olSplitText[1].trim())
|
|
121
|
+
});
|
|
122
|
+
} else {
|
|
123
|
+
if (tempData.type === "list") {
|
|
124
|
+
const nextLine = lineList[lineIndex + 1];
|
|
125
|
+
tempData.child.push({
|
|
126
|
+
classList: [],
|
|
127
|
+
textContent: ___replaceTextData(olSplitText[1].trim())
|
|
128
|
+
});
|
|
129
|
+
if (nextLine !== void 0) {
|
|
130
|
+
const nextOlSplitText = nextLine.split(new RegExp("\\d+.(?= )"));
|
|
131
|
+
const nextOlDepth = nextOlSplitText[0].length / 4;
|
|
132
|
+
if (orderListReg.test(nextLine) === false) {
|
|
133
|
+
blockList.push(tempData);
|
|
134
|
+
tempData = null;
|
|
135
|
+
} else {
|
|
136
|
+
if (tempData.depth !== nextOlDepth) {
|
|
137
|
+
blockList.push(tempData);
|
|
138
|
+
tempData = null;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
} else {
|
|
142
|
+
blockList.push(tempData);
|
|
143
|
+
tempData = null;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
break;
|
|
148
|
+
case unorderListReg.test(text):
|
|
149
|
+
const ulSplitText = text.split(new RegExp("\\*|-"));
|
|
150
|
+
const ulDepth = ulSplitText[0].length / 4;
|
|
151
|
+
if (tempData === null) {
|
|
152
|
+
tempData = {
|
|
153
|
+
type: "list",
|
|
154
|
+
style: ulDepth % 2 === 0 ? "disc" : "square",
|
|
155
|
+
depth: ulDepth,
|
|
156
|
+
element: "ul",
|
|
157
|
+
child: []
|
|
158
|
+
};
|
|
159
|
+
tempData.child.push({
|
|
160
|
+
classList: [],
|
|
161
|
+
textContent: ___replaceTextData(ulSplitText[1].trim())
|
|
162
|
+
});
|
|
163
|
+
} else {
|
|
164
|
+
if (tempData.type === "list") {
|
|
165
|
+
const nextLine = lineList[lineIndex + 1];
|
|
166
|
+
tempData.child.push({
|
|
167
|
+
classList: [],
|
|
168
|
+
textContent: ___replaceTextData(ulSplitText[1].trim())
|
|
169
|
+
});
|
|
170
|
+
if (nextLine !== void 0) {
|
|
171
|
+
const nextUlSplitText = nextLine.split(new RegExp("\\*|-"));
|
|
172
|
+
const nextUlDepth = nextUlSplitText[0].length / 4;
|
|
173
|
+
if (unorderListReg.test(nextLine) === false) {
|
|
174
|
+
blockList.push(tempData);
|
|
175
|
+
tempData = null;
|
|
176
|
+
} else {
|
|
177
|
+
if (tempData.depth !== nextUlDepth) {
|
|
178
|
+
blockList.push(tempData);
|
|
179
|
+
tempData = null;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
} else {
|
|
183
|
+
blockList.push(tempData);
|
|
184
|
+
tempData = null;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
break;
|
|
189
|
+
case new RegExp("^###(?= )").test(text):
|
|
190
|
+
blockList.push({
|
|
191
|
+
type: "heading",
|
|
192
|
+
level: 3,
|
|
193
|
+
id: _generateId(),
|
|
194
|
+
classList: [],
|
|
195
|
+
textContent: text.substring(4)
|
|
196
|
+
});
|
|
197
|
+
break;
|
|
198
|
+
case new RegExp("^##(?= )").test(text):
|
|
199
|
+
blockList.push({
|
|
200
|
+
type: "heading",
|
|
201
|
+
level: 2,
|
|
202
|
+
id: _generateId(),
|
|
203
|
+
classList: [],
|
|
204
|
+
textContent: text.substring(3)
|
|
205
|
+
});
|
|
206
|
+
break;
|
|
207
|
+
case new RegExp("^#(?= )").test(text):
|
|
208
|
+
blockList.push({
|
|
209
|
+
type: "heading",
|
|
210
|
+
level: 1,
|
|
211
|
+
id: _generateId(),
|
|
212
|
+
classList: [],
|
|
213
|
+
textContent: text.substring(2)
|
|
214
|
+
});
|
|
215
|
+
break;
|
|
216
|
+
default:
|
|
217
|
+
blockList.push({
|
|
218
|
+
type: "text",
|
|
219
|
+
classList: [],
|
|
220
|
+
textContent: ___replaceTextData(text)
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
blockList.forEach((data) => {
|
|
225
|
+
switch (data.type) {
|
|
226
|
+
case "heading":
|
|
227
|
+
if (data.level === 1) {
|
|
228
|
+
_addBlock("heading1", store, data);
|
|
229
|
+
}
|
|
230
|
+
if (data.level === 2) {
|
|
231
|
+
_addBlock("heading2", store, data);
|
|
232
|
+
}
|
|
233
|
+
if (data.level === 3) {
|
|
234
|
+
_addBlock("heading3", store, data);
|
|
235
|
+
}
|
|
236
|
+
break;
|
|
237
|
+
case "list":
|
|
238
|
+
_addBlock(data.element, store, data);
|
|
239
|
+
break;
|
|
240
|
+
default:
|
|
241
|
+
_addBlock(data.type, store, data);
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
function ___replaceTextData(text) {
|
|
247
|
+
return text.replaceAll(new RegExp("(`)([^`]+)(`)", "g"), `<span class="de-code">$2</span>`).replaceAll(new RegExp("(\\[)([^\\[\\]]+)(\\])(?=\\()(\\()([^\\(\\)]+)(?=\\))(\\))", "g"), `<a class="de-link" href="$5" target="_blank">$2</a>`).replaceAll(new RegExp("(\\*\\*)([^\\*]+)(?=\\*\\*)(\\*\\*)", "g"), `<span class="de-bold">$2</span>`).replaceAll(new RegExp("(\\_\\_)([^\\_]+)(?=\\_\\_)(\\_\\_)", "g"), `<span class="de-bold">$2</span>`).replaceAll(new RegExp("(\\*)([^\\*]+)(?=\\*)(\\*)", "g"), `<span class="de-italic">$2</span>`).replaceAll(new RegExp("(\\_)([^\\_]+)(?=\\_)(\\_)", "g"), `<span class="de-italic">$2</span>`);
|
|
248
|
+
}
|
|
62
249
|
function __enterEvent(event, store) {
|
|
63
250
|
if (event.shiftKey === true) {
|
|
64
251
|
switch (store.value.controlStatus.currentBlockType) {
|
|
@@ -34,7 +34,7 @@ export function _createBlockList({ blockList, isEditable, imageHostURL } = { blo
|
|
|
34
34
|
}
|
|
35
35
|
function __createTextBlock(data, isEditable) {
|
|
36
36
|
const option = { class: ["de-block", "de-text-block", ...data.classList], innerHTML: data.textContent };
|
|
37
|
-
if (data.depth !== void 0) {
|
|
37
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
38
38
|
option["data-depth"] = data.depth;
|
|
39
39
|
}
|
|
40
40
|
if (isEditable === true) {
|
|
@@ -44,7 +44,7 @@ function __createTextBlock(data, isEditable) {
|
|
|
44
44
|
}
|
|
45
45
|
function __createHeadingBlock(data, isEditable) {
|
|
46
46
|
const option = { class: ["de-block", "de-heading-block", ...data.classList], "data-level": data.level, innerHTML: data.textContent };
|
|
47
|
-
if (data.depth !== void 0) {
|
|
47
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
48
48
|
option["data-depth"] = data.depth;
|
|
49
49
|
}
|
|
50
50
|
if (isEditable === true) {
|
|
@@ -82,7 +82,7 @@ function __createImageBlock(data, isEditable, imageHostURL) {
|
|
|
82
82
|
function __createListBlock(data, isEditable) {
|
|
83
83
|
const liList = [];
|
|
84
84
|
const option = { class: ["de-block", "de-list-block"], "data-style": data.style };
|
|
85
|
-
if (data.depth !== void 0) {
|
|
85
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
86
86
|
option["data-depth"] = data.depth;
|
|
87
87
|
}
|
|
88
88
|
data.child.forEach((child) => {
|
|
@@ -85,6 +85,9 @@ export function _getCurrentBlock($target) {
|
|
|
85
85
|
}
|
|
86
86
|
export function _createTextBlock(data) {
|
|
87
87
|
const $paragraph = document.createElement("p");
|
|
88
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
89
|
+
$paragraph.dataset["depth"] = String(data.depth);
|
|
90
|
+
}
|
|
88
91
|
$paragraph.classList.add("de-block", "de-text-block", ...data.classList);
|
|
89
92
|
$paragraph.setAttribute("contenteditable", "true");
|
|
90
93
|
$paragraph.innerHTML = data.textContent;
|
|
@@ -97,6 +100,9 @@ export function _createHeadingBlock(data) {
|
|
|
97
100
|
} else {
|
|
98
101
|
$headingBlock.id = data.id;
|
|
99
102
|
}
|
|
103
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
104
|
+
$headingBlock.dataset["depth"] = String(data.depth);
|
|
105
|
+
}
|
|
100
106
|
$headingBlock.classList.add("de-block", "de-heading-block", ...data.classList);
|
|
101
107
|
$headingBlock.dataset["level"] = String(data.level);
|
|
102
108
|
$headingBlock.setAttribute("contenteditable", "true");
|
|
@@ -105,6 +111,9 @@ export function _createHeadingBlock(data) {
|
|
|
105
111
|
}
|
|
106
112
|
export function _createListBlock(data) {
|
|
107
113
|
const $block = document.createElement(data.element);
|
|
114
|
+
if (data.depth !== void 0 && data.depth !== 0) {
|
|
115
|
+
$block.dataset["depth"] = String(data.depth);
|
|
116
|
+
}
|
|
108
117
|
$block.classList.add("de-block", "de-list-block");
|
|
109
118
|
$block.dataset["style"] = data.style;
|
|
110
119
|
data.child.forEach((child) => {
|
|
@@ -186,7 +186,7 @@ export function _setAnchorTag(url, isOutsideLink, store) {
|
|
|
186
186
|
if (newCursorData.startOffset !== 0) {
|
|
187
187
|
targetNode = $element.childNodes[newCursorData.startNodeIdx + 1];
|
|
188
188
|
}
|
|
189
|
-
_setRangeCursor(targetNode, targetNode, 0, targetNode
|
|
189
|
+
_setRangeCursor(targetNode, targetNode, 0, targetNode?.textContent?.length ?? 0);
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
192
|
_updateCursorData(store);
|