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

package/dist/index.js

@@ -3,10 +3,72 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { getCode, parseKeystroke, Collection, first } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { Matcher } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { IconContentLock, IconContentUnlock } from '@ckeditor/ckeditor5-icons/dist/index.js';
-import { createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView, UIModel, ButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { Collection } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView, UIModel, addToolbarToDropdown, ButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
+
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */ /**
+ * @module restricted-editing/restrictededitingmode/utils
+ */ /**
+ * Returns a single "restricted-editing-exception" marker at a given position. Contrary to
+ * {@link module:engine/model/markercollection~MarkerCollection#getMarkersAtPosition}, it returnd a marker also when the postion is
+ * equal to one of the marker's start or end positions.
+ *
+ * @internal
+ */ function getMarkerAtPosition(editor, position) {
+    for (const marker of editor.model.markers){
+        const markerRange = getExceptionRange(marker, editor.model);
+        if (isPositionInRangeBoundaries(markerRange, position)) {
+            if (marker.name.startsWith('restrictedEditingException:')) {
+                return marker;
+            }
+        }
+    }
+}
+/**
+ * Checks if the position is fully contained in the range. Positions equal to range start or end are considered "in".
+ *
+ * @internal
+ */ function isPositionInRangeBoundaries(range, position) {
+    return range.containsPosition(position) || range.end.isEqual(position) || range.start.isEqual(position);
+}
+/**
+ * Checks if the selection is fully contained in the marker. Positions on marker boundaries are considered "in".
+ *
+ * ```xml
+ * <marker>[]foo</marker> -> true
+ * <marker>f[oo]</marker> -> true
+ * <marker>f[oo</marker> ba]r -> false
+ * <marker>foo</marker> []bar -> false
+ * ```
+ *
+ * @internal
+ */ function isSelectionInMarker(selection, model, marker) {
+    if (!marker) {
+        return false;
+    }
+    const markerRange = getExceptionRange(marker, model);
+    if (selection.isCollapsed) {
+        return isPositionInRangeBoundaries(markerRange, selection.focus);
+    }
+    return markerRange.containsRange(selection.getFirstRange(), true);
+}
+/**
+ * Returns the marker range asjusted to the inside of exception wrapper element if needed.
+ *
+ * @internal
+ */ function getExceptionRange(marker, model) {
+    const markerRange = marker.getRange();
+    const wrapperElement = markerRange.getContainedElement();
+    if (wrapperElement && wrapperElement.is('element', 'restrictedEditingException')) {
+        return model.createRangeIn(wrapperElement);
+    }
+    return markerRange;
+}
 
 /**
  * The command that allows navigation across the exceptions in the edited document.
@@ -59,7 +121,7 @@ import { Collection } from '@ckeditor/ckeditor5-utils/dist/index.js';
     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) || selectionPosition.isTouching(markerRange.end) && selectionPosition.hasSameParentAs(markerRange.end);
@@ -90,56 +152,6 @@ import { Collection } from '@ckeditor/ckeditor5-utils/dist/index.js';
     }).shift();
 }
 
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */ /**
- * @module restricted-editing/restrictededitingmode/utils
- */ /**
- * Returns a single "restricted-editing-exception" marker at a given position. Contrary to
- * {@link module:engine/model/markercollection~MarkerCollection#getMarkersAtPosition}, it returnd a marker also when the postion is
- * equal to one of the marker's start or end positions.
- *
- * @internal
- */ function getMarkerAtPosition(editor, position) {
-    for (const marker of editor.model.markers){
-        const markerRange = marker.getRange();
-        if (isPositionInRangeBoundaries(markerRange, position)) {
-            if (marker.name.startsWith('restrictedEditingException:')) {
-                return marker;
-            }
-        }
-    }
-}
-/**
- * Checks if the position is fully contained in the range. Positions equal to range start or end are considered "in".
- *
- * @internal
- */ function isPositionInRangeBoundaries(range, position) {
-    return range.containsPosition(position) || range.end.isEqual(position) || range.start.isEqual(position);
-}
-/**
- * Checks if the selection is fully contained in the marker. Positions on marker boundaries are considered "in".
- *
- * ```xml
- * <marker>[]foo</marker> -> true
- * <marker>f[oo]</marker> -> true
- * <marker>f[oo</marker> ba]r -> false
- * <marker>foo</marker> []bar -> false
- * ```
- *
- * @internal
- */ function isSelectionInMarker(selection, marker) {
-    if (!marker) {
-        return false;
-    }
-    const markerRange = marker.getRange();
-    if (selection.isCollapsed) {
-        return isPositionInRangeBoundaries(markerRange, selection.focus);
-    }
-    return markerRange.containsRange(selection.getFirstRange(), true);
-}
-
 const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';
 /**
  * Adds a visual highlight style to a restricted editing exception that the selection is anchored to.
@@ -165,9 +177,16 @@ const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';
         if (!marker) {
             return false;
         }
-        for (const viewElement of editor.editing.mapper.markerNameToElements(marker.name)){
+        const modelWrapperElement = marker.getRange().getContainedElement();
+        if (modelWrapperElement && modelWrapperElement.is('element', 'restrictedEditingException')) {
+            const viewElement = editor.editing.mapper.toViewElement(modelWrapperElement);
             writer.addClass(HIGHLIGHT_CLASS, viewElement);
             highlightedMarkers.add(viewElement);
+        } else {
+            for (const viewElement of editor.editing.mapper.markerNameToElements(marker.name)){
+                writer.addClass(HIGHLIGHT_CLASS, viewElement);
+                highlightedMarkers.add(viewElement);
+            }
         }
         return false;
     });
@@ -237,7 +256,7 @@ const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';
  * @param config Conversion configuration.
  * @internal
  */ function upcastHighlightToMarker(config) {
-    return (dispatcher)=>dispatcher.on('element:span', (evt, data, conversionApi)=>{
+    return (dispatcher)=>dispatcher.on('element', (evt, data, conversionApi)=>{
             const { writer } = conversionApi;
             const matcher = new Matcher(config.view);
             const matcherResult = matcher.match(data.viewItem);
@@ -248,7 +267,20 @@ const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';
             const match = matcherResult.match;
             // Force consuming element's name (taken from upcast helpers elementToElement converter).
             match.name = true;
-            const { modelRange: convertedChildrenRange } = conversionApi.convertChildren(data.viewItem, data.modelCursor);
+            if (!conversionApi.consumable.test(data.viewItem, match)) {
+                return;
+            }
+            let position = data.modelCursor;
+            let wrapperElement = null;
+            if (config.useWrapperElement) {
+                if (!conversionApi.schema.checkChild(position, 'restrictedEditingException')) {
+                    return;
+                }
+                wrapperElement = writer.createElement('restrictedEditingException');
+                writer.insert(wrapperElement, position);
+                position = writer.createPositionAt(wrapperElement, 0);
+            }
+            const { modelRange: convertedChildrenRange } = conversionApi.convertChildren(data.viewItem, position);
             conversionApi.consumable.consume(data.viewItem, match);
             const markerName = config.model();
             const fakeMarkerStart = writer.createElement('$marker', {
@@ -257,9 +289,14 @@ const HIGHLIGHT_CLASS = 'restricted-editing-exception_selected';
             const fakeMarkerEnd = writer.createElement('$marker', {
                 'data-name': markerName
             });
-            // Insert in reverse order to use converter content positions directly (without recalculating).
-            writer.insert(fakeMarkerEnd, convertedChildrenRange.end);
-            writer.insert(fakeMarkerStart, convertedChildrenRange.start);
+            if (wrapperElement) {
+                writer.insert(fakeMarkerStart, writer.createPositionBefore(wrapperElement));
+                writer.insert(fakeMarkerEnd, writer.createPositionAfter(wrapperElement));
+            } else {
+                // Insert in reverse order to use converter content positions directly (without recalculating).
+                writer.insert(fakeMarkerEnd, convertedChildrenRange.end);
+                writer.insert(fakeMarkerStart, convertedChildrenRange.start);
+            }
             data.modelRange = writer.createRange(writer.createPositionBefore(fakeMarkerStart), writer.createPositionAfter(fakeMarkerEnd));
             data.modelCursor = data.modelRange.end;
         });
@@ -362,6 +399,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         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();
@@ -382,7 +420,9 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         }, {
             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);
@@ -414,6 +454,16 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         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:
 	 *
@@ -434,16 +484,35 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
             },
             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;
@@ -474,7 +543,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         });
         // 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 {
@@ -487,7 +556,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         // 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'
@@ -495,7 +564,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
             }
         });
         editor.conversion.for('dataDowncast').markerToElement({
-            model: 'restrictedEditingException',
+            model: 'restrictedEditingException:inline',
             view: (markerData, { writer })=>{
                 return writer.createEmptyElement('span', {
                     class: 'restricted-editing-exception'
@@ -532,10 +601,28 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
             });
         }
         // 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)=>{
@@ -545,9 +632,12 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         }, {
             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.
@@ -570,7 +660,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         }
         const marker = getMarkerAtPosition(editor, selection.focus);
         this._disableCommands();
-        if (isSelectionInMarker(selection, marker)) {
+        if (isSelectionInMarker(selection, editor.model, marker)) {
             this._enableCommands(marker);
         }
     }
@@ -578,16 +668,18 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
 	 * Enables commands in non-restricted regions.
 	 */ _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);
