@ckeditor/ckeditor5-link 36.0.0 → 37.0.0-alpha.0

package/src/ui/linkactionsview.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/ui/linkactionsview
+ */
+import { ButtonView, View } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler, type LocaleTranslate, type Locale } from 'ckeditor5/src/utils';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '../../theme/linkactions.css';
+/**
+ * The link actions view class. This view displays the link preview, allows
+ * unlinking or editing the link.
+ */
+export default class LinkActionsView 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 href preview view.
+     */
+    previewButtonView: View;
+    /**
+     * The unlink button view.
+     */
+    unlinkButtonView: ButtonView;
+    /**
+     * The edit link button view.
+     */
+    editButtonView: ButtonView;
+    /**
+     * The value of the "href" attribute of the link to use in the {@link #previewButtonView}.
+     *
+     * @observable
+     */
+    href: 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.
+     * @returns The button view instance.
+     */
+    private _createButton;
+    /**
+     * Creates a link href preview button.
+     *
+     * @returns The button view instance.
+     */
+    private _createPreviewButton;
+}
+/**
+ * Fired when the {@link #editButtonView} is clicked.
+ *
+ * @eventName edit
+ */
+export type EditEvent = {
+    name: 'edit';
+    args: [];
+};
+/**
+ * Fired when the {@link #unlinkButtonView} is clicked.
+ *
+ * @eventName unlink
+ */
+export type UnlinkEvent = {
+    name: 'unlink';
+    args: [];
+};

package/src/ui/linkactionsview.js

@@ -2,248 +2,155 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module link/ui/linkactionsview
  */
-
 import { ButtonView, View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 import { icons } from 'ckeditor5/src/core';
-
 import { ensureSafeUrl } from '../utils';
-
 // See: #8833.
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 import '../../theme/linkactions.css';
-
 import unlinkIcon from '../../theme/icons/unlink.svg';
-
 /**
  * The link actions view class. This view displays the link preview, allows
  * unlinking or editing the link.
- *
- * @extends module:ui/view~View
  */
 export default class LinkActionsView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const t = locale.t;
-
-		/**
-		 * Tracks information about DOM focus in the actions.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * The href preview view.
-		 *
-		 * @member {module:ui/view~View}
-		 */
-		this.previewButtonView = this._createPreviewButton();
-
-		/**
-		 * The unlink button view.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView}
-		 */
-		this.unlinkButtonView = this._createButton( t( 'Unlink' ), unlinkIcon, 'unlink' );
-
-		/**
-		 * The edit link button view.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView}
-		 */
-		this.editButtonView = this._createButton( t( 'Edit link' ), icons.pencil, 'edit' );
-
-		/**
-		 * The value of the "href" attribute of the link to use in the {@link #previewButtonView}.
-		 *
-		 * @observable
-		 * @member {String}
-		 */
-		this.set( 'href' );
-
-		/**
-		 * A collection of views that can be focused in the view.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this._focusables = new ViewCollection();
-
-		/**
-		 * Helps cycling over {@link #_focusables} in the view.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		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-link-actions',
-					'ck-responsive-form'
-				],
-
-				// https://github.com/ckeditor/ckeditor5-link/issues/90
-				tabindex: '-1'
-			},
-
-			children: [
-				this.previewButtonView,
-				this.editButtonView,
-				this.unlinkButtonView
-			]
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		const childViews = [
-			this.previewButtonView,
-			this.editButtonView,
-			this.unlinkButtonView
-		];
-
-		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.
-	 *
-	 * @private
-	 * @param {String} label The button label.
-	 * @param {String} icon The button icon.
-	 * @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
-	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
-	 */
-	_createButton( label, icon, eventName ) {
-		const button = new ButtonView( this.locale );
-
-		button.set( {
-			label,
-			icon,
-			tooltip: true
-		} );
-
-		button.delegate( 'execute' ).to( this, eventName );
-
-		return button;
-	}
-
-	/**
-	 * Creates a link href preview button.
-	 *
-	 * @private
-	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
-	 */
-	_createPreviewButton() {
-		const button = new ButtonView( this.locale );
-		const bind = this.bindTemplate;
-		const t = this.t;
-
-		button.set( {
-			withText: true,
-			tooltip: t( 'Open link in new tab' )
-		} );
-
-		button.extendTemplate( {
-			attributes: {
-				class: [
-					'ck',
-					'ck-link-actions__preview'
-				],
-				href: bind.to( 'href', href => href && ensureSafeUrl( href ) ),
-				target: '_blank',
-				rel: 'noopener noreferrer'
-			}
-		} );
-
-		button.bind( 'label' ).to( this, 'href', href => {
-			return href || t( 'This link has no URL' );
-		} );
-
-		button.bind( 'isEnabled' ).to( this, 'href', href => !!href );
-
-		button.template.tag = 'a';
-		button.template.eventListeners = {};
-
-		return button;
-	}
+    /**
+     * @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.previewButtonView = this._createPreviewButton();
+        this.unlinkButtonView = this._createButton(t('Unlink'), unlinkIcon, 'unlink');
+        this.editButtonView = this._createButton(t('Edit link'), icons.pencil, 'edit');
+        this.set('href', 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-link-actions',
+                    'ck-responsive-form'
+                ],
+                // https://github.com/ckeditor/ckeditor5-link/issues/90
+                tabindex: '-1'
+            },
+            children: [
+                this.previewButtonView,
+                this.editButtonView,
+                this.unlinkButtonView
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        const childViews = [
+            this.previewButtonView,
+            this.editButtonView,
+            this.unlinkButtonView
+        ];
+        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.
+     * @returns The button view instance.
+     */
+    _createButton(label, icon, eventName) {
+        const button = new ButtonView(this.locale);
+        button.set({
+            label,
+            icon,
+            tooltip: true
+        });
+        button.delegate('execute').to(this, eventName);
+        return button;
+    }
+    /**
+     * Creates a link href preview button.
+     *
+     * @returns The button view instance.
+     */
+    _createPreviewButton() {
+        const button = new ButtonView(this.locale);
+        const bind = this.bindTemplate;
+        const t = this.t;
+        button.set({
+            withText: true,
+            tooltip: t('Open link in new tab')
+        });
+        button.extendTemplate({
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-link-actions__preview'
+                ],
+                href: bind.to('href', href => href && ensureSafeUrl(href)),
+                target: '_blank',
+                rel: 'noopener noreferrer'
+            }
+        });
+        button.bind('label').to(this, 'href', href => {
+            return href || t('This link has no URL');
+        });
+        button.bind('isEnabled').to(this, 'href', href => !!href);
+        button.template.tag = 'a';
+        button.template.eventListeners = {};
+        return button;
+    }
 }
-
-/**
- * Fired when the {@link #editButtonView} is clicked.
- *
- * @event edit
- */
-
-/**
- * Fired when the {@link #unlinkButtonView} is clicked.
- *
- * @event unlink
- */

package/src/ui/linkformview.d.ts

@@ -0,0 +1,141 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/ui/linkformview
+ */
+import { ButtonView, LabeledFieldView, View, ViewCollection, type InputTextView } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
+import type LinkCommand from '../linkcommand';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '../../theme/linkform.css';
+/**
+ * The link form view controller class.
+ *
+ * See {@link module:link/ui/linkformview~LinkFormView}.
+ */
+export default class LinkFormView extends View {
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * The URL input view.
+     */
+    urlInputView: LabeledFieldView<InputTextView>;
+    /**
+     * The Save button view.
+     */
+    saveButtonView: ButtonView;
+    /**
+     * The Cancel button view.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
+     * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
+     * configured in the editor.
+     */
+    private readonly _manualDecoratorSwitches;
+    /**
+     * A collection of child views in the form.
+     */
+    readonly children: ViewCollection;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    private readonly _focusables;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    private readonly _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}.
+     */
+    constructor(locale: Locale, linkCommand: LinkCommand);
+    /**
+     * 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>;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the fist {@link #_focusables} in the form.
+     */
+    focus(): void;
+    /**
+     * Creates a labeled input view.
+     *
+     * @returns Labeled field view instance.
+     */
+    private _createUrlInput;
+    /**
+     * 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.
+     */
+    private _createButton;
+    /**
+     * Populates {@link module:ui/viewcollection~ViewCollection} of {@link module:ui/button/switchbuttonview~SwitchButtonView}
+     * made based on {@link module:link/linkcommand~LinkCommand#manualDecorators}.
+     *
+     * @param linkCommand A reference to the link command.
+     * @returns ViewCollection of switch buttons.
+     */
+    private _createManualDecoratorSwitches;
+    /**
+     * 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;
+}
+/**
+ * Fired when the form view is submitted (when one of the children triggered the submit event),
+ * for example with a click on {@link #saveButtonView}.
+ *
+ * @eventName submit
+ */
+export type SubmitEvent = {
+    name: 'submit';
+    args: [];
+};
+/**
+ * Fired when the form view is canceled, for example with a click on {@link #cancelButtonView}.
+ *
+ * @eventName cancel
+ */
+export type CancelEvent = {
+    name: 'cancel';
+    args: [];
+};