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

package/dist/index.js

@@ -2,14 +2,16 @@
  * @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 { Command, Plugin, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { findAttributeRange, TwoStepCaretMovement, Input, inlineHighlight, Delete, TextWatcher, getLastTextLine } from '@ckeditor/ckeditor5-typing/dist/index.js';
 import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
-import { toMap, Collection, first, ObservableMixin, env, keyCodes, FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { upperFirst } from 'lodash-es';
-import { ClickObserver, Matcher } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { View, ViewCollection, FocusCycler, submitHandler, LabeledFieldView, createLabeledInputText, ButtonView, SwitchButtonView, ContextualBalloon, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { toMap, Collection, first, diff, ObservableMixin, env, keyCodes, FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { LivePosition, ClickObserver, Matcher } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { upperFirst } from 'es-toolkit/compat';
+import { IconPreviousArrow, IconUnlink, IconPencil, IconSettings, IconLink } from '@ckeditor/ckeditor5-icons/dist/index.js';
+import { ButtonView, View, ViewCollection, FocusCycler, submitHandler, FormHeaderView, ListView, ListItemView, LabeledFieldView, createLabeledInputText, FormRowView, IconView, ContextualBalloon, ToolbarView, CssTransitionDisablerMixin, SwitchButtonView, MenuBarMenuListItemButtonView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { isWidget } from '@ckeditor/ckeditor5-widget/dist/index.js';
+import { IconPreviousArrow as IconPreviousArrow$1, IconNextArrow } from '@ckeditor/ckeditor5-icons/dist/index.js';
 
 /**
  * Helper class that ties together all {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition} and provides
@@ -262,31 +264,18 @@ const DEFAULT_LINK_PROTOCOLS = [
     window.open(link, '_blank', 'noopener');
 }
 /**
- * Creates the bookmark callbacks for handling link opening experience.
- */ function createBookmarkCallbacks(editor) {
-    const bookmarkEditing = editor.plugins.has('BookmarkEditing') ? editor.plugins.get('BookmarkEditing') : null;
-    /**
-	 * Returns `true` when bookmark `id` matches the hash from `link`.
-	 */ function isScrollableToTarget(link) {
-        return !!link && link.startsWith('#') && !!bookmarkEditing && !!bookmarkEditing.getElementForBookmarkId(link.slice(1));
-    }
-    /**
-	 * Scrolls the view to the desired bookmark or open a link in new window.
-	 */ function scrollToTarget(link) {
-        const bookmarkId = link.slice(1);
-        const modelBookmark = bookmarkEditing.getElementForBookmarkId(bookmarkId);
-        editor.model.change((writer)=>{
-            writer.setSelection(modelBookmark, 'on');
-        });
-        editor.editing.view.scrollToTheSelection({
-            alignToTop: true,
-            forceScroll: true
-        });
+ * Returns a text of a link range.
+ *
+ * If the returned value is `undefined`, the range contains elements other than text nodes.
+ */ function extractTextFromLinkRange(range) {
+    let text = '';
+    for (const item of range.getItems()){
+        if (!item.is('$text') && !item.is('$textProxy')) {
+            return;
+        }
+        text += item.data;
     }
-    return {
-        isScrollableToTarget,
-        scrollToTarget
-    };
+    return text;
 }
 
 /**
@@ -389,10 +378,26 @@ const DEFAULT_LINK_PROTOCOLS = [
 	 * **Note**: {@link module:link/unlinkcommand~UnlinkCommand#execute `UnlinkCommand#execute()`} removes all
 	 * decorator attributes.
 	 *
+	 * An optional parameter called `displayedText` is to add or update text of the link that represents the `href`. For example:
+	 *
+	 * ```ts
+	 * const linkCommand = editor.commands.get( 'link' );
+	 *
+	 * // Adding a new link with `displayedText` attribute.
+	 * linkCommand.execute( 'http://example.com', {}, 'Example' );
+	 * ```
+	 *
+	 * The above code will create an anchor like this:
+	 *
+	 * ```html
+	 * <a href="http://example.com">Example</a>
+	 * ```
+	 *
 	 * @fires execute
 	 * @param href Link destination.
 	 * @param manualDecoratorIds The information about manual decorator attributes to be applied or removed upon execution.
-	 */ execute(href, manualDecoratorIds = {}) {
+	 * @param displayedText Text of the link.
+	 */ execute(href, manualDecoratorIds = {}, displayedText) {
         const model = this.editor.model;
         const selection = model.document.selection;
         // Stores information about manual decorators to turn them on/off when command is applied.
@@ -406,50 +411,100 @@ const DEFAULT_LINK_PROTOCOLS = [
             }
         }
         model.change((writer)=>{
+            const updateLinkAttributes = (itemOrRange)=>{
+                writer.setAttribute('linkHref', href, itemOrRange);
+                truthyManualDecorators.forEach((item)=>writer.setAttribute(item, true, itemOrRange));
+                falsyManualDecorators.forEach((item)=>writer.removeAttribute(item, itemOrRange));
+            };
+            const updateLinkTextIfNeeded = (range, linkHref)=>{
+                const linkText = extractTextFromLinkRange(range);
+                if (!linkText) {
+                    return range;
+                }
+                // Make a copy not to override the command param value.
+                let newText = displayedText;
+                if (!newText) {
+                    // Replace the link text with the new href if previously href was equal to text.
+                    // For example: `<a href="http://ckeditor.com/">http://ckeditor.com/</a>`.
+                    newText = linkHref && linkHref == linkText ? href : linkText;
+                }
+                // Only if needed.
+                if (newText != linkText) {
+                    const changes = findChanges(linkText, newText);
+                    let insertsLength = 0;
+                    for (const { offset, actual, expected } of changes){
+                        const updatedOffset = offset + insertsLength;
+                        const subRange = writer.createRange(range.start.getShiftedBy(updatedOffset), range.start.getShiftedBy(updatedOffset + actual.length));
+                        // Collect formatting attributes from replaced text.
+                        const textNode = getLinkPartTextNode(subRange, range);
+                        const attributes = textNode.getAttributes();
+                        const formattingAttributes = Array.from(attributes).filter(([key])=>model.schema.getAttributeProperties(key).isFormatting);
+                        // Create a new text node.
+                        const newTextNode = writer.createText(expected, formattingAttributes);
+                        // Set link attributes before inserting to document to avoid Differ attributes edge case.
+                        updateLinkAttributes(newTextNode);
+                        // Replace text with formatting.
+                        model.insertContent(newTextNode, subRange);
+                        // Sum of all previous inserts.
+                        insertsLength += expected.length;
+                    }
+                    return writer.createRange(range.start, range.start.getShiftedBy(newText.length));
+                }
+            };
+            const collapseSelectionAtLinkEnd = (linkRange)=>{
+                const { plugins } = this.editor;
+                writer.setSelection(linkRange.end);
+                if (plugins.has('TwoStepCaretMovement')) {
+                    // After replacing the text of the link, we need to move the caret to the end of the link,
+                    // override it's gravity to forward to prevent keeping e.g. bold attribute on the caret
+                    // which was previously inside the link.
+                    //
+                    // If the plugin is not available, the caret will be placed at the end of the link and the
+                    // bold attribute will be kept even if command moved caret outside the link.
+                    plugins.get('TwoStepCaretMovement')._handleForwardMovement();
+                } else {
+                    // Remove the `linkHref` attribute and all link decorators from the selection.
+                    // It stops adding a new content into the link element.
+                    for (const key of [
+                        'linkHref',
+                        ...truthyManualDecorators,
+                        ...falsyManualDecorators
+                    ]){
+                        writer.removeSelectionAttribute(key);
+                    }
+                }
+            };
             // If selection is collapsed then update selected link or insert new one at the place of caret.
             if (selection.isCollapsed) {
                 const position = selection.getFirstPosition();
                 // When selection is inside text with `linkHref` attribute.
                 if (selection.hasAttribute('linkHref')) {
-                    const linkText = extractTextFromSelection(selection);
-                    // Then update `linkHref` value.
-                    let linkRange = findAttributeRange(position, 'linkHref', selection.getAttribute('linkHref'), model);
-                    if (selection.getAttribute('linkHref') === linkText) {
-                        linkRange = this._updateLinkContent(model, writer, linkRange, href);
+                    const linkHref = selection.getAttribute('linkHref');
+                    const linkRange = findAttributeRange(position, 'linkHref', linkHref, model);
+                    const newLinkRange = updateLinkTextIfNeeded(linkRange, linkHref);
+                    updateLinkAttributes(newLinkRange || linkRange);
+                    // Put the selection at the end of the updated link only when text was changed.
+                    // When text was not altered we keep the original selection.
+                    if (newLinkRange) {
+                        collapseSelectionAtLinkEnd(newLinkRange);
                     }
-                    writer.setAttribute('linkHref', href, linkRange);
-                    truthyManualDecorators.forEach((item)=>{
-                        writer.setAttribute(item, true, linkRange);
-                    });
-                    falsyManualDecorators.forEach((item)=>{
-                        writer.removeAttribute(item, linkRange);
-                    });
-                    // Put the selection at the end of the updated link.
-                    writer.setSelection(writer.createPositionAfter(linkRange.end.nodeBefore));
                 } else if (href !== '') {
                     const attributes = toMap(selection.getAttributes());
                     attributes.set('linkHref', href);
                     truthyManualDecorators.forEach((item)=>{
                         attributes.set(item, true);
                     });
-                    const { end: positionAfter } = model.insertContent(writer.createText(href, attributes), position);
+                    const newLinkRange = model.insertContent(writer.createText(displayedText || href, attributes), position);
                     // Put the selection at the end of the inserted link.
                     // Using end of range returned from insertContent in case nodes with the same attributes got merged.
-                    writer.setSelection(positionAfter);
+                    collapseSelectionAtLinkEnd(newLinkRange);
                 }
-                // Remove the `linkHref` attribute and all link decorators from the selection.
-                // It stops adding a new content into the link element.
-                [
-                    'linkHref',
-                    ...truthyManualDecorators,
-                    ...falsyManualDecorators
-                ].forEach((item)=>{
-                    writer.removeSelectionAttribute(item);
-                });
             } else {
+                // Non-collapsed selection.
                 // If selection has non-collapsed ranges, we change attribute on nodes inside those ranges
                 // omitting nodes where the `linkHref` attribute is disallowed.
-                const ranges = model.schema.getValidRanges(selection.getRanges(), 'linkHref');
+                const selectionRanges = Array.from(selection.getRanges());
+                const ranges = model.schema.getValidRanges(selectionRanges, 'linkHref');
                 // But for the first, check whether the `linkHref` attribute is allowed on selected blocks (e.g. the "image" element).
                 const allowedRanges = [];
                 for (const element of selection.getSelectedBlocks()){
@@ -466,24 +521,25 @@ const DEFAULT_LINK_PROTOCOLS = [
                         rangesToUpdate.push(range);
                     }
                 }
-                for (const range of rangesToUpdate){
-                    let linkRange = range;
-                    if (rangesToUpdate.length === 1) {
-                        // Current text of the link in the document.
-                        const linkText = extractTextFromSelection(selection);
-                        if (selection.getAttribute('linkHref') === linkText) {
-                            linkRange = this._updateLinkContent(model, writer, range, href);
-                            writer.setSelection(writer.createSelection(linkRange));
-                        }
-                    }
-                    writer.setAttribute('linkHref', href, linkRange);
-                    truthyManualDecorators.forEach((item)=>{
-                        writer.setAttribute(item, true, linkRange);
-                    });
-                    falsyManualDecorators.forEach((item)=>{
-                        writer.removeAttribute(item, linkRange);
-                    });
+                // Store the selection ranges in a pseudo live range array (stickiness to the outside of the range).
+                const stickyPseudoRanges = selectionRanges.map((range)=>({
+                        start: LivePosition.fromPosition(range.start, 'toPrevious'),
+                        end: LivePosition.fromPosition(range.end, 'toNext')
+                    }));
+                // Update or set links (including text update if needed).
+                for (let range of rangesToUpdate){
+                    const linkHref = (range.start.textNode || range.start.nodeAfter).getAttribute('linkHref');
+                    range = updateLinkTextIfNeeded(range, linkHref) || range;
+                    updateLinkAttributes(range);
                 }
+                // The original selection got trimmed by replacing content so we need to restore it.
+                writer.setSelection(stickyPseudoRanges.map((pseudoRange)=>{
+                    const start = pseudoRange.start.toPosition();
+                    const end = pseudoRange.end.toPosition();
+                    pseudoRange.start.detach();
+                    pseudoRange.end.detach();
+                    return model.createRange(start, end);
+                }));
             }
         });
     }
@@ -517,35 +573,99 @@ const DEFAULT_LINK_PROTOCOLS = [
         }
         return true;
     }
-    /**
-	 * Updates selected link with a new value as its content and as its href attribute.
-	 *
-	 * @param model Model is need to insert content.
-	 * @param writer Writer is need to create text element in model.
-	 * @param range A range where should be inserted content.
-	 * @param href A link value which should be in the href attribute and in the content.
-	 */ _updateLinkContent(model, writer, range, href) {
-        const text = writer.createText(href, {
-            linkHref: href
-        });
-        return model.insertContent(text, range);
-    }
 }
-// Returns a text of a link under the collapsed selection or a selection that contains the entire link.
-function extractTextFromSelection(selection) {
-    if (selection.isCollapsed) {
-        const firstPosition = selection.getFirstPosition();
-        return firstPosition.textNode && firstPosition.textNode.data;
-    } else {
-        const rangeItems = Array.from(selection.getFirstRange().getItems());
-        if (rangeItems.length > 1) {
-            return null;
+/**
+ * Compares two strings and returns an array of changes needed to transform one into another.
+ * Uses the diff utility to find the differences and groups them into chunks containing information
+ * about the offset and actual/expected content.
+ *
+ * @param oldText The original text to compare.
+ * @param newText The new text to compare against.
+ * @returns Array of change objects containing offset and actual/expected content.
+ *
+ * @example
+ * findChanges( 'hello world', 'hi there' );
+ *
+ * Returns:
+ * [
+ * 	{
+ * 		"offset": 1,
+ * 		"actual": "ello",
+ * 		"expected": "i"
+ * 	},
+ * 	{
+ * 		"offset": 2,
+ * 		"actual": "wo",
+ * 		"expected": "the"
+ * 	},
+ * 	{
+ * 		"offset": 3,
+ * 		"actual": "ld",
+ * 		"expected": "e"
+ * 	}
+ * ]
+ */ function findChanges(oldText, newText) {
+    // Get array of operations (insert/delete/equal) needed to transform oldText into newText.
+    // Example: diff('abc', 'abxc') returns ['equal', 'equal', 'insert', 'equal']
+    const changes = diff(oldText, newText);
+    // Track position in both strings based on operation type.
+    const counter = {
+        equal: 0,
+        insert: 0,
+        delete: 0
+    };
+    const result = [];
+    // Accumulate consecutive changes into slices before creating change objects.
+    let actualSlice = '';
+    let expectedSlice = '';
+    // Adding null as sentinel value to handle final accumulated changes.
+    for (const action of [
+        ...changes,
+        null
+    ]){
+        if (action == 'insert') {
+            // Example: for 'abc' -> 'abxc', at insert position, adds 'x' to expectedSlice.
+            expectedSlice += newText[counter.equal + counter.insert];
+        } else if (action == 'delete') {
+            // Example: for 'abc' -> 'ac', at delete position, adds 'b' to actualSlice.
+            actualSlice += oldText[counter.equal + counter.delete];
+        } else if (actualSlice.length || expectedSlice.length) {
+            // On 'equal' or end: bundle accumulated changes into a single change object.
+            // Example: { offset: 2, actual: "", expected: "x" }
+            result.push({
+                offset: counter.equal,
+                actual: actualSlice,
+                expected: expectedSlice
+            });
+            actualSlice = '';
+            expectedSlice = '';
         }
-        const firstNode = rangeItems[0];
-        if (firstNode.is('$text') || firstNode.is('$textProxy')) {
-            return firstNode.data;
+        // Increment appropriate counter for the current operation.
+        if (action) {
+            counter[action]++;
         }
-        return null;
+    }
+    return result;
+}
+/**
+ * Returns text node withing the link range that should be updated.
+ *
+ * @param range Partial link range.
+ * @param linkRange Range of the entire link.
+ * @returns Text node.
+ */ function getLinkPartTextNode(range, linkRange) {
+    if (!range.isCollapsed) {
+        return first(range.getItems());
+    }
+    const position = range.start;
+    if (position.textNode) {
+        return position.textNode;
+    }
+    // If the range is at the start of a link range then prefer node inside a link range.
+    if (!position.nodeBefore || position.isEqual(linkRange.start)) {
+        return position.nodeAfter;
+    } else {
+        return position.nodeBefore;
     }
 }
 
@@ -670,6 +790,9 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
  * It introduces the `linkHref="url"` attribute in the model which renders to the view as a `<a href="url">` element
  * as well as `'link'` and `'unlink'` commands.
  */ class LinkEditing extends Plugin {
+    /**
+	 * A list of functions that handles opening links. If any of them returns `true`, the link is considered to be opened.
+	 */ _linkOpeners = [];
     /**
 	 * @inheritDoc
 	 */ static get pluginName() {
@@ -696,7 +819,14 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
         super(editor);
         editor.config.define('link', {
             allowCreatingEmptyLinks: false,
-            addTargetToExternalLinks: false
+            addTargetToExternalLinks: false,
+            toolbar: [
+                'linkPreview',
+                '|',
+                'editLink',
+                'linkProperties',
+                'unlink'
+            ]
         });
     }
     /**
@@ -748,6 +878,14 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
         // Handle adding default protocol to pasted links.
         this._enableClipboardIntegration();
     }
+    /**
+	 * Registers a function that opens links in a new browser tab.
+	 *
+	 * @param linkOpener The function that opens a link in a new browser tab.
+	 * @internal
+	 */ _registerLinkOpener(linkOpener) {
+        this._linkOpeners.push(linkOpener);
+    }
     /**
 	 * Processes an array of configured {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic decorators}
 	 * and registers a {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher downcast dispatcher}
@@ -841,14 +979,11 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
         const editor = this.editor;
         const view = editor.editing.view;
         const viewDocument = view.document;
-        const bookmarkCallbacks = createBookmarkCallbacks(editor);
-        function handleLinkOpening(url) {
-            if (bookmarkCallbacks.isScrollableToTarget(url)) {
-                bookmarkCallbacks.scrollToTarget(url);
-            } else {
+        const handleLinkOpening = (url)=>{
+            if (!this._linkOpeners.some((opener)=>opener(url))) {
                 openLink(url);
             }
-        }
+        };
         this.listenTo(viewDocument, 'click', (evt, data)=>{
             const shouldOpen = env.isMac ? data.domEvent.metaKey : data.domEvent.ctrlKey;
             if (!shouldOpen) {
@@ -940,9 +1075,43 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
 }
 
 /**
- * The link form view controller class.
+ * The link button class. Rendered as an `<a>` tag with link opening in a new tab.
  *
- * See {@link module:link/ui/linkformview~LinkFormView}.
+ * Provides a custom `navigate` cancelable event.
+ */ 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';
+    }
+}
+
+/**
+ * The link form view.
  */ class LinkFormView extends View {
     /**
 	 * Tracks information about DOM focus in the form.
@@ -951,22 +1120,23 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
 	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 	 */ keystrokes = new KeystrokeHandler();
     /**
-	 * The URL input view.
-	 */ urlInputView;
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
     /**
 	 * The Save button view.
 	 */ saveButtonView;
     /**
-	 * The Cancel button view.
-	 */ cancelButtonView;
+	 * The "Displayed text" input view.
+	 */ displayedTextInputView;
     /**
-	 * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
-	 * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
-	 * configured in the editor.
-	 */ _manualDecoratorSwitches;
+	 * The URL input view.
+	 */ urlInputView;
     /**
-	 * A collection of child views in the form.
+	 * 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;
@@ -982,18 +1152,27 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
 	 * 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);
-        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,
@@ -1005,36 +1184,21 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
                 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
 	 */ render() {
@@ -1044,9 +1208,10 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
         });
         const childViews = [
             this.urlInputView,
-            ...this._manualDecoratorSwitches,
             this.saveButtonView,
-            this.cancelButtonView
+            ...this.providersListChildren,
+            this.backButtonView,
+            this.displayedTextInputView
         ];
         childViews.forEach((v)=>{
             // Register the view as focusable.
@@ -1093,111 +1258,104 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
         this.urlInputView.errorText = null;
     }
     /**
-	 * Creates a labeled input view.
-	 *
-	 * @returns Labeled field view instance.
-	 */ _createUrlInput() {
+	 * Creates a back button view that cancels the form.
+	 */ _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.
-	 */ _createButton(label, icon, className, eventName) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
+	 * Creates a save button view that inserts the link.
+	 */ _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'
+        });
+        return saveButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Link')
         });
-        button.extendTemplate({
+        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;
+    }
+    /**
+	 * 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;
     }
     /**
-	 * 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 URL field.
 	 *
-	 * @param linkCommand A reference to the link command.
-	 * @returns ViewCollection of switch buttons.
-	 */ _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;
+	 * @returns Labeled field view instance.
+	 */ _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.
@@ -1213,54 +1371,80 @@ const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
     }
 }
 
-var unlinkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184zm4.919 10.562-1.414 1.414a.75.75 0 1 1-1.06-1.06l1.414-1.415-1.415-1.414a.75.75 0 0 1 1.061-1.06l1.414 1.414 1.414-1.415a.75.75 0 0 1 1.061 1.061l-1.414 1.414 1.414 1.415a.75.75 0 0 1-1.06 1.06l-1.415-1.414z\"/></svg>";
-
 /**
- * The link actions view class. This view displays the link preview, allows
- * unlinking or editing the link.
- */ class LinkActionsView extends View {
+ * The link provider items view.
+ */ class LinkProviderItemsView extends View {
     /**
-	 * Tracks information about DOM focus in the actions.
+	 * Tracks information about DOM focus in the form.
 	 */ focusTracker = new FocusTracker();
     /**
 	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 	 */ keystrokes = new KeystrokeHandler();
     /**
-	 * The href preview view.
-	 */ previewButtonView;
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
+    /**
+	 * The List view of links buttons.
+	 */ listView;
+    /**
+	 * The collection of child views, which is bind with the `listView`.
+	 */ listChildren;
     /**
-	 * The unlink button view.
-	 */ unlinkButtonView;
+	 * The view displayed when the list is empty.
+	 */ emptyListInformation;
     /**
-	 * The edit link button view.
-	 */ editButtonView;
+	 * A collection of child views.
+	 */ children;
     /**
-	 * A collection of views that can be focused in the view.
+	 * A collection of views that can be focused in the form.
 	 */ _focusables = new ViewCollection();
     /**
-	 * Helps cycling over {@link #_focusables} in the view.
+	 * Helps cycling over {@link #_focusables} in the form.
 	 */ _focusCycler;
-    _linkConfig;
-    _options;
     /**
-	 * @inheritDoc
-	 */ constructor(locale, linkConfig = {}, options){
+	 * Creates an instance of the {@link module:link/ui/linkprovideritemsview~LinkProviderItemsView} class.
+	 *
+	 * Also see {@link #render}.
+	 *
+	 * @param locale The localization services instance.
+	 */ constructor(locale){
         super(locale);
-        const t = locale.t;
-        this._options = options;
-        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._linkConfig = linkConfig;
+        this.listChildren = this.createCollection();
+        this.backButtonView = this._createBackButton();
+        this.listView = this._createListView();
+        this.emptyListInformation = this._createEmptyLinksListItemView();
+        this.children = this.createCollection([
+            this._createHeaderView(),
+            this.emptyListInformation
+        ]);
+        this.set('title', '');
+        this.set('emptyListPlaceholder', '');
+        this.set('hasItems', false);
+        this.listenTo(this.listChildren, 'change', ()=>{
+            this.hasItems = this.listChildren.length > 0;
+        });
+        this.on('change:hasItems', (evt, propName, hasItems)=>{
+            if (hasItems) {
+                this.children.remove(this.emptyListInformation);
+                this.children.add(this.listView);
+            } else {
+                this.children.remove(this.listView);
+                this.children.add(this.emptyListInformation);
+            }
+        });
+        // Close the panel on esc key press when the **form has focus**.
+        this.keystrokes.set('Esc', (data, cancel)=>{
+            this.fire('cancel');
+            cancel();
+        });
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
             keystrokeHandler: this.keystrokes,
             actions: {
-                // Navigate fields backwards using the Shift + Tab keystroke.
+                // Navigate form fields backwards using the Shift + Tab keystroke.
                 focusPrevious: 'shift + tab',
-                // Navigate fields forwards using the Tab key.
+                // Navigate form fields forwards using the Tab key.
                 focusNext: 'tab'
             }
         });
@@ -1269,17 +1453,12 @@ var unlinkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\
             attributes: {
                 class: [
                     'ck',
-                    'ck-link-actions',
-                    'ck-responsive-form'
+                    'ck-link-providers'
                 ],
                 // https://github.com/ckeditor/ckeditor5-link/issues/90
                 tabindex: '-1'
             },
-            children: [
-                this.previewButtonView,
-                this.editButtonView,
-                this.unlinkButtonView
-            ]
+            children: this.children
         });
     }
     /**
@@ -1287,9 +1466,8 @@ var unlinkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\
 	 */ render() {
         super.render();
         const childViews = [
-            this.previewButtonView,
-            this.editButtonView,
-            this.unlinkButtonView
+            this.listView,
+            this.backButtonView
         ];
         childViews.forEach((v)=>{
             // Register the view as focusable.
@@ -1308,75 +1486,257 @@ var unlinkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\
         this.keystrokes.destroy();
     }
     /**
-	 * Focuses the fist {@link #_focusables} in the actions.
+	 * Focuses the fist {@link #_focusables} in the form.
 	 */ 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,
+	 * Creates a view for the list at the bottom.
+	 */ _createListView() {
+        const listView = new ListView(this.locale);
+        listView.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-link-providers__list'
+                ]
+            }
+        });
+        listView.items.bindTo(this.listChildren).using((button)=>{
+            const listItemView = new ListItemView(this.locale);
+            listItemView.children.add(button);
+            return listItemView;
+        });
+        return listView;
+    }
+    /**
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow$1,
             tooltip: true
         });
-        button.delegate('execute').to(this, eventName);
-        return button;
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const header = new FormHeaderView(this.locale);
+        header.bind('label').to(this, 'title');
+        header.children.add(this.backButtonView, 0);
+        return header;
+    }
+    /**
+	 * Creates an info view for an empty list.
+	 */ _createEmptyLinksListItemView() {
+        const view = new View(this.locale);
+        view.setTemplate({
+            tag: 'p',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-link__empty-list-info'
+                ]
+            },
+            children: [
+                {
+                    text: this.bindTemplate.to('emptyListPlaceholder')
+                }
+            ]
+        });
+        return view;
     }
+}
+
+/**
+ * The link properties view controller class.
+ *
+ * See {@link module:link/ui/linkpropertiesview~LinkPropertiesView}.
+ */ class LinkPropertiesView 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;
+    /**
+	 * A collection of child views.
+	 */ children;
+    /**
+	 * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
+	 * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
+	 * configured in the editor.
+	 */ listChildren;
     /**
-	 * Creates a link href preview button.
+	 * 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/linkpropertiesview~LinkPropertiesView} class.
 	 *
-	 * @returns The button view instance.
-	 */ _createPreviewButton() {
-        const button = new ButtonView(this.locale);
-        const bind = this.bindTemplate;
-        const t = this.t;
-        button.set({
-            withText: true
+	 * Also see {@link #render}.
+	 *
+	 * @param locale The localization services instance.
+	 */ constructor(locale){
+        super(locale);
+        this.backButtonView = this._createBackButton();
+        this.listChildren = this.createCollection();
+        this.children = this.createCollection([
+            this._createHeaderView(),
+            this._createListView()
+        ]);
+        this._focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
         });
-        button.extendTemplate({
+        this.setTemplate({
+            tag: 'div',
             attributes: {
                 class: [
                     'ck',
-                    'ck-link-actions__preview'
+                    'ck-link-properties'
                 ],
-                href: bind.to('href', (href)=>href && ensureSafeUrl(href, this._linkConfig.allowedProtocols)),
-                target: '_blank',
-                rel: 'noopener noreferrer'
+                // https://github.com/ckeditor/ckeditor5-link/issues/90
+                tabindex: '-1'
             },
-            on: {
-                click: bind.to((evt)=>{
-                    if (this._options && this._options.isScrollableToTarget(this.href)) {
-                        evt.preventDefault();
-                        this._options.scrollToTarget(this.href);
-                    } else {
-                        openLink(this.href);
-                    }
-                })
-            }
+            children: this.children
+        });
+        // Close the panel on esc key press when the **form has focus**.
+        this.keystrokes.set('Esc', (data, cancel)=>{
+            this.fire('back');
+            cancel();
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        const childViews = [
+            ...this.listChildren,
+            this.backButtonView
+        ];
+        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 form.
+	 */ focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+	 * Creates a back button view.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        // TODO: maybe we should have a dedicated BackButtonView in the UI library.
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow$1,
+            tooltip: true
+        });
+        backButton.delegate('execute').to(this, 'back');
+        return backButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Link properties')
         });
-        button.bind('tooltip').to(this, 'href', (href)=>{
-            if (this._options && this._options.isScrollableToTarget(href)) {
-                return t('Scroll to target');
+        header.children.add(this.backButtonView, 0);
+        return header;
+    }
+    /**
+	 * Creates a form view that displays the {@link #listChildren} collection.
+	 */ _createListView() {
+        const listView = new ListView(this.locale);
+        listView.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-link__list'
+                ]
             }
-            return t('Open link in new tab');
         });
-        button.bind('label').to(this, 'href', (href)=>{
-            return href || t('This link has no URL');
+        listView.items.bindTo(this.listChildren).using((item)=>{
+            const listItemView = new ListItemView(this.locale);
+            listItemView.children.add(item);
+            return listItemView;
         });
-        button.bind('isEnabled').to(this, 'href', (href)=>!!href);
-        button.template.tag = 'a';
-        return button;
+        return listView;
     }
 }
 
-var linkIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z\"/></svg>";
+/**
+ * Represents a view for a dropdown menu button.
+ */ 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;
+    }
+}
 
 const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 /**
@@ -1386,19 +1746,29 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
  * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */ class LinkUI extends Plugin {
     /**
-	 * The actions view displayed inside of the balloon.
-	 */ actionsView = 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
+            ContextualBalloon,
+            LinkEditing
         ];
     }
     /**
@@ -1416,10 +1786,12 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 	 */ 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({
@@ -1473,70 +1845,98 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 	 */ 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.
-	 */ _createActionsView() {
+	 * Creates the ToolbarView instance.
+	 */ _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();
             }
         });
@@ -1553,12 +1953,115 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             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.
-	 */ _createToolbarLinkButton() {
+	 * 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.
+	 */ _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);
@@ -1574,6 +2077,111 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             });
             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.
@@ -1585,14 +2193,21 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         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;
     }
     /**
@@ -1625,8 +2240,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 	 */ _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();
             }
         }, {
@@ -1653,19 +2268,20 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         });
     }
     /**
-	 * 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'
         });
     }
     /**
@@ -1677,20 +2293,22 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         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) {
@@ -1698,23 +2316,71 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         }
         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();
         } else {
             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}.
 	 */ _removeFormView() {
@@ -1722,7 +2388,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             // 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
@@ -1732,7 +2399,7 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         }
     }
     /**
-	 * 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
 	 */ _showUI(forceVisible = false) {
@@ -1744,18 +2411,18 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             // 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');
             }
             this._addFormView();
         } 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();
             } else {
-                this._addActionsView();
+                this._addToolbarView();
             }
             // Be sure panel with link is visible.
             if (forceVisible) {
@@ -1768,21 +2435,29 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
     /**
 	 * Removes the {@link #formView} from the {@link #_balloon}.
 	 *
-	 * See {@link #_addFormView}, {@link #_addActionsView}.
-	 */ _hideUI() {
+	 * See {@link #_addFormView}, {@link #_addToolbarView}.
+	 */ _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();
     }
     /**
@@ -1804,7 +2479,7 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             //   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.
@@ -1825,33 +2500,55 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
         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}.
 	 */ get _isFormInPanel() {
         return !!this.formView && this._balloon.hasView(this.formView);
     }
     /**
-	 * Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
-	 */ get _areActionsInPanel() {
-        return !!this.actionsView && this._balloon.hasView(this.actionsView);
+	 * Returns `true` when {@link #toolbarView} is in the {@link #_balloon}.
+	 */ 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}.
-	 */ get _isUIInPanel() {
-        return this._isFormInPanel || this._areActionsInPanel;
+	 * Returns `true` when {@link #formView} is in the {@link #_balloon} and it is
+	 * currently visible.
+	 */ 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
@@ -1861,28 +2558,31 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 	 * entire link element. Otherwise, it will be attached to the selection.
 	 */ _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);
-        } 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 = ()=>{
+            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)
+                };
+            }
+        }
+        // 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
+            }
         };
     }
     /**
@@ -1917,6 +2617,41 @@ const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
             }
         }
     }
+    /**
+	 * 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.
 	 *
@@ -1999,7 +2734,8 @@ const URL_REG_EXP = new RegExp(// Group 1: Line start or after a space.
 '(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])' + '(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}' + '(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))' + '|' + '(' + // Do not allow `www.foo` - see https://github.com/ckeditor/ckeditor5/issues/8050.
 '((?!www\\.)|(www\\.))' + // Host & domain names.
 '(?![-_])(?:[-_a-z0-9\\u00a1-\\uffff]{1,63}\\.)+' + // TLD identifier name.
-'(?:[a-z\\u00a1-\\uffff]{2,63})' + ')' + ')' + // port number (optional)
+'(?:[a-z\\u00a1-\\uffff]{2,63})' + ')' + '|' + // Allow localhost as a valid hostname
+'localhost' + ')' + // port number (optional)
 '(?::\\d{2,5})?' + // resource path (optional)
 '(?:[/?#]\\S*)?' + ')' + '|' + // b. Short form (either www.example.com or example@example.com)
 '(' + '(www.|(\\S+@))' + // Host & domain names.
@@ -2561,7 +3297,7 @@ function linkIsAlreadySet(range) {
 	 * Creates a `LinkImageUI` button view.
 	 *
 	 * Clicking this button shows a {@link module:link/linkui~LinkUI#_balloon} attached to the selection.
-	 * When an image is already linked, the view shows {@link module:link/linkui~LinkUI#actionsView} or
+	 * When an image is already linked, the view shows {@link module:link/linkui~LinkUI#toolbarView} or
 	 * {@link module:link/linkui~LinkUI#formView} if it is not.
 	 */ _createToolbarLinkImageButton() {
         const editor = this.editor;
@@ -2573,7 +3309,7 @@ function linkIsAlreadySet(range) {
             button.set({
                 isEnabled: true,
                 label: t('Link image'),
-                icon: linkIcon,
+                icon: IconLink,
                 keystroke: LINK_KEYSTROKE,
                 tooltip: true,
                 isToggleable: true
@@ -2584,7 +3320,7 @@ function linkIsAlreadySet(range) {
             // Show the actionsView or formView (both from LinkUI) on button click depending on whether the image is linked already.
             this.listenTo(button, 'execute', ()=>{
                 if (this._isSelectedLinkedImage(editor.model.document.selection)) {
-                    plugin._addActionsView();
+                    plugin._addToolbarView();
                 } else {
                     plugin._showUI(true);
                 }
@@ -2628,5 +3364,5 @@ function linkIsAlreadySet(range) {
     }
 }
 
-export { AutoLink, Link, LinkActionsView, LinkCommand, LinkEditing, LinkFormView, LinkImage, LinkImageEditing, LinkImageUI, LinkUI, UnlinkCommand, addLinkProtocolIfApplicable, ensureSafeUrl, isLinkableElement };
+export { AutoLink, Link, LinkCommand, LinkEditing, LinkFormView, LinkImage, LinkImageEditing, LinkImageUI, LinkUI, UnlinkCommand, addLinkProtocolIfApplicable, ensureSafeUrl, isLinkableElement };
 //# sourceMappingURL=index.js.map