@ckeditor/ckeditor5-autoformat 48.2.0 → 48.3.0-alpha.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/dist/augmentation.d.ts +8 -8
- package/dist/autoformat.d.ts +84 -84
- package/dist/blockautoformatediting.d.ts +52 -52
- package/dist/index-content.css +1 -0
- package/dist/index-editor.css +1 -0
- package/dist/index.css +0 -2
- package/dist/index.d.ts +9 -9
- package/dist/index.js +403 -519
- package/dist/index.js.map +1 -1
- package/dist/inlineautoformatediting.d.ts +77 -77
- package/package.json +6 -6
- package/dist/index.css.map +0 -1
package/dist/index.js
CHANGED
|
@@ -2,540 +2,424 @@
|
|
|
2
2
|
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
4
4
|
*/
|
|
5
|
-
import { Plugin } from
|
|
6
|
-
import { Delete } from
|
|
7
|
-
import { ModelLiveRange, ModelSchemaContext } from
|
|
8
|
-
import { first } from
|
|
5
|
+
import { Plugin } from "@ckeditor/ckeditor5-core";
|
|
6
|
+
import { Delete } from "@ckeditor/ckeditor5-typing";
|
|
7
|
+
import { ModelLiveRange, ModelSchemaContext } from "@ckeditor/ckeditor5-engine";
|
|
8
|
+
import { first } from "@ckeditor/ckeditor5-utils";
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
const match = pattern.exec(firstNode.data.substr(0, range.end.offset));
|
|
97
|
-
// ...and this text node's data match the pattern.
|
|
98
|
-
if (!match) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
// Use enqueueChange to create new batch to separate typing batch from the auto-format changes.
|
|
102
|
-
editor.model.enqueueChange((writer)=>{
|
|
103
|
-
const selection = editor.model.document.selection;
|
|
104
|
-
// Matched range.
|
|
105
|
-
const start = writer.createPositionAt(blockToFormat, 0);
|
|
106
|
-
const end = writer.createPositionAt(blockToFormat, match[0].length);
|
|
107
|
-
const range = new ModelLiveRange(start, end);
|
|
108
|
-
const wasChanged = callback({
|
|
109
|
-
match
|
|
110
|
-
});
|
|
111
|
-
// Remove matched text.
|
|
112
|
-
if (wasChanged !== false) {
|
|
113
|
-
// Store selection attributes to restore them after matched text removed.
|
|
114
|
-
const selectionAttributes = Array.from(selection.getAttributes());
|
|
115
|
-
writer.remove(range);
|
|
116
|
-
const selectionRange = selection.getFirstRange();
|
|
117
|
-
const blockRange = writer.createRangeIn(blockToFormat);
|
|
118
|
-
// If the block is empty and the document selection has been moved when
|
|
119
|
-
// applying formatting (e.g. is now in newly created block).
|
|
120
|
-
if (blockToFormat.isEmpty && !blockRange.isEqual(selectionRange) && !blockRange.containsRange(selectionRange, true)) {
|
|
121
|
-
writer.remove(blockToFormat);
|
|
122
|
-
}
|
|
123
|
-
// Restore selection attributes.
|
|
124
|
-
restoreSelectionAttributes(writer, selection, selectionAttributes);
|
|
125
|
-
}
|
|
126
|
-
range.detach();
|
|
127
|
-
editor.model.enqueueChange(()=>{
|
|
128
|
-
const deletePlugin = editor.plugins.get('Delete');
|
|
129
|
-
deletePlugin.requestUndoOnBackspace();
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
|
-
});
|
|
11
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
12
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Creates a listener triggered on {@link module:engine/model/document~ModelDocument#event:change:data `change:data`} event in the document.
|
|
16
|
+
* Calls the callback when inserted text matches the regular expression or the command name
|
|
17
|
+
* if provided instead of the callback.
|
|
18
|
+
*
|
|
19
|
+
* Examples of usage:
|
|
20
|
+
*
|
|
21
|
+
* To convert a paragraph into heading 1 when `- ` is typed, using just the command name:
|
|
22
|
+
*
|
|
23
|
+
* ```ts
|
|
24
|
+
* blockAutoformatEditing( editor, plugin, /^\- $/, 'heading1' );
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* To convert a paragraph into heading 1 when `- ` is typed, using just the callback:
|
|
28
|
+
*
|
|
29
|
+
* ```ts
|
|
30
|
+
* blockAutoformatEditing( editor, plugin, /^\- $/, ( context ) => {
|
|
31
|
+
* const { match } = context;
|
|
32
|
+
* const headingLevel = match[ 1 ].length;
|
|
33
|
+
*
|
|
34
|
+
* editor.execute( 'heading', {
|
|
35
|
+
* formatId: `heading${ headingLevel }`
|
|
36
|
+
* } );
|
|
37
|
+
* } );
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @param editor The editor instance.
|
|
41
|
+
* @param plugin The autoformat plugin instance.
|
|
42
|
+
* @param pattern The regular expression to execute on just inserted text. The regular expression is tested against the text
|
|
43
|
+
* from the beginning until the caret position.
|
|
44
|
+
* @param callbackOrCommand The callback to execute or the command to run when the text is matched.
|
|
45
|
+
* In case of providing the callback, it receives the following parameter:
|
|
46
|
+
* * match RegExp.exec() result of matching the pattern to inserted text.
|
|
47
|
+
*/
|
|
48
|
+
function blockAutoformatEditing(editor, plugin, pattern, callbackOrCommand) {
|
|
49
|
+
let callback;
|
|
50
|
+
let command = null;
|
|
51
|
+
if (typeof callbackOrCommand == "function") callback = callbackOrCommand;
|
|
52
|
+
else {
|
|
53
|
+
command = editor.commands.get(callbackOrCommand);
|
|
54
|
+
callback = () => {
|
|
55
|
+
editor.execute(callbackOrCommand);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
editor.model.document.on("change:data", (evt, batch) => {
|
|
59
|
+
if (command && !command.isEnabled || !plugin.isEnabled) return;
|
|
60
|
+
const range = first(editor.model.document.selection.getRanges());
|
|
61
|
+
if (!range.isCollapsed) return;
|
|
62
|
+
if (batch.isUndo || !batch.isLocal) return;
|
|
63
|
+
const changes = Array.from(editor.model.document.differ.getChanges());
|
|
64
|
+
const entry = changes[0];
|
|
65
|
+
if (changes.length != 1 || entry.type !== "insert" || entry.name != "$text" || entry.length != 1) return;
|
|
66
|
+
const blockToFormat = entry.position.parent;
|
|
67
|
+
if (blockToFormat.is("element", "codeBlock")) return;
|
|
68
|
+
if (blockToFormat.is("element", "listItem") && typeof callbackOrCommand !== "function" && ![
|
|
69
|
+
"numberedList",
|
|
70
|
+
"bulletedList",
|
|
71
|
+
"todoList"
|
|
72
|
+
].includes(callbackOrCommand)) return;
|
|
73
|
+
if (command && command.value === true) return;
|
|
74
|
+
const firstNode = blockToFormat.getChild(0);
|
|
75
|
+
const firstNodeRange = editor.model.createRangeOn(firstNode);
|
|
76
|
+
if (!firstNodeRange.containsRange(range) && !range.end.isEqual(firstNodeRange.end)) return;
|
|
77
|
+
const match = pattern.exec(firstNode.data.substr(0, range.end.offset));
|
|
78
|
+
if (!match) return;
|
|
79
|
+
editor.model.enqueueChange((writer) => {
|
|
80
|
+
const selection = editor.model.document.selection;
|
|
81
|
+
const range = new ModelLiveRange(writer.createPositionAt(blockToFormat, 0), writer.createPositionAt(blockToFormat, match[0].length));
|
|
82
|
+
if (callback({ match }) !== false) {
|
|
83
|
+
const selectionAttributes = Array.from(selection.getAttributes());
|
|
84
|
+
writer.remove(range);
|
|
85
|
+
const selectionRange = selection.getFirstRange();
|
|
86
|
+
const blockRange = writer.createRangeIn(blockToFormat);
|
|
87
|
+
if (blockToFormat.isEmpty && !blockRange.isEqual(selectionRange) && !blockRange.containsRange(selectionRange, true)) writer.remove(blockToFormat);
|
|
88
|
+
restoreSelectionAttributes(writer, selection, selectionAttributes);
|
|
89
|
+
}
|
|
90
|
+
range.detach();
|
|
91
|
+
editor.model.enqueueChange(() => {
|
|
92
|
+
editor.plugins.get("Delete").requestUndoOnBackspace();
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
});
|
|
133
96
|
}
|
|
134
97
|
/**
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
for (const [attributeName, attributeValue] of selectionAttributes){
|
|
144
|
-
if (schema.checkAttribute(selectionSchemaContext, attributeName)) {
|
|
145
|
-
writer.setSelectionAttribute(attributeName, attributeValue);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
98
|
+
* Restore allowed selection attributes.
|
|
99
|
+
*/
|
|
100
|
+
function restoreSelectionAttributes(writer, selection, selectionAttributes) {
|
|
101
|
+
const schema = writer.model.schema;
|
|
102
|
+
let selectionSchemaContext = new ModelSchemaContext(selection.getFirstPosition());
|
|
103
|
+
if (schema.checkChild(selectionSchemaContext, "$text")) selectionSchemaContext = selectionSchemaContext.push("$text");
|
|
104
|
+
for (const [attributeName, attributeValue] of selectionAttributes) if (schema.checkAttribute(selectionSchemaContext, attributeName)) writer.setSelectionAttribute(attributeName, attributeValue);
|
|
148
105
|
}
|
|
149
106
|
|
|
150
107
|
/**
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
*
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
260
|
-
return {
|
|
261
|
-
remove,
|
|
262
|
-
format
|
|
263
|
-
};
|
|
264
|
-
});
|
|
265
|
-
editor.model.document.on('change:data', (evt, batch)=>{
|
|
266
|
-
if (batch.isUndo || !batch.isLocal || !plugin.isEnabled) {
|
|
267
|
-
return;
|
|
268
|
-
}
|
|
269
|
-
const model = editor.model;
|
|
270
|
-
const selection = model.document.selection;
|
|
271
|
-
// Do nothing if selection is not collapsed.
|
|
272
|
-
if (!selection.isCollapsed) {
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
const changes = Array.from(model.document.differ.getChanges());
|
|
276
|
-
const entry = changes[0];
|
|
277
|
-
// Typing is represented by only a single change.
|
|
278
|
-
if (changes.length != 1 || entry.type !== 'insert' || entry.name != '$text' || entry.length != 1) {
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
const focus = selection.focus;
|
|
282
|
-
const block = focus.parent;
|
|
283
|
-
const { text, range } = getTextAfterCode(model.createRange(model.createPositionAt(block, 0), focus), model);
|
|
284
|
-
const testOutput = testCallback(text);
|
|
285
|
-
const rangesToFormat = testOutputToRanges(range.start, testOutput.format, model);
|
|
286
|
-
const rangesToRemove = testOutputToRanges(range.start, testOutput.remove, model);
|
|
287
|
-
if (!(rangesToFormat.length && rangesToRemove.length)) {
|
|
288
|
-
return;
|
|
289
|
-
}
|
|
290
|
-
// Use enqueueChange to create new batch to separate typing batch from the auto-format changes.
|
|
291
|
-
model.enqueueChange((writer)=>{
|
|
292
|
-
// Apply format.
|
|
293
|
-
const hasChanged = formatCallback(writer, rangesToFormat);
|
|
294
|
-
// Strict check on `false` to have backward compatibility (when callbacks were returning `undefined`).
|
|
295
|
-
if (hasChanged === false) {
|
|
296
|
-
return;
|
|
297
|
-
}
|
|
298
|
-
// Remove delimiters - use reversed order to not mix the offsets while removing.
|
|
299
|
-
for (const range of rangesToRemove.reverse()){
|
|
300
|
-
writer.remove(range);
|
|
301
|
-
}
|
|
302
|
-
model.enqueueChange(()=>{
|
|
303
|
-
const deletePlugin = editor.plugins.get('Delete');
|
|
304
|
-
deletePlugin.requestUndoOnBackspace();
|
|
305
|
-
});
|
|
306
|
-
});
|
|
307
|
-
});
|
|
108
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
109
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
110
|
+
*/
|
|
111
|
+
/**
|
|
112
|
+
* Enables autoformatting mechanism for a given {@link module:core/editor/editor~Editor}.
|
|
113
|
+
*
|
|
114
|
+
* It formats the matched text by applying the given model attribute or by running the provided formatting callback.
|
|
115
|
+
* On every {@link module:engine/model/document~ModelDocument#event:change:data data change} in the model document
|
|
116
|
+
* the autoformatting engine checks the text on the left of the selection
|
|
117
|
+
* and executes the provided action if the text matches given criteria (regular expression or callback).
|
|
118
|
+
*
|
|
119
|
+
* @param editor The editor instance.
|
|
120
|
+
* @param plugin The autoformat plugin instance.
|
|
121
|
+
* @param testRegexpOrCallback The regular expression or callback to execute on text.
|
|
122
|
+
* Provided regular expression *must* have three capture groups. The first and the third capture group
|
|
123
|
+
* should match opening and closing delimiters. The second capture group should match the text to format.
|
|
124
|
+
*
|
|
125
|
+
* ```ts
|
|
126
|
+
* // Matches the `**bold text**` pattern.
|
|
127
|
+
* // There are three capturing groups:
|
|
128
|
+
* // - The first to match the starting `**` delimiter.
|
|
129
|
+
* // - The second to match the text to format.
|
|
130
|
+
* // - The third to match the ending `**` delimiter.
|
|
131
|
+
* inlineAutoformatEditing( editor, plugin, /(\*\*)([^\*]+?)(\*\*)$/g, formatCallback );
|
|
132
|
+
* ```
|
|
133
|
+
*
|
|
134
|
+
* When a function is provided instead of the regular expression, it will be executed with the text to match as a parameter.
|
|
135
|
+
* The function should return proper "ranges" to delete and format.
|
|
136
|
+
*
|
|
137
|
+
* ```ts
|
|
138
|
+
* {
|
|
139
|
+
* remove: [
|
|
140
|
+
* [ 0, 1 ], // Remove the first letter from the given text.
|
|
141
|
+
* [ 5, 6 ] // Remove the 6th letter from the given text.
|
|
142
|
+
* ],
|
|
143
|
+
* format: [
|
|
144
|
+
* [ 1, 5 ] // Format all letters from 2nd to 5th.
|
|
145
|
+
* ]
|
|
146
|
+
* }
|
|
147
|
+
* ```
|
|
148
|
+
*
|
|
149
|
+
* @param formatCallback A callback to apply actual formatting.
|
|
150
|
+
* It should return `false` if changes should not be applied (e.g. if a command is disabled).
|
|
151
|
+
*
|
|
152
|
+
* ```ts
|
|
153
|
+
* inlineAutoformatEditing( editor, plugin, /(\*\*)([^\*]+?)(\*\*)$/g, ( writer, rangesToFormat ) => {
|
|
154
|
+
* const command = editor.commands.get( 'bold' );
|
|
155
|
+
*
|
|
156
|
+
* if ( !command.isEnabled ) {
|
|
157
|
+
* return false;
|
|
158
|
+
* }
|
|
159
|
+
*
|
|
160
|
+
* const validRanges = editor.model.schema.getValidRanges( rangesToFormat, 'bold' );
|
|
161
|
+
*
|
|
162
|
+
* for ( let range of validRanges ) {
|
|
163
|
+
* writer.setAttribute( 'bold', true, range );
|
|
164
|
+
* }
|
|
165
|
+
* } );
|
|
166
|
+
* ```
|
|
167
|
+
*/
|
|
168
|
+
function inlineAutoformatEditing(editor, plugin, testRegexpOrCallback, formatCallback) {
|
|
169
|
+
let regExp;
|
|
170
|
+
let testCallback;
|
|
171
|
+
if (testRegexpOrCallback instanceof RegExp) regExp = testRegexpOrCallback;
|
|
172
|
+
else testCallback = testRegexpOrCallback;
|
|
173
|
+
testCallback = testCallback || ((text) => {
|
|
174
|
+
let result;
|
|
175
|
+
const remove = [];
|
|
176
|
+
const format = [];
|
|
177
|
+
while ((result = regExp.exec(text)) !== null) {
|
|
178
|
+
if (result && result.length < 4) break;
|
|
179
|
+
let { index, "1": leftDel, "2": content, "3": rightDel } = result;
|
|
180
|
+
const found = leftDel + content + rightDel;
|
|
181
|
+
index += result[0].length - found.length;
|
|
182
|
+
const delStart = [index, index + leftDel.length];
|
|
183
|
+
const delEnd = [index + leftDel.length + content.length, index + leftDel.length + content.length + rightDel.length];
|
|
184
|
+
remove.push(delStart);
|
|
185
|
+
remove.push(delEnd);
|
|
186
|
+
format.push([index + leftDel.length, index + leftDel.length + content.length]);
|
|
187
|
+
}
|
|
188
|
+
return {
|
|
189
|
+
remove,
|
|
190
|
+
format
|
|
191
|
+
};
|
|
192
|
+
});
|
|
193
|
+
editor.model.document.on("change:data", (evt, batch) => {
|
|
194
|
+
if (batch.isUndo || !batch.isLocal || !plugin.isEnabled) return;
|
|
195
|
+
const model = editor.model;
|
|
196
|
+
const selection = model.document.selection;
|
|
197
|
+
if (!selection.isCollapsed) return;
|
|
198
|
+
const changes = Array.from(model.document.differ.getChanges());
|
|
199
|
+
const entry = changes[0];
|
|
200
|
+
if (changes.length != 1 || entry.type !== "insert" || entry.name != "$text" || entry.length != 1) return;
|
|
201
|
+
const focus = selection.focus;
|
|
202
|
+
const block = focus.parent;
|
|
203
|
+
const { text, range } = getTextAfterCode(model.createRange(model.createPositionAt(block, 0), focus), model);
|
|
204
|
+
const testOutput = testCallback(text);
|
|
205
|
+
const rangesToFormat = testOutputToRanges(range.start, testOutput.format, model);
|
|
206
|
+
const rangesToRemove = testOutputToRanges(range.start, testOutput.remove, model);
|
|
207
|
+
if (!(rangesToFormat.length && rangesToRemove.length)) return;
|
|
208
|
+
model.enqueueChange((writer) => {
|
|
209
|
+
if (formatCallback(writer, rangesToFormat) === false) return;
|
|
210
|
+
for (const range of rangesToRemove.reverse()) writer.remove(range);
|
|
211
|
+
model.enqueueChange(() => {
|
|
212
|
+
editor.plugins.get("Delete").requestUndoOnBackspace();
|
|
213
|
+
});
|
|
214
|
+
});
|
|
215
|
+
});
|
|
308
216
|
}
|
|
309
217
|
/**
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
218
|
+
* Converts output of the test function provided to the inlineAutoformatEditing and converts it to the model ranges
|
|
219
|
+
* inside provided block.
|
|
220
|
+
*/
|
|
221
|
+
function testOutputToRanges(start, arrays, model) {
|
|
222
|
+
return arrays.filter((array) => array[0] !== void 0 && array[1] !== void 0).map((array) => {
|
|
223
|
+
return model.createRange(start.getShiftedBy(array[0]), start.getShiftedBy(array[1]));
|
|
224
|
+
});
|
|
316
225
|
}
|
|
317
226
|
/**
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
};
|
|
227
|
+
* Returns the last text line after the last code element from the given range.
|
|
228
|
+
* It is similar to {@link module:typing/utils/getlasttextline.getLastTextLine `getLastTextLine()`},
|
|
229
|
+
* but it ignores any text before the last `code`.
|
|
230
|
+
*/
|
|
231
|
+
function getTextAfterCode(range, model) {
|
|
232
|
+
let start = range.start;
|
|
233
|
+
return {
|
|
234
|
+
text: Array.from(range.getItems()).reduce((rangeText, node) => {
|
|
235
|
+
if (!(node.is("$text") || node.is("$textProxy")) || node.getAttribute("code")) {
|
|
236
|
+
start = model.createPositionAfter(node);
|
|
237
|
+
return "";
|
|
238
|
+
}
|
|
239
|
+
return rangeText + node.data;
|
|
240
|
+
}, ""),
|
|
241
|
+
range: model.createRange(start, range.end)
|
|
242
|
+
};
|
|
335
243
|
}
|
|
336
244
|
|
|
337
245
|
/**
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
const selection = editor.model.document.selection;
|
|
500
|
-
if (editor.commands.get('codeBlock')) {
|
|
501
|
-
blockAutoformatEditing(editor, this, /^```$/, ()=>{
|
|
502
|
-
if (selection.getFirstPosition().parent.is('element', 'listItem')) {
|
|
503
|
-
return false;
|
|
504
|
-
}
|
|
505
|
-
this.editor.execute('codeBlock', {
|
|
506
|
-
usePreviousLanguageChoice: true
|
|
507
|
-
});
|
|
508
|
-
});
|
|
509
|
-
}
|
|
510
|
-
}
|
|
511
|
-
/**
|
|
512
|
-
* Adds autoformatting related to {@link module:horizontal-line/horizontalline~HorizontalLine}.
|
|
513
|
-
*
|
|
514
|
-
* When typed:
|
|
515
|
-
* - `` --- `` – Will be replaced with a horizontal line.
|
|
516
|
-
*/ _addHorizontalLineAutoformats() {
|
|
517
|
-
if (this.editor.commands.get('horizontalLine')) {
|
|
518
|
-
blockAutoformatEditing(this.editor, this, /^---$/, 'horizontalLine');
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
}
|
|
246
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
247
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
248
|
+
*/
|
|
249
|
+
/**
|
|
250
|
+
* Enables a set of predefined autoformatting actions.
|
|
251
|
+
*
|
|
252
|
+
* For a detailed overview, check the {@glink features/autoformat Autoformatting} feature guide
|
|
253
|
+
* and the {@glink api/autoformat package page}.
|
|
254
|
+
*/
|
|
255
|
+
var Autoformat = class extends Plugin {
|
|
256
|
+
/**
|
|
257
|
+
* @inheritDoc
|
|
258
|
+
*/
|
|
259
|
+
static get requires() {
|
|
260
|
+
return [Delete];
|
|
261
|
+
}
|
|
262
|
+
/**
|
|
263
|
+
* @inheritDoc
|
|
264
|
+
*/
|
|
265
|
+
static get pluginName() {
|
|
266
|
+
return "Autoformat";
|
|
267
|
+
}
|
|
268
|
+
/**
|
|
269
|
+
* @inheritDoc
|
|
270
|
+
*/
|
|
271
|
+
static get isOfficialPlugin() {
|
|
272
|
+
return true;
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* @inheritDoc
|
|
276
|
+
*/
|
|
277
|
+
afterInit() {
|
|
278
|
+
const editor = this.editor;
|
|
279
|
+
const t = this.editor.t;
|
|
280
|
+
this._addListAutoformats();
|
|
281
|
+
this._addBasicStylesAutoformats();
|
|
282
|
+
this._addHeadingAutoformats();
|
|
283
|
+
this._addBlockQuoteAutoformats();
|
|
284
|
+
this._addCodeBlockAutoformats();
|
|
285
|
+
this._addHorizontalLineAutoformats();
|
|
286
|
+
editor.accessibility.addKeystrokeInfos({ keystrokes: [{
|
|
287
|
+
label: t("Revert autoformatting action"),
|
|
288
|
+
keystroke: "Backspace"
|
|
289
|
+
}] });
|
|
290
|
+
}
|
|
291
|
+
/**
|
|
292
|
+
* Adds autoformatting related to the {@link module:list/list~List}.
|
|
293
|
+
*
|
|
294
|
+
* When typed:
|
|
295
|
+
* - `* ` or `- ` – A paragraph will be changed into a bulleted list.
|
|
296
|
+
* - `<number>. ` or `<number>) ` – A paragraph will be changed into a numbered list.
|
|
297
|
+
* If the paragraph is adjacent to an existing list, the typed number is ignored and the item joins the list
|
|
298
|
+
* as the next sequential item. Otherwise, a new list is created with the `listStart` attribute set to the typed number
|
|
299
|
+
* (when the {@link module:list/listproperties~ListProperties start index feature} is enabled).
|
|
300
|
+
* - `[] ` or `[ ] ` – A paragraph will be changed into a to-do list.
|
|
301
|
+
* - `[x] ` or `[ x ] ` – A paragraph will be changed into a checked to-do list.
|
|
302
|
+
*/
|
|
303
|
+
_addListAutoformats() {
|
|
304
|
+
const commands = this.editor.commands;
|
|
305
|
+
if (commands.get("bulletedList")) blockAutoformatEditing(this.editor, this, /^[*-]\s$/, "bulletedList");
|
|
306
|
+
if (commands.get("numberedList")) {
|
|
307
|
+
const numberedListCommand = commands.get("numberedList");
|
|
308
|
+
const hasStartIndexFeature = !!commands.get("listStart");
|
|
309
|
+
blockAutoformatEditing(this.editor, this, /^(\d+)[.|)]\s$/, ({ match }) => {
|
|
310
|
+
if (!numberedListCommand.isEnabled || numberedListCommand.value === true) return false;
|
|
311
|
+
this.editor.execute("numberedList", hasStartIndexFeature ? { additionalAttributes: { listStart: parseInt(match[1]) } } : void 0);
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
if (commands.get("todoList")) blockAutoformatEditing(this.editor, this, /^\[\s?\]\s$/, "todoList");
|
|
315
|
+
if (commands.get("checkTodoList")) blockAutoformatEditing(this.editor, this, /^\[\s?x\s?\]\s$/, () => {
|
|
316
|
+
this.editor.execute("todoList");
|
|
317
|
+
this.editor.execute("checkTodoList");
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
/**
|
|
321
|
+
* Adds autoformatting related to the {@link module:basic-styles/bold~Bold},
|
|
322
|
+
* {@link module:basic-styles/italic~Italic}, {@link module:basic-styles/code~Code}
|
|
323
|
+
* and {@link module:basic-styles/strikethrough~Strikethrough}
|
|
324
|
+
*
|
|
325
|
+
* When typed:
|
|
326
|
+
* - `**foobar**` – `**` characters are removed and `foobar` is set to bold,
|
|
327
|
+
* - `__foobar__` – `__` characters are removed and `foobar` is set to bold,
|
|
328
|
+
* - `*foobar*` – `*` characters are removed and `foobar` is set to italic,
|
|
329
|
+
* - `_foobar_` – `_` characters are removed and `foobar` is set to italic,
|
|
330
|
+
* - ``` `foobar` – ``` ` ``` characters are removed and `foobar` is set to code,
|
|
331
|
+
* - `~~foobar~~` – `~~` characters are removed and `foobar` is set to strikethrough.
|
|
332
|
+
*/
|
|
333
|
+
_addBasicStylesAutoformats() {
|
|
334
|
+
const commands = this.editor.commands;
|
|
335
|
+
if (commands.get("bold")) {
|
|
336
|
+
const boldCallback = getCallbackFunctionForInlineAutoformat(this.editor, "bold");
|
|
337
|
+
inlineAutoformatEditing(this.editor, this, /(?:^|\s)(\*\*)([^*]+)(\*\*)$/g, boldCallback);
|
|
338
|
+
inlineAutoformatEditing(this.editor, this, /(?:^|\s)(__)([^_]+)(__)$/g, boldCallback);
|
|
339
|
+
}
|
|
340
|
+
if (commands.get("italic")) {
|
|
341
|
+
const italicCallback = getCallbackFunctionForInlineAutoformat(this.editor, "italic");
|
|
342
|
+
inlineAutoformatEditing(this.editor, this, /(?:^|\s)(\*)([^*_]+)(\*)$/g, italicCallback);
|
|
343
|
+
inlineAutoformatEditing(this.editor, this, /(?:^|\s)(_)([^_]+)(_)$/g, italicCallback);
|
|
344
|
+
}
|
|
345
|
+
if (commands.get("code")) {
|
|
346
|
+
const codeCallback = getCallbackFunctionForInlineAutoformat(this.editor, "code");
|
|
347
|
+
inlineAutoformatEditing(this.editor, this, /(`)([^`]+)(`)$/g, codeCallback);
|
|
348
|
+
}
|
|
349
|
+
if (commands.get("strikethrough")) {
|
|
350
|
+
const strikethroughCallback = getCallbackFunctionForInlineAutoformat(this.editor, "strikethrough");
|
|
351
|
+
inlineAutoformatEditing(this.editor, this, /(~~)([^~]+)(~~)$/g, strikethroughCallback);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
/**
|
|
355
|
+
* Adds autoformatting related to {@link module:heading/heading~Heading}.
|
|
356
|
+
*
|
|
357
|
+
* It is using a number at the end of the command name to associate it with the proper trigger:
|
|
358
|
+
*
|
|
359
|
+
* * `heading` with a `heading1` value will be executed when typing `#`,
|
|
360
|
+
* * `heading` with a `heading2` value will be executed when typing `##`,
|
|
361
|
+
* * ... up to `heading6` for `######`.
|
|
362
|
+
*/
|
|
363
|
+
_addHeadingAutoformats() {
|
|
364
|
+
const command = this.editor.commands.get("heading");
|
|
365
|
+
if (command) command.modelElements.filter((name) => name.match(/^heading[1-6]$/)).forEach((modelName) => {
|
|
366
|
+
const level = modelName[7];
|
|
367
|
+
const pattern = new RegExp(`^(#{${level}})\\s$`);
|
|
368
|
+
blockAutoformatEditing(this.editor, this, pattern, () => {
|
|
369
|
+
if (!command.isEnabled || command.value === modelName) return false;
|
|
370
|
+
this.editor.execute("heading", { value: modelName });
|
|
371
|
+
});
|
|
372
|
+
});
|
|
373
|
+
}
|
|
374
|
+
/**
|
|
375
|
+
* Adds autoformatting related to {@link module:block-quote/blockquote~BlockQuote}.
|
|
376
|
+
*
|
|
377
|
+
* When typed:
|
|
378
|
+
* * `> ` – A paragraph will be changed to a block quote.
|
|
379
|
+
*/
|
|
380
|
+
_addBlockQuoteAutoformats() {
|
|
381
|
+
if (this.editor.commands.get("blockQuote")) blockAutoformatEditing(this.editor, this, /^>\s$/, "blockQuote");
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Adds autoformatting related to {@link module:code-block/codeblock~CodeBlock}.
|
|
385
|
+
*
|
|
386
|
+
* When typed:
|
|
387
|
+
* - `` ``` `` – A paragraph will be changed to a code block.
|
|
388
|
+
*/
|
|
389
|
+
_addCodeBlockAutoformats() {
|
|
390
|
+
const editor = this.editor;
|
|
391
|
+
const selection = editor.model.document.selection;
|
|
392
|
+
if (editor.commands.get("codeBlock")) blockAutoformatEditing(editor, this, /^```$/, () => {
|
|
393
|
+
if (selection.getFirstPosition().parent.is("element", "listItem")) return false;
|
|
394
|
+
this.editor.execute("codeBlock", { usePreviousLanguageChoice: true });
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
/**
|
|
398
|
+
* Adds autoformatting related to {@link module:horizontal-line/horizontalline~HorizontalLine}.
|
|
399
|
+
*
|
|
400
|
+
* When typed:
|
|
401
|
+
* - `` --- `` – Will be replaced with a horizontal line.
|
|
402
|
+
*/
|
|
403
|
+
_addHorizontalLineAutoformats() {
|
|
404
|
+
if (this.editor.commands.get("horizontalLine")) blockAutoformatEditing(this.editor, this, /^---$/, "horizontalLine");
|
|
405
|
+
}
|
|
406
|
+
};
|
|
522
407
|
/**
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
writer.setAttribute(attributeKey, true, range);
|
|
533
|
-
}
|
|
534
|
-
// After applying attribute to the text, remove given attribute from the selection.
|
|
535
|
-
// This way user is able to type a text without attribute used by auto formatter.
|
|
536
|
-
writer.removeSelectionAttribute(attributeKey);
|
|
537
|
-
};
|
|
408
|
+
* Helper function for getting `inlineAutoformatEditing` callbacks that checks if command is enabled.
|
|
409
|
+
*/
|
|
410
|
+
function getCallbackFunctionForInlineAutoformat(editor, attributeKey) {
|
|
411
|
+
return (writer, rangesToFormat) => {
|
|
412
|
+
if (!editor.commands.get(attributeKey).isEnabled) return false;
|
|
413
|
+
const validRanges = editor.model.schema.getValidRanges(rangesToFormat, attributeKey);
|
|
414
|
+
for (const range of validRanges) writer.setAttribute(attributeKey, true, range);
|
|
415
|
+
writer.removeSelectionAttribute(attributeKey);
|
|
416
|
+
};
|
|
538
417
|
}
|
|
539
418
|
|
|
419
|
+
/**
|
|
420
|
+
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
|
|
421
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
422
|
+
*/
|
|
423
|
+
|
|
540
424
|
export { Autoformat, blockAutoformatEditing, inlineAutoformatEditing };
|
|
541
|
-
//# sourceMappingURL=index.js.map
|
|
425
|
+
//# sourceMappingURL=index.js.map
|