@ckeditor/ckeditor5-restricted-editing 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/restrictededitingmodeui.js

@@ -1,139 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/restrictededitingmodeui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconContentLock } from 'ckeditor5/src/icons.js';
-import { UIModel, createDropdown, addListToDropdown, MenuBarMenuListItemButtonView, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView } from 'ckeditor5/src/ui.js';
-import { Collection } from 'ckeditor5/src/utils.js';
-/**
- * The restricted editing mode UI feature.
- *
- * It introduces the `'restrictedEditing'` dropdown that offers tools to navigate between exceptions across
- * the document.
- */
-export class RestrictedEditingModeUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'RestrictedEditingModeUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const t = editor.t;
-        editor.ui.componentFactory.add('restrictedEditing', locale => {
-            const dropdownView = createDropdown(locale);
-            const listItems = new Collection();
-            this._getButtonDefinitions().forEach(({ commandName, label, keystroke }) => {
-                listItems.add(this._getButtonDefinition(commandName, label, keystroke));
-            });
-            addListToDropdown(dropdownView, listItems, {
-                role: 'menu'
-            });
-            dropdownView.buttonView.set({
-                label: t('Navigate editable regions'),
-                icon: IconContentLock,
-                tooltip: true,
-                isEnabled: true,
-                isOn: false
-            });
-            this.listenTo(dropdownView, 'execute', evt => {
-                const { _commandName } = evt.source;
-                editor.execute(_commandName);
-                editor.editing.view.focus();
-            });
-            return dropdownView;
-        });
-        editor.ui.componentFactory.add('menuBar:restrictedEditing', locale => {
-            const menuView = new MenuBarMenuView(locale);
-            const listView = new MenuBarMenuListView(locale);
-            listView.set({
-                ariaLabel: t('Navigate editable regions'),
-                role: 'menu'
-            });
-            menuView.buttonView.set({
-                label: t('Navigate editable regions'),
-                icon: IconContentLock
-            });
-            menuView.panelView.children.add(listView);
-            this._getButtonDefinitions().forEach(({ commandName, label, keystroke }) => {
-                const listItemView = new MenuBarMenuListItemView(locale, menuView);
-                const buttonView = this._createMenuBarButton(label, commandName, keystroke);
-                buttonView.delegate('execute').to(menuView);
-                listItemView.children.add(buttonView);
-                listView.items.add(listItemView);
-            });
-            return menuView;
-        });
-    }
-    /**
-     * Creates a button for restricted editing command to use in menu bar.
-     */
-    _createMenuBarButton(label, commandName, keystroke) {
-        const editor = this.editor;
-        const command = editor.commands.get(commandName);
-        const view = new MenuBarMenuListItemButtonView(editor.locale);
-        view.set({
-            label,
-            keystroke,
-            isEnabled: true,
-            isOn: false
-        });
-        view.bind('isEnabled').to(command);
-        // Execute the command.
-        this.listenTo(view, 'execute', () => {
-            editor.execute(commandName);
-            editor.editing.view.focus();
-        });
-        return view;
-    }
-    /**
-     * Returns a definition of the navigation button to be used in the dropdown.
-     *
-     * @param commandName The name of the command that the button represents.
-     * @param label The translated label of the button.
-     * @param keystroke The button keystroke.
-     */
-    _getButtonDefinition(commandName, label, keystroke) {
-        const editor = this.editor;
-        const command = editor.commands.get(commandName);
-        const definition = {
-            type: 'button',
-            model: new UIModel({
-                label,
-                withText: true,
-                keystroke,
-                withKeystroke: true,
-                role: 'menuitem',
-                _commandName: commandName
-            })
-        };
-        definition.model.bind('isEnabled').to(command, 'isEnabled');
-        return definition;
-    }
-    /**
-     * Returns definitions for UI buttons.
-     *
-     * @internal
-     */
-    _getButtonDefinitions() {
-        const t = this.editor.locale.t;
-        return [
-            { commandName: 'goToPreviousRestrictedEditingException', label: t('Previous editable region'), keystroke: 'Shift+Tab' },
-            { commandName: 'goToNextRestrictedEditingException', label: t('Next editable region'), keystroke: 'Tab' }
-        ];
-    }
-}

package/src/standardeditingmode.js

@@ -1,36 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/standardeditingmode
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { StandardEditingModeEditing } from './standardeditingmodeediting.js';
-import { StandardEditingModeUI } from './standardeditingmodeui.js';
-import '../theme/restrictedediting.css';
-/**
- * The standard editing mode plugin.
- *
- * This is a "glue" plugin that loads the following plugins:
- *
- * * The {@link module:restricted-editing/standardeditingmodeediting~StandardEditingModeEditing standard mode editing feature}.
- * * The {@link module:restricted-editing/standardeditingmodeui~StandardEditingModeUI standard mode UI feature}.
- */
-export class StandardEditingMode extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StandardEditingMode';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    static get requires() {
-        return [StandardEditingModeEditing, StandardEditingModeUI];
-    }
-}

package/src/standardeditingmodeediting.js

@@ -1,193 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/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';
-import { RestrictedEditingExceptionAutoCommand } from './restrictededitingexceptionautocommand.js';
-/**
- * The standard editing mode editing feature.
- *
- * * It introduces the `restrictedEditingException` text attribute that is rendered as
- * a `<span>` element with the `restricted-editing-exception` CSS class.
- * * It registers the `'restrictedEditingException'` command.
- */
-export class StandardEditingModeEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StandardEditingModeEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        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 }) => {
-                if (modelAttributeValue) {
-                    // Make the restricted editing <span> outer-most in the view.
-                    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.commands.add('restrictedEditingExceptionAuto', new RestrictedEditingExceptionAutoCommand(editor));
-        editor.editing.view.change(writer => {
-            for (const root of editor.editing.view.document.roots) {
-                writer.addClass('ck-restricted-editing_mode_standard', root);
-            }
-        });
-    }
-}
-/**
- * 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

@@ -1,150 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/standardeditingmodeui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconContentUnlock } from 'ckeditor5/src/icons.js';
-import { ButtonView, MenuBarMenuListItemButtonView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui.js';
-/**
- * The standard editing mode UI feature.
- *
- * It introduces the `'restrictedEditingException'` button that marks text as unrestricted for editing.
- */
-export class StandardEditingModeUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'StandardEditingModeUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const componentFactory = editor.ui.componentFactory;
-        // Dropdown button with inline/block buttons.
-        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;
-        });
-        // Inline exception button.
-        componentFactory.add('restrictedEditingException:inline', () => {
-            const button = this._createButton('restrictedEditingException', ButtonView);
-            button.set({
-                tooltip: true
-            });
-            return button;
-        });
-        // Block exception button.
-        componentFactory.add('restrictedEditingException:block', () => {
-            const button = this._createButton('restrictedEditingExceptionBlock', ButtonView);
-            button.set({
-                tooltip: true
-            });
-            return button;
-        });
-        // Menu bar inline/block buttons.
-        componentFactory.add('menuBar:restrictedEditingException:inline', () => {
-            return this._createButton('restrictedEditingException', MenuBarMenuListItemButtonView);
-        });
-        componentFactory.add('menuBar:restrictedEditingException:block', () => {
-            return this._createButton('restrictedEditingExceptionBlock', MenuBarMenuListItemButtonView);
-        });
-        // Auto button - triggers inline or block exception command.
-        componentFactory.add('restrictedEditingException:auto', () => {
-            const button = this._createButton('restrictedEditingExceptionAuto', ButtonView);
-            button.set({
-                tooltip: true
-            });
-            return button;
-        });
-        componentFactory.add('menuBar:restrictedEditingException:auto', () => {
-            return this._createButton('restrictedEditingExceptionAuto', 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(commandName, ButtonClass) {
-        const editor = this.editor;
-        const locale = editor.locale;
-        const command = this.editor.commands.get(commandName);
-        const view = new ButtonClass(locale);
-        const t = locale.t;
-        view.icon = IconContentUnlock;
-        view.isToggleable = true;
-        view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
-        if (commandName == 'restrictedEditingExceptionAuto') {
-            view.bind('label').to(command, 'value', value => {
-                return value ? t('Disable editing') : t('Enable editing');
-            });
-        }
-        else 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(commandName);
-            editor.editing.view.focus();
-        });
-        return view;
-    }
-}

package/theme/restrictedediting.css

@@ -1,10 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/*
- * Note: This file should contain the wireframe styles only. But since there are no such styles,
- * it acts as a message to the builder telling that it should look for the corresponding styles
- * **in the theme** when compiling the editor.
- */