@ckeditor/ckeditor5-bookmark 0.0.0-nightly-next-20250302.0 → 0.0.0-nightly-20250303.0

package/src/bookmarkui.js

@@ -2,13 +2,15 @@
  * @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
  */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView, ContextualBalloon, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, clickOutsideHandler, LabelView, BalloonPanelView } from 'ckeditor5/src/ui.js';
-import { IconBookmark, IconRemove, IconBookmarkMedium, IconBookmarkSmall, IconPencil } from 'ckeditor5/src/icons.js';
-import { isWidget, WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
+/**
+ * @module bookmark/bookmarkui
+ */
+import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { ButtonView, ContextualBalloon, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, clickOutsideHandler } from 'ckeditor5/src/ui.js';
+import { ClickObserver } from 'ckeditor5/src/engine.js';
 import BookmarkFormView from './ui/bookmarkformview.js';
+import BookmarkActionsView from './ui/bookmarkactionsview.js';
 import BookmarkEditing from './bookmarkediting.js';
-import '../theme/bookmarktoolbar.css';
 const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
 /**
  * The UI plugin of the bookmark feature.
@@ -17,19 +19,22 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
  * which inserts the `bookmark` element upon selection.
  */
 export default class BookmarkUI extends Plugin {
-    /**
-     * The form view displayed inside the balloon.
-     */
-    formView = null;
-    /**
-     * The contextual balloon plugin instance.
-     */
-    _balloon;
+    constructor() {
+        super(...arguments);
+        /**
+         * The actions view displayed inside of the balloon.
+         */
+        this.actionsView = null;
+        /**
+         * The form view displayed inside the balloon.
+         */
+        this.formView = null;
+    }
     /**
      * @inheritDoc
      */
     static get requires() {
-        return [BookmarkEditing, ContextualBalloon, WidgetToolbarRepository];
+        return [BookmarkEditing, ContextualBalloon];
     }
     /**
      * @inheritDoc
@@ -48,13 +53,11 @@ export default class BookmarkUI extends Plugin {
      */
     init() {
         const editor = this.editor;
+        editor.editing.view.addObserver(ClickObserver);
         this._balloon = editor.plugins.get(ContextualBalloon);
-        // Register the link provider in link plugin to display the link form.
-        if (editor.plugins.has('LinkUI')) {
-            this._registerLinkProvider();
-        }
         // Create toolbar buttons.
-        this._registerComponents();
+        this._createToolbarBookmarkButton();
+        this._enableBalloonActivators();
         // Renders a fake visual selection marker on an expanded selection.
         editor.conversion.for('editingDowncast').markerToHighlight({
             model: VISUAL_SELECTION_MARKER_NAME,
@@ -75,35 +78,6 @@ export default class BookmarkUI extends Plugin {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const editor = this.editor;
-        const t = editor.locale.t;
-        const widgetToolbarRepository = this.editor.plugins.get(WidgetToolbarRepository);
-        const defaultPositions = BalloonPanelView.defaultPositions;
-        widgetToolbarRepository.register('bookmark', {
-            ariaLabel: t('Bookmark toolbar'),
-            items: editor.config.get('bookmark.toolbar'),
-            getRelatedElement: getSelectedBookmarkWidget,
-            // Override positions to the same list as for balloon panel default
-            // so widget toolbar will try to use same position as form view.
-            positions: [
-                defaultPositions.southArrowNorth,
-                defaultPositions.southArrowNorthMiddleWest,
-                defaultPositions.southArrowNorthMiddleEast,
-                defaultPositions.southArrowNorthWest,
-                defaultPositions.southArrowNorthEast,
-                defaultPositions.northArrowSouth,
-                defaultPositions.northArrowSouthMiddleWest,
-                defaultPositions.northArrowSouthMiddleEast,
-                defaultPositions.northArrowSouthWest,
-                defaultPositions.northArrowSouthEast,
-                defaultPositions.viewportStickyNorth
-            ]
-        });
-    }
     /**
      * @inheritDoc
      */
@@ -113,36 +87,61 @@ export default class BookmarkUI extends Plugin {
         if (this.formView) {
             this.formView.destroy();
         }
+        if (this.actionsView) {
+            this.actionsView.destroy();
+        }
     }
     /**
      * Creates views.
      */
     _createViews() {
+        this.actionsView = this._createActionsView();
         this.formView = this._createFormView();
         // Attach lifecycle actions to the the balloon.
         this._enableUserBalloonInteractions();
     }
+    /**
+     * Creates the {@link module:bookmark/ui/bookmarkactionsview~BookmarkActionsView} instance.
+     */
+    _createActionsView() {
+        const editor = this.editor;
+        const actionsView = new BookmarkActionsView(editor.locale);
+        const updateBookmarkCommand = editor.commands.get('updateBookmark');
+        const deleteCommand = editor.commands.get('delete');
+        actionsView.bind('id').to(updateBookmarkCommand, 'value');
+        actionsView.editButtonView.bind('isEnabled').to(updateBookmarkCommand);
+        actionsView.removeButtonView.bind('isEnabled').to(deleteCommand);
+        // Display edit form view after clicking on the "Edit" button.
+        this.listenTo(actionsView, 'edit', () => {
+            this._addFormView();
+        });
+        // Execute remove command after clicking on the "Remove" button.
+        this.listenTo(actionsView, 'remove', () => {
+            this._hideUI();
+            editor.execute('delete');
+        });
+        // Close the panel on esc key press when the **actions have focus**.
+        actionsView.keystrokes.set('Esc', (data, cancel) => {
+            this._hideUI();
+            cancel();
+        });
+        return actionsView;
+    }
     /**
      * Creates the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} instance.
      */
     _createFormView() {
         const editor = this.editor;
         const locale = editor.locale;
-        const t = locale.t;
         const insertBookmarkCommand = editor.commands.get('insertBookmark');
         const updateBookmarkCommand = editor.commands.get('updateBookmark');
         const commands = [insertBookmarkCommand, updateBookmarkCommand];
         const formView = new (CssTransitionDisablerMixin(BookmarkFormView))(locale, getFormValidators(editor));
         formView.idInputView.fieldView.bind('value').to(updateBookmarkCommand, 'value');
-        formView.saveButtonView.bind('label').to(updateBookmarkCommand, 'value', value => value ? t('Save') : t('Insert'));
         // Form elements should be read-only when corresponding commands are disabled.
         formView.idInputView.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => areEnabled.some(isEnabled => isEnabled));
         // Disable the "save" button if the command is disabled.
-        formView.saveButtonView.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => areEnabled.some(isEnabled => isEnabled));
-        // Close the panel on form after clicking back button.
-        this.listenTo(formView, 'cancel', () => {
-            this._hideFormView();
-        });
+        formView.buttonView.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => areEnabled.some(isEnabled => isEnabled));
         // Execute link command after clicking the "Save" button.
         this.listenTo(formView, 'submit', () => {
             if (formView.isValid()) {
@@ -153,134 +152,41 @@ export default class BookmarkUI extends Plugin {
                 else {
                     editor.execute('insertBookmark', { bookmarkId: value });
                 }
-                this._hideFormView();
+                this._closeFormView();
             }
         });
         // Update balloon position when form error changes.
         this.listenTo(formView.idInputView, 'change:errorText', () => {
             editor.ui.update();
         });
-        return formView;
-    }
-    /**
-     * Creates link form menu list entry, so it'll be possible to access
-     * the list of the bookmarks from the link form.
-     */
-    _registerLinkProvider() {
-        const t = this.editor.locale.t;
-        const linksUI = this.editor.plugins.get('LinkUI');
-        const bookmarkEditing = this.editor.plugins.get(BookmarkEditing);
-        const getListItems = () => Array
-            .from(bookmarkEditing.getAllBookmarkNames())
-            .sort((a, b) => a.localeCompare(b))
-            .map((bookmarkId) => ({
-            id: bookmarkId,
-            href: `#${bookmarkId}`,
-            label: bookmarkId,
-            icon: IconBookmarkMedium
-        }));
-        const getItem = (href) => {
-            const bookmark = [...bookmarkEditing.getAllBookmarkNames()].find(item => `#${item}` === href);
-            if (!bookmark) {
-                return null;
-            }
-            return {
-                href,
-                label: bookmark,
-                icon: IconBookmarkSmall,
-                tooltip: t('Scroll to bookmark')
-            };
-        };
-        linksUI.registerLinksListProvider({
-            label: t('Bookmarks'),
-            emptyListPlaceholder: t('No bookmarks available.'),
-            navigate: ({ href }) => this._scrollToBookmark(href),
-            getListItems,
-            getItem
-        });
-    }
-    /**
-     * Scrolls the editor to the bookmark with the given id.
-     */
-    _scrollToBookmark(href) {
-        const bookmarkEditing = this.editor.plugins.get(BookmarkEditing);
-        const bookmarkElement = bookmarkEditing.getElementForBookmarkId(href.slice(1));
-        if (!bookmarkElement) {
-            return false;
-        }
-        this.editor.model.change(writer => {
-            writer.setSelection(bookmarkElement, 'on');
+        // Close the panel on esc key press when the **form has focus**.
+        formView.keystrokes.set('Esc', (data, cancel) => {
+            this._closeFormView();
+            cancel();
         });
-        this.editor.editing.view.scrollToTheSelection({
-            alignToTop: true,
-            forceScroll: true
-        });
-        return true;
+        return formView;
     }
     /**
      * Creates a toolbar Bookmark button. Clicking this button will show
      * a {@link #_balloon} attached to the selection.
      */
-    _registerComponents() {
+    _createToolbarBookmarkButton() {
         const editor = this.editor;
         editor.ui.componentFactory.add('bookmark', () => {
-            const buttonView = this._createBookmarkButton(ButtonView);
+            const buttonView = this._createButton(ButtonView);
             buttonView.set({
                 tooltip: true
             });
             return buttonView;
         });
         editor.ui.componentFactory.add('menuBar:bookmark', () => {
-            return this._createBookmarkButton(MenuBarMenuListItemButtonView);
-        });
-        // Bookmark toolbar buttons.
-        editor.ui.componentFactory.add('bookmarkPreview', locale => {
-            const updateBookmarkCommand = editor.commands.get('updateBookmark');
-            const label = new LabelView(locale);
-            label.extendTemplate({
-                attributes: {
-                    class: ['ck-bookmark-toolbar__preview']
-                }
-            });
-            label.bind('text').to(updateBookmarkCommand, 'value');
-            return label;
-        });
-        editor.ui.componentFactory.add('editBookmark', locale => {
-            const updateBookmarkCommand = editor.commands.get('updateBookmark');
-            const button = new ButtonView(locale);
-            const t = locale.t;
-            button.set({
-                label: t('Edit bookmark'),
-                icon: IconPencil,
-                tooltip: true
-            });
-            button.bind('isEnabled').to(updateBookmarkCommand);
-            this.listenTo(button, 'execute', () => {
-                this._showFormView();
-            });
-            return button;
-        });
-        editor.ui.componentFactory.add('removeBookmark', locale => {
-            const deleteCommand = editor.commands.get('delete');
-            const button = new ButtonView(locale);
-            const t = locale.t;
-            button.set({
-                label: t('Remove bookmark'),
-                icon: IconRemove,
-                tooltip: true
-            });
-            button.bind('isEnabled').to(deleteCommand);
-            this.listenTo(button, 'execute', () => {
-                editor.execute('delete');
-                editor.editing.view.focus();
-            });
-            return button;
+            return this._createButton(MenuBarMenuListItemButtonView);
         });
     }
     /**
      * Creates a button for `bookmark` command to use either in toolbar or in menu bar.
      */
-    _createBookmarkButton(ButtonClass) {
+    _createButton(ButtonClass) {
         const editor = this.editor;
         const locale = editor.locale;
         const view = new ButtonClass(locale);
@@ -289,32 +195,85 @@ export default class BookmarkUI extends Plugin {
         const t = locale.t;
         view.set({
             label: t('Bookmark'),
-            icon: IconBookmark
+            icon: icons.bookmark
         });
         // Execute the command.
-        this.listenTo(view, 'execute', () => this._showFormView());
+        this.listenTo(view, 'execute', () => this._showUI(true));
         view.bind('isEnabled').toMany([insertCommand, updateCommand], 'isEnabled', (...areEnabled) => areEnabled.some(isEnabled => isEnabled));
         view.bind('isOn').to(updateCommand, 'value', value => !!value);
         return view;
     }
+    /**
+     * Attaches actions that control whether the balloon panel containing the
+     * {@link #formView} should be displayed.
+     */
+    _enableBalloonActivators() {
+        const editor = this.editor;
+        const viewDocument = editor.editing.view.document;
+        // Handle click on view document and show panel when selection is placed inside the bookmark element.
+        // Keep panel open until selection will be inside the same bookmark element.
+        this.listenTo(viewDocument, 'click', () => {
+            const bookmark = this._getSelectedBookmarkElement();
+            if (bookmark) {
+                // Then show panel but keep focus inside editor editable.
+                this._showUI();
+            }
+        });
+    }
     /**
      * Attaches actions that control whether the balloon panel containing the
      * {@link #formView} is visible or not.
      */
     _enableUserBalloonInteractions() {
+        // Focus the form if the balloon is visible and the Tab key has been pressed.
+        this.editor.keystrokes.set('Tab', (data, cancel) => {
+            if (this._areActionsVisible && !this.actionsView.focusTracker.isFocused) {
+                this.actionsView.focus();
+                cancel();
+            }
+        }, {
+            // Use the high priority because the bookmark UI navigation is more important
+            // than other feature's actions, e.g. list indentation.
+            priority: 'high'
+        });
         // Close the panel on the Esc key press when the editable has focus and the balloon is visible.
         this.editor.keystrokes.set('Esc', (data, cancel) => {
-            if (this._isFormVisible) {
-                this._hideFormView();
+            if (this._isUIVisible) {
+                this._hideUI();
                 cancel();
             }
         });
         // Close on click outside of balloon panel element.
         clickOutsideHandler({
             emitter: this.formView,
-            activator: () => this._isFormInPanel,
+            activator: () => this._isUIInPanel,
             contextElements: () => [this._balloon.view.element],
-            callback: () => this._hideFormView()
+            callback: () => this._hideUI()
+        });
+    }
+    /**
+     * Updates the button label. If bookmark is selected label is set to 'Update' otherwise
+     * it is 'Insert'.
+     */
+    _updateFormButtonLabel(isBookmarkSelected) {
+        const t = this.editor.locale.t;
+        this.formView.buttonView.label = isBookmarkSelected ? t('Update') : t('Insert');
+    }
+    /**
+     * Adds the {@link #actionsView} to the {@link #_balloon}.
+     *
+     * @internal
+     */
+    _addActionsView() {
+        if (!this.actionsView) {
+            this._createViews();
+        }
+        if (this._areActionsInPanel) {
+            return;
+        }
+        this._balloon.add({
+            view: this.actionsView,
+            position: this._getBalloonPositionData()
         });
     }
     /**
@@ -327,14 +286,14 @@ export default class BookmarkUI extends Plugin {
         if (this._isFormInPanel) {
             return;
         }
-        const updateBookmarkCommand = this.editor.commands.get('updateBookmark');
+        const editor = this.editor;
+        const updateBookmarkCommand = editor.commands.get('updateBookmark');
         this.formView.disableCssTransitions();
         this.formView.resetFormStatus();
         this._balloon.add({
             view: this.formView,
             position: this._getBalloonPositionData()
         });
-        this.formView.backButtonView.isVisible = updateBookmarkCommand.isEnabled;
         this.formView.idInputView.fieldView.value = updateBookmarkCommand.value || '';
         // Select input when form view is currently visible.
         if (this._balloon.visibleView === this.formView) {
@@ -342,42 +301,78 @@ export default class BookmarkUI extends Plugin {
         }
         this.formView.enableCssTransitions();
     }
+    /**
+     * Closes the form view. Decides whether the balloon should be hidden completely.
+     */
+    _closeFormView() {
+        const updateBookmarkCommand = this.editor.commands.get('updateBookmark');
+        if (updateBookmarkCommand.value !== undefined) {
+            this._removeFormView();
+        }
+        else {
+            this._hideUI();
+        }
+    }
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
      */
     _removeFormView() {
-        // Blur the input element before removing it from DOM to prevent issues in some browsers.
-        // See https://github.com/ckeditor/ckeditor5/issues/1501.
-        this.formView.saveButtonView.focus();
-        // Reset the ID field to update the state of the submit button.
-        this.formView.idInputView.fieldView.reset();
-        this._balloon.remove(this.formView);
-        // Because the form has an input which has focus, the focus must be brought back
-        // to the editor. Otherwise, it would be lost.
-        this.editor.editing.view.focus();
-        this._hideFakeVisualSelection();
+        if (this._isFormInPanel) {
+            // Blur the input element before removing it from DOM to prevent issues in some browsers.
+            // See https://github.com/ckeditor/ckeditor5/issues/1501.
+            this.formView.buttonView.focus();
+            // Reset the ID field to update the state of the submit button.
+            this.formView.idInputView.fieldView.reset();
+            this._balloon.remove(this.formView);
+            // Because the form has an input which has focus, the focus must be brought back
+            // to the editor. Otherwise, it would be lost.
+            this.editor.editing.view.focus();
+            this._hideFakeVisualSelection();
+        }
     }
     /**
-     * Shows the {@link #formView}.
+     * Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
      */
-    _showFormView() {
+    _showUI(forceVisible = false) {
         if (!this.formView) {
             this._createViews();
         }
+        // When there's no bookmark under the selection, go straight to the editing UI.
         if (!this._getSelectedBookmarkElement()) {
+            // Show visual selection on a text without a bookmark when the contextual balloon is displayed.
             this._showFakeVisualSelection();
+            this._addActionsView();
+            // Be sure panel with bookmark is visible.
+            if (forceVisible) {
+                this._balloon.showStack('main');
+            }
+            this._addFormView();
+        }
+        // If there's a bookmark under the selection...
+        else {
+            // Go to the editing UI if actions are already visible.
+            if (this._areActionsVisible) {
+                this._addFormView();
+            }
+            // Otherwise display just the actions UI.
+            else {
+                this._addActionsView();
+            }
+            // Be sure panel with bookmark is visible.
+            if (forceVisible) {
+                this._balloon.showStack('main');
+            }
         }
-        this._addFormView();
-        // Be sure panel with bookmark is visible.
-        this._balloon.showStack('main');
         // Begin responding to ui#update once the UI is added.
         this._startUpdatingUI();
     }
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
+     *
+     * See {@link #_addFormView}, {@link #_addActionsView}.
      */
-    _hideFormView() {
-        if (!this._isFormInPanel) {
+    _hideUI() {
+        if (!this._isUIInPanel) {
             return;
         }
         const editor = this.editor;
@@ -388,19 +383,22 @@ export default class BookmarkUI extends Plugin {
         editor.editing.view.focus();
         // Remove form first because it's on top of the stack.
         this._removeFormView();
+        // Then remove the actions view because it's beneath the form.
+        this._balloon.remove(this.actionsView);
         this._hideFakeVisualSelection();
     }
     /**
      * Makes the UI react to the {@link module:ui/editorui/editorui~EditorUI#event:update} event to
      * reposition itself when the editor UI should be refreshed.
      *
-     * See: {@link #_hideFormView} to learn when the UI stops reacting to the `update` event.
+     * See: {@link #_hideUI} to learn when the UI stops reacting to the `update` event.
      */
     _startUpdatingUI() {
         const editor = this.editor;
         const viewDocument = editor.editing.view.document;
         let prevSelectedBookmark = this._getSelectedBookmarkElement();
         let prevSelectionParent = getSelectionParent();
+        this._updateFormButtonLabel(!!prevSelectedBookmark);
         const update = () => {
             const selectedBookmark = this._getSelectedBookmarkElement();
             const selectionParent = getSelectionParent();
@@ -412,20 +410,21 @@ export default class BookmarkUI extends Plugin {
             //   else modified the document.
             // * the selection has expanded (e.g. displaying bookmark actions then pressing SHIFT+Right arrow).
             //
-            if (prevSelectedBookmark && !selectedBookmark ||
-                !prevSelectedBookmark && selectionParent !== prevSelectionParent) {
-                this._hideFormView();
+            if ((prevSelectedBookmark && !selectedBookmark) ||
+                (!prevSelectedBookmark && selectionParent !== prevSelectionParent)) {
+                this._hideUI();
             }
             // Update the position of the panel when:
             //  * bookmark panel is in the visible stack
             //  * the selection remains on the original bookmark element,
             //  * there was no bookmark element in the first place, i.e. creating a new bookmark
-            else if (this._isFormVisible) {
+            else if (this._isUIVisible) {
                 // If still in a bookmark element, simply update the position of the balloon.
                 // If there was no bookmark (e.g. inserting one), the balloon must be moved
                 // to the new position in the editing view (a new native DOM range).
                 this._balloon.updatePosition(this._getBalloonPositionData());
             }
+            this._updateFormButtonLabel(!!prevSelectedBookmark);
             prevSelectedBookmark = selectedBookmark;
             prevSelectionParent = selectionParent;
         };
@@ -444,10 +443,31 @@ export default class BookmarkUI extends Plugin {
         return !!this.formView && this._balloon.hasView(this.formView);
     }
     /**
-     * Returns `true` when {@link #formView} is in the {@link #_balloon} and it is currently visible.
+     * Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
+     */
+    get _areActionsInPanel() {
+        return !!this.actionsView && this._balloon.hasView(this.actionsView);
+    }
+    /**
+     * Returns `true` when {@link #actionsView} is in the {@link #_balloon} and it is
+     * currently visible.
      */
-    get _isFormVisible() {
-        return !!this.formView && this._balloon.visibleView == this.formView;
+    get _areActionsVisible() {
+        return !!this.actionsView && this._balloon.visibleView === this.actionsView;
+    }
+    /**
+     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon}.
+     */
+    get _isUIInPanel() {
+        return this._isFormInPanel || this._areActionsInPanel;
+    }
+    /**
+     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon} and it is
+     * currently visible.
+     */
+    get _isUIVisible() {
+        const visibleView = this._balloon.visibleView;
+        return !!this.formView && visibleView == this.formView || this._areActionsVisible;
     }
     /**
      * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
@@ -472,12 +492,7 @@ export default class BookmarkUI extends Plugin {
                 return domConverter.mapViewToDom(viewElement);
             };
         }
-        if (!target) {
-            return;
-        }
-        return {
-            target
-        };
+        return target && { target };
     }
     /**
      * Returns the bookmark {@link module:engine/view/attributeelement~AttributeElement} under
@@ -565,13 +580,3 @@ function getFormValidators(editor) {
         }
     ];
 }
-/**
- * Returns the currently selected bookmark view element.
- */
-function getSelectedBookmarkWidget(selection) {
-    const element = selection.getSelectedElement();
-    if (!element || !isWidget(element) || !element.getCustomProperty('bookmark')) {
-        return null;
-    }
-    return element;
-}