@ckeditor/ckeditor5-link 44.3.0 → 45.0.0-alpha.0

package/src/ui/linkbuttonview.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 { ButtonView, IconView } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
+/**
+ * Represents a view for a dropdown menu button.
+ */
+export default class LinkButtonView extends ButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    readonly arrowView: IconView;
+    /**
+     * Creates an instance of the dropdown menu button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Creates the arrow view instance.
+     *
+     * @private
+     */
+    private _createArrowView;
+}

package/src/ui/linkbuttonview.js

@@ -0,0 +1,54 @@
+/**
+ * @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 link/ui/linkbuttonview
+ */
+import { IconNextArrow } from '@ckeditor/ckeditor5-icons';
+import { ButtonView, IconView } from 'ckeditor5/src/ui.js';
+/**
+ * Represents a view for a dropdown menu button.
+ */
+export default class LinkButtonView extends ButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    arrowView;
+    /**
+     * Creates an instance of the dropdown menu button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.set({
+            withText: true
+        });
+        this.arrowView = this._createArrowView();
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-link__button'
+                ]
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.arrowView);
+    }
+    /**
+     * Creates the arrow view instance.
+     *
+     * @private
+     */
+    _createArrowView() {
+        const arrowView = new IconView();
+        arrowView.content = IconNextArrow;
+        return arrowView;
+    }
+}

package/src/ui/linkformview.d.ts

