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

package/src/linkui.js

@@ -6,13 +6,19 @@
  * @module link/linkui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { IconLink, IconPencil, IconUnlink, IconSettings } from 'ckeditor5/src/icons.js';
 import { ClickObserver } from 'ckeditor5/src/engine.js';
-import { ButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, SwitchButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, ToolbarView } from 'ckeditor5/src/ui.js';
+import { Collection } from 'ckeditor5/src/utils.js';
 import { isWidget } from 'ckeditor5/src/widget.js';
+import LinkEditing from './linkediting.js';
+import LinkPreviewButtonView from './ui/linkpreviewbuttonview.js';
 import LinkFormView from './ui/linkformview.js';
-import LinkActionsView from './ui/linkactionsview.js';
-import { addLinkProtocolIfApplicable, isLinkElement, createBookmarkCallbacks, LINK_KEYSTROKE } from './utils.js';
-import linkIcon from '../theme/icons/link.svg';
+import LinkProviderItemsView from './ui/linkprovideritemsview.js';
+import LinkPropertiesView from './ui/linkpropertiesview.js';
+import LinkButtonView from './ui/linkbuttonview.js';
+import { addLinkProtocolIfApplicable, ensureSafeUrl, isLinkElement, extractTextFromLinkRange, LINK_KEYSTROKE } from './utils.js';
+import '../theme/linktoolbar.css';
 const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 /**
  * The link UI plugin. It introduces the `'link'` and `'unlink'` buttons and support for the <kbd>Ctrl+K</kbd> keystroke.
@@ -21,22 +27,35 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class LinkUI extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * The actions view displayed inside of the balloon.
-         */
-        this.actionsView = null;
-        /**
-         * The form view displayed inside the balloon.
-         */
-        this.formView = null;
-    }
+    /**
+     * The toolbar view displayed inside of the balloon.
+     */
+    toolbarView = null;
+    /**
+     * The form view displayed inside the balloon.
+     */
+    formView = null;
+    /**
+     * The view displaying links list.
+     */
+    linkProviderItemsView = null;
+    /**
+     * The form view displaying properties link settings.
+     */
+    propertiesView = null;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * The collection of the link providers.
+     */
+    _linksProviders = new Collection();
     /**
      * @inheritDoc
      */
     static get requires() {
-        return [ContextualBalloon];
+        return [ContextualBalloon, LinkEditing];
     }
     /**
      * @inheritDoc
@@ -56,10 +75,12 @@ export default class LinkUI extends Plugin {
     init() {
         const editor = this.editor;
         const t = this.editor.t;
+        this.set('selectedLinkableText', undefined);
         editor.editing.view.addObserver(ClickObserver);
         this._balloon = editor.plugins.get(ContextualBalloon);
         // Create toolbar buttons.
-        this._createToolbarLinkButton();
+        this._registerComponents();
+        this._registerEditingOpeners();
         this._enableBalloonActivators();
         // Renders a fake visual selection marker on an expanded selection.
         editor.conversion.for('editingDowncast').markerToHighlight({
@@ -103,73 +124,104 @@ export default class LinkUI extends Plugin {
     destroy() {
         super.destroy();
         // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
+        if (this.propertiesView) {
+            this.propertiesView.destroy();
+        }
         if (this.formView) {
             this.formView.destroy();
         }
-        if (this.actionsView) {
-            this.actionsView.destroy();
+        if (this.toolbarView) {
+            this.toolbarView.destroy();
+        }
+        if (this.linkProviderItemsView) {
+            this.linkProviderItemsView.destroy();
         }
     }
+    /**
+     * Registers list of buttons below the link form view that
+     * open a list of links provided by the clicked provider.
+     */
+    registerLinksListProvider(provider) {
+        const insertIndex = this._linksProviders
+            .filter(existing => (existing.order || 0) <= (provider.order || 0))
+            .length;
+        this._linksProviders.add(provider, insertIndex);
+    }
     /**
      * Creates views.
      */
     _createViews() {
-        this.actionsView = this._createActionsView();
+        const linkCommand = this.editor.commands.get('link');
+        this.toolbarView = this._createToolbarView();
         this.formView = this._createFormView();
+        if (linkCommand.manualDecorators.length) {
+            this.propertiesView = this._createPropertiesView();
+        }
         // Attach lifecycle actions to the the balloon.
         this._enableUserBalloonInteractions();
     }
     /**
-     * Creates the {@link module:link/ui/linkactionsview~LinkActionsView} instance.
+     * Creates the ToolbarView instance.
      */
-    _createActionsView() {
+    _createToolbarView() {
         const editor = this.editor;
-        const actionsView = new LinkActionsView(editor.locale, editor.config.get('link'), createBookmarkCallbacks(editor));
+        const toolbarView = new ToolbarView(editor.locale);
         const linkCommand = editor.commands.get('link');
-        const unlinkCommand = editor.commands.get('unlink');
-        actionsView.bind('href').to(linkCommand, 'value');
-        actionsView.editButtonView.bind('isEnabled').to(linkCommand);
-        actionsView.unlinkButtonView.bind('isEnabled').to(unlinkCommand);
-        // Execute unlink command after clicking on the "Edit" button.
-        this.listenTo(actionsView, 'edit', () => {
-            this._addFormView();
-        });
-        // Execute unlink command after clicking on the "Unlink" button.
-        this.listenTo(actionsView, 'unlink', () => {
-            editor.execute('unlink');
-            this._hideUI();
-        });
-        // Close the panel on esc key press when the **actions have focus**.
-        actionsView.keystrokes.set('Esc', (data, cancel) => {
+        toolbarView.class = 'ck-link-toolbar';
+        // Remove the linkProperties button if there are no manual decorators, as it would be useless.
+        let toolbarItems = editor.config.get('link.toolbar');
+        if (!linkCommand.manualDecorators.length) {
+            toolbarItems = toolbarItems.filter(item => item !== 'linkProperties');
+        }
+        toolbarView.fillFromConfig(toolbarItems, editor.ui.componentFactory);
+        // Close the panel on esc key press when the **link toolbar have focus**.
+        toolbarView.keystrokes.set('Esc', (data, cancel) => {
             this._hideUI();
             cancel();
         });
-        // Open the form view on Ctrl+K when the **actions have focus**..
-        actionsView.keystrokes.set(LINK_KEYSTROKE, (data, cancel) => {
+        // Open the form view on Ctrl+K when the **link toolbar have focus**..
+        toolbarView.keystrokes.set(LINK_KEYSTROKE, (data, cancel) => {
             this._addFormView();
             cancel();
         });
-        return actionsView;
+        // Register the toolbar, so it becomes available for Alt+F10 and Esc navigation.
+        // TODO this should be registered earlier to be able to open this toolbar without previously opening it by click or Ctrl+K
+        editor.ui.addToolbar(toolbarView, {
+            isContextual: true,
+            beforeFocus: () => {
+                if (this._getSelectedLinkElement() && !this._isToolbarVisible) {
+                    this._showUI(true);
+                }
+            },
+            afterBlur: () => {
+                this._hideUI(false);
+            }
+        });
+        return toolbarView;
     }
     /**
      * Creates the {@link module:link/ui/linkformview~LinkFormView} instance.
      */
     _createFormView() {
         const editor = this.editor;
+        const t = editor.locale.t;
         const linkCommand = editor.commands.get('link');
         const defaultProtocol = editor.config.get('link.defaultProtocol');
-        const formView = new (CssTransitionDisablerMixin(LinkFormView))(editor.locale, linkCommand, getFormValidators(editor));
-        formView.urlInputView.fieldView.bind('value').to(linkCommand, 'value');
+        const formView = new (CssTransitionDisablerMixin(LinkFormView))(editor.locale, getFormValidators(editor));
+        formView.displayedTextInputView.bind('isEnabled').to(this, 'selectedLinkableText', value => value !== undefined);
         // Form elements should be read-only when corresponding commands are disabled.
         formView.urlInputView.bind('isEnabled').to(linkCommand, 'isEnabled');
         // Disable the "save" button if the command is disabled.
         formView.saveButtonView.bind('isEnabled').to(linkCommand, 'isEnabled');
+        // Change the "Save" button label depending on the command state.
+        formView.saveButtonView.bind('label').to(linkCommand, 'value', value => value ? t('Update') : t('Insert'));
         // Execute link command after clicking the "Save" button.
         this.listenTo(formView, 'submit', () => {
             if (formView.isValid()) {
-                const { value } = formView.urlInputView.fieldView.element;
-                const parsedUrl = addLinkProtocolIfApplicable(value, defaultProtocol);
-                editor.execute('link', parsedUrl, formView.getDecoratorSwitchesState());
+                const url = formView.urlInputView.fieldView.element.value;
+                const parsedUrl = addLinkProtocolIfApplicable(url, defaultProtocol);
+                const displayedText = formView.displayedTextInputView.fieldView.element.value;
+                editor.execute('link', parsedUrl, this._getDecoratorSwitchesState(), displayedText !== this.selectedLinkableText ? displayedText : undefined);
                 this._closeFormView();
             }
         });
@@ -186,13 +238,124 @@ export default class LinkUI extends Plugin {
             this._closeFormView();
             cancel();
         });
+        // Watch adding new link providers and add them to the buttons list.
+        formView.providersListChildren.bindTo(this._linksProviders).using(provider => this._createLinksListProviderButton(provider));
         return formView;
     }
     /**
-     * Creates a toolbar Link button. Clicking this button will show
-     * a {@link #_balloon} attached to the selection.
+     * Creates a sorted array of buttons with link names.
+     */
+    _createLinkProviderListView(provider) {
+        return provider.getListItems().map(({ href, label, icon }) => {
+            const buttonView = new ButtonView();
+            buttonView.set({
+                label,
+                icon,
+                tooltip: false,
+                withText: true
+            });
+            buttonView.on('execute', () => {
+                this.formView.resetFormStatus();
+                this.formView.urlInputView.fieldView.value = href;
+                // Set focus to the editing view to prevent from losing it while current view is removed.
+                this.editor.editing.view.focus();
+                this._removeLinksProviderView();
+                // Set the focus to the URL input field.
+                this.formView.focus();
+            });
+            return buttonView;
+        });
+    }
+    /**
+     * Creates a view for links provider.
      */
-    _createToolbarLinkButton() {
+    _createLinkProviderItemsView(provider) {
+        const editor = this.editor;
+        const t = editor.locale.t;
+        const view = new LinkProviderItemsView(editor.locale);
+        const { emptyListPlaceholder, label } = provider;
+        view.emptyListPlaceholder = emptyListPlaceholder || t('No links available');
+        view.title = label;
+        // Hide the panel after clicking the "Cancel" button.
+        this.listenTo(view, 'cancel', () => {
+            // Set focus to the editing view to prevent from losing it while current view is removed.
+            editor.editing.view.focus();
+            this._removeLinksProviderView();
+            // Set the focus to the URL input field.
+            this.formView.focus();
+        });
+        return view;
+    }
+    /**
+     * Creates the {@link module:link/ui/linkpropertiesview~LinkPropertiesView} instance.
+     */
+    _createPropertiesView() {
+        const editor = this.editor;
+        const linkCommand = this.editor.commands.get('link');
+        const view = new (CssTransitionDisablerMixin(LinkPropertiesView))(editor.locale);
+        // Hide the panel after clicking the back button.
+        this.listenTo(view, 'back', () => {
+            // Move focus back to the editing view to prevent from losing it while current view is removed.
+            editor.editing.view.focus();
+            this._removePropertiesView();
+        });
+        view.listChildren.bindTo(linkCommand.manualDecorators).using(manualDecorator => {
+            const button = new SwitchButtonView(editor.locale);
+            button.set({
+                label: manualDecorator.label,
+                withText: true
+            });
+            button.bind('isOn').toMany([manualDecorator, linkCommand], 'value', (decoratorValue, commandValue) => {
+                return commandValue === undefined && decoratorValue === undefined ?
+                    !!manualDecorator.defaultValue :
+                    !!decoratorValue;
+            });
+            button.on('execute', () => {
+                manualDecorator.set('value', !button.isOn);
+                editor.execute('link', linkCommand.value, this._getDecoratorSwitchesState());
+            });
+            return button;
+        });
+        return view;
+    }
+    /**
+     * Obtains the state of the manual decorators.
+     */
+    _getDecoratorSwitchesState() {
+        const linkCommand = this.editor.commands.get('link');
+        return Array
+            .from(linkCommand.manualDecorators)
+            .reduce((accumulator, manualDecorator) => {
+            const value = linkCommand.value === undefined && manualDecorator.value === undefined ?
+                manualDecorator.defaultValue :
+                manualDecorator.value;
+            return {
+                ...accumulator,
+                [manualDecorator.id]: !!value
+            };
+        }, {});
+    }
+    /**
+     * Registers listeners used in editing plugin, used to open links.
+     */
+    _registerEditingOpeners() {
+        const linkEditing = this.editor.plugins.get(LinkEditing);
+        linkEditing._registerLinkOpener(href => {
+            const match = this._getLinkProviderLinkByHref(href);
+            if (!match) {
+                return false;
+            }
+            const { item, provider } = match;
+            if (provider.navigate) {
+                return provider.navigate(item);
+            }
+            return false;
+        });
+    }
+    /**
+     * Registers components in the ComponentFactory.
+     */
+    _registerComponents() {
         const editor = this.editor;
         editor.ui.componentFactory.add('link', () => {
             const button = this._createButton(ButtonView);
@@ -208,6 +371,113 @@ export default class LinkUI extends Plugin {
             });
             return button;
         });
+        editor.ui.componentFactory.add('linkPreview', locale => {
+            const button = new LinkPreviewButtonView(locale);
+            const allowedProtocols = editor.config.get('link.allowedProtocols');
+            const linkCommand = editor.commands.get('link');
+            const t = locale.t;
+            button.bind('isEnabled').to(linkCommand, 'value', href => !!href);
+            button.bind('href').to(linkCommand, 'value', href => {
+                return href && ensureSafeUrl(href, allowedProtocols);
+            });
+            const setHref = (href) => {
+                if (!href) {
+                    button.label = undefined;
+                    button.icon = undefined;
+                    button.tooltip = t('Open link in new tab');
+                    return;
+                }
+                const selectedLinksProviderLink = this._getLinkProviderLinkByHref(href);
+                if (selectedLinksProviderLink) {
+                    const { label, tooltip, icon } = selectedLinksProviderLink.item;
+                    button.label = label;
+                    button.tooltip = tooltip || false;
+                    button.icon = icon;
+                }
+                else {
+                    button.label = href;
+                    button.icon = undefined;
+                    button.tooltip = t('Open link in new tab');
+                }
+            };
+            setHref(linkCommand.value);
+            this.listenTo(linkCommand, 'change:value', (evt, name, href) => {
+                setHref(href);
+            });
+            this.listenTo(button, 'navigate', (evt, href, cancel) => {
+                const selectedLinksProviderLink = this._getLinkProviderLinkByHref(href);
+                if (!selectedLinksProviderLink) {
+                    return;
+                }
+                const { provider, item } = selectedLinksProviderLink;
+                const { navigate } = provider;
+                if (navigate && navigate(item)) {
+                    evt.stop();
+                    cancel();
+                }
+            });
+            return button;
+        });
+        editor.ui.componentFactory.add('unlink', locale => {
+            const unlinkCommand = editor.commands.get('unlink');
+            const button = new ButtonView(locale);
+            const t = locale.t;
+            button.set({
+                label: t('Unlink'),
+                icon: IconUnlink,
+                tooltip: true
+            });
+            button.bind('isEnabled').to(unlinkCommand);
+            this.listenTo(button, 'execute', () => {
+                editor.execute('unlink');
+                this._hideUI();
+            });
+            return button;
+        });
+        editor.ui.componentFactory.add('editLink', locale => {
+            const linkCommand = editor.commands.get('link');
+            const button = new ButtonView(locale);
+            const t = locale.t;
+            button.set({
+                label: t('Edit link'),
+                icon: IconPencil,
+                tooltip: true
+            });
+            button.bind('isEnabled').to(linkCommand);
+            this.listenTo(button, 'execute', () => {
+                this._addFormView();
+            });
+            return button;
+        });
+        editor.ui.componentFactory.add('linkProperties', locale => {
+            const linkCommand = editor.commands.get('link');
+            const button = new ButtonView(locale);
+            const t = locale.t;
+            button.set({
+                label: t('Link properties'),
+                icon: IconSettings,
+                tooltip: true
+            });
+            button.bind('isEnabled').to(linkCommand, 'isEnabled', linkCommand, 'value', linkCommand, 'manualDecorators', (isEnabled, href, manualDecorators) => isEnabled && !!href && manualDecorators.length > 0);
+            this.listenTo(button, 'execute', () => {
+                this._addPropertiesView();
+            });
+            return button;
+        });
+    }
+    /**
+     * Creates a links button view.
+     */
+    _createLinksListProviderButton(linkProvider) {
+        const locale = this.editor.locale;
+        const linksButton = new LinkButtonView(locale);
+        linksButton.set({
+            label: linkProvider.label
+        });
+        this.listenTo(linksButton, 'execute', () => {
+            this._showLinksProviderView(linkProvider);
+        });
+        return linksButton;
     }
     /**
      * Creates a button for link command to use either in toolbar or in menu bar.
@@ -220,14 +490,21 @@ export default class LinkUI extends Plugin {
         const t = locale.t;
         view.set({
             label: t('Link'),
-            icon: linkIcon,
+            icon: IconLink,
             keystroke: LINK_KEYSTROKE,
             isToggleable: true
         });
         view.bind('isEnabled').to(command, 'isEnabled');
         view.bind('isOn').to(command, 'value', value => !!value);
         // Show the panel on button click.
-        this.listenTo(view, 'execute', () => this._showUI(true));
+        this.listenTo(view, 'execute', () => {
+            this._showUI(true);
+            // Open the form view on-top of the toolbar view if it's already visible.
+            // It should be visible every time the link is selected.
+            if (this._getSelectedLinkElement()) {
+                this._addFormView();
+            }
+        });
         return view;
     }
     /**
@@ -262,8 +539,8 @@ export default class LinkUI extends Plugin {
     _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();
+            if (this._isToolbarVisible && !this.toolbarView.focusTracker.isFocused) {
+                this.toolbarView.focus();
                 cancel();
             }
         }, {
@@ -288,20 +565,21 @@ export default class LinkUI extends Plugin {
         });
     }
     /**
-     * Adds the {@link #actionsView} to the {@link #_balloon}.
+     * Adds the {@link #toolbarView} to the {@link #_balloon}.
      *
      * @internal
      */
-    _addActionsView() {
-        if (!this.actionsView) {
+    _addToolbarView() {
+        if (!this.toolbarView) {
             this._createViews();
         }
-        if (this._areActionsInPanel) {
+        if (this._isToolbarInPanel) {
             return;
         }
         this._balloon.add({
-            view: this.actionsView,
-            position: this._getBalloonPositionData()
+            view: this.toolbarView,
+            position: this._getBalloonPositionData(),
+            balloonClassName: 'ck-toolbar-container'
         });
     }
     /**
@@ -314,20 +592,22 @@ export default class LinkUI extends Plugin {
         if (this._isFormInPanel) {
             return;
         }
-        const editor = this.editor;
-        const linkCommand = editor.commands.get('link');
+        const linkCommand = this.editor.commands.get('link');
         this.formView.disableCssTransitions();
         this.formView.resetFormStatus();
+        this.formView.backButtonView.isVisible = linkCommand.isEnabled && !!linkCommand.value;
         this._balloon.add({
             view: this.formView,
             position: this._getBalloonPositionData()
         });
-        // Make sure that each time the panel shows up, the URL field remains in sync with the value of
+        // Make sure that each time the panel shows up, the fields remains in sync with the value of
         // the command. If the user typed in the input, then canceled the balloon (`urlInputView.fieldView#value` stays
         // unaltered) and re-opened it without changing the value of the link command (e.g. because they
         // clicked the same link), they would see the old value instead of the actual value of the command.
         // https://github.com/ckeditor/ckeditor5-link/issues/78
         // https://github.com/ckeditor/ckeditor5-link/issues/123
+        this.selectedLinkableText = this._getSelectedLinkableText();
+        this.formView.displayedTextInputView.fieldView.value = this.selectedLinkableText || '';
         this.formView.urlInputView.fieldView.value = linkCommand.value || '';
         // Select input when form view is currently visible.
         if (this._balloon.visibleView === this.formView) {
@@ -335,18 +615,55 @@ export default class LinkUI extends Plugin {
         }
         this.formView.enableCssTransitions();
     }
+    /**
+     * Adds the {@link #propertiesView} to the {@link #_balloon}.
+     */
+    _addPropertiesView() {
+        if (!this.propertiesView) {
+            this._createViews();
+        }
+        if (this._arePropertiesInPanel) {
+            return;
+        }
+        this.propertiesView.disableCssTransitions();
+        this._balloon.add({
+            view: this.propertiesView,
+            position: this._getBalloonPositionData()
+        });
+        this.propertiesView.enableCssTransitions();
+        this.propertiesView.focus();
+    }
+    /**
+     * Shows the view with links provided by the given provider.
+     */
+    _showLinksProviderView(provider) {
+        if (this.linkProviderItemsView) {
+            this._removeLinksProviderView();
+        }
+        this.linkProviderItemsView = this._createLinkProviderItemsView(provider);
+        this._addLinkProviderItemsView(provider);
+    }
+    /**
+     * Adds the {@link #linkProviderItemsView} to the {@link #_balloon}.
+     */
+    _addLinkProviderItemsView(provider) {
+        // Clear the collection of links.
+        this.linkProviderItemsView.listChildren.clear();
+        // Add links to the collection.
+        this.linkProviderItemsView.listChildren.addMany(this._createLinkProviderListView(provider));
+        this._balloon.add({
+            view: this.linkProviderItemsView,
+            position: this._getBalloonPositionData()
+        });
+        this.linkProviderItemsView.focus();
+    }
     /**
      * Closes the form view. Decides whether the balloon should be hidden completely or if the action view should be shown. This is
      * decided upon the link command value (which has a value if the document selection is in the link).
-     *
-     * Additionally, if any {@link module:link/linkconfig~LinkConfig#decorators} are defined in the editor configuration, the state of
-     * switch buttons responsible for manual decorator handling is restored.
      */
     _closeFormView() {
         const linkCommand = this.editor.commands.get('link');
-        // Restore manual decorator states to represent the current model state. This case is important to reset the switch buttons
-        // when the user cancels the editing form.
-        linkCommand.restoreManualDecoratorStates();
+        this.selectedLinkableText = undefined;
         if (linkCommand.value !== undefined) {
             this._removeFormView();
         }
@@ -354,6 +671,22 @@ export default class LinkUI extends Plugin {
             this._hideUI();
         }
     }
+    /**
+     * Removes the {@link #propertiesView} from the {@link #_balloon}.
+     */
+    _removePropertiesView() {
+        if (this._arePropertiesInPanel) {
+            this._balloon.remove(this.propertiesView);
+        }
+    }
+    /**
+     * Removes the {@link #linkProviderItemsView} from the {@link #_balloon}.
+     */
+    _removeLinksProviderView() {
+        if (this._isLinksListInPanel) {
+            this._balloon.remove(this.linkProviderItemsView);
+        }
+    }
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
      */
@@ -362,7 +695,8 @@ export default class LinkUI extends Plugin {
             // 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 URL field to update the state of the submit button.
+            // Reset fields to update the state of the submit button.
+            this.formView.displayedTextInputView.fieldView.reset();
             this.formView.urlInputView.fieldView.reset();
             this._balloon.remove(this.formView);
             // Because the form has an input which has focus, the focus must be brought back
@@ -372,7 +706,7 @@ export default class LinkUI extends Plugin {
         }
     }
     /**
-     * Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
+     * Shows the correct UI type. It is either {@link #formView} or {@link #toolbarView}.
      *
      * @internal
      */
@@ -385,7 +719,7 @@ export default class LinkUI extends Plugin {
             // Show visual selection on a text without a link when the contextual balloon is displayed.
             // See https://github.com/ckeditor/ckeditor5/issues/4721.
             this._showFakeVisualSelection();
-            this._addActionsView();
+            this._addToolbarView();
             // Be sure panel with link is visible.
             if (forceVisible) {
                 this._balloon.showStack('main');
@@ -394,13 +728,13 @@ export default class LinkUI extends Plugin {
         }
         // If there's a link under the selection...
         else {
-            // Go to the editing UI if actions are already visible.
-            if (this._areActionsVisible) {
+            // Go to the editing UI if toolbar is already visible.
+            if (this._isToolbarVisible) {
                 this._addFormView();
             }
-            // Otherwise display just the actions UI.
+            // Otherwise display just the toolbar.
             else {
-                this._addActionsView();
+                this._addToolbarView();
             }
             // Be sure panel with link is visible.
             if (forceVisible) {
@@ -413,22 +747,30 @@ export default class LinkUI extends Plugin {
     /**
      * Removes the {@link #formView} from the {@link #_balloon}.
      *
-     * See {@link #_addFormView}, {@link #_addActionsView}.
+     * See {@link #_addFormView}, {@link #_addToolbarView}.
      */
-    _hideUI() {
+    _hideUI(updateFocus = true) {
+        const editor = this.editor;
         if (!this._isUIInPanel) {
             return;
         }
-        const editor = this.editor;
         this.stopListening(editor.ui, 'update');
         this.stopListening(this._balloon, 'change:visibleView');
         // Make sure the focus always gets back to the editable _before_ removing the focused form view.
         // Doing otherwise causes issues in some browsers. See https://github.com/ckeditor/ckeditor5-link/issues/193.
-        editor.editing.view.focus();
-        // Remove form first because it's on top of the stack.
+        if (updateFocus) {
+            editor.editing.view.focus();
+        }
+        // If the links view is visible, remove it because it can be on top of the stack.
+        this._removeLinksProviderView();
+        // If the properties form view is visible, remove it because it can be on top of the stack.
+        this._removePropertiesView();
+        // Then remove the form view because it's beneath the properties form.
         this._removeFormView();
-        // Then remove the actions view because it's beneath the form.
-        this._balloon.remove(this.actionsView);
+        // Finally, remove the link toolbar view because it's last in the stack.
+        if (this._isToolbarInPanel) {
+            this._balloon.remove(this.toolbarView);
+        }
         this._hideFakeVisualSelection();
     }
     /**
@@ -451,7 +793,7 @@ export default class LinkUI extends Plugin {
             //   of the link,
             // * the selection went to a different parent when creating a NEW link. E.g. someone
             //   else modified the document.
-            // * the selection has expanded (e.g. displaying link actions then pressing SHIFT+Right arrow).
+            // * the selection has expanded (e.g. displaying link toolbar then pressing SHIFT+Right arrow).
             //
             // Note: #_getSelectedLinkElement will return a link for a non-collapsed selection only
             // when fully selected.
@@ -480,6 +822,18 @@ export default class LinkUI extends Plugin {
         this.listenTo(editor.ui, 'update', update);
         this.listenTo(this._balloon, 'change:visibleView', update);
     }
+    /**
+     * Returns `true` when {@link #propertiesView} is in the {@link #_balloon}.
+     */
+    get _arePropertiesInPanel() {
+        return !!this.propertiesView && this._balloon.hasView(this.propertiesView);
+    }
+    /**
+     * Returns `true` when {@link #linkProviderItemsView} is in the {@link #_balloon}.
+     */
+    get _isLinksListInPanel() {
+        return !!this.linkProviderItemsView && this._balloon.hasView(this.linkProviderItemsView);
+    }
     /**
      * Returns `true` when {@link #formView} is in the {@link #_balloon}.
      */
@@ -487,31 +841,45 @@ export default class LinkUI extends Plugin {
         return !!this.formView && this._balloon.hasView(this.formView);
     }
     /**
-     * Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
+     * Returns `true` when {@link #toolbarView} is in the {@link #_balloon}.
      */
-    get _areActionsInPanel() {
-        return !!this.actionsView && this._balloon.hasView(this.actionsView);
+    get _isToolbarInPanel() {
+        return !!this.toolbarView && this._balloon.hasView(this.toolbarView);
     }
     /**
-     * Returns `true` when {@link #actionsView} is in the {@link #_balloon} and it is
+     * Returns `true` when {@link #propertiesView} is in the {@link #_balloon} and it is
      * currently visible.
      */
-    get _areActionsVisible() {
-        return !!this.actionsView && this._balloon.visibleView === this.actionsView;
+    get _isPropertiesVisible() {
+        return !!this.propertiesView && this._balloon.visibleView === this.propertiesView;
     }
     /**
-     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon}.
+     * Returns `true` when {@link #formView} is in the {@link #_balloon} and it is
+     * currently visible.
      */
-    get _isUIInPanel() {
-        return this._isFormInPanel || this._areActionsInPanel;
+    get _isFormVisible() {
+        return !!this.formView && this._balloon.visibleView == this.formView;
     }
     /**
-     * Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon} and it is
+     * Returns `true` when {@link #toolbarView} is in the {@link #_balloon} and it is
      * currently visible.
      */
+    get _isToolbarVisible() {
+        return !!this.toolbarView && this._balloon.visibleView === this.toolbarView;
+    }
+    /**
+     * Returns `true` when {@link #propertiesView}, {@link #toolbarView}, {@link #linkProviderItemsView}
+     * or {@link #formView} is in the {@link #_balloon}.
+     */
+    get _isUIInPanel() {
+        return this._arePropertiesInPanel || this._isLinksListInPanel || this._isFormInPanel || this._isToolbarInPanel;
+    }
+    /**
+     * Returns `true` when {@link #propertiesView}, {@link #linkProviderItemsView}, {@link #toolbarView}
+     * 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;
+        return this._isPropertiesVisible || this._isLinksListInPanel || this._isFormVisible || this._isToolbarVisible;
     }
     /**
      * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
@@ -522,30 +890,34 @@ export default class LinkUI extends Plugin {
      */
     _getBalloonPositionData() {
         const view = this.editor.editing.view;
-        const model = this.editor.model;
         const viewDocument = view.document;
-        let target;
+        const model = this.editor.model;
         if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
             // There are cases when we highlight selection using a marker (#7705, #4721).
-            const markerViewElements = Array.from(this.editor.editing.mapper.markerNameToElements(VISUAL_SELECTION_MARKER_NAME));
-            const newRange = view.createRange(view.createPositionBefore(markerViewElements[0]), view.createPositionAfter(markerViewElements[markerViewElements.length - 1]));
-            target = view.domConverter.viewRangeToDom(newRange);
+            const markerViewElements = this.editor.editing.mapper.markerNameToElements(VISUAL_SELECTION_MARKER_NAME);
+            // Marker could be removed by link text override and end up in the graveyard.
+            if (markerViewElements) {
+                const markerViewElementsArray = Array.from(markerViewElements);
+                const newRange = view.createRange(view.createPositionBefore(markerViewElementsArray[0]), view.createPositionAfter(markerViewElementsArray[markerViewElementsArray.length - 1]));
+                return {
+                    target: view.domConverter.viewRangeToDom(newRange)
+                };
+            }
         }
-        else {
-            // Make sure the target is calculated on demand at the last moment because a cached DOM range
-            // (which is very fragile) can desynchronize with the state of the editing view if there was
-            // any rendering done in the meantime. This can happen, for instance, when an inline widget
-            // gets unlinked.
-            target = () => {
+        // Make sure the target is calculated on demand at the last moment because a cached DOM range
+        // (which is very fragile) can desynchronize with the state of the editing view if there was
+        // any rendering done in the meantime. This can happen, for instance, when an inline widget
+        // gets unlinked.
+        return {
+            target: () => {
                 const targetLink = this._getSelectedLinkElement();
                 return targetLink ?
                     // When selection is inside link element, then attach panel to this element.
                     view.domConverter.mapViewToDom(targetLink) :
                     // Otherwise attach panel to the selection.
                     view.domConverter.viewRangeToDom(viewDocument.selection.getFirstRange());
-            };
-        }
-        return { target };
+            }
+        };
     }
     /**
      * Returns the link {@link module:engine/view/attributeelement~AttributeElement} under
@@ -582,6 +954,42 @@ export default class LinkUI extends Plugin {
             }
         }
     }
+    /**
+     * Returns selected link text content.
+     * If link is not selected it returns the selected text.
+     * If selection or link includes non text node (inline object or block) then returns undefined.
+     */
+    _getSelectedLinkableText() {
+        const model = this.editor.model;
+        const editing = this.editor.editing;
+        const selectedLink = this._getSelectedLinkElement();
+        if (!selectedLink) {
+            return extractTextFromLinkRange(model.document.selection.getFirstRange());
+        }
+        const viewLinkRange = editing.view.createRangeOn(selectedLink);
+        const linkRange = editing.mapper.toModelRange(viewLinkRange);
+        return extractTextFromLinkRange(linkRange);
+    }
+    /**
+     * Returns a provider by its URL.
+     *
+     * @param href URL of the link.
+     * @returns Link provider and item or `null` if not found.
+     */
+    _getLinkProviderLinkByHref(href) {
+        if (!href) {
+            return null;
+        }
+        for (const provider of this._linksProviders) {
+            const item = provider.getItem ?
+                provider.getItem(href) :
+                provider.getListItems().find(item => item.href === href);
+            if (item) {
+                return { provider, item };
+            }
+        }
+        return null;
+    }
     /**
      * Displays a fake visual selection when the contextual balloon is displayed.
      *