@ckeditor/ckeditor5-bookmark 44.3.0 → 45.0.0-alpha.1

package/dist/index.js

@@ -2,11 +2,12 @@
  * @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 { icons, Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { toWidget, Widget } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { View, ViewCollection, FocusCycler, submitHandler, FormHeaderView, LabeledFieldView, createLabeledInputText, ButtonView, LabelView, IconView, ContextualBalloon, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { ClickObserver } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { toWidget, WidgetToolbarRepository, isWidget, Widget } from '@ckeditor/ckeditor5-widget/dist/index.js';
+import { View, ViewCollection, FormRowView, FocusCycler, submitHandler, ButtonView, FormHeaderView, LabeledFieldView, createLabeledInputText, IconView, ContextualBalloon, BalloonPanelView, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, LabelView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { IconBookmarkInline, IconPencil, IconRemove, IconBookmark, IconBookmarkMedium, IconBookmarkSmall } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { IconPreviousArrow } from '@ckeditor/ckeditor5-icons/dist/index.js';
 
 /**
  * The bookmark form view controller class.
@@ -23,8 +24,11 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
 	 * The ID input view.
 	 */ idInputView;
     /**
-	 * The Submit button view.
-	 */ buttonView;
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
+    /**
+	 * A button used to submit the form.
+	 */ saveButtonView;
     /**
 	 * A collection of form child views in the form.
 	 */ children;
@@ -46,12 +50,30 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
 	 * @param validators  Form validators used by {@link #isValid}.
 	 */ constructor(locale, validators){
         super(locale);
-        const t = locale.t;
         this._validators = validators;
+        // Create buttons.
+        this.backButtonView = this._createBackButton();
+        this.saveButtonView = this._createSaveButton();
+        // Create input fields.
         this.idInputView = this._createIdInput();
-        this.buttonView = this._createButton(t('Insert'), 'ck-button-action ck-button-bold');
-        this.buttonView.type = 'submit';
-        this.children = this._createViewChildren();
+        this.children = this.createCollection([
+            this._createHeaderView()
+        ]);
+        this.children.add(new FormRowView(locale, {
+            children: [
+                this.idInputView,
+                this.saveButtonView
+            ],
+            class: [
+                'ck-form__row_with-submit',
+                'ck-form__row_large-top-padding'
+            ]
+        }));
+        // Close the panel on esc key press when the **form has focus**.
+        this.keystrokes.set('Esc', (data, cancel)=>{
+            this.fire('cancel');
+            cancel();
+        });
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -63,14 +85,15 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
                 focusNext: 'tab'
             }
         });
-        const classList = [
-            'ck',
-            'ck-bookmark-view'
-        ];
         this.setTemplate({
             tag: 'form',
             attributes: {
-                class: classList,
+                class: [
+                    'ck',
+                    'ck-form',
+                    'ck-bookmark-form',
+                    'ck-responsive-form'
+                ],
                 // https://github.com/ckeditor/ckeditor5-link/issues/90
                 tabindex: '-1'
             },
@@ -85,8 +108,9 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
             view: this
         });
         const childViews = [
+            this.backButtonView,
             this.idInputView,
-            this.buttonView
+            this.saveButtonView
         ];
         childViews.forEach((v)=>{
             // Register the view as focusable.
@@ -107,7 +131,7 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
     /**
 	 * Focuses the fist {@link #_focusables} in the form.
 	 */ focus() {
-        this._focusCycler.focusFirst();
+        this.idInputView.focus();
     }
     /**
 	 * Validates the form and returns `false` when some fields are invalid.
@@ -133,36 +157,41 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
         this.idInputView.errorText = null;
     }
     /**
-	 * Creates header and form view.
-	 */ _createViewChildren() {
-        const children = this.createCollection();
-        const t = this.t;
-        children.add(new FormHeaderView(this.locale, {
-            label: t('Bookmark')
-        }));
-        children.add(this._createFormContentView());
-        return children;
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
+            tooltip: true
+        });
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
     }
     /**
-	 * Creates form content view with input and button.
-	 */ _createFormContentView() {
-        const view = new View(this.locale);
-        const children = this.createCollection();
-        const classList = [
-            'ck',
-            'ck-bookmark-form',
-            'ck-responsive-form'
-        ];
-        children.add(this.idInputView);
-        children.add(this.buttonView);
-        view.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: classList
-            },
-            children
+	 * Creates a save button view that saves the bookmark.
+	 */ _createSaveButton() {
+        const t = this.locale.t;
+        const saveButton = new ButtonView(this.locale);
+        saveButton.set({
+            label: t('Save'),
+            withText: true,
+            type: 'submit',
+            class: 'ck-button-action ck-button-bold'
         });
-        return view;
+        return saveButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Bookmark')
+        });
+        header.children.add(this.backButtonView, 0);
+        return header;
     }
     /**
 	 * Creates a labeled input view.
@@ -173,27 +202,9 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         labeledInput.label = t('Bookmark name');
         labeledInput.infoText = t('Enter the bookmark name without spaces.');
+        labeledInput.class = 'ck-labeled-field-view_full-width';
         return labeledInput;
     }
-    /**
-	 * Creates a button view.
-	 *
-	 * @param label The button label.
-	 * @param className The additional button CSS class name.
-	 * @returns The button view instance.
-	 */ _createButton(label, className) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            withText: true
-        });
-        button.extendTemplate({
-            attributes: {
-                class: className
-            }
-        });
-        return button;
-    }
     /**
 	 * The native DOM `value` of the {@link #idInputView} element.
 	 *
@@ -208,149 +219,6 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
     }
 }
 
-/**
- * The bookmark actions view class. This view displays the bookmark preview, allows
- * removing or editing the bookmark.
- */ class BookmarkActionsView extends View {
-    /**
-	 * Tracks information about DOM focus in the actions.
-	 */ focusTracker = new FocusTracker();
-    /**
-	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-	 */ keystrokes = new KeystrokeHandler();
-    /**
-	 * The bookmark preview view.
-	 */ bookmarkPreviewView;
-    /**
-	 * The remove button view.
-	 */ removeButtonView;
-    /**
-	 * The edit bookmark button view.
-	 */ editButtonView;
-    /**
-	 * A collection of views that can be focused in the view.
-	 */ _focusables = new ViewCollection();
-    /**
-	 * Helps cycling over {@link #_focusables} in the view.
-	 */ _focusCycler;
-    /**
-	 * @inheritDoc
-	 */ constructor(locale){
-        super(locale);
-        const t = locale.t;
-        this.bookmarkPreviewView = this._createBookmarkPreviewView();
-        this.removeButtonView = this._createButton(t('Remove bookmark'), icons.remove, 'remove', this.bookmarkPreviewView);
-        this.editButtonView = this._createButton(t('Edit bookmark'), icons.pencil, 'edit', this.bookmarkPreviewView);
-        this.set('id', undefined);
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-bookmark-actions',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: [
-                this.bookmarkPreviewView,
-                this.editButtonView,
-                this.removeButtonView
-            ]
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ render() {
-        super.render();
-        const childViews = [
-            this.editButtonView,
-            this.removeButtonView
-        ];
-        childViews.forEach((v)=>{
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-	 * Focuses the fist {@link #_focusables} in the actions.
-	 */ focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-	 * Creates a button view.
-	 *
-	 * @param label The button label.
-	 * @param icon The button icon.
-	 * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-	 * @param additionalLabel An additional label outside the button.
-	 * @returns The button view instance.
-	 */ _createButton(label, icon, eventName, additionalLabel) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
-        });
-        button.delegate('execute').to(this, eventName);
-        // Since button label `id` is bound to the `ariaLabelledBy` property
-        // we need to modify this binding to include only the first ID token
-        // as this button will be labeled by multiple labels.
-        button.labelView.unbind('id');
-        button.labelView.bind('id').to(button, 'ariaLabelledBy', (ariaLabelledBy)=>{
-            return getFirstToken(ariaLabelledBy);
-        });
-        button.ariaLabelledBy = `${button.ariaLabelledBy} ${additionalLabel.id}`;
-        return button;
-    }
-    /**
-	 * Creates a bookmark name preview label.
-	 *
-	 * @returns The label view instance.
-	 */ _createBookmarkPreviewView() {
-        const label = new LabelView(this.locale);
-        label.extendTemplate({
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-bookmark-actions__preview'
-                ]
-            }
-        });
-        // Bind label text with the bookmark ID.
-        label.bind('text').to(this, 'id');
-        return label;
-    }
-}
-/**
- * Returns the first token from space separated token list.
- */ function getFirstToken(tokenList) {
-    return tokenList.split(' ')[0];
-}
-
 /**
  * @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
@@ -548,6 +416,19 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
 	 */ static get isOfficialPlugin() {
         return true;
     }
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('bookmark', {
+            toolbar: [
+                'bookmarkPreview',
+                '|',
+                'editBookmark',
+                'removeBookmark'
+            ]
+        });
+    }
     /**
 	 * @inheritDoc
 	 */ init() {
@@ -570,6 +451,11 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
         }
         return null;
     }
+    /**
+	 * Returns all unique bookmark names existing in the content.
+	 */ getAllBookmarkNames() {
+        return new Set(this._bookmarkElements.values());
+    }
     /**
 	 * Defines the schema for the bookmark feature.
 	 */ _defineSchema() {
@@ -622,6 +508,7 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
                 }, [
                     this._createBookmarkUIElement(writer)
                 ]);
+                writer.setCustomProperty('bookmark', true, containerElement);
                 this._bookmarkElements.set(modelElement, id);
                 // `getFillerOffset` is not needed to set here, because `toWidget` has already covered it.
                 const labelCreator = ()=>`${id} ${t('bookmark widget')}`;
@@ -641,7 +528,7 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
             const domElement = this.toDomElement(domDocument);
             const icon = new IconView();
             icon.set({
-                content: icons.bookmarkInline,
+                content: IconBookmarkInline,
                 isColorInherited: false
             });
             icon.render();
@@ -751,9 +638,6 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
  * It registers the `'bookmark'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
  * which inserts the `bookmark` element upon selection.
  */ class BookmarkUI extends Plugin {
-    /**
-	 * The actions view displayed inside of the balloon.
-	 */ actionsView = null;
     /**
 	 * The form view displayed inside the balloon.
 	 */ formView = null;
@@ -765,7 +649,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
 	 */ static get requires() {
         return [
             BookmarkEditing,
-            ContextualBalloon
+            ContextualBalloon,
+            WidgetToolbarRepository
         ];
     }
     /**
@@ -782,11 +667,13 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
 	 * @inheritDoc
 	 */ 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._createToolbarBookmarkButton();
-        this._enableBalloonActivators();
+        this._registerComponents();
         // Renders a fake visual selection marker on an expanded selection.
         editor.conversion.for('editingDowncast').markerToHighlight({
             model: VISUAL_SELECTION_MARKER_NAME,
@@ -812,6 +699,35 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
             }
         });
     }
+    /**
+	 * @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,
+            balloonClassName: 'ck-bookmark-balloon',
+            // 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
 	 */ destroy() {
@@ -820,49 +736,20 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         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 = [
@@ -871,10 +758,15 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         ];
         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.buttonView.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled)=>areEnabled.some((isEnabled)=>isEnabled));
+        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();
+        });
         // Execute link command after clicking the "Save" button.
         this.listenTo(formView, 'submit', ()=>{
             if (formView.isValid()) {
@@ -888,39 +780,131 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
                         bookmarkId: value
                     });
                 }
-                this._closeFormView();
+                this._hideFormView();
             }
         });
         // Update balloon position when form error changes.
         this.listenTo(formView.idInputView, 'change:errorText', ()=>{
             editor.ui.update();
         });
-        // Close the panel on esc key press when the **form has focus**.
-        formView.keystrokes.set('Esc', (data, cancel)=>{
-            this._closeFormView();
-            cancel();
-        });
         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');
+        });
+        this.editor.editing.view.scrollToTheSelection({
+            alignToTop: true,
+            forceScroll: true
+        });
+        return true;
+    }
     /**
 	 * Creates a toolbar Bookmark button. Clicking this button will show
 	 * a {@link #_balloon} attached to the selection.
-	 */ _createToolbarBookmarkButton() {
+	 */ _registerComponents() {
         const editor = this.editor;
         editor.ui.componentFactory.add('bookmark', ()=>{
-            const buttonView = this._createButton(ButtonView);
+            const buttonView = this._createBookmarkButton(ButtonView);
             buttonView.set({
                 tooltip: true
             });
             return buttonView;
         });
         editor.ui.componentFactory.add('menuBar:bookmark', ()=>{
-            return this._createButton(MenuBarMenuListItemButtonView);
+            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;
         });
     }
     /**
 	 * Creates a button for `bookmark` command to use either in toolbar or in menu bar.
-	 */ _createButton(ButtonClass) {
+	 */ _createBookmarkButton(ButtonClass) {
         const editor = this.editor;
         const locale = editor.locale;
         const view = new ButtonClass(locale);
@@ -929,10 +913,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         const t = locale.t;
         view.set({
             label: t('Bookmark'),
-            icon: icons.bookmark
+            icon: IconBookmark
         });
         // Execute the command.
-        this.listenTo(view, 'execute', ()=>this._showUI(true));
+        this.listenTo(view, 'execute', ()=>this._showFormView());
         view.bind('isEnabled').toMany([
             insertCommand,
             updateCommand
@@ -940,75 +924,25 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         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._isUIVisible) {
-                this._hideUI();
+            if (this._isFormVisible) {
+                this._hideFormView();
                 cancel();
             }
         });
         // Close on click outside of balloon panel element.
         clickOutsideHandler({
             emitter: this.formView,
-            activator: ()=>this._isUIInPanel,
+            activator: ()=>this._isFormInPanel,
             contextElements: ()=>[
                     this._balloon.view.element
                 ],
-            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()
+            callback: ()=>this._hideFormView()
         });
     }
     /**
@@ -1020,14 +954,14 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         if (this._isFormInPanel) {
             return;
         }
-        const editor = this.editor;
-        const updateBookmarkCommand = editor.commands.get('updateBookmark');
+        const updateBookmarkCommand = this.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) {
@@ -1035,69 +969,39 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         }
         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() {
-        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();
-        }
+        // 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();
     }
     /**
-	 * Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
-	 */ _showUI(forceVisible = false) {
+	 * Shows the {@link #formView}.
+	 */ _showFormView() {
         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();
-        } else {
-            // Go to the editing UI if actions are already visible.
-            if (this._areActionsVisible) {
-                this._addFormView();
-            } 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}.
-	 */ _hideUI() {
-        if (!this._isUIInPanel) {
+	 */ _hideFormView() {
+        if (!this._isFormInPanel) {
             return;
         }
         const editor = this.editor;
@@ -1108,21 +1012,18 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         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 #_hideUI} to learn when the UI stops reacting to the `update` event.
+	 * See: {@link #_hideFormView} 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();
@@ -1135,14 +1036,13 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
             // * the selection has expanded (e.g. displaying bookmark actions then pressing SHIFT+Right arrow).
             //
             if (prevSelectedBookmark && !selectedBookmark || !prevSelectedBookmark && selectionParent !== prevSelectionParent) {
-                this._hideUI();
-            } else if (this._isUIVisible) {
+                this._hideFormView();
+            } else if (this._isFormVisible) {
                 // 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;
         };
@@ -1158,27 +1058,9 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         return !!this.formView && this._balloon.hasView(this.formView);
     }
     /**
-	 * 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 _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 `true` when {@link #formView} is in the {@link #_balloon} and it is currently visible.
+	 */ get _isFormVisible() {
+        return !!this.formView && this._balloon.visibleView == this.formView;
     }
     /**
 	 * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
@@ -1201,7 +1083,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
                 return domConverter.mapViewToDom(viewElement);
             };
         }
-        return target && {
+        if (!target) {
+            return;
+        }
+        return {
             target
         };
     }
@@ -1289,6 +1174,15 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
         }
     ];
 }
+/**
+ * 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;
+}
 
 /**
  * The bookmark feature.