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

package/src/ui/bookmarkformview.d.ts

@@ -8,6 +8,7 @@
 import { ButtonView, LabeledFieldView, View, ViewCollection, type InputTextView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../theme/bookmarkform.css';
 /**
  * The bookmark form view controller class.
@@ -28,9 +29,13 @@ export default class BookmarkFormView extends View {
      */
     idInputView: LabeledFieldView<InputTextView>;
     /**
-     * The Submit button view.
+     * The Back button view displayed in the header.
      */
-    buttonView: ButtonView;
+    backButtonView: ButtonView;
+    /**
+     * A button used to submit the form.
+     */
+    saveButtonView: ButtonView;
     /**
      * A collection of form child views in the form.
      */
@@ -80,27 +85,23 @@ export default class BookmarkFormView extends View {
      */
     resetFormStatus(): void;
     /**
-     * Creates header and form view.
+     * Creates a back button view that cancels the form.
      */
-    private _createViewChildren;
+    private _createBackButton;
     /**
-     * Creates form content view with input and button.
+     * Creates a save button view that saves the bookmark.
      */
-    private _createFormContentView;
+    private _createSaveButton;
+    /**
+     * Creates a header view for the form.
+     */
+    private _createHeaderView;
     /**
      * Creates a labeled input view.
      *
      * @returns Labeled field view instance.
      */
     private _createIdInput;
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param className The additional button CSS class name.
-     * @returns The button view instance.
-     */
-    private _createButton;
     /**
      * The native DOM `value` of the {@link #idInputView} element.
      *
@@ -116,3 +117,12 @@ export default class BookmarkFormView extends View {
  * If string is returned, it is assumed that the form value is incorrect and the returned string is displayed in the error label
  */
 export type BookmarkFormValidatorCallback = (form: BookmarkFormView) => string | undefined;
+/**
+ * Fired when the form view is canceled.
+ *
+ * @eventName ~BookmarkFormView#cancel
+ */
+export type BookmarkFormViewCancelEvent = {
+    name: 'cancel';
+    args: [];
+};

package/src/ui/bookmarkformview.js

@@ -5,11 +5,14 @@
 /**
  * @module bookmark/ui/bookmarkformview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler, FormHeaderView } from 'ckeditor5/src/ui.js';
+import { ButtonView, FocusCycler, FormRowView, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler, FormHeaderView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
+import { IconPreviousArrow } from '@ckeditor/ckeditor5-icons';
 // See: #8833.
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../theme/bookmarkform.css';
 /**
  * The bookmark form view controller class.
@@ -17,6 +20,42 @@ import '../../theme/bookmarkform.css';
  * See {@link module:bookmark/ui/bookmarkformview~BookmarkFormView}.
  */
 export default class BookmarkFormView extends View {
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    focusTracker = new FocusTracker();
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes = new KeystrokeHandler();
+    /**
+     * The ID input view.
+     */
+    idInputView;
+    /**
+     * 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;
+    /**
+     * An array of form validators used by {@link #isValid}.
+     */
+    _validators;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    _focusables = new ViewCollection();
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    _focusCycler;
     /**
      * Creates an instance of the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} class.
      *
@@ -27,24 +66,28 @@ export default class BookmarkFormView extends View {
      */
     constructor(locale, validators) {
         super(locale);
-        /**
-         * Tracks information about DOM focus in the form.
-         */
-        this.focusTracker = new FocusTracker();
-        /**
-         * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-         */
-        this.keystrokes = new KeystrokeHandler();
-        /**
-         * A collection of views that can be focused in the form.
-         */
-        this._focusables = new ViewCollection();
-        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,
@@ -56,11 +99,15 @@ export default class BookmarkFormView extends View {
                 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'
             },
@@ -76,8 +123,9 @@ export default class BookmarkFormView extends View {
             view: this
         });
         const childViews = [
+            this.backButtonView,
             this.idInputView,
-            this.buttonView
+            this.saveButtonView
         ];
         childViews.forEach(v => {
             // Register the view as focusable.
@@ -100,7 +148,7 @@ export default class BookmarkFormView extends View {
      * 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.
@@ -128,32 +176,44 @@ export default class BookmarkFormView extends View {
         this.idInputView.errorText = null;
     }
     /**
-     * Creates header and form view.
+     * Creates a back button view that cancels the form.
      */
-    _createViewChildren() {
-        const children = this.createCollection();
-        const t = this.t;
-        children.add(new FormHeaderView(this.locale, { label: t('Bookmark') }));
-        children.add(this._createFormContentView());
-        return children;
+    _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.
+     * Creates a save button view that saves the bookmark.
      */
-    _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
+    _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 saveButton;
+    }
+    /**
+     * Creates a header view for the form.
+     */
+    _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Bookmark')
         });
-        return view;
+        header.children.add(this.backButtonView, 0);
+        return header;
     }
     /**
      * Creates a labeled input view.
@@ -165,28 +225,9 @@ export default class BookmarkFormView extends View {
         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.
      *

package/theme/bookmark.css

@@ -2,49 +2,3 @@
  * 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
  */
-
-:root {
-	--ck-bookmark-icon-hover-fill-color: var(--ck-color-widget-hover-border);
-	--ck-bookmark-icon-selected-fill-color: var(--ck-color-focus-border);
-	--ck-bookmark-icon-animation-duration: var(--ck-widget-handler-animation-duration);
-	--ck-bookmark-icon-animation-curve: var(--ck-widget-handler-animation-curve);
-}
-
-.ck-bookmark {
-	&.ck-widget {
-		outline: none;
-
-		& .ck-bookmark__icon .ck-icon__fill {
-			transition: fill var(--ck-bookmark-icon-animation-duration) var(--ck-bookmark-icon-animation-curve);
-		}
-
-		&:hover {
-			& .ck-bookmark__icon .ck-icon__fill {
-				fill: var(--ck-bookmark-icon-hover-fill-color);
-			}
-		}
-
-		&.ck-widget_selected {
-			.ck-bookmark__icon .ck-icon__fill {
-				fill: var(--ck-bookmark-icon-selected-fill-color);
-			}
-		}
-
-		&.ck-widget_selected,
-		&.ck-widget_selected:hover {
-			outline: none;
-		}
-
-		& .ck-bookmark__icon {
-			position: relative;
-			/* To make it align with text baseline. */
-			top: -0.1em;
-
-			& .ck-icon {
-				height: 1.2em;
-				width: auto;
-				vertical-align: middle;
-			}
-		}
-	}
-}

package/theme/bookmarkform.css

@@ -2,41 +2,3 @@
  * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck.ck-bookmark-view {
-	&:focus {
-		outline: none;
-	}
-}
-
-.ck.ck-bookmark-form {
-	display: flex;
-	align-items: flex-start;
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-button,
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			justify-content: center;
-		}
-	}
-
-	&.ck-responsive-form {
-		& > .ck-button {
-			@mixin ck-media-phone {
-				&:nth-last-child(1) {
-					margin: var(--ck-spacing-large);
-					padding: 0 var(--ck-spacing-standard);
-					border-radius: var(--ck-border-radius);
-				}
-			}
-		}
-	}
-}

package/theme/bookmarktoolbar.css

@@ -0,0 +1,4 @@
+/*
+ * 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
+ */

package/src/ui/bookmarkactionsview.d.ts

@@ -1,102 +0,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
- */
-/**
- * @module bookmark/ui/bookmarkactionsview
- */
-import { LabelView, ButtonView, View } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler, type LocaleTranslate, type Locale } from 'ckeditor5/src/utils.js';
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkactions.css';
-/**
- * The bookmark actions view class. This view displays the bookmark preview, allows
- * removing or editing the bookmark.
- */
-export default class BookmarkActionsView extends View {
-    /**
-     * Tracks information about DOM focus in the actions.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The bookmark preview view.
-     */
-    bookmarkPreviewView: LabelView;
-    /**
-     * The remove button view.
-     */
-    removeButtonView: ButtonView;
-    /**
-     * The edit bookmark button view.
-     */
-    editButtonView: ButtonView;
-    /**
-     * The id preview view.
-     *
-     * @observable
-     */
-    id: string | undefined;
-    /**
-     * A collection of views that can be focused in the view.
-     */
-    private readonly _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the view.
-     */
-    private readonly _focusCycler;
-    t: LocaleTranslate;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist {@link #_focusables} in the actions.
-     */
-    focus(): void;
-    /**
-     * 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.
-     */
-    private _createButton;
-    /**
-     * Creates a bookmark name preview label.
-     *
-     * @returns The label view instance.
-     */
-    private _createBookmarkPreviewView;
-}
-/**
- * Fired when the {@link ~BookmarkActionsView#editButtonView} is clicked.
- *
- * @eventName ~BookmarkActionsView#edit
- */
-export type EditEvent = {
-    name: 'edit';
-    args: [];
-};
-/**
- * Fired when the {@link ~BookmarkActionsView#removeButtonView} is clicked.
- *
- * @eventName ~BookmarkActionsView#remove
- */
-export type RemoveEvent = {
-    name: 'remove';
-    args: [];
-};

package/src/ui/bookmarkactionsview.js

@@ -1,154 +0,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
- */
-/**
- * @module bookmark/ui/bookmarkactionsview
- */
-import { LabelView, ButtonView, View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkactions.css';
-/**
- * The bookmark actions view class. This view displays the bookmark preview, allows
- * removing or editing the bookmark.
- */
-export default class BookmarkActionsView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        /**
-         * Tracks information about DOM focus in the actions.
-         */
-        this.focusTracker = new FocusTracker();
-        /**
-         * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-         */
-        this.keystrokes = new KeystrokeHandler();
-        /**
-         * A collection of views that can be focused in the view.
-         */
-        this._focusables = new ViewCollection();
-        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];
-}