@@ -608,7 +700,10 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
 /**
  * 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);
@@ -619,11 +714,13 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
         //
         // 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);
             });
         }
     };
@@ -635,11 +732,11 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
  * - is on marker start - "delete" - to prevent removing content before marker
  * - 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;
@@ -664,7 +761,7 @@ const COMMAND_FORCE_DISABLE_ID = 'RestrictedEditingMode';
             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')) {
@@ -730,20 +827,6 @@ function isRangeInsideSingleMarker(editor, range) {
         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';
-        }
-    };
-}
 
 /**
  * The restricted editing mode UI feature.
@@ -953,6 +1036,193 @@ function allowTextOnlyInClipboardHolder() {
     }
 }
 
+/**
+ * The command that toggles exception blocks for the restricted editing.
+ */ class RestrictedEditingExceptionBlockCommand extends Command {
+    /**
+	 * @inheritDoc
+	 */ refresh() {
+        this.value = this._getValue();
+        this.isEnabled = this._checkEnabled();
+    }
+    /**
+	 * Wraps or unwraps the selected blocks with non-restricted area.
+	 *
+	 * @fires execute
+	 * @param options Command options.
+	 * @param options.forceValue If set, it will force the command behavior. If `true`, the command will apply a block exception,
+	 * otherwise the command will remove the block exception. If not set, the command will act basing on its current value.
+	 */ execute(options = {}) {
+        const model = this.editor.model;
+        const schema = model.schema;
+        const selection = model.document.selection;
+        const blocks = Array.from(selection.getSelectedBlocks());
+        const value = options.forceValue === undefined ? !this.value : options.forceValue;
+        model.change((writer)=>{
+            if (!value) {
+                const blocksToUnwrap = blocks.map((block)=>{
+                    // Find blocks directly nested inside an exception.
+                    return findExceptionContentBlock(block);
+                }).filter((exception)=>!!exception);
+                this._removeException(writer, blocksToUnwrap);
+            } else {
+                const blocksToWrap = blocks.filter((block)=>{
+                    // Already wrapped blocks needs to be considered while wrapping too
+                    // in order to reuse their wrapper elements.
+                    return findException(block) || checkCanBeWrapped(schema, block);
+                });
+                this._applyException(writer, blocksToWrap);
+            }
+        });
+    }
+    /**
+	 * Checks the command's {@link #value}.
+	 */ _getValue() {
+        const selection = this.editor.model.document.selection;
+        const firstBlock = first(selection.getSelectedBlocks());
+        return !!(firstBlock && findException(firstBlock));
+    }
+    /**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @returns Whether the command should be enabled.
+	 */ _checkEnabled() {
+        if (this.value) {
+            return true;
+        }
+        const selection = this.editor.model.document.selection;
+        const schema = this.editor.model.schema;
+        const firstBlock = first(selection.getSelectedBlocks());
+        if (!firstBlock) {
+            return false;
+        }
+        return checkCanBeWrapped(schema, firstBlock);
+    }
+    /**
+	 * Unwraps the exception from given blocks.
+	 *
+	 * If blocks which are supposed to be unwrapped are in the middle of an exception,
+	 * start it or end it, then the exception will be split (if needed) and the blocks
+	 * will be moved out of it, so other exception blocks remained wrapped.
+	 */ _removeException(writer, blocks) {
+        // Unwrap all groups of block. Iterate in the reverse order to not break following ranges.
+        getRangesOfBlockGroups(writer, blocks).reverse().forEach((groupRange)=>{
+            if (groupRange.start.isAtStart && groupRange.end.isAtEnd) {
+                writer.unwrap(groupRange.start.parent);
+                return;
+            }
+            // The group of blocks are at the beginning of an exception so let's move them left (out of the exception).
+            if (groupRange.start.isAtStart) {
+                const positionBefore = writer.createPositionBefore(groupRange.start.parent);
+                writer.move(groupRange, positionBefore);
+                return;
+            }
+            // The blocks are in the middle of an exception so we need to split the exception after the last block
+            // so we move the items there.
+            if (!groupRange.end.isAtEnd) {
+                writer.split(groupRange.end);
+            }
+            // Now we are sure that groupRange.end.isAtEnd is true, so let's move the blocks right.
+            const positionAfter = writer.createPositionAfter(groupRange.end.parent);
+            writer.move(groupRange, positionAfter);
+        });
+    }
+    /**
+	 * Applies the exception to given blocks.
+	 */ _applyException(writer, blocks) {
+        const schema = this.editor.model.schema;
+        const exceptionsToMerge = [];
+        // Wrap all groups of block. Iterate in the reverse order to not break following ranges.
+        getRangesOfBlockGroups(writer, blocks).reverse().forEach((groupRange)=>{
+            let exception = findException(groupRange.start);
+            if (!exception) {
+                exception = writer.createElement('restrictedEditingException');
+                writer.wrap(groupRange, exception);
+            }
+            exceptionsToMerge.push(exception);
+        });
+        // Merge subsequent exception elements. Reverse the order again because this time we want to go through
+        // the exception elements in the source order (due to how merge works – it moves the right element's content
+        // to the first element and removes the right one. Since we may need to merge a couple of subsequent exception elements
+        // we want to keep the reference to the first (furthest left) one.
+        exceptionsToMerge.reverse();
+        // But first add any neighbouring block exceptions to the list.
+        if (exceptionsToMerge.length) {
+            const previousSibling = exceptionsToMerge.at(0).previousSibling;
+            const nextSibling = exceptionsToMerge.at(-1).nextSibling;
+            if (previousSibling?.is('element', 'restrictedEditingException')) {
+                exceptionsToMerge.unshift(previousSibling);
+            }
+            if (nextSibling?.is('element', 'restrictedEditingException')) {
+                exceptionsToMerge.push(nextSibling);
+            }
+        }
+        // Merge subsequent exceptions.
+        exceptionsToMerge.reduce((currentException, nextException)=>{
+            if (currentException.nextSibling == nextException) {
+                writer.merge(writer.createPositionAfter(currentException));
+                return currentException;
+            }
+            return nextException;
+        });
+        // Remove inline exceptions from block exception.
+        schema.removeDisallowedAttributes(blocks, writer);
+    }
+}
+function findException(elementOrPosition) {
+    return elementOrPosition.findAncestor('restrictedEditingException', {
+        includeSelf: true
+    });
+}
+function findExceptionContentBlock(element) {
+    let node = element;
+    while(node.parent){
+        if (node.parent.name == 'restrictedEditingException') {
+            return node;
+        }
+        node = node.parent;
+    }
+    return null;
+}
+/**
+ * Returns a minimal array of ranges containing groups of subsequent blocks.
+ *
+ * content:         abcdefgh
+ * blocks:          [ a, b, d, f, g, h ]
+ * output ranges:   [ab]c[d]e[fgh]
+ */ function getRangesOfBlockGroups(writer, blocks) {
+    let startPosition;
+    let i = 0;
+    const ranges = [];
+    while(i < blocks.length){
+        const block = blocks[i];
+        const nextBlock = blocks[i + 1];
+        if (!startPosition) {
+            startPosition = writer.createPositionBefore(block);
+        }
+        if (!nextBlock || block.nextSibling != nextBlock) {
+            ranges.push(writer.createRange(startPosition, writer.createPositionAfter(block)));
+            startPosition = null;
+        }
+        i++;
+    }
+    return ranges;
+}
+/**
+ * Checks whether exception can wrap the block.
+ */ function checkCanBeWrapped(schema, block) {
+    const parentContext = schema.createContext(block.parent);
+    // Is block exception allowed in parent of block.
+    if (!schema.checkChild(parentContext, 'restrictedEditingException')) {
+        return false;
+    }
+    // Is block allowed inside block exception.
+    if (!schema.checkChild(parentContext.push('restrictedEditingException'), block)) {
+        return false;
+    }
+    return true;
+}
+
 /**
  * The standard editing mode editing feature.
  *
@@ -974,18 +1244,107 @@ function allowTextOnlyInClipboardHolder() {
 	 * @inheritDoc
 	 */ init() {
         const editor = this.editor;
-        editor.model.schema.extend('$text', {
+        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'
+            }
         });
+        registerFallbackUpcastConverter(editor);
         editor.conversion.for('downcast').attributeToElement({
             model: 'restrictedEditingException',
             view: (modelAttributeValue, { writer })=>{
@@ -998,8 +1357,15 @@ function allowTextOnlyInClipboardHolder() {
                     });
                 }
             }
+        }).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);
@@ -1007,6 +1373,36 @@ function allowTextOnlyInClipboardHolder() {
         });
     }
 }
+/**
+ * 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'
+        }));
+}
 
 /**
  * The standard editing mode UI feature.
@@ -1027,34 +1423,97 @@ function allowTextOnlyInClipboardHolder() {
 	 * @inheritDoc
 	 */ 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;
         });
-        editor.ui.componentFactory.add('menuBar:restrictedEditingException', ()=>{
-            return this._createButton(MenuBarMenuListItemButtonView);
+        componentFactory.add('restrictedEditingException:block', ()=>{
+            const button = this._createButton('restrictedEditingExceptionBlock', ButtonView);
+            button.set({
+                tooltip: true,
+                isToggleable: true
+            });
+            return button;
+        });
+        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;
@@ -1087,5 +1546,5 @@ function allowTextOnlyInClipboardHolder() {
     }
 }
 
-export { RestrictedEditingExceptionCommand, RestrictedEditingMode, RestrictedEditingModeEditing, RestrictedEditingModeNavigationCommand, RestrictedEditingModeUI, StandardEditingMode, StandardEditingModeEditing, StandardEditingModeUI, extendMarkerOnTypingPostFixer as _extendRestrictedEditingMarkerOnTypingPostFixer, getMarkerAtPosition as _getRestrictedEditingMarkerAtPosition, isPositionInRangeBoundaries as _isRestrictedEditingPositionInRangeBoundaries, isSelectionInMarker as _isRestrictedEditingSelectionInMarker, resurrectCollapsedMarkerPostFixer as _resurrectRestrictedEditingCollapsedMarkerPostFixer, setupExceptionHighlighting as _setupRestrictedEditingExceptionHighlighting, upcastHighlightToMarker as _upcastRestrictedEditingHighlightToMarker };
+export { RestrictedEditingExceptionBlockCommand, RestrictedEditingExceptionCommand, RestrictedEditingMode, RestrictedEditingModeEditing, RestrictedEditingModeNavigationCommand, RestrictedEditingModeUI, StandardEditingMode, StandardEditingModeEditing, StandardEditingModeUI, extendMarkerOnTypingPostFixer as _extendRestrictedEditingMarkerOnTypingPostFixer, getMarkerAtPosition as _getRestrictedEditingMarkerAtPosition, isPositionInRangeBoundaries as _isRestrictedEditingPositionInRangeBoundaries, isSelectionInMarker as _isRestrictedEditingSelectionInMarker, resurrectCollapsedMarkerPostFixer as _resurrectRestrictedEditingCollapsedMarkerPostFixer, setupExceptionHighlighting as _setupRestrictedEditingExceptionHighlighting, upcastHighlightToMarker as _upcastRestrictedEditingHighlightToMarker };
 //# sourceMappingURL=index.js.map