@ckeditor/ckeditor5-restricted-editing 47.1.0-alpha.2 → 47.2.0-alpha.0

package/src/restrictededitingmodeediting.js

@@ -6,9 +6,10 @@
  * @module restricted-editing/restrictededitingmodeediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { getCode, parseKeystroke } from 'ckeditor5/src/utils.js';
 import { RestrictedEditingModeNavigationCommand } from './restrictededitingmodenavigationcommand.js';
+import { getMarkerAtPosition, isSelectionInMarker, getExceptionRange } from './restrictededitingmode/utils.js';
 import { extendMarkerOnTypingPostFixer, resurrectCollapsedMarkerPostFixer, setupExceptionHighlighting, upcastHighlightToMarker } from './restrictededitingmode/converters.js';
-import { getMarkerAtPosition, isSelectionInMarker } from './restrictededitingmode/utils.js';
 const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
 /**
  * The restricted editing mode editing feature.
@@ -74,6 +75,7 @@ export class RestrictedEditingModeEditing extends Plugin {
         const editingView = editor.editing.view;
         const allowedCommands = editor.config.get('restrictedEditing.allowedCommands');
         allowedCommands.forEach(commandName => this._allowedInException.add(commandName));
+        this._setupSchema();
         this._setupConversion();
         this._setupCommandsToggling();
         this._setupRestrictions();
@@ -92,7 +94,7 @@ export class RestrictedEditingModeEditing extends Plugin {
             // Stop the event bubbling in the editor: no more callbacks will be executed for this keystroke.
             evt.stop();
         }, { context: '$capture' });
-        editor.keystrokes.set('Ctrl+A', getSelectAllHandler(editor));
+        this.listenTo(editingView.document, 'keydown', getSelectAllHandler(editor), { priority: 'high' });
         editingView.change(writer => {
             for (const root of editingView.document.roots) {
                 writer.addClass('ck-restricted-editing_mode_restricted', root);
@@ -123,6 +125,17 @@ export class RestrictedEditingModeEditing extends Plugin {
         command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
         this._alwaysEnabled.add(commandName);
     }
+    /**
+     * Registers block exception wrapper in the schema.
+     */
+    _setupSchema() {
+        const schema = this.editor.model.schema;
+        schema.register('restrictedEditingException', {
+            allowWhere: '$block',
+            allowContentOf: '$container',
+            isLimit: true
+        });
+    }
     /**
      * Sets up the restricted mode editing conversion:
      *
@@ -144,16 +157,35 @@ export class RestrictedEditingModeEditing extends Plugin {
             },
             model: () => {
                 markerNumber++; // Starting from restrictedEditingException:1 marker.
-                return `restrictedEditingException:${markerNumber}`;
+                return `restrictedEditingException:inline:${markerNumber}`;
             }
         }));
+        editor.conversion.for('upcast').add(upcastHighlightToMarker({
+            view: {
+                name: 'div',
+                classes: 'restricted-editing-exception'
+            },
+            model: () => {
+                markerNumber++; // Starting from restrictedEditingException:1 marker.
+                return `restrictedEditingException:block:${markerNumber}`;
+            },
+            useWrapperElement: true
+        }));
+        // Block exception wrapper.
+        editor.conversion.for('downcast').elementToElement({
+            model: 'restrictedEditingException',
+            view: {
+                name: 'div',
+                classes: 'restricted-editing-exception'
+            }
+        });
         // Currently the marker helpers are tied to other use-cases and do not render a collapsed marker as highlight.
         // Also, markerToHighlight cannot convert marker on an inline object. It handles only text and widgets,
         // but it is not a case in the data pipeline. That's why there are 3 downcast converters for them:
         //
         // 1. The custom inline item (text or inline object) converter (but not the selection).
         editor.conversion.for('downcast').add(dispatcher => {
-            dispatcher.on('addMarker:restrictedEditingException', (evt, data, conversionApi) => {
+            dispatcher.on('addMarker:restrictedEditingException:inline', (evt, data, conversionApi) => {
                 // Only convert per-item conversion.
                 if (!data.item) {
                     return;
@@ -186,7 +218,7 @@ export class RestrictedEditingModeEditing extends Plugin {
         });
         // 2. The marker-to-highlight converter for the document selection.
         editor.conversion.for('downcast').markerToHighlight({
-            model: 'restrictedEditingException',
+            model: 'restrictedEditingException:inline',
             // Use callback to return new object every time new marker instance is created - otherwise it will be seen as the same marker.
             view: () => {
                 return {
@@ -199,7 +231,7 @@ export class RestrictedEditingModeEditing extends Plugin {
         // 3. And for collapsed marker we need to render it as an element.
         // Additionally, the editing pipeline should always display a collapsed marker.
         editor.conversion.for('editingDowncast').markerToElement({
-            model: 'restrictedEditingException',
+            model: 'restrictedEditingException:inline',
             view: (markerData, { writer }) => {
                 return writer.createUIElement('span', {
                     class: 'restricted-editing-exception restricted-editing-exception_collapsed'
@@ -207,7 +239,7 @@ export class RestrictedEditingModeEditing extends Plugin {
             }
         });
         editor.conversion.for('dataDowncast').markerToElement({
-            model: 'restrictedEditingException',
+            model: 'restrictedEditingException:inline',
             view: (markerData, { writer }) => {
                 return writer.createEmptyElement('span', {
                     class: 'restricted-editing-exception'
@@ -241,10 +273,29 @@ export class RestrictedEditingModeEditing extends Plugin {
             this.listenTo(insertTextCommand, 'execute', disallowInputExecForWrongRange(editor), { priority: 'high' });
         }
         // Block clipboard outside exception marker on paste and drop.
-        this.listenTo(clipboard, 'contentInsertion', evt => {
+        this.listenTo(clipboard, 'contentInsertion', (evt, data) => {
             if (!isRangeInsideSingleMarker(editor, selection.getFirstRange())) {
                 evt.stop();
             }
+            const marker = getMarkerAtPosition(editor, selection.focus);
+            // Reduce content pasted into inline exception to text nodes only. Also strip not allowed attributes.
+            if (marker && marker.name.startsWith('restrictedEditingException:inline:')) {
+                const allowedAttributes = editor.config.get('restrictedEditing.allowedAttributes');
+                model.change(writer => {
+                    const content = writer.createDocumentFragment();
+                    const textNodes = Array.from(writer.createRangeIn(data.content).getItems())
+                        .filter(node => node.is('$textProxy'));
+                    for (const item of textNodes) {
+                        for (const attr of item.getAttributeKeys()) {
+                            if (!allowedAttributes.includes(attr)) {
+                                writer.removeAttribute(attr, item);
+                            }
+                        }
+                        writer.append(item, content);
+                    }
+                    data.content = content;
+                });
+            }
         });
         // Block clipboard outside exception marker on cut.
         this.listenTo(viewDoc, 'clipboardOutput', (evt, data) => {
@@ -252,9 +303,12 @@ export class RestrictedEditingModeEditing extends Plugin {
                 evt.stop();
             }
         }, { priority: 'high' });
-        const allowedAttributes = editor.config.get('restrictedEditing.allowedAttributes');
-        model.schema.addAttributeCheck(onlyAllowAttributesFromList(allowedAttributes));
-        model.schema.addChildCheck(allowTextOnlyInClipboardHolder());
+        // Do not allow pasting/dropping block exception wrapper.
+        model.schema.addChildCheck(context => {
+            if (context.startsWith('$clipboardHolder')) {
+                return false;
+            }
+        }, 'restrictedEditingException');
     }
     /**
      * Sets up the command toggling which enables or disables commands based on the user selection.
@@ -279,7 +333,7 @@ export class RestrictedEditingModeEditing extends Plugin {
         }
         const marker = getMarkerAtPosition(editor, selection.focus);
         this._disableCommands();
-        if (isSelectionInMarker(selection, marker)) {
+        if (isSelectionInMarker(selection, editor.model, marker)) {
             this._enableCommands(marker);
         }
     }
@@ -288,16 +342,19 @@ export class RestrictedEditingModeEditing extends Plugin {
      */
     _enableCommands(marker) {
         const editor = this.editor;
+        const selection = editor.model.document.selection;
         for (const [commandName, command] of editor.commands) {
             if (!command.affectsData || this._alwaysEnabled.has(commandName)) {
                 continue;
             }
             // Enable ony those commands that are allowed in the exception marker.
-            if (!this._allowedInException.has(commandName)) {
+            // In block exceptions all commands are enabled.
+            if (!marker.name.startsWith('restrictedEditingException:block:') &&
+                !this._allowedInException.has(commandName)) {
                 continue;
             }
             // Do not enable 'delete' and 'deleteForward' commands on the exception marker boundaries.
-            if (isDeleteCommandOnMarkerBoundaries(commandName, editor.model.document.selection, marker.getRange())) {
+            if (isDeleteCommandOnMarkerBoundaries(commandName, selection, getExceptionRange(marker, editor.model))) {
                 continue;
             }
             command.clearForceDisabled(COMMAND_FORCE_DISABLE_ID);
@@ -320,7 +377,10 @@ export class RestrictedEditingModeEditing extends Plugin {
  * Helper for handling Ctrl+A keydown behaviour.
  */
 function getSelectAllHandler(editor) {
-    return (_, cancel) => {
+    return (eventInfo, domEventData) => {
+        if (getCode(domEventData) != parseKeystroke('Ctrl+A')) {
+            return;
+        }
         const model = editor.model;
         const selection = editor.model.document.selection;
         const marker = getMarkerAtPosition(editor, selection.focus);
@@ -331,11 +391,13 @@ function getSelectAllHandler(editor) {
         //
         // Note: Second Ctrl+A press is also blocked and it won't select the entire text in the editor.
         const selectionRange = selection.getFirstRange();
-        const markerRange = marker.getRange();
+        const markerRange = getExceptionRange(marker, editor.model);
         if (markerRange.containsRange(selectionRange, true) || selection.isCollapsed) {
-            cancel();
+            eventInfo.stop();
+            domEventData.preventDefault();
+            domEventData.stopPropagation();
             model.change(writer => {
-                writer.setSelection(marker.getRange());
+                writer.setSelection(markerRange);
             });
         }
     };
@@ -348,11 +410,11 @@ function getSelectAllHandler(editor) {
  * - is on marker end - "deleteForward" - to prevent removing content after marker
  */
 function isDeleteCommandOnMarkerBoundaries(commandName, selection, markerRange) {
-    if (commandName == 'delete' && markerRange.start.isEqual(selection.focus)) {
+    if (commandName == 'delete' && selection.isCollapsed && markerRange.start.isTouching(selection.focus)) {
         return true;
     }
     // Only for collapsed selection - non-collapsed selection that extends over a marker is handled elsewhere.
-    if (commandName == 'deleteForward' && selection.isCollapsed && markerRange.end.isEqual(selection.focus)) {
+    if (commandName == 'deleteForward' && selection.isCollapsed && markerRange.end.isTouching(selection.focus)) {
         return true;
     }
     return false;
@@ -378,7 +440,7 @@ function restrictDeleteContent(editor) {
             return;
         }
         // Shrink the selection to the range inside exception marker.
-        const allowedToDelete = marker.getRange().getIntersection(selection.getFirstRange());
+        const allowedToDelete = getExceptionRange(marker, editor.model).getIntersection(selection.getFirstRange());
         // Some features uses selection passed to model.deleteContent() to set the selection afterwards. For this we need to properly modify
         // either the document selection using change block...
         if (selection.is('documentSelection')) {
@@ -448,17 +510,3 @@ function ensureNewMarkerIsFlatPostFixer(editor) {
         return changeApplied;
     };
 }
-function onlyAllowAttributesFromList(allowedAttributes) {
-    return (context, attributeName) => {
-        if (context.startsWith('$clipboardHolder')) {
-            return allowedAttributes.includes(attributeName);
-        }
-    };
-}
-function allowTextOnlyInClipboardHolder() {
-    return (context, childDefinition) => {
-        if (context.startsWith('$clipboardHolder')) {
-            return childDefinition.name === '$text';
-        }
-    };
-}

package/src/restrictededitingmodenavigationcommand.js

@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Command } from 'ckeditor5/src/core.js';
+import { getExceptionRange } from './restrictededitingmode/utils.js';
 /**
  * The command that allows navigation across the exceptions in the edited document.
  */
@@ -61,7 +62,7 @@ function getNearestExceptionRange(model, direction) {
     const markerRanges = [];
     // Get all exception marker positions that start after/before the selection position.
     for (const marker of model.markers.getMarkersGroup('restrictedEditingException')) {
-        const markerRange = marker.getRange();
+        const markerRange = getExceptionRange(marker, model);
         // Checking parent because there two positions <paragraph>foo^</paragraph><paragraph>^bar</paragraph>
         // are touching but they will represent different markers.
         const isMarkerRangeTouching = selectionPosition.isTouching(markerRange.start) && selectionPosition.hasSameParentAs(markerRange.start) ||

package/src/standardeditingmodeediting.js

@@ -6,7 +6,9 @@
  * @module restricted-editing/standardeditingmodeediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { Matcher } from 'ckeditor5/src/engine.js';
 import { RestrictedEditingExceptionCommand } from './restrictededitingexceptioncommand.js';
+import { RestrictedEditingExceptionBlockCommand } from './restrictededitingexceptionblockcommand.js';
 /**
  * The standard editing mode editing feature.
  *
@@ -32,15 +34,113 @@ export class StandardEditingModeEditing extends Plugin {
      */
     init() {
         const editor = this.editor;
-        editor.model.schema.extend('$text', { allowAttributes: ['restrictedEditingException'] });
-        editor.conversion.for('upcast').elementToAttribute({
+        const schema = editor.model.schema;
+        schema.extend('$text', { allowAttributes: ['restrictedEditingException'] });
+        schema.register('restrictedEditingException', {
+            allowWhere: '$container',
+            allowContentOf: '$container'
+        });
+        // Don't allow nesting of block exceptions.
+        schema.addChildCheck(context => {
+            for (const item of context) {
+                if (item.name == 'restrictedEditingException') {
+                    return false;
+                }
+            }
+        }, 'restrictedEditingException');
+        // Don't allow nesting inline exceptions inside block exceptions.
+        schema.addAttributeCheck(context => {
+            for (const item of context) {
+                if (item.name == 'restrictedEditingException') {
+                    return false;
+                }
+            }
+        }, 'restrictedEditingException');
+        // Post-fixer to ensure proper structure.
+        editor.model.document.registerPostFixer(writer => {
+            const changes = editor.model.document.differ.getChanges();
+            const unwrap = new Set();
+            const remove = new Set();
+            const merge = new Set();
+            let changed = false;
+            for (const entry of changes) {
+                if (entry.type == 'insert') {
+                    const range = writer.createRange(entry.position, entry.position.getShiftedBy(entry.length));
+                    for (const child of range.getItems()) {
+                        if (child.is('element', 'restrictedEditingException')) {
+                            // Make sure that block exception is not nested or added in invalid place.
+                            if (!schema.checkChild(writer.createPositionBefore(child), child)) {
+                                unwrap.add(child);
+                            }
+                            else if (child.isEmpty) {
+                                remove.add(child);
+                            }
+                            else {
+                                merge.add(child);
+                            }
+                        }
+                        else if (child.is('$textProxy') &&
+                            child.hasAttribute('restrictedEditingException') &&
+                            !schema.checkAttribute(child, 'restrictedEditingException')) {
+                            writer.removeAttribute('restrictedEditingException', child);
+                            changed = true;
+                        }
+                    }
+                }
+                else if (entry.type == 'remove') {
+                    const parent = entry.position.parent;
+                    if (parent.is('element', 'restrictedEditingException') && parent.isEmpty) {
+                        remove.add(parent);
+                    }
+                    // Verify if some block exceptions are siblings now after element removed between.
+                    for (const child of parent.getChildren()) {
+                        if (child.is('element', 'restrictedEditingException')) {
+                            merge.add(child);
+                        }
+                    }
+                }
+            }
+            for (const child of unwrap) {
+                writer.unwrap(child);
+                changed = true;
+            }
+            for (const child of remove) {
+                writer.remove(child);
+                changed = true;
+            }
+            for (const child of merge) {
+                if (child.root.rootName == '$graveyard') {
+                    continue;
+                }
+                const nodeBefore = child.previousSibling;
+                const nodeAfter = child.nextSibling;
+                if (nodeBefore && nodeBefore.is('element', 'restrictedEditingException')) {
+                    writer.merge(writer.createPositionBefore(child));
+                }
+                if (nodeAfter && nodeAfter.is('element', 'restrictedEditingException')) {
+                    writer.merge(writer.createPositionAfter(child));
+                }
+            }
+            return changed;
+        });
+        editor.conversion.for('upcast')
+            .elementToAttribute({
             model: 'restrictedEditingException',
             view: {
                 name: 'span',
                 classes: 'restricted-editing-exception'
             }
+        })
+            .elementToElement({
+            model: 'restrictedEditingException',
+            view: {
+                name: 'div',
+                classes: 'restricted-editing-exception'
+            }
         });
-        editor.conversion.for('downcast').attributeToElement({
+        registerFallbackUpcastConverter(editor);
+        editor.conversion.for('downcast')
+            .attributeToElement({
             model: 'restrictedEditingException',
             view: (modelAttributeValue, { writer }) => {
                 if (modelAttributeValue) {
@@ -48,8 +148,16 @@ export class StandardEditingModeEditing extends Plugin {
                     return writer.createAttributeElement('span', { class: 'restricted-editing-exception' }, { priority: -10 });
                 }
             }
+        })
+            .elementToElement({
+            model: 'restrictedEditingException',
+            view: {
+                name: 'div',
+                classes: 'restricted-editing-exception'
+            }
         });
         editor.commands.add('restrictedEditingException', new RestrictedEditingExceptionCommand(editor));
+        editor.commands.add('restrictedEditingExceptionBlock', new RestrictedEditingExceptionBlockCommand(editor));
         editor.editing.view.change(writer => {
             for (const root of editor.editing.view.document.roots) {
                 writer.addClass('ck-restricted-editing_mode_standard', root);
@@ -57,3 +165,27 @@ export class StandardEditingModeEditing extends Plugin {
         });
     }
 }
+/**
+ * Fallback upcast converter for empty exception span inside a table cell.
+ */
+function registerFallbackUpcastConverter(editor) {
+    const matcher = new Matcher({ name: 'span', classes: 'restricted-editing-exception' });
+    // See: https://github.com/ckeditor/ckeditor5/issues/16376.
+    editor.conversion.for('upcast').add(dispatcher => dispatcher.on('element:span', (evt, data, conversionApi) => {
+        const matcherResult = matcher.match(data.viewItem);
+        if (!matcherResult) {
+            return;
+        }
+        const match = matcherResult.match;
+        if (!conversionApi.consumable.test(data.viewItem, match)) {
+            return;
+        }
+        const modelText = conversionApi.writer.createText(' ', { restrictedEditingException: true });
+        if (!conversionApi.safeInsert(modelText, data.modelCursor)) {
+            return;
+        }
+        conversionApi.consumable.consume(data.viewItem, match);
+        data.modelRange = conversionApi.writer.createRange(data.modelCursor, data.modelCursor.getShiftedBy(modelText.offsetSize));
+        data.modelCursor = data.modelRange.end;
+    }, { priority: 'low' }));
+}

package/src/standardeditingmodeui.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { IconContentUnlock } from 'ckeditor5/src/icons.js';
-import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui.js';
 /**
  * The standard editing mode UI feature.
  *
@@ -31,35 +31,99 @@ export class StandardEditingModeUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        editor.ui.componentFactory.add('restrictedEditingException', () => {
-            const button = this._createButton(ButtonView);
+        const componentFactory = editor.ui.componentFactory;
+        componentFactory.add('restrictedEditingException:dropdown', locale => {
+            const dropdownView = createDropdown(locale);
+            const t = locale.t;
+            const buttons = [
+                componentFactory.create('restrictedEditingException:inline'),
+                componentFactory.create('restrictedEditingException:block')
+            ];
+            for (const button of buttons) {
+                button.set({
+                    withText: true,
+                    tooltip: false
+                });
+            }
+            addToolbarToDropdown(dropdownView, buttons, {
+                enableActiveItemFocusOnDropdownOpen: true,
+                isVertical: true,
+                ariaLabel: t('Enable editing')
+            });
+            dropdownView.buttonView.set({
+                label: t('Enable editing'),
+                icon: IconContentUnlock,
+                tooltip: true
+            });
+            dropdownView.extendTemplate({
+                attributes: {
+                    class: 'ck-restricted-editing-dropdown'
+                }
+            });
+            // Enable button if any of the buttons is enabled.
+            dropdownView.bind('isEnabled').toMany(buttons, 'isEnabled', (...areEnabled) => {
+                return areEnabled.some(isEnabled => isEnabled);
+            });
+            // Focus the editable after executing the command.
+            this.listenTo(dropdownView, 'execute', () => {
+                editor.editing.view.focus();
+            });
+            return dropdownView;
+        });
+        componentFactory.add('restrictedEditingException:inline', () => {
+            const button = this._createButton('restrictedEditingException', ButtonView);
+            button.set({
+                tooltip: true,
+                isToggleable: true
+            });
+            return button;
+        });
+        componentFactory.add('restrictedEditingException:block', () => {
+            const button = this._createButton('restrictedEditingExceptionBlock', ButtonView);
             button.set({
                 tooltip: true,
                 isToggleable: true
             });
             return button;
         });
-        editor.ui.componentFactory.add('menuBar:restrictedEditingException', () => {
-            return this._createButton(MenuBarMenuListItemButtonView);
+        componentFactory.add('menuBar:restrictedEditingException:inline', () => {
+            return this._createButton('restrictedEditingException', MenuBarMenuListItemButtonView);
+        });
+        componentFactory.add('menuBar:restrictedEditingException:block', () => {
+            return this._createButton('restrictedEditingExceptionBlock', MenuBarMenuListItemButtonView);
+        });
+        // Aliases for backward compatibility.
+        componentFactory.add('restrictedEditingException', () => {
+            return componentFactory.create('restrictedEditingException:inline');
+        });
+        componentFactory.add('menuBar:restrictedEditingException', () => {
+            return componentFactory.create('menuBar:restrictedEditingException:inline');
         });
     }
     /**
      * Creates a button for restricted editing exception command to use either in toolbar or in menu bar.
      */
-    _createButton(ButtonClass) {
+    _createButton(commandName, ButtonClass) {
         const editor = this.editor;
         const locale = editor.locale;
-        const command = this.editor.commands.get('restrictedEditingException');
+        const command = this.editor.commands.get(commandName);
         const view = new ButtonClass(locale);
         const t = locale.t;
         view.icon = IconContentUnlock;
         view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
-        view.bind('label').to(command, 'value', value => {
-            return value ? t('Disable editing') : t('Enable editing');
-        });
+        if (commandName == 'restrictedEditingExceptionBlock') {
+            view.bind('label').to(command, 'value', value => {
+                return value ? t('Disable block editing') : t('Enable block editing');
+            });
+        }
+        else {
+            view.bind('label').to(command, 'value', value => {
+                return value ? t('Disable inline editing') : t('Enable inline editing');
+            });
+        }
         // Execute the command.
         this.listenTo(view, 'execute', () => {
-            editor.execute('restrictedEditingException');
+            editor.execute(commandName);
             editor.editing.view.focus();
         });
         return view;