@@ -7,13 +7,11 @@
  */
 import { ButtonView, LabeledFieldView, View, ViewCollection, type InputTextView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
-import type LinkCommand from '../linkcommand.js';
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../theme/linkform.css';
 /**
- * The link form view controller class.
- *
- * See {@link module:link/ui/linkformview~LinkFormView}.
+ * The link form view.
  */
 export default class LinkFormView extends View {
     /**
@@ -25,27 +23,29 @@ export default class LinkFormView extends View {
      */
     readonly keystrokes: KeystrokeHandler;
     /**
-     * The URL input view.
+     * The Back button view displayed in the header.
      */
-    urlInputView: LabeledFieldView<InputTextView>;
+    backButtonView: ButtonView;
     /**
      * The Save button view.
      */
     saveButtonView: ButtonView;
     /**
-     * The Cancel button view.
+     * The "Displayed text" input view.
      */
-    cancelButtonView: ButtonView;
+    displayedTextInputView: LabeledFieldView<InputTextView>;
     /**
-     * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
-     * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
-     * configured in the editor.
+     * The URL input view.
      */
-    private readonly _manualDecoratorSwitches;
+    urlInputView: LabeledFieldView<InputTextView>;
     /**
-     * A collection of child views in the form.
+     * A collection of child views.
      */
     readonly children: ViewCollection;
+    /**
+     * A collection of child views in the providers list.
+     */
+    readonly providersListChildren: ViewCollection<ButtonView>;
     /**
      * An array of form validators used by {@link #isValid}.
      */
@@ -64,18 +64,9 @@ export default class LinkFormView extends View {
      * Also see {@link #render}.
      *
      * @param locale The localization services instance.
-     * @param linkCommand Reference to {@link module:link/linkcommand~LinkCommand}.
      * @param validators  Form validators used by {@link #isValid}.
      */
-    constructor(locale: Locale, linkCommand: LinkCommand, validators: Array<LinkFormValidatorCallback>);
-    /**
-     * Obtains the state of the {@link module:ui/button/switchbuttonview~SwitchButtonView switch buttons} representing
-     * {@link module:link/linkcommand~LinkCommand#manualDecorators manual link decorators}
-     * in the {@link module:link/ui/linkformview~LinkFormView}.
-     *
-     * @returns Key-value pairs, where the key is the name of the decorator and the value is its state.
-     */
-    getDecoratorSwitchesState(): Record<string, boolean>;
+    constructor(locale: Locale, validators: Array<LinkFormValidatorCallback>);
     /**
      * @inheritDoc
      */
@@ -100,39 +91,33 @@ export default class LinkFormView extends View {
      */
     resetFormStatus(): void;
     /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled field view instance.
+     * Creates a back button view that cancels the form.
      */
-    private _createUrlInput;
+    private _createBackButton;
     /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param className The additional button CSS class name.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @returns The button view instance.
+     * Creates a save button view that inserts the link.
+     */
+    private _createSaveButton;
+    /**
+     * Creates a header view for the form.
+     */
+    private _createHeaderView;
+    /**
+     * Creates a view for the providers list.
      */
-    private _createButton;
+    private _createProvidersListView;
     /**
-     * Populates {@link module:ui/viewcollection~ViewCollection} of {@link module:ui/button/switchbuttonview~SwitchButtonView}
-     * made based on {@link module:link/linkcommand~LinkCommand#manualDecorators}.
+     * Creates a labeled input view for the "Displayed text" field.
+     */
+    private _createDisplayedTextInput;
+    /**
+     * Creates a labeled input view for the URL field.
      *
-     * @param linkCommand A reference to the link command.
-     * @returns ViewCollection of switch buttons.
+     * @returns Labeled field view instance.
      */
-    private _createManualDecoratorSwitches;
+    private _createUrlInput;
     /**
      * Populates the {@link #children} collection of the form.
-     *
-     * If {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators} are configured in the editor, it creates an
-     * additional `View` wrapping all {@link #_manualDecoratorSwitches} switch buttons corresponding
-     * to these decorators.
-     *
-     * @param manualDecorators A reference to
-     * the collection of manual decorators stored in the link command.
-     * @returns The children of link form view.
      */
     private _createFormChildren;
     /**
@@ -161,7 +146,7 @@ export type SubmitEvent = {
     args: [];
 };
 /**
- * Fired when the form view is canceled, for example with a click on {@link ~LinkFormView#cancelButtonView}.
+ * Fired when the form view is canceled, for example with a click on {@link ~LinkFormView#backButtonView}.
  *
  * @eventName ~LinkFormView#cancel
  */

package/src/ui/linkformview.js

@@ -5,50 +5,91 @@
 /**
  * @module link/ui/linkformview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, SwitchButtonView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
+import { ButtonView, ListView, ListItemView, FocusCycler, LabeledFieldView, FormHeaderView, FormRowView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconPreviousArrow } from 'ckeditor5/src/icons.js';
 // 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/linkform.css';
 /**
- * The link form view controller class.
- *
- * See {@link module:link/ui/linkformview~LinkFormView}.
+ * The link form view.
  */
 export default class LinkFormView 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 Back button view displayed in the header.
+     */
+    backButtonView;
+    /**
+     * The Save button view.
+     */
+    saveButtonView;
+    /**
+     * The "Displayed text" input view.
+     */
+    displayedTextInputView;
+    /**
+     * The URL input view.
+     */
+    urlInputView;
+    /**
+     * A collection of child views.
+     */
+    children;
+    /**
+     * A collection of child views in the providers list.
+     */
+    providersListChildren;
+    /**
+     * 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:link/ui/linkformview~LinkFormView} class.
      *
      * Also see {@link #render}.
      *
      * @param locale The localization services instance.
-     * @param linkCommand Reference to {@link module:link/linkcommand~LinkCommand}.
      * @param validators  Form validators used by {@link #isValid}.
      */
-    constructor(locale, linkCommand, validators) {
+    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.displayedTextInputView = this._createDisplayedTextInput();
         this.urlInputView = this._createUrlInput();
-        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
-        this.saveButtonView.type = 'submit';
-        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
-        this._manualDecoratorSwitches = this._createManualDecoratorSwitches(linkCommand);
-        this.children = this._createFormChildren(linkCommand.manualDecorators);
+        this.providersListChildren = this.createCollection();
+        this.children = this.createCollection([
+            this._createHeaderView()
+        ]);
+        this._createFormChildren();
+        // Add providers list view to the children when the first item is added to the list.
+        // This is to avoid adding the list view when the form is empty.
+        this.listenTo(this.providersListChildren, 'add', () => {
+            this.stopListening(this.providersListChildren, 'add');
+            this.children.add(this._createProvidersListView());
+        });
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -60,35 +101,21 @@ export default class LinkFormView extends View {
                 focusNext: 'tab'
             }
         });
-        const classList = ['ck', 'ck-link-form', 'ck-responsive-form'];
-        if (linkCommand.manualDecorators.length) {
-            classList.push('ck-link-form_layout-vertical', 'ck-vertical-form');
-        }
         this.setTemplate({
             tag: 'form',
             attributes: {
-                class: classList,
+                class: [
+                    'ck',
+                    'ck-form',
+                    'ck-link-form',
+                    'ck-responsive-form'
+                ],
                 // https://github.com/ckeditor/ckeditor5-link/issues/90
                 tabindex: '-1'
             },
             children: this.children
         });
     }
-    /**
-     * Obtains the state of the {@link module:ui/button/switchbuttonview~SwitchButtonView switch buttons} representing
-     * {@link module:link/linkcommand~LinkCommand#manualDecorators manual link decorators}
-     * in the {@link module:link/ui/linkformview~LinkFormView}.
-     *
-     * @returns Key-value pairs, where the key is the name of the decorator and the value is its state.
-     */
-    getDecoratorSwitchesState() {
-        return Array
-            .from(this._manualDecoratorSwitches)
-            .reduce((accumulator, switchButton) => {
-            accumulator[switchButton.name] = switchButton.isOn;
-            return accumulator;
-        }, {});
-    }
     /**
      * @inheritDoc
      */
@@ -99,9 +126,10 @@ export default class LinkFormView extends View {
         });
         const childViews = [
             this.urlInputView,
-            ...this._manualDecoratorSwitches,
             this.saveButtonView,
-            this.cancelButtonView
+            ...this.providersListChildren,
+            this.backButtonView,
+            this.displayedTextInputView
         ];
         childViews.forEach(v => {
             // Register the view as focusable.
@@ -152,110 +180,111 @@ export default class LinkFormView extends View {
         this.urlInputView.errorText = null;
     }
     /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled field view instance.
+     * Creates a back button view that cancels the form.
      */
-    _createUrlInput() {
+    _createBackButton() {
         const t = this.locale.t;
-        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
-        labeledInput.fieldView.inputMode = 'url';
-        labeledInput.label = t('Link URL');
-        return labeledInput;
+        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 a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param className The additional button CSS class name.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @returns The button view instance.
+     * Creates a save button view that inserts the link.
      */
-    _createButton(label, icon, className, eventName) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
+    _createSaveButton() {
+        const t = this.locale.t;
+        const saveButton = new ButtonView(this.locale);
+        saveButton.set({
+            label: t('Insert'),
+            tooltip: false,
+            withText: true,
+            type: 'submit',
+            class: 'ck-button-action ck-button-bold'
         });
-        button.extendTemplate({
+        return saveButton;
+    }
+    /**
+     * Creates a header view for the form.
+     */
+    _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Link')
+        });
+        header.children.add(this.backButtonView, 0);
+        return header;
+    }
+    /**
+     * Creates a view for the providers list.
+     */
+    _createProvidersListView() {
+        const providersListView = new ListView(this.locale);
+        providersListView.extendTemplate({
             attributes: {
-                class: className
+                class: [
+                    'ck-link-form__providers-list'
+                ]
             }
         });
-        if (eventName) {
-            button.delegate('execute').to(this, eventName);
-        }
-        return button;
+        providersListView.items.bindTo(this.providersListChildren).using(def => {
+            const listItemView = new ListItemView(this.locale);
+            listItemView.children.add(def);
+            return listItemView;
+        });
+        return providersListView;
     }
     /**
-     * Populates {@link module:ui/viewcollection~ViewCollection} of {@link module:ui/button/switchbuttonview~SwitchButtonView}
-     * made based on {@link module:link/linkcommand~LinkCommand#manualDecorators}.
+     * Creates a labeled input view for the "Displayed text" field.
+     */
+    _createDisplayedTextInput() {
+        const t = this.locale.t;
+        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
+        labeledInput.label = t('Displayed text');
+        labeledInput.class = 'ck-labeled-field-view_full-width';
+        return labeledInput;
+    }
+    /**
+     * Creates a labeled input view for the URL field.
      *
-     * @param linkCommand A reference to the link command.
-     * @returns ViewCollection of switch buttons.
+     * @returns Labeled field view instance.
      */
-    _createManualDecoratorSwitches(linkCommand) {
-        const switches = this.createCollection();
-        for (const manualDecorator of linkCommand.manualDecorators) {
-            const switchButton = new SwitchButtonView(this.locale);
-            switchButton.set({
-                name: manualDecorator.id,
-                label: manualDecorator.label,
-                withText: true
-            });
-            switchButton.bind('isOn').toMany([manualDecorator, linkCommand], 'value', (decoratorValue, commandValue) => {
-                return commandValue === undefined && decoratorValue === undefined ? !!manualDecorator.defaultValue : !!decoratorValue;
-            });
-            switchButton.on('execute', () => {
-                manualDecorator.set('value', !switchButton.isOn);
-            });
-            switches.add(switchButton);
-        }
-        return switches;
+    _createUrlInput() {
+        const t = this.locale.t;
+        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
+        labeledInput.fieldView.inputMode = 'url';
+        labeledInput.label = t('Link URL');
+        labeledInput.class = 'ck-labeled-field-view_full-width';
+        return labeledInput;
     }
     /**
      * Populates the {@link #children} collection of the form.
-     *
-     * If {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators} are configured in the editor, it creates an
-     * additional `View` wrapping all {@link #_manualDecoratorSwitches} switch buttons corresponding
-     * to these decorators.
-     *
-     * @param manualDecorators A reference to
-     * the collection of manual decorators stored in the link command.
-     * @returns The children of link form view.
      */
-    _createFormChildren(manualDecorators) {
-        const children = this.createCollection();
-        children.add(this.urlInputView);
-        if (manualDecorators.length) {
-            const additionalButtonsView = new View();
-            additionalButtonsView.setTemplate({
-                tag: 'ul',
-                children: this._manualDecoratorSwitches.map(switchButton => ({
-                    tag: 'li',
-                    children: [switchButton],
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-list__item'
-                        ]
-                    }
-                })),
-                attributes: {
-                    class: [
-                        'ck',
-                        'ck-reset',
-                        'ck-list'
-                    ]
-                }
-            });
-            children.add(additionalButtonsView);
-        }
-        children.add(this.saveButtonView);
-        children.add(this.cancelButtonView);
-        return children;
+    _createFormChildren() {
+        this.children.add(new FormRowView(this.locale, {
+            children: [
+                this.displayedTextInputView
+            ],
+            class: [
+                'ck-form__row_large-top-padding'
+            ]
+        }));
+        this.children.add(new FormRowView(this.locale, {
+            children: [
+                this.urlInputView,
+                this.saveButtonView
+            ],
+            class: [
+                'ck-form__row_with-submit',
+                'ck-form__row_large-top-padding',
+                'ck-form__row_large-bottom-padding'
+            ]
+        }));
     }
     /**
      * The native DOM `value` of the {@link #urlInputView} element.

package/src/ui/linkpreviewbuttonview.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 link/ui/linkpreviewbuttonview
+ */
+import { ButtonView } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
+/**
+ * The link button class. Rendered as an `<a>` tag with link opening in a new tab.
+ *
+ * Provides a custom `navigate` cancelable event.
+ */
+export default class LinkPreviewButtonView extends ButtonView {
+    /**
+     * The value of the "href" attribute of the link.
+     *
+     * @observable
+     */
+    href: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+}
+/**
+ * Fired when the button view is clicked.
+ *
+ * @eventName ~LinkPreviewButtonView#navigate
+ */
+export type LinkPreviewButtonNavigateEvent = {
+    name: 'navigate';
+    args: [href: string, cancel: () => void];
+};

package/src/ui/linkpreviewbuttonview.js

@@ -0,0 +1,43 @@
+/**
+ * @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 link/ui/linkpreviewbuttonview
+ */
+import { ButtonView } from 'ckeditor5/src/ui.js';
+/**
+ * The link button class. Rendered as an `<a>` tag with link opening in a new tab.
+ *
+ * Provides a custom `navigate` cancelable event.
+ */
+export default class LinkPreviewButtonView extends ButtonView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set({
+            href: undefined,
+            withText: true
+        });
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-link-toolbar__preview'],
+                href: bind.to('href'),
+                target: '_blank',
+                rel: 'noopener noreferrer'
+            },
+            on: {
+                click: bind.to(evt => {
+                    if (this.href) {
+                        const cancel = () => evt.preventDefault();
+                        this.fire('navigate', this.href, cancel);
+                    }
+                })
+            }
+        });
+        this.template.tag = 'a';
+    }
+}