dragon-editor 3.7.2 → 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 +1 -1
- package/dist/runtime/utils/event/keyboard.js +193 -6
- package/dist/runtime/utils/layout/block.js +3 -3
- package/dist/runtime/utils/layout/controlbar.js +3 -3
- package/dist/runtime/utils/layout/menuBar.js +28 -0
- package/dist/runtime/utils/node/block.d.ts +1 -2
- package/dist/runtime/utils/node/block.js +13 -21
- package/dist/runtime/utils/style/anchor.js +1 -1
- package/package.json +1 -1
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) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "vue";
|
|
2
|
-
import {
|
|
2
|
+
import { _setCodeBlockStatus, _setListBlockStyle } from "../node/index.js";
|
|
3
3
|
import { CODEBLOCKLANG } from "../event/index.js";
|
|
4
4
|
export function _getControlbarVNodeStructure(store) {
|
|
5
5
|
const childList = [];
|
|
@@ -16,7 +16,7 @@ export function _getControlbarVNodeStructure(store) {
|
|
|
16
16
|
onChange: (event) => {
|
|
17
17
|
const $target = event.currentTarget;
|
|
18
18
|
if ($target !== null) {
|
|
19
|
-
|
|
19
|
+
_setCodeBlockStatus($target.value, store.value.controlStatus.codeBlockLang, store);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
},
|
|
@@ -37,7 +37,7 @@ export function _getControlbarVNodeStructure(store) {
|
|
|
37
37
|
onChange: (event) => {
|
|
38
38
|
const $target = event.currentTarget;
|
|
39
39
|
if ($target !== null) {
|
|
40
|
-
|
|
40
|
+
_setCodeBlockStatus(store.value.controlStatus.codeBlockTheme, $target.value, store);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
},
|
|
@@ -14,6 +14,7 @@ export function _getMenuBarVNodeStructure(store) {
|
|
|
14
14
|
"button",
|
|
15
15
|
{
|
|
16
16
|
class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "url" }],
|
|
17
|
+
type: "button",
|
|
17
18
|
onClick: () => {
|
|
18
19
|
store.value.controlStatus.anchorTabType = "url";
|
|
19
20
|
}
|
|
@@ -24,6 +25,7 @@ export function _getMenuBarVNodeStructure(store) {
|
|
|
24
25
|
"button",
|
|
25
26
|
{
|
|
26
27
|
class: ["de-btn", { "--active": store.value.controlStatus.anchorTabType === "heading" }],
|
|
28
|
+
type: "button",
|
|
27
29
|
onClick: () => {
|
|
28
30
|
store.value.controlStatus.anchorTabType = "heading";
|
|
29
31
|
}
|
|
@@ -43,6 +45,7 @@ export function _getMenuBarVNodeStructure(store) {
|
|
|
43
45
|
"button",
|
|
44
46
|
{
|
|
45
47
|
class: ["de-btn"],
|
|
48
|
+
type: "button",
|
|
46
49
|
onClick: () => {
|
|
47
50
|
_setAnchorTag(store.value.controlStatus.anchorHref, true, store);
|
|
48
51
|
}
|
|
@@ -57,6 +60,7 @@ export function _getMenuBarVNodeStructure(store) {
|
|
|
57
60
|
"button",
|
|
58
61
|
{
|
|
59
62
|
class: ["de-btn", { "--active": store.value.controlStatus.anchorHref === `#${item.id}` }],
|
|
63
|
+
type: "button",
|
|
60
64
|
onClick: () => {
|
|
61
65
|
store.value.activeStatus.anchorInputArea = false;
|
|
62
66
|
_setAnchorTag(item.id, false, store);
|
|
@@ -78,6 +82,7 @@ function __getMenuListStructure(store) {
|
|
|
78
82
|
"button",
|
|
79
83
|
{
|
|
80
84
|
class: ["de-menu", "de-menu-add", "js-de-menu-add"],
|
|
85
|
+
type: "button",
|
|
81
86
|
onClick: () => {
|
|
82
87
|
store.value.activeStatus.addBlockMenu = !store.value.activeStatus.addBlockMenu;
|
|
83
88
|
}
|
|
@@ -92,6 +97,7 @@ function __getMenuListStructure(store) {
|
|
|
92
97
|
"button",
|
|
93
98
|
{
|
|
94
99
|
class: ["de-menu"],
|
|
100
|
+
type: "button",
|
|
95
101
|
onClick: () => {
|
|
96
102
|
_setDecoration("de-bold", store);
|
|
97
103
|
}
|
|
@@ -102,6 +108,7 @@ function __getMenuListStructure(store) {
|
|
|
102
108
|
"button",
|
|
103
109
|
{
|
|
104
110
|
class: ["de-menu"],
|
|
111
|
+
type: "button",
|
|
105
112
|
onClick: () => {
|
|
106
113
|
_setDecoration("de-italic", store);
|
|
107
114
|
}
|
|
@@ -112,6 +119,7 @@ function __getMenuListStructure(store) {
|
|
|
112
119
|
"button",
|
|
113
120
|
{
|
|
114
121
|
class: ["de-menu"],
|
|
122
|
+
type: "button",
|
|
115
123
|
onClick: () => {
|
|
116
124
|
_setDecoration("de-underline", store);
|
|
117
125
|
}
|
|
@@ -122,6 +130,7 @@ function __getMenuListStructure(store) {
|
|
|
122
130
|
"button",
|
|
123
131
|
{
|
|
124
132
|
class: ["de-menu"],
|
|
133
|
+
type: "button",
|
|
125
134
|
onClick: () => {
|
|
126
135
|
_setDecoration("de-strikethrough", store);
|
|
127
136
|
}
|
|
@@ -132,6 +141,7 @@ function __getMenuListStructure(store) {
|
|
|
132
141
|
"button",
|
|
133
142
|
{
|
|
134
143
|
class: ["de-menu"],
|
|
144
|
+
type: "button",
|
|
135
145
|
onClick: () => {
|
|
136
146
|
_setDecoration("de-code", store);
|
|
137
147
|
}
|
|
@@ -146,6 +156,7 @@ function __getMenuListStructure(store) {
|
|
|
146
156
|
"button",
|
|
147
157
|
{
|
|
148
158
|
class: ["de-menu", "js-de-link-btn"],
|
|
159
|
+
type: "button",
|
|
149
160
|
onClick: (event) => {
|
|
150
161
|
_openAnchorArea(event, store);
|
|
151
162
|
}
|
|
@@ -156,6 +167,7 @@ function __getMenuListStructure(store) {
|
|
|
156
167
|
"button",
|
|
157
168
|
{
|
|
158
169
|
class: ["de-menu", { "--disabled": store.value.controlStatus.anchorHref === "" }],
|
|
170
|
+
type: "button",
|
|
159
171
|
onClick: () => {
|
|
160
172
|
_unsetAnchorTag(store);
|
|
161
173
|
}
|
|
@@ -190,6 +202,7 @@ function __getMenuListStructure(store) {
|
|
|
190
202
|
"button",
|
|
191
203
|
{
|
|
192
204
|
class: ["de-menu"],
|
|
205
|
+
type: "button",
|
|
193
206
|
onClick: () => {
|
|
194
207
|
_setTextAlign("left", store);
|
|
195
208
|
}
|
|
@@ -200,6 +213,7 @@ function __getMenuListStructure(store) {
|
|
|
200
213
|
"button",
|
|
201
214
|
{
|
|
202
215
|
class: ["de-menu"],
|
|
216
|
+
type: "button",
|
|
203
217
|
onClick: () => {
|
|
204
218
|
_setTextAlign("center", store);
|
|
205
219
|
}
|
|
@@ -210,6 +224,7 @@ function __getMenuListStructure(store) {
|
|
|
210
224
|
"button",
|
|
211
225
|
{
|
|
212
226
|
class: ["de-menu"],
|
|
227
|
+
type: "button",
|
|
213
228
|
onClick: () => {
|
|
214
229
|
_setTextAlign("right", store);
|
|
215
230
|
}
|
|
@@ -220,6 +235,7 @@ function __getMenuListStructure(store) {
|
|
|
220
235
|
"button",
|
|
221
236
|
{
|
|
222
237
|
class: ["de-menu"],
|
|
238
|
+
type: "button",
|
|
223
239
|
onClick: () => {
|
|
224
240
|
_setTextAlign("justify", store);
|
|
225
241
|
}
|
|
@@ -234,6 +250,7 @@ function __getMenuListStructure(store) {
|
|
|
234
250
|
"button",
|
|
235
251
|
{
|
|
236
252
|
class: ["de-menu"],
|
|
253
|
+
type: "button",
|
|
237
254
|
onClick: () => {
|
|
238
255
|
_setIndent(store, "minus");
|
|
239
256
|
}
|
|
@@ -244,6 +261,7 @@ function __getMenuListStructure(store) {
|
|
|
244
261
|
"button",
|
|
245
262
|
{
|
|
246
263
|
class: ["de-menu"],
|
|
264
|
+
type: "button",
|
|
247
265
|
onClick: () => {
|
|
248
266
|
_setIndent(store, "plus");
|
|
249
267
|
}
|
|
@@ -258,6 +276,7 @@ function __getMenuListStructure(store) {
|
|
|
258
276
|
"button",
|
|
259
277
|
{
|
|
260
278
|
class: ["de-menu"],
|
|
279
|
+
type: "button",
|
|
261
280
|
onClick: () => {
|
|
262
281
|
_moveBlock("up", store);
|
|
263
282
|
}
|
|
@@ -268,6 +287,7 @@ function __getMenuListStructure(store) {
|
|
|
268
287
|
"button",
|
|
269
288
|
{
|
|
270
289
|
class: ["de-menu"],
|
|
290
|
+
type: "button",
|
|
271
291
|
onClick: () => {
|
|
272
292
|
_moveBlock("down", store);
|
|
273
293
|
}
|
|
@@ -285,6 +305,7 @@ function __getBlockListStructure(store) {
|
|
|
285
305
|
"button",
|
|
286
306
|
{
|
|
287
307
|
class: ["de-add-block"],
|
|
308
|
+
type: "button",
|
|
288
309
|
onClick: () => {
|
|
289
310
|
_addBlock("text", store);
|
|
290
311
|
}
|
|
@@ -297,6 +318,7 @@ function __getBlockListStructure(store) {
|
|
|
297
318
|
"button",
|
|
298
319
|
{
|
|
299
320
|
class: ["de-add-block"],
|
|
321
|
+
type: "button",
|
|
300
322
|
onClick: () => {
|
|
301
323
|
_addBlock("heading1", store);
|
|
302
324
|
}
|
|
@@ -309,6 +331,7 @@ function __getBlockListStructure(store) {
|
|
|
309
331
|
"button",
|
|
310
332
|
{
|
|
311
333
|
class: ["de-add-block"],
|
|
334
|
+
type: "button",
|
|
312
335
|
onClick: () => {
|
|
313
336
|
_addBlock("heading2", store);
|
|
314
337
|
}
|
|
@@ -321,6 +344,7 @@ function __getBlockListStructure(store) {
|
|
|
321
344
|
"button",
|
|
322
345
|
{
|
|
323
346
|
class: ["de-add-block"],
|
|
347
|
+
type: "button",
|
|
324
348
|
onClick: () => {
|
|
325
349
|
_addBlock("heading3", store);
|
|
326
350
|
}
|
|
@@ -333,6 +357,7 @@ function __getBlockListStructure(store) {
|
|
|
333
357
|
"button",
|
|
334
358
|
{
|
|
335
359
|
class: ["de-add-block"],
|
|
360
|
+
type: "button",
|
|
336
361
|
onClick: () => {
|
|
337
362
|
_addBlock("ul", store);
|
|
338
363
|
}
|
|
@@ -345,6 +370,7 @@ function __getBlockListStructure(store) {
|
|
|
345
370
|
"button",
|
|
346
371
|
{
|
|
347
372
|
class: ["de-add-block"],
|
|
373
|
+
type: "button",
|
|
348
374
|
onClick: () => {
|
|
349
375
|
_addBlock("ol", store);
|
|
350
376
|
}
|
|
@@ -357,6 +383,7 @@ function __getBlockListStructure(store) {
|
|
|
357
383
|
"button",
|
|
358
384
|
{
|
|
359
385
|
class: ["de-add-block"],
|
|
386
|
+
type: "button",
|
|
360
387
|
onClick: () => {
|
|
361
388
|
_addBlock("code", store);
|
|
362
389
|
}
|
|
@@ -369,6 +396,7 @@ function __getBlockListStructure(store) {
|
|
|
369
396
|
"button",
|
|
370
397
|
{
|
|
371
398
|
class: ["de-add-block"],
|
|
399
|
+
type: "button",
|
|
372
400
|
onClick: () => {
|
|
373
401
|
_addBlock("divider", store);
|
|
374
402
|
}
|
|
@@ -15,6 +15,5 @@ export declare function _createCustomBlock(data: DECustomBlock): HTMLDivElement;
|
|
|
15
15
|
export declare function _createDividerBlock(): HTMLDivElement;
|
|
16
16
|
export declare function _updateCurrentBlock(event: Event, store: Ref<DragonEditorStore>): void;
|
|
17
17
|
export declare function _updateHeadingBlockList(store: Ref<DragonEditorStore>): void;
|
|
18
|
-
export declare function
|
|
19
|
-
export declare function _setCodeBlockLanguage(language: DECodeblockLang, store: Ref<DragonEditorStore>): Promise<void>;
|
|
18
|
+
export declare function _setCodeBlockStatus(theme: DECodeblockTheme, language: DECodeblockLang, store: Ref<DragonEditorStore>): Promise<void>;
|
|
20
19
|
export declare function _setListBlockStyle(style: DEListStyle, store: Ref<DragonEditorStore>): void;
|
|
@@ -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) => {
|
|
@@ -213,33 +222,14 @@ export function _updateHeadingBlockList(store) {
|
|
|
213
222
|
});
|
|
214
223
|
}
|
|
215
224
|
}
|
|
216
|
-
export async function
|
|
217
|
-
if (store.value.controlStatus.$currentBlock !== null) {
|
|
218
|
-
const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
|
|
219
|
-
const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
|
|
220
|
-
if ($target !== null && $code !== null) {
|
|
221
|
-
const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: store.value.controlStatus.codeBlockLang, theme });
|
|
222
|
-
const $div = document.createElement("div");
|
|
223
|
-
$div.innerHTML = convert;
|
|
224
|
-
const $childCode = $div.querySelector("code");
|
|
225
|
-
if ($childCode !== null) {
|
|
226
|
-
$code.innerHTML = $childCode.innerHTML;
|
|
227
|
-
store.value.controlStatus.codeBlockTheme = theme;
|
|
228
|
-
store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
|
|
229
|
-
}
|
|
230
|
-
_updateCursorData(store);
|
|
231
|
-
_updateModelData(store);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
export async function _setCodeBlockLanguage(language, store) {
|
|
225
|
+
export async function _setCodeBlockStatus(theme, language, store) {
|
|
236
226
|
if (store.value.controlStatus.$currentBlock !== null) {
|
|
237
227
|
const $target = store.value.controlStatus.$currentBlock.querySelector(".de-language");
|
|
238
228
|
const $code = store.value.controlStatus.$currentBlock.querySelector(".de-code-content");
|
|
239
229
|
if ($target !== null && $code !== null) {
|
|
240
230
|
const targetValue = CODEBLOCKLANG.find((item) => item.code === language);
|
|
241
231
|
if (targetValue !== void 0) {
|
|
242
|
-
const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: language, theme
|
|
232
|
+
const convert = await store.value.codeToHtml($code.textContent ?? "", { lang: language, theme });
|
|
243
233
|
const $div = document.createElement("div");
|
|
244
234
|
$div.innerHTML = convert;
|
|
245
235
|
const $childCode = $div.querySelector("code");
|
|
@@ -247,6 +237,8 @@ export async function _setCodeBlockLanguage(language, store) {
|
|
|
247
237
|
$target.textContent = targetValue.text;
|
|
248
238
|
$code.innerHTML = $childCode.innerHTML;
|
|
249
239
|
store.value.controlStatus.codeBlockLang = targetValue.code;
|
|
240
|
+
store.value.controlStatus.codeBlockTheme = theme;
|
|
241
|
+
store.value.controlStatus.$currentBlock.dataset["theme"] = theme;
|
|
250
242
|
_updateCursorData(store);
|
|
251
243
|
_updateModelData(store);
|
|
252
244
|
}
|
|
@@ -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);
|