@ckeditor/ckeditor5-restricted-editing 40.0.0 → 40.1.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/LICENSE.md +2 -2
- package/package.json +2 -2
- package/src/augmentation.d.ts +29 -29
- package/src/augmentation.js +5 -5
- package/src/index.d.ts +17 -17
- package/src/index.js +14 -14
- package/src/restrictededitingconfig.d.ts +60 -60
- package/src/restrictededitingconfig.js +5 -5
- package/src/restrictededitingexceptioncommand.d.ts +30 -30
- package/src/restrictededitingexceptioncommand.js +61 -61
- package/src/restrictededitingmode/converters.d.ts +39 -39
- package/src/restrictededitingmode/converters.js +142 -142
- package/src/restrictededitingmode/utils.d.ts +30 -30
- package/src/restrictededitingmode/utils.js +50 -50
- package/src/restrictededitingmode.d.ts +29 -29
- package/src/restrictededitingmode.js +33 -33
- package/src/restrictededitingmodeediting.d.ts +83 -83
- package/src/restrictededitingmodeediting.js +391 -391
- package/src/restrictededitingmodenavigationcommand.d.ts +42 -42
- package/src/restrictededitingmodenavigationcommand.js +94 -94
- package/src/restrictededitingmodeui.d.ts +32 -32
- package/src/restrictededitingmodeui.js +75 -75
- package/src/standardeditingmode.d.ts +26 -26
- package/src/standardeditingmode.js +30 -30
- package/src/standardeditingmodeediting.d.ts +25 -25
- package/src/standardeditingmodeediting.js +53 -53
- package/src/standardeditingmodeui.d.ts +23 -23
- package/src/standardeditingmodeui.js +48 -48
- package/build/restricted-editing.js.map +0 -1
@@ -1,391 +1,391 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module restricted-editing/restrictededitingmodeediting
|
7
|
-
*/
|
8
|
-
import { Plugin } from 'ckeditor5/src/core';
|
9
|
-
import RestrictedEditingModeNavigationCommand from './restrictededitingmodenavigationcommand';
|
10
|
-
import { extendMarkerOnTypingPostFixer, resurrectCollapsedMarkerPostFixer, setupExceptionHighlighting, upcastHighlightToMarker } from './restrictededitingmode/converters';
|
11
|
-
import { getMarkerAtPosition, isSelectionInMarker } from './restrictededitingmode/utils';
|
12
|
-
const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
|
13
|
-
/**
|
14
|
-
* The restricted editing mode editing feature.
|
15
|
-
*
|
16
|
-
* * It introduces the exception marker group that renders to `<span>` elements with the `restricted-editing-exception` CSS class.
|
17
|
-
* * It registers the `'goToPreviousRestrictedEditingException'` and `'goToNextRestrictedEditingException'` commands.
|
18
|
-
* * It also enables highlighting exception markers that are selected.
|
19
|
-
*/
|
20
|
-
export default class RestrictedEditingModeEditing extends Plugin {
|
21
|
-
/**
|
22
|
-
* @inheritDoc
|
23
|
-
*/
|
24
|
-
static get pluginName() {
|
25
|
-
return 'RestrictedEditingModeEditing';
|
26
|
-
}
|
27
|
-
/**
|
28
|
-
* @inheritDoc
|
29
|
-
*/
|
30
|
-
constructor(editor) {
|
31
|
-
super(editor);
|
32
|
-
editor.config.define('restrictedEditing', {
|
33
|
-
allowedCommands: ['bold', 'italic', 'link', 'unlink'],
|
34
|
-
allowedAttributes: ['bold', 'italic', 'linkHref']
|
35
|
-
});
|
36
|
-
this._alwaysEnabled = new Set(['undo', 'redo']);
|
37
|
-
this._allowedInException = new Set(['input', 'insertText', 'delete', 'deleteForward']);
|
38
|
-
}
|
39
|
-
/**
|
40
|
-
* @inheritDoc
|
41
|
-
*/
|
42
|
-
init() {
|
43
|
-
const editor = this.editor;
|
44
|
-
const editingView = editor.editing.view;
|
45
|
-
const allowedCommands = editor.config.get('restrictedEditing.allowedCommands');
|
46
|
-
allowedCommands.forEach(commandName => this._allowedInException.add(commandName));
|
47
|
-
this._setupConversion();
|
48
|
-
this._setupCommandsToggling();
|
49
|
-
this._setupRestrictions();
|
50
|
-
// Commands & keystrokes that allow navigation in the content.
|
51
|
-
editor.commands.add('goToPreviousRestrictedEditingException', new RestrictedEditingModeNavigationCommand(editor, 'backward'));
|
52
|
-
editor.commands.add('goToNextRestrictedEditingException', new RestrictedEditingModeNavigationCommand(editor, 'forward'));
|
53
|
-
editor.keystrokes.set('Tab', getCommandExecuter(editor, 'goToNextRestrictedEditingException'));
|
54
|
-
editor.keystrokes.set('Shift+Tab', getCommandExecuter(editor, 'goToPreviousRestrictedEditingException'));
|
55
|
-
editor.keystrokes.set('Ctrl+A', getSelectAllHandler(editor));
|
56
|
-
editingView.change(writer => {
|
57
|
-
for (const root of editingView.document.roots) {
|
58
|
-
writer.addClass('ck-restricted-editing_mode_restricted', root);
|
59
|
-
}
|
60
|
-
});
|
61
|
-
}
|
62
|
-
/**
|
63
|
-
* Makes the given command always enabled in the restricted editing mode (regardless
|
64
|
-
* of selection location).
|
65
|
-
*
|
66
|
-
* To enable some commands in non-restricted areas of the content use
|
67
|
-
* {@link module:restricted-editing/restrictededitingconfig~RestrictedEditingConfig#allowedCommands} configuration option.
|
68
|
-
*
|
69
|
-
* @param commandName Name of the command to enable.
|
70
|
-
*/
|
71
|
-
enableCommand(commandName) {
|
72
|
-
const command = this.editor.commands.get(commandName);
|
73
|
-
command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
|
74
|
-
this._alwaysEnabled.add(commandName);
|
75
|
-
}
|
76
|
-
/**
|
77
|
-
* Sets up the restricted mode editing conversion:
|
78
|
-
*
|
79
|
-
* * ucpast & downcast converters,
|
80
|
-
* * marker highlighting in the edting area,
|
81
|
-
* * marker post-fixers.
|
82
|
-
*/
|
83
|
-
_setupConversion() {
|
84
|
-
const editor = this.editor;
|
85
|
-
const model = editor.model;
|
86
|
-
const doc = model.document;
|
87
|
-
// The restricted editing does not attach additional data to the zones so there's no need for smarter markers managing.
|
88
|
-
// Also, the markers will only be created when loading the data.
|
89
|
-
let markerNumber = 0;
|
90
|
-
editor.conversion.for('upcast').add(upcastHighlightToMarker({
|
91
|
-
view: {
|
92
|
-
name: 'span',
|
93
|
-
classes: 'restricted-editing-exception'
|
94
|
-
},
|
95
|
-
model: () => {
|
96
|
-
markerNumber++; // Starting from restrictedEditingException:1 marker.
|
97
|
-
return `restrictedEditingException:${markerNumber}`;
|
98
|
-
}
|
99
|
-
}));
|
100
|
-
// Currently the marker helpers are tied to other use-cases and do not render a collapsed marker as highlight.
|
101
|
-
// That's why there are 2 downcast converters for them:
|
102
|
-
// 1. The default marker-to-highlight will wrap selected text with `<span>`.
|
103
|
-
editor.conversion.for('downcast').markerToHighlight({
|
104
|
-
model: 'restrictedEditingException',
|
105
|
-
// Use callback to return new object every time new marker instance is created - otherwise it will be seen as the same marker.
|
106
|
-
view: () => {
|
107
|
-
return {
|
108
|
-
name: 'span',
|
109
|
-
classes: 'restricted-editing-exception',
|
110
|
-
priority: -10
|
111
|
-
};
|
112
|
-
}
|
113
|
-
});
|
114
|
-
// 2. But for collapsed marker we need to render it as an element.
|
115
|
-
// Additionally the editing pipeline should always display a collapsed marker.
|
116
|
-
editor.conversion.for('editingDowncast').markerToElement({
|
117
|
-
model: 'restrictedEditingException',
|
118
|
-
view: (markerData, { writer }) => {
|
119
|
-
return writer.createUIElement('span', {
|
120
|
-
class: 'restricted-editing-exception restricted-editing-exception_collapsed'
|
121
|
-
});
|
122
|
-
}
|
123
|
-
});
|
124
|
-
editor.conversion.for('dataDowncast').markerToElement({
|
125
|
-
model: 'restrictedEditingException',
|
126
|
-
view: (markerData, { writer }) => {
|
127
|
-
return writer.createEmptyElement('span', {
|
128
|
-
class: 'restricted-editing-exception'
|
129
|
-
});
|
130
|
-
}
|
131
|
-
});
|
132
|
-
doc.registerPostFixer(extendMarkerOnTypingPostFixer(editor));
|
133
|
-
doc.registerPostFixer(resurrectCollapsedMarkerPostFixer(editor));
|
134
|
-
doc.registerPostFixer(ensureNewMarkerIsFlatPostFixer(editor));
|
135
|
-
setupExceptionHighlighting(editor);
|
136
|
-
}
|
137
|
-
/**
|
138
|
-
* Setups additional editing restrictions beyond command toggling:
|
139
|
-
*
|
140
|
-
* * delete content range trimming
|
141
|
-
* * disabling input command outside exception marker
|
142
|
-
* * restricting clipboard holder to text only
|
143
|
-
* * restricting text attributes in content
|
144
|
-
*/
|
145
|
-
_setupRestrictions() {
|
146
|
-
const editor = this.editor;
|
147
|
-
const model = editor.model;
|
148
|
-
const selection = model.document.selection;
|
149
|
-
const viewDoc = editor.editing.view.document;
|
150
|
-
const clipboard = editor.plugins.get('ClipboardPipeline');
|
151
|
-
this.listenTo(model, 'deleteContent', restrictDeleteContent(editor), { priority: 'high' });
|
152
|
-
const insertTextCommand = editor.commands.get('insertText');
|
153
|
-
// The restricted editing might be configured without insert text support - ie allow only bolding or removing text.
|
154
|
-
// This check is bit synthetic since only tests are used this way.
|
155
|
-
if (insertTextCommand) {
|
156
|
-
this.listenTo(insertTextCommand, 'execute', disallowInputExecForWrongRange(editor), { priority: 'high' });
|
157
|
-
}
|
158
|
-
// Block clipboard outside exception marker on paste and drop.
|
159
|
-
this.listenTo(clipboard, 'contentInsertion', evt => {
|
160
|
-
if (!isRangeInsideSingleMarker(editor, selection.getFirstRange())) {
|
161
|
-
evt.stop();
|
162
|
-
}
|
163
|
-
});
|
164
|
-
// Block clipboard outside exception marker on cut.
|
165
|
-
this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
|
166
|
-
if (data.method == 'cut' && !isRangeInsideSingleMarker(editor, selection.getFirstRange())) {
|
167
|
-
evt.stop();
|
168
|
-
}
|
169
|
-
}, { priority: 'high' });
|
170
|
-
const allowedAttributes = editor.config.get('restrictedEditing.allowedAttributes');
|
171
|
-
model.schema.addAttributeCheck(onlyAllowAttributesFromList(allowedAttributes));
|
172
|
-
model.schema.addChildCheck(allowTextOnlyInClipboardHolder());
|
173
|
-
}
|
174
|
-
/**
|
175
|
-
* Sets up the command toggling which enables or disables commands based on the user selection.
|
176
|
-
*/
|
177
|
-
_setupCommandsToggling() {
|
178
|
-
const editor = this.editor;
|
179
|
-
const model = editor.model;
|
180
|
-
const doc = model.document;
|
181
|
-
this._disableCommands();
|
182
|
-
this.listenTo(doc.selection, 'change', this._checkCommands.bind(this));
|
183
|
-
this.listenTo(doc, 'change:data', this._checkCommands.bind(this));
|
184
|
-
}
|
185
|
-
/**
|
186
|
-
* Checks if commands should be enabled or disabled based on the current selection.
|
187
|
-
*/
|
188
|
-
_checkCommands() {
|
189
|
-
const editor = this.editor;
|
190
|
-
const selection = editor.model.document.selection;
|
191
|
-
if (selection.rangeCount > 1) {
|
192
|
-
this._disableCommands();
|
193
|
-
return;
|
194
|
-
}
|
195
|
-
const marker = getMarkerAtPosition(editor, selection.focus);
|
196
|
-
this._disableCommands();
|
197
|
-
if (isSelectionInMarker(selection, marker)) {
|
198
|
-
this._enableCommands(marker);
|
199
|
-
}
|
200
|
-
}
|
201
|
-
/**
|
202
|
-
* Enables commands in non-restricted regions.
|
203
|
-
*/
|
204
|
-
_enableCommands(marker) {
|
205
|
-
const editor = this.editor;
|
206
|
-
for (const [commandName, command] of editor.commands) {
|
207
|
-
if (!command.affectsData || this._alwaysEnabled.has(commandName)) {
|
208
|
-
continue;
|
209
|
-
}
|
210
|
-
// Enable ony those commands that are allowed in the exception marker.
|
211
|
-
if (!this._allowedInException.has(commandName)) {
|
212
|
-
continue;
|
213
|
-
}
|
214
|
-
// Do not enable 'delete' and 'deleteForward' commands on the exception marker boundaries.
|
215
|
-
if (isDeleteCommandOnMarkerBoundaries(commandName, editor.model.document.selection, marker.getRange())) {
|
216
|
-
continue;
|
217
|
-
}
|
218
|
-
command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
|
219
|
-
}
|
220
|
-
}
|
221
|
-
/**
|
222
|
-
* Disables commands outside non-restricted regions.
|
223
|
-
*/
|
224
|
-
_disableCommands() {
|
225
|
-
const editor = this.editor;
|
226
|
-
for (const [commandName, command] of editor.commands) {
|
227
|
-
if (!command.affectsData || this._alwaysEnabled.has(commandName)) {
|
228
|
-
continue;
|
229
|
-
}
|
230
|
-
command.forceDisabled(COMMAND_FORCE_DISABLE_ID);
|
231
|
-
}
|
232
|
-
}
|
233
|
-
}
|
234
|
-
/**
|
235
|
-
* Helper method for executing enabled commands only.
|
236
|
-
*/
|
237
|
-
function getCommandExecuter(editor, commandName) {
|
238
|
-
return (_, cancel) => {
|
239
|
-
const command = editor.commands.get(commandName);
|
240
|
-
if (command.isEnabled) {
|
241
|
-
editor.execute(commandName);
|
242
|
-
cancel();
|
243
|
-
}
|
244
|
-
};
|
245
|
-
}
|
246
|
-
/**
|
247
|
-
* Helper for handling Ctrl+A keydown behaviour.
|
248
|
-
*/
|
249
|
-
function getSelectAllHandler(editor) {
|
250
|
-
return (_, cancel) => {
|
251
|
-
const model = editor.model;
|
252
|
-
const selection = editor.model.document.selection;
|
253
|
-
const marker = getMarkerAtPosition(editor, selection.focus);
|
254
|
-
if (!marker) {
|
255
|
-
return;
|
256
|
-
}
|
257
|
-
// If selection range is inside a restricted editing exception, select text only within the exception.
|
258
|
-
//
|
259
|
-
// Note: Second Ctrl+A press is also blocked and it won't select the entire text in the editor.
|
260
|
-
const selectionRange = selection.getFirstRange();
|
261
|
-
const markerRange = marker.getRange();
|
262
|
-
if (markerRange.containsRange(selectionRange, true) || selection.isCollapsed) {
|
263
|
-
cancel();
|
264
|
-
model.change(writer => {
|
265
|
-
writer.setSelection(marker.getRange());
|
266
|
-
});
|
267
|
-
}
|
268
|
-
};
|
269
|
-
}
|
270
|
-
/**
|
271
|
-
* Additional rule for enabling "delete" and "deleteForward" commands if selection is on range boundaries:
|
272
|
-
*
|
273
|
-
* Does not allow to enable command when selection focus is:
|
274
|
-
* - is on marker start - "delete" - to prevent removing content before marker
|
275
|
-
* - is on marker end - "deleteForward" - to prevent removing content after marker
|
276
|
-
*/
|
277
|
-
function isDeleteCommandOnMarkerBoundaries(commandName, selection, markerRange) {
|
278
|
-
if (commandName == 'delete' && markerRange.start.isEqual(selection.focus)) {
|
279
|
-
return true;
|
280
|
-
}
|
281
|
-
// Only for collapsed selection - non-collapsed selection that extends over a marker is handled elsewhere.
|
282
|
-
if (commandName == 'deleteForward' && selection.isCollapsed && markerRange.end.isEqual(selection.focus)) {
|
283
|
-
return true;
|
284
|
-
}
|
285
|
-
return false;
|
286
|
-
}
|
287
|
-
/**
|
288
|
-
* Ensures that model.deleteContent() does not delete outside exception markers ranges.
|
289
|
-
*
|
290
|
-
* The enforced restrictions are:
|
291
|
-
* - only execute deleteContent() inside exception markers
|
292
|
-
* - restrict passed selection to exception marker
|
293
|
-
*/
|
294
|
-
function restrictDeleteContent(editor) {
|
295
|
-
return (evt, args) => {
|
296
|
-
const [selection] = args;
|
297
|
-
const marker = getMarkerAtPosition(editor, selection.focus) || getMarkerAtPosition(editor, selection.anchor);
|
298
|
-
// Stop method execution if marker was not found at selection focus.
|
299
|
-
if (!marker) {
|
300
|
-
evt.stop();
|
301
|
-
return;
|
302
|
-
}
|
303
|
-
// Collapsed selection inside exception marker does not require fixing.
|
304
|
-
if (selection.isCollapsed) {
|
305
|
-
return;
|
306
|
-
}
|
307
|
-
// Shrink the selection to the range inside exception marker.
|
308
|
-
const allowedToDelete = marker.getRange().getIntersection(selection.getFirstRange());
|
309
|
-
// Some features uses selection passed to model.deleteContent() to set the selection afterwards. For this we need to properly modify
|
310
|
-
// either the document selection using change block...
|
311
|
-
if (selection.is('documentSelection')) {
|
312
|
-
editor.model.change(writer => {
|
313
|
-
writer.setSelection(allowedToDelete);
|
314
|
-
});
|
315
|
-
}
|
316
|
-
// ... or by modifying passed selection instance directly.
|
317
|
-
else {
|
318
|
-
selection.setTo(allowedToDelete);
|
319
|
-
}
|
320
|
-
};
|
321
|
-
}
|
322
|
-
/**
|
323
|
-
* Ensures that input command is executed with a range that is inside exception marker.
|
324
|
-
*
|
325
|
-
* This restriction is due to fact that using native spell check changes text outside exception marker.
|
326
|
-
*/
|
327
|
-
function disallowInputExecForWrongRange(editor) {
|
328
|
-
return (evt, args) => {
|
329
|
-
const [options] = args;
|
330
|
-
const { range } = options;
|
331
|
-
// Only check "input" command executed with a range value.
|
332
|
-
// Selection might be set in exception marker but passed range might point elsewhere.
|
333
|
-
if (!range) {
|
334
|
-
return;
|
335
|
-
}
|
336
|
-
if (!isRangeInsideSingleMarker(editor, range)) {
|
337
|
-
evt.stop();
|
338
|
-
}
|
339
|
-
};
|
340
|
-
}
|
341
|
-
function isRangeInsideSingleMarker(editor, range) {
|
342
|
-
const markerAtStart = getMarkerAtPosition(editor, range.start);
|
343
|
-
const markerAtEnd = getMarkerAtPosition(editor, range.end);
|
344
|
-
return markerAtStart && markerAtEnd && markerAtEnd === markerAtStart;
|
345
|
-
}
|
346
|
-
/**
|
347
|
-
* Checks if new marker range is flat. Non-flat ranges might appear during upcast conversion in nested structures, ie tables.
|
348
|
-
*
|
349
|
-
* Note: This marker fixer only consider case which is possible to create using StandardEditing mode plugin.
|
350
|
-
* Markers created by developer in the data might break in many other ways.
|
351
|
-
*
|
352
|
-
* See #6003.
|
353
|
-
*/
|
354
|
-
function ensureNewMarkerIsFlatPostFixer(editor) {
|
355
|
-
return writer => {
|
356
|
-
let changeApplied = false;
|
357
|
-
const changedMarkers = editor.model.document.differ.getChangedMarkers();
|
358
|
-
for (const { data, name } of changedMarkers) {
|
359
|
-
if (!name.startsWith('restrictedEditingException')) {
|
360
|
-
continue;
|
361
|
-
}
|
362
|
-
const newRange = data.newRange;
|
363
|
-
if (!data.oldRange && !newRange.isFlat) {
|
364
|
-
const start = newRange.start;
|
365
|
-
const end = newRange.end;
|
366
|
-
const startIsHigherInTree = start.path.length > end.path.length;
|
367
|
-
const fixedStart = startIsHigherInTree ? newRange.start : writer.createPositionAt(end.parent, 0);
|
368
|
-
const fixedEnd = startIsHigherInTree ? writer.createPositionAt(start.parent, 'end') : newRange.end;
|
369
|
-
writer.updateMarker(name, {
|
370
|
-
range: writer.createRange(fixedStart, fixedEnd)
|
371
|
-
});
|
372
|
-
changeApplied = true;
|
373
|
-
}
|
374
|
-
}
|
375
|
-
return changeApplied;
|
376
|
-
};
|
377
|
-
}
|
378
|
-
function onlyAllowAttributesFromList(allowedAttributes) {
|
379
|
-
return (context, attributeName) => {
|
380
|
-
if (context.startsWith('$clipboardHolder')) {
|
381
|
-
return allowedAttributes.includes(attributeName);
|
382
|
-
}
|
383
|
-
};
|
384
|
-
}
|
385
|
-
function allowTextOnlyInClipboardHolder() {
|
386
|
-
return (context, childDefinition) => {
|
387
|
-
if (context.startsWith('$clipboardHolder')) {
|
388
|
-
return childDefinition.name === '$text';
|
389
|
-
}
|
390
|
-
};
|
391
|
-
}
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module restricted-editing/restrictededitingmodeediting
|
7
|
+
*/
|
8
|
+
import { Plugin } from 'ckeditor5/src/core';
|
9
|
+
import RestrictedEditingModeNavigationCommand from './restrictededitingmodenavigationcommand';
|
10
|
+
import { extendMarkerOnTypingPostFixer, resurrectCollapsedMarkerPostFixer, setupExceptionHighlighting, upcastHighlightToMarker } from './restrictededitingmode/converters';
|
11
|
+
import { getMarkerAtPosition, isSelectionInMarker } from './restrictededitingmode/utils';
|
12
|
+
const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
|
13
|
+
/**
|
14
|
+
* The restricted editing mode editing feature.
|
15
|
+
*
|
16
|
+
* * It introduces the exception marker group that renders to `<span>` elements with the `restricted-editing-exception` CSS class.
|
17
|
+
* * It registers the `'goToPreviousRestrictedEditingException'` and `'goToNextRestrictedEditingException'` commands.
|
18
|
+
* * It also enables highlighting exception markers that are selected.
|
19
|
+
*/
|
20
|
+
export default class RestrictedEditingModeEditing extends Plugin {
|
21
|
+
/**
|
22
|
+
* @inheritDoc
|
23
|
+
*/
|
24
|
+
static get pluginName() {
|
25
|
+
return 'RestrictedEditingModeEditing';
|
26
|
+
}
|
27
|
+
/**
|
28
|
+
* @inheritDoc
|
29
|
+
*/
|
30
|
+
constructor(editor) {
|
31
|
+
super(editor);
|
32
|
+
editor.config.define('restrictedEditing', {
|
33
|
+
allowedCommands: ['bold', 'italic', 'link', 'unlink'],
|
34
|
+
allowedAttributes: ['bold', 'italic', 'linkHref']
|
35
|
+
});
|
36
|
+
this._alwaysEnabled = new Set(['undo', 'redo']);
|
37
|
+
this._allowedInException = new Set(['input', 'insertText', 'delete', 'deleteForward']);
|
38
|
+
}
|
39
|
+
/**
|
40
|
+
* @inheritDoc
|
41
|
+
*/
|
42
|
+
init() {
|
43
|
+
const editor = this.editor;
|
44
|
+
const editingView = editor.editing.view;
|
45
|
+
const allowedCommands = editor.config.get('restrictedEditing.allowedCommands');
|
46
|
+
allowedCommands.forEach(commandName => this._allowedInException.add(commandName));
|
47
|
+
this._setupConversion();
|
48
|
+
this._setupCommandsToggling();
|
49
|
+
this._setupRestrictions();
|
50
|
+
// Commands & keystrokes that allow navigation in the content.
|
51
|
+
editor.commands.add('goToPreviousRestrictedEditingException', new RestrictedEditingModeNavigationCommand(editor, 'backward'));
|
52
|
+
editor.commands.add('goToNextRestrictedEditingException', new RestrictedEditingModeNavigationCommand(editor, 'forward'));
|
53
|
+
editor.keystrokes.set('Tab', getCommandExecuter(editor, 'goToNextRestrictedEditingException'));
|
54
|
+
editor.keystrokes.set('Shift+Tab', getCommandExecuter(editor, 'goToPreviousRestrictedEditingException'));
|
55
|
+
editor.keystrokes.set('Ctrl+A', getSelectAllHandler(editor));
|
56
|
+
editingView.change(writer => {
|
57
|
+
for (const root of editingView.document.roots) {
|
58
|
+
writer.addClass('ck-restricted-editing_mode_restricted', root);
|
59
|
+
}
|
60
|
+
});
|
61
|
+
}
|
62
|
+
/**
|
63
|
+
* Makes the given command always enabled in the restricted editing mode (regardless
|
64
|
+
* of selection location).
|
65
|
+
*
|
66
|
+
* To enable some commands in non-restricted areas of the content use
|
67
|
+
* {@link module:restricted-editing/restrictededitingconfig~RestrictedEditingConfig#allowedCommands} configuration option.
|
68
|
+
*
|
69
|
+
* @param commandName Name of the command to enable.
|
70
|
+
*/
|
71
|
+
enableCommand(commandName) {
|
72
|
+
const command = this.editor.commands.get(commandName);
|
73
|
+
command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
|
74
|
+
this._alwaysEnabled.add(commandName);
|
75
|
+
}
|
76
|
+
/**
|
77
|
+
* Sets up the restricted mode editing conversion:
|
78
|
+
*
|
79
|
+
* * ucpast & downcast converters,
|
80
|
+
* * marker highlighting in the edting area,
|
81
|
+
* * marker post-fixers.
|
82
|
+
*/
|
83
|
+
_setupConversion() {
|
84
|
+
const editor = this.editor;
|
85
|
+
const model = editor.model;
|
86
|
+
const doc = model.document;
|
87
|
+
// The restricted editing does not attach additional data to the zones so there's no need for smarter markers managing.
|
88
|
+
// Also, the markers will only be created when loading the data.
|
89
|
+
let markerNumber = 0;
|
90
|
+
editor.conversion.for('upcast').add(upcastHighlightToMarker({
|
91
|
+
view: {
|
92
|
+
name: 'span',
|
93
|
+
classes: 'restricted-editing-exception'
|
94
|
+
},
|
95
|
+
model: () => {
|
96
|
+
markerNumber++; // Starting from restrictedEditingException:1 marker.
|
97
|
+
return `restrictedEditingException:${markerNumber}`;
|
98
|
+
}
|
99
|
+
}));
|
100
|
+
// Currently the marker helpers are tied to other use-cases and do not render a collapsed marker as highlight.
|
101
|
+
// That's why there are 2 downcast converters for them:
|
102
|
+
// 1. The default marker-to-highlight will wrap selected text with `<span>`.
|
103
|
+
editor.conversion.for('downcast').markerToHighlight({
|
104
|
+
model: 'restrictedEditingException',
|
105
|
+
// Use callback to return new object every time new marker instance is created - otherwise it will be seen as the same marker.
|
106
|
+
view: () => {
|
107
|
+
return {
|
108
|
+
name: 'span',
|
109
|
+
classes: 'restricted-editing-exception',
|
110
|
+
priority: -10
|
111
|
+
};
|
112
|
+
}
|
113
|
+
});
|
114
|
+
// 2. But for collapsed marker we need to render it as an element.
|
115
|
+
// Additionally the editing pipeline should always display a collapsed marker.
|
116
|
+
editor.conversion.for('editingDowncast').markerToElement({
|
117
|
+
model: 'restrictedEditingException',
|
118
|
+
view: (markerData, { writer }) => {
|
119
|
+
return writer.createUIElement('span', {
|
120
|
+
class: 'restricted-editing-exception restricted-editing-exception_collapsed'
|
121
|
+
});
|
122
|
+
}
|
123
|
+
});
|
124
|
+
editor.conversion.for('dataDowncast').markerToElement({
|
125
|
+
model: 'restrictedEditingException',
|
126
|
+
view: (markerData, { writer }) => {
|
127
|
+
return writer.createEmptyElement('span', {
|
128
|
+
class: 'restricted-editing-exception'
|
129
|
+
});
|
130
|
+
}
|
131
|
+
});
|
132
|
+
doc.registerPostFixer(extendMarkerOnTypingPostFixer(editor));
|
133
|
+
doc.registerPostFixer(resurrectCollapsedMarkerPostFixer(editor));
|
134
|
+
doc.registerPostFixer(ensureNewMarkerIsFlatPostFixer(editor));
|
135
|
+
setupExceptionHighlighting(editor);
|
136
|
+
}
|
137
|
+
/**
|
138
|
+
* Setups additional editing restrictions beyond command toggling:
|
139
|
+
*
|
140
|
+
* * delete content range trimming
|
141
|
+
* * disabling input command outside exception marker
|
142
|
+
* * restricting clipboard holder to text only
|
143
|
+
* * restricting text attributes in content
|
144
|
+
*/
|
145
|
+
_setupRestrictions() {
|
146
|
+
const editor = this.editor;
|
147
|
+
const model = editor.model;
|
148
|
+
const selection = model.document.selection;
|
149
|
+
const viewDoc = editor.editing.view.document;
|
150
|
+
const clipboard = editor.plugins.get('ClipboardPipeline');
|
151
|
+
this.listenTo(model, 'deleteContent', restrictDeleteContent(editor), { priority: 'high' });
|
152
|
+
const insertTextCommand = editor.commands.get('insertText');
|
153
|
+
// The restricted editing might be configured without insert text support - ie allow only bolding or removing text.
|
154
|
+
// This check is bit synthetic since only tests are used this way.
|
155
|
+
if (insertTextCommand) {
|
156
|
+
this.listenTo(insertTextCommand, 'execute', disallowInputExecForWrongRange(editor), { priority: 'high' });
|
157
|
+
}
|
158
|
+
// Block clipboard outside exception marker on paste and drop.
|
159
|
+
this.listenTo(clipboard, 'contentInsertion', evt => {
|
160
|
+
if (!isRangeInsideSingleMarker(editor, selection.getFirstRange())) {
|
161
|
+
evt.stop();
|
162
|
+
}
|
163
|
+
});
|
164
|
+
// Block clipboard outside exception marker on cut.
|
165
|
+
this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
|
166
|
+
if (data.method == 'cut' && !isRangeInsideSingleMarker(editor, selection.getFirstRange())) {
|
167
|
+
evt.stop();
|
168
|
+
}
|
169
|
+
}, { priority: 'high' });
|
170
|
+
const allowedAttributes = editor.config.get('restrictedEditing.allowedAttributes');
|
171
|
+
model.schema.addAttributeCheck(onlyAllowAttributesFromList(allowedAttributes));
|
172
|
+
model.schema.addChildCheck(allowTextOnlyInClipboardHolder());
|
173
|
+
}
|
174
|
+
/**
|
175
|
+
* Sets up the command toggling which enables or disables commands based on the user selection.
|
176
|
+
*/
|
177
|
+
_setupCommandsToggling() {
|
178
|
+
const editor = this.editor;
|
179
|
+
const model = editor.model;
|
180
|
+
const doc = model.document;
|
181
|
+
this._disableCommands();
|
182
|
+
this.listenTo(doc.selection, 'change', this._checkCommands.bind(this));
|
183
|
+
this.listenTo(doc, 'change:data', this._checkCommands.bind(this));
|
184
|
+
}
|
185
|
+
/**
|
186
|
+
* Checks if commands should be enabled or disabled based on the current selection.
|
187
|
+
*/
|
188
|
+
_checkCommands() {
|
189
|
+
const editor = this.editor;
|
190
|
+
const selection = editor.model.document.selection;
|
191
|
+
if (selection.rangeCount > 1) {
|
192
|
+
this._disableCommands();
|
193
|
+
return;
|
194
|
+
}
|
195
|
+
const marker = getMarkerAtPosition(editor, selection.focus);
|
196
|
+
this._disableCommands();
|
197
|
+
if (isSelectionInMarker(selection, marker)) {
|
198
|
+
this._enableCommands(marker);
|
199
|
+
}
|
200
|
+
}
|
201
|
+
/**
|
202
|
+
* Enables commands in non-restricted regions.
|
203
|
+
*/
|
204
|
+
_enableCommands(marker) {
|
205
|
+
const editor = this.editor;
|
206
|
+
for (const [commandName, command] of editor.commands) {
|
207
|
+
if (!command.affectsData || this._alwaysEnabled.has(commandName)) {
|
208
|
+
continue;
|
209
|
+
}
|
210
|
+
// Enable ony those commands that are allowed in the exception marker.
|
211
|
+
if (!this._allowedInException.has(commandName)) {
|
212
|
+
continue;
|
213
|
+
}
|
214
|
+
// Do not enable 'delete' and 'deleteForward' commands on the exception marker boundaries.
|
215
|
+
if (isDeleteCommandOnMarkerBoundaries(commandName, editor.model.document.selection, marker.getRange())) {
|
216
|
+
continue;
|
217
|
+
}
|
218
|
+
command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
|
219
|
+
}
|
220
|
+
}
|
221
|
+
/**
|
222
|
+
* Disables commands outside non-restricted regions.
|
223
|
+
*/
|
224
|
+
_disableCommands() {
|
225
|
+
const editor = this.editor;
|
226
|
+
for (const [commandName, command] of editor.commands) {
|
227
|
+
if (!command.affectsData || this._alwaysEnabled.has(commandName)) {
|
228
|
+
continue;
|
229
|
+
}
|
230
|
+
command.forceDisabled(COMMAND_FORCE_DISABLE_ID);
|
231
|
+
}
|
232
|
+
}
|
233
|
+
}
|
234
|
+
/**
|
235
|
+
* Helper method for executing enabled commands only.
|
236
|
+
*/
|
237
|
+
function getCommandExecuter(editor, commandName) {
|
238
|
+
return (_, cancel) => {
|
239
|
+
const command = editor.commands.get(commandName);
|
240
|
+
if (command.isEnabled) {
|
241
|
+
editor.execute(commandName);
|
242
|
+
cancel();
|
243
|
+
}
|
244
|
+
};
|
245
|
+
}
|
246
|
+
/**
|
247
|
+
* Helper for handling Ctrl+A keydown behaviour.
|
248
|
+
*/
|
249
|
+
function getSelectAllHandler(editor) {
|
250
|
+
return (_, cancel) => {
|
251
|
+
const model = editor.model;
|
252
|
+
const selection = editor.model.document.selection;
|
253
|
+
const marker = getMarkerAtPosition(editor, selection.focus);
|
254
|
+
if (!marker) {
|
255
|
+
return;
|
256
|
+
}
|
257
|
+
// If selection range is inside a restricted editing exception, select text only within the exception.
|
258
|
+
//
|
259
|
+
// Note: Second Ctrl+A press is also blocked and it won't select the entire text in the editor.
|
260
|
+
const selectionRange = selection.getFirstRange();
|
261
|
+
const markerRange = marker.getRange();
|
262
|
+
if (markerRange.containsRange(selectionRange, true) || selection.isCollapsed) {
|
263
|
+
cancel();
|
264
|
+
model.change(writer => {
|
265
|
+
writer.setSelection(marker.getRange());
|
266
|
+
});
|
267
|
+
}
|
268
|
+
};
|
269
|
+
}
|
270
|
+
/**
|
271
|
+
* Additional rule for enabling "delete" and "deleteForward" commands if selection is on range boundaries:
|
272
|
+
*
|
273
|
+
* Does not allow to enable command when selection focus is:
|
274
|
+
* - is on marker start - "delete" - to prevent removing content before marker
|
275
|
+
* - is on marker end - "deleteForward" - to prevent removing content after marker
|
276
|
+
*/
|
277
|
+
function isDeleteCommandOnMarkerBoundaries(commandName, selection, markerRange) {
|
278
|
+
if (commandName == 'delete' && markerRange.start.isEqual(selection.focus)) {
|
279
|
+
return true;
|
280
|
+
}
|
281
|
+
// Only for collapsed selection - non-collapsed selection that extends over a marker is handled elsewhere.
|
282
|
+
if (commandName == 'deleteForward' && selection.isCollapsed && markerRange.end.isEqual(selection.focus)) {
|
283
|
+
return true;
|
284
|
+
}
|
285
|
+
return false;
|
286
|
+
}
|
287
|
+
/**
|
288
|
+
* Ensures that model.deleteContent() does not delete outside exception markers ranges.
|
289
|
+
*
|
290
|
+
* The enforced restrictions are:
|
291
|
+
* - only execute deleteContent() inside exception markers
|
292
|
+
* - restrict passed selection to exception marker
|
293
|
+
*/
|
294
|
+
function restrictDeleteContent(editor) {
|
295
|
+
return (evt, args) => {
|
296
|
+
const [selection] = args;
|
297
|
+
const marker = getMarkerAtPosition(editor, selection.focus) || getMarkerAtPosition(editor, selection.anchor);
|
298
|
+
// Stop method execution if marker was not found at selection focus.
|
299
|
+
if (!marker) {
|
300
|
+
evt.stop();
|
301
|
+
return;
|
302
|
+
}
|
303
|
+
// Collapsed selection inside exception marker does not require fixing.
|
304
|
+
if (selection.isCollapsed) {
|
305
|
+
return;
|
306
|
+
}
|
307
|
+
// Shrink the selection to the range inside exception marker.
|
308
|
+
const allowedToDelete = marker.getRange().getIntersection(selection.getFirstRange());
|
309
|
+
// Some features uses selection passed to model.deleteContent() to set the selection afterwards. For this we need to properly modify
|
310
|
+
// either the document selection using change block...
|
311
|
+
if (selection.is('documentSelection')) {
|
312
|
+
editor.model.change(writer => {
|
313
|
+
writer.setSelection(allowedToDelete);
|
314
|
+
});
|
315
|
+
}
|
316
|
+
// ... or by modifying passed selection instance directly.
|
317
|
+
else {
|
318
|
+
selection.setTo(allowedToDelete);
|
319
|
+
}
|
320
|
+
};
|
321
|
+
}
|
322
|
+
/**
|
323
|
+
* Ensures that input command is executed with a range that is inside exception marker.
|
324
|
+
*
|
325
|
+
* This restriction is due to fact that using native spell check changes text outside exception marker.
|
326
|
+
*/
|
327
|
+
function disallowInputExecForWrongRange(editor) {
|
328
|
+
return (evt, args) => {
|
329
|
+
const [options] = args;
|
330
|
+
const { range } = options;
|
331
|
+
// Only check "input" command executed with a range value.
|
332
|
+
// Selection might be set in exception marker but passed range might point elsewhere.
|
333
|
+
if (!range) {
|
334
|
+
return;
|
335
|
+
}
|
336
|
+
if (!isRangeInsideSingleMarker(editor, range)) {
|
337
|
+
evt.stop();
|
338
|
+
}
|
339
|
+
};
|
340
|
+
}
|
341
|
+
function isRangeInsideSingleMarker(editor, range) {
|
342
|
+
const markerAtStart = getMarkerAtPosition(editor, range.start);
|
343
|
+
const markerAtEnd = getMarkerAtPosition(editor, range.end);
|
344
|
+
return markerAtStart && markerAtEnd && markerAtEnd === markerAtStart;
|
345
|
+
}
|
346
|
+
/**
|
347
|
+
* Checks if new marker range is flat. Non-flat ranges might appear during upcast conversion in nested structures, ie tables.
|
348
|
+
*
|
349
|
+
* Note: This marker fixer only consider case which is possible to create using StandardEditing mode plugin.
|
350
|
+
* Markers created by developer in the data might break in many other ways.
|
351
|
+
*
|
352
|
+
* See #6003.
|
353
|
+
*/
|
354
|
+
function ensureNewMarkerIsFlatPostFixer(editor) {
|
355
|
+
return writer => {
|
356
|
+
let changeApplied = false;
|
357
|
+
const changedMarkers = editor.model.document.differ.getChangedMarkers();
|
358
|
+
for (const { data, name } of changedMarkers) {
|
359
|
+
if (!name.startsWith('restrictedEditingException')) {
|
360
|
+
continue;
|
361
|
+
}
|
362
|
+
const newRange = data.newRange;
|
363
|
+
if (!data.oldRange && !newRange.isFlat) {
|
364
|
+
const start = newRange.start;
|
365
|
+
const end = newRange.end;
|
366
|
+
const startIsHigherInTree = start.path.length > end.path.length;
|
367
|
+
const fixedStart = startIsHigherInTree ? newRange.start : writer.createPositionAt(end.parent, 0);
|
368
|
+
const fixedEnd = startIsHigherInTree ? writer.createPositionAt(start.parent, 'end') : newRange.end;
|
369
|
+
writer.updateMarker(name, {
|
370
|
+
range: writer.createRange(fixedStart, fixedEnd)
|
371
|
+
});
|
372
|
+
changeApplied = true;
|
373
|
+
}
|
374
|
+
}
|
375
|
+
return changeApplied;
|
376
|
+
};
|
377
|
+
}
|
378
|
+
function onlyAllowAttributesFromList(allowedAttributes) {
|
379
|
+
return (context, attributeName) => {
|
380
|
+
if (context.startsWith('$clipboardHolder')) {
|
381
|
+
return allowedAttributes.includes(attributeName);
|
382
|
+
}
|
383
|
+
};
|
384
|
+
}
|
385
|
+
function allowTextOnlyInClipboardHolder() {
|
386
|
+
return (context, childDefinition) => {
|
387
|
+
if (context.startsWith('$clipboardHolder')) {
|
388
|
+
return childDefinition.name === '$text';
|
389
|
+
}
|
390
|
+
};
|
391
|
+
}
|