@ckeditor/ckeditor5-restricted-editing 0.0.0-internal-20241017.0

package/src/restrictededitingmodeui.js

@@ -0,0 +1,139 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module restricted-editing/restrictededitingmodeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ViewModel, createDropdown, addListToDropdown, MenuBarMenuListItemButtonView, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import lockIcon from '../theme/icons/contentlock.svg';
+/**
+ * The restricted editing mode UI feature.
+ *
+ * It introduces the `'restrictedEditing'` dropdown that offers tools to navigate between exceptions across
+ * the document.
+ */
+export default 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: lockIcon,
+                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: lockIcon
+            });
+            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 ViewModel({
+                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.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @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 default class StandardEditingMode extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "StandardEditingMode";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    static get requires(): readonly [typeof StandardEditingModeEditing, typeof StandardEditingModeUI];
+}

package/src/standardeditingmode.js

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @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 default 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.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module restricted-editing/standardeditingmodeediting
+ */
+import { Plugin } from 'ckeditor5/src/core.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 default class StandardEditingModeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "StandardEditingModeEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/src/standardeditingmodeediting.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module restricted-editing/standardeditingmodeediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import RestrictedEditingExceptionCommand from './restrictededitingexceptioncommand.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 default class StandardEditingModeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'StandardEditingModeEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        editor.model.schema.extend('$text', { allowAttributes: ['restrictedEditingException'] });
+        editor.conversion.for('upcast').elementToAttribute({
+            model: 'restrictedEditingException',
+            view: {
+                name: 'span',
+                classes: 'restricted-editing-exception'
+            }
+        });
+        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 });
+                }
+            }
+        });
+        editor.commands.add('restrictedEditingException', new RestrictedEditingExceptionCommand(editor));
+        editor.editing.view.change(writer => {
+            for (const root of editor.editing.view.document.roots) {
+                writer.addClass('ck-restricted-editing_mode_standard', root);
+            }
+        });
+    }
+}

package/src/standardeditingmodeui.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module restricted-editing/standardeditingmodeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * The standard editing mode UI feature.
+ *
+ * It introduces the `'restrictedEditingException'` button that marks text as unrestricted for editing.
+ */
+export default class StandardEditingModeUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "StandardEditingModeUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates a button for restricted editing exception command to use either in toolbar or in menu bar.
+     */
+    private _createButton;
+}

package/src/standardeditingmodeui.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module restricted-editing/standardeditingmodeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import unlockIcon from '../theme/icons/contentunlock.svg';
+/**
+ * The standard editing mode UI feature.
+ *
+ * It introduces the `'restrictedEditingException'` button that marks text as unrestricted for editing.
+ */
+export default class StandardEditingModeUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'StandardEditingModeUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('restrictedEditingException', () => {
+            const button = this._createButton(ButtonView);
+            button.set({
+                tooltip: true,
+                isToggleable: true
+            });
+            return button;
+        });
+        editor.ui.componentFactory.add('menuBar:restrictedEditingException', () => {
+            return this._createButton(MenuBarMenuListItemButtonView);
+        });
+    }
+    /**
+     * Creates a button for restricted editing exception command to use either in toolbar or in menu bar.
+     */
+    _createButton(ButtonClass) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const command = this.editor.commands.get('restrictedEditingException');
+        const view = new ButtonClass(locale);
+        const t = locale.t;
+        view.icon = unlockIcon;
+        view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
+        view.bind('label').to(command, 'value', value => {
+            return value ? t('Disable editing') : t('Enable editing');
+        });
+        // Execute the command.
+        this.listenTo(view, 'execute', () => {
+            editor.execute('restrictedEditingException');
+            editor.editing.view.focus();
+        });
+        return view;
+    }
+}

package/theme/icons/contentlock.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 6.5a3.5 3.5 0 0 1 3.495 3.308L19 10v2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1v-2l.005-.192A3.5 3.5 0 0 1 15.5 6.5zm0 7.5a.5.5 0 0 0-.492.41L15 14.5v2a.5.5 0 0 0 .992.09L16 16.5v-2a.5.5 0 0 0-.5-.5zm0-6a2 2 0 0 0-2 2v2h4v-2a2 2 0 0 0-2-2zm-9.25 8a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5h5.5zm0-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5h5.5zm3-5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5h8.5zm6-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 0 1 0-1.5h14.5z"/></svg>

package/theme/icons/contentunlock.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 16a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5h5.5zm0-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 1 1 0-1.5h5.5zm3-5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5h8.5zm6-5a.75.75 0 1 1 0 1.5H.75a.75.75 0 0 1 0-1.5h14.5zm.25 5.5a3.5 3.5 0 0 1 3.143 1.959.75.75 0 0 1-1.36.636A2 2 0 0 0 13.5 10v2H19a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1v-2l.005-.192A3.5 3.5 0 0 1 15.5 6.5zm0 7.5a.5.5 0 0 0-.492.41L15 14.5v2a.5.5 0 0 0 .992.09L16 16.5v-2a.5.5 0 0 0-.5-.5z"/></svg>

package/theme/restrictedediting.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * 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.
+ */