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

package/src/ui/bookmarkactionsview.d.ts

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

@@ -0,0 +1,154 @@
+/**
+ * @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];
+}

package/src/ui/bookmarkformview.d.ts

@@ -8,7 +8,6 @@
 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.
@@ -29,13 +28,9 @@ export default class BookmarkFormView extends View {
      */
     idInputView: LabeledFieldView<InputTextView>;
     /**
-     * The Back button view displayed in the header.
+     * The Submit button view.
      */
-    backButtonView: ButtonView;
-    /**
-     * A button used to submit the form.
-     */
-    saveButtonView: ButtonView;
+    buttonView: ButtonView;
     /**
      * A collection of form child views in the form.
      */
@@ -85,23 +80,27 @@ export default class BookmarkFormView extends View {
      */
     resetFormStatus(): void;
     /**
-     * Creates a back button view that cancels the form.
+     * Creates header and form view.
      */
-    private _createBackButton;
+    private _createViewChildren;
     /**
-     * Creates a save button view that saves the bookmark.
+     * Creates form content view with input and button.
      */
-    private _createSaveButton;
-    /**
-     * Creates a header view for the form.
-     */
-    private _createHeaderView;
+    private _createFormContentView;
     /**
      * 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.
      *
@@ -117,12 +116,3 @@ 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,14 +5,11 @@
 /**
  * @module bookmark/ui/bookmarkformview
  */
-import { ButtonView, FocusCycler, FormRowView, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler, FormHeaderView } from 'ckeditor5/src/ui.js';
+import { ButtonView, FocusCycler, 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.
@@ -20,42 +17,6 @@ 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.
      *
@@ -66,28 +27,24 @@ 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.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.buttonView = this._createButton(t('Insert'), 'ck-button-action ck-button-bold');
+        this.buttonView.type = 'submit';
+        this.children = this._createViewChildren();
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -99,15 +56,11 @@ export default class BookmarkFormView extends View {
                 focusNext: 'tab'
             }
         });
+        const classList = ['ck', 'ck-bookmark-view'];
         this.setTemplate({
             tag: 'form',
             attributes: {
-                class: [
-                    'ck',
-                    'ck-form',
-                    'ck-bookmark-form',
-                    'ck-responsive-form'
-                ],
+                class: classList,
                 // https://github.com/ckeditor/ckeditor5-link/issues/90
                 tabindex: '-1'
             },
@@ -123,9 +76,8 @@ export default class BookmarkFormView extends View {
             view: this
         });
         const childViews = [
-            this.backButtonView,
             this.idInputView,
-            this.saveButtonView
+            this.buttonView
         ];
         childViews.forEach(v => {
             // Register the view as focusable.
@@ -148,7 +100,7 @@ export default class BookmarkFormView extends View {
      * Focuses the fist {@link #_focusables} in the form.
      */
     focus() {
-        this.idInputView.focus();
+        this._focusCycler.focusFirst();
     }
     /**
      * Validates the form and returns `false` when some fields are invalid.
@@ -176,44 +128,32 @@ export default class BookmarkFormView extends View {
         this.idInputView.errorText = null;
     }
     /**
-     * Creates a back button view that cancels the form.
+     * Creates header and form view.
      */
-    _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;
+    _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 save button view that saves the bookmark.
+     * Creates form content view with input and button.
      */
-    _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')
+    _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
         });
-        header.children.add(this.backButtonView, 0);
-        return header;
+        return view;
     }
     /**
      * Creates a labeled input view.
@@ -225,9 +165,28 @@ 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,3 +2,49 @@
  * 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/bookmarkactions.css

@@ -0,0 +1,44 @@
+/*
+ * 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";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+
+.ck.ck-bookmark-actions {
+	display: flex;
+	align-items: center;
+
+	& .ck-bookmark-actions__preview {
+		max-width: var(--ck-input-width);
+		min-width: 3em;
+		font-weight: normal;
+		text-overflow: ellipsis;
+		text-align: center;
+		overflow: hidden;
+
+		@mixin ck-unselectable;
+		cursor: default;
+	}
+
+	@mixin ck-media-phone {
+		display: flex;
+		flex-wrap: wrap;
+
+		& .ck-bookmark-actions__preview {
+			flex-basis: 100%;
+			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
+			min-width: auto;
+		}
+	}
+
+	&.ck-responsive-form {
+		& .ck-button {
+			@mixin ck-media-phone {
+				flex-basis: 50%;
+				margin-top: var(--ck-spacing-standard);
+			}
+		}
+	}
+}