@ckeditor/ckeditor5-link 0.0.0-internal-20241017.0

package/src/linkconfig.d.ts

@@ -0,0 +1,290 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/linkconfig
+ */
+import type { ArrayOrItem } from 'ckeditor5/src/utils.js';
+/**
+ * The configuration of the {@link module:link/link~Link link feature}.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		link:  ... // Link feature configuration.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface LinkConfig {
+    /**
+     * When set, the editor will add the given protocol to the link when the user creates a link without one.
+     * For example, when the user is creating a link and types `ckeditor.com` in the link form input, during link submission
+     * the editor will automatically add the `http://` protocol, so the link will look as follows: `http://ckeditor.com`.
+     *
+     * The feature also provides email address auto-detection. When you submit `hello@example.com`,
+     * the plugin will automatically change it to `mailto:hello@example.com`.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		link: {
+     * 			defaultProtocol: 'http://'
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * **NOTE:** If no configuration is provided, the editor will not auto-fix the links.
+     */
+    defaultProtocol?: string;
+    /**
+     * This is a protocols whitelist that can be used in links, defined as an array of strings.
+     * When not set, the editor will use a default list of allowed protocols.
+     *
+     * **Note:** Use this with caution and at your own risk - adding unsafe protocols like `javascript:`
+     * can result in serious security vulnerabilities!
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		link: {
+     * 			allowedProtocols: [ 'http', 'https', 'ftp', 'tel', 'mailto', 'ssh' ]
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     */
+    allowedProtocols?: Array<string>;
+    /**
+     * When set to `true`, the form will accept an empty value in the URL field, creating a link with an empty `href` (`<a href="">`).
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		link: {
+     * 			allowCreatingEmptyLinks: true
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * **NOTE:** This option only adds form validation. If a link with an empty `href` is loaded into the editor, it will be left as-is.
+     *
+     * @default false
+     */
+    allowCreatingEmptyLinks?: boolean;
+    /**
+     * When set to `true`, the `target="blank"` and `rel="noopener noreferrer"` attributes are automatically added to all external links
+     * in the editor. "External links" are all links in the editor content starting with `http`, `https`, or `//`.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		link: {
+     * 			addTargetToExternalLinks: true
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * Internally, this option activates a predefined {@link module:link/linkconfig~LinkConfig#decorators automatic link decorator}
+     * that extends all external links with the `target` and `rel` attributes.
+     *
+     * **Note**: To control the `target` and `rel` attributes of specific links in the edited content, a dedicated
+     * {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} decorator must be defined in the
+     * {@link module:link/linkconfig~LinkConfig#decorators `config.link.decorators`} array. In such scenario,
+     * the `config.link.addTargetToExternalLinks` option should remain `undefined` or `false` to not interfere with the manual decorator.
+     *
+     * It is possible to add other {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic}
+     * or {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} link decorators when this option is active.
+     *
+     * More information about decorators can be found in the {@link module:link/linkconfig~LinkConfig#decorators decorators configuration}
+     * reference.
+     *
+     * @default false
+     */
+    addTargetToExternalLinks?: boolean;
+    /**
+     * Decorators provide an easy way to configure and manage additional link attributes in the editor content. There are
+     * two types of link decorators:
+     *
+     * * {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition Automatic} &ndash; They match links against pre–defined rules and
+     * manage their attributes based on the results.
+     * * {@link module:link/linkconfig~LinkDecoratorManualDefinition Manual} &ndash; They allow users to control link attributes
+     * individually, using the editor UI.
+     *
+     * Link decorators are defined as objects with key-value pairs, where the key is the name provided for a given decorator and the
+     * value is the decorator definition.
+     *
+     * The name of the decorator also corresponds to the {@glink framework/architecture/editing-engine#text-attributes text
+     * attribute} in the model. For instance, the `isExternal` decorator below is represented as a `linkIsExternal` attribute in the model.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		link: {
+     * 			decorators: {
+     * 				isExternal: {
+     * 					mode: 'automatic',
+     * 					callback: url => url.startsWith( 'http://' ),
+     * 					attributes: {
+     * 						target: '_blank',
+     * 						rel: 'noopener noreferrer'
+     * 					}
+     * 				},
+     * 				isDownloadable: {
+     * 					mode: 'manual',
+     * 					label: 'Downloadable',
+     * 					attributes: {
+     * 						download: 'file.png',
+     * 					}
+     * 				},
+     * 				// ...
+     * 			}
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * To learn more about the configuration syntax, check out the {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic}
+     * and {@link module:link/linkconfig~LinkDecoratorManualDefinition manual} decorator option reference.
+     *
+     * **Warning:** Currently, link decorators work independently of one another and no conflict resolution mechanism exists.
+     * For example, configuring the `target` attribute using both an automatic and a manual decorator at the same time could end up with
+     * quirky results. The same applies if multiple manual or automatic decorators were defined for the same attribute.
+     *
+     * **Note**: Since the `target` attribute management for external links is a common use case, there is a predefined automatic decorator
+     * dedicated for that purpose which can be enabled by turning a single option on. Check out the
+     * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}
+     * configuration description to learn more.
+     *
+     * See also the {@glink features/link#custom-link-attributes-decorators link feature guide} for more information.
+     */
+    decorators?: Record<string, LinkDecoratorDefinition>;
+}
+/**
+ * A link decorator definition. Two types implement this definition:
+ *
+ * * {@link module:link/linkconfig~LinkDecoratorManualDefinition}
+ * * {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition}
+ *
+ * Refer to their document for more information about available options or to the
+ * {@glink features/link#custom-link-attributes-decorators link feature guide} for general information.
+ */
+export type LinkDecoratorDefinition = LinkDecoratorAutomaticDefinition | LinkDecoratorManualDefinition;
+/**
+ * Describes an automatic {@link module:link/linkconfig~LinkConfig#decorators link decorator}. This decorator type matches
+ * all links in the editor content against a function that decides whether the link should receive a pre–defined set of attributes.
+ *
+ * It takes an object with key-value pairs of attributes and a callback function that must return a Boolean value based on the link's
+ * `href` (URL). When the callback returns `true`, attributes are applied to the link.
+ *
+ * For example, to add the `target="_blank"` attribute to all links in the editor starting with `http://`, the
+ * configuration could look like this:
+ *
+ * ```ts
+ * {
+ * 	mode: 'automatic',
+ * 	callback: url => url.startsWith( 'http://' ),
+ * 	attributes: {
+ * 		target: '_blank'
+ * 	}
+ * }
+ * ```
+ *
+ * **Note**: Since the `target` attribute management for external links is a common use case, there is a predefined automatic decorator
+ * dedicated for that purpose that can be enabled by turning a single option on. Check out the
+ * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}
+ * configuration description to learn more.
+ */
+export interface LinkDecoratorAutomaticDefinition {
+    /**
+     * Link decorator type. It is `'automatic'` for all automatic decorators.
+     */
+    mode: 'automatic';
+    /**
+     * Takes a `url` as a parameter and returns `true` if the `attributes` should be applied to the link.
+     */
+    callback: (url: string | null) => boolean;
+    /**
+     * Key-value pairs used as link attributes added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    attributes?: Record<string, string>;
+    /**
+     * Key-value pairs used as link styles added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    styles?: Record<string, string>;
+    /**
+     * Class names used as link classes added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    classes?: ArrayOrItem<string>;
+}
+/**
+ * Describes a manual {@link module:link/linkconfig~LinkConfig#decorators link decorator}. This decorator type is represented in
+ * the link feature's {@link module:link/linkui user interface} as a switch that the user can use to control the presence
+ * of a predefined set of attributes.
+ *
+ * For instance, to allow the users to manually control the presence of the `target="_blank"` and
+ * `rel="noopener noreferrer"` attributes on specific links, the decorator could look as follows:
+ *
+ * ```ts
+ * {
+ * 	mode: 'manual',
+ * 	label: 'Open in a new tab',
+ * 	defaultValue: true,
+ * 	attributes: {
+ * 		target: '_blank',
+ * 		rel: 'noopener noreferrer'
+ * 	}
+ * }
+ * ```
+ */
+export interface LinkDecoratorManualDefinition {
+    /**
+     * Link decorator type. It is `'manual'` for all manual decorators.
+     */
+    mode: 'manual';
+    /**
+     * The label of the UI button that the user can use to control the presence of link attributes.
+     */
+    label: string;
+    /**
+     * Key-value pairs used as link attributes added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Attributes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    attributes?: Record<string, string>;
+    /**
+     * Key-value pairs used as link styles added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Styles should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    styles?: Record<string, string>;
+    /**
+     * Class names used as link classes added to the output during the
+     * {@glink framework/architecture/editing-engine#conversion downcasting}.
+     * Classes should follow the {@link module:engine/view/elementdefinition~ElementDefinition} syntax.
+     */
+    classes?: ArrayOrItem<string>;
+    /**
+     * Controls whether the decorator is "on" by default.
+     */
+    defaultValue?: boolean;
+}

package/src/linkconfig.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/linkediting.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/linkediting
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import { Input, TwoStepCaretMovement } from 'ckeditor5/src/typing.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
+import '../theme/link.css';
+/**
+ * The link engine feature.
+ *
+ * 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.
+ */
+export default class LinkEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "LinkEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof TwoStepCaretMovement, typeof Input, typeof ClipboardPipeline];
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Processes an array of configured {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic decorators}
+     * and registers a {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher downcast dispatcher}
+     * for each one of them. Downcast dispatchers are obtained using the
+     * {@link module:link/utils/automaticdecorators~AutomaticDecorators#getDispatcher} method.
+     *
+     * **Note**: This method also activates the automatic external link decorator if enabled with
+     * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}.
+     */
+    private _enableAutomaticDecorators;
+    /**
+     * Processes an array of configured {@link module:link/linkconfig~LinkDecoratorManualDefinition manual decorators},
+     * transforms them into {@link module:link/utils/manualdecorator~ManualDecorator} instances and stores them in the
+     * {@link module:link/linkcommand~LinkCommand#manualDecorators} collection (a model for manual decorators state).
+     *
+     * Also registers an {@link module:engine/conversion/downcasthelpers~DowncastHelpers#attributeToElement attribute-to-element}
+     * converter for each manual decorator and extends the {@link module:engine/model/schema~Schema model's schema}
+     * with adequate model attributes.
+     */
+    private _enableManualDecorators;
+    /**
+     * Attaches handlers for {@link module:engine/view/document~Document#event:enter} and
+     * {@link module:engine/view/document~Document#event:click} to enable link following.
+     */
+    private _enableLinkOpen;
+    /**
+     * Watches the DocumentSelection attribute changes and removes link decorator attributes when the linkHref attribute is removed.
+     *
+     * This is to ensure that there is no left-over link decorator attributes on the document selection that is no longer in a link.
+     */
+    private _enableSelectionAttributesFixer;
+    /**
+     * Enables URL fixing on pasting.
+     */
+    private _enableClipboardIntegration;
+}

package/src/linkediting.js

@@ -0,0 +1,286 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/linkediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Input, TwoStepCaretMovement, inlineHighlight } from 'ckeditor5/src/typing.js';
+import { ClipboardPipeline } from 'ckeditor5/src/clipboard.js';
+import { keyCodes, env } from 'ckeditor5/src/utils.js';
+import LinkCommand from './linkcommand.js';
+import UnlinkCommand from './unlinkcommand.js';
+import ManualDecorator from './utils/manualdecorator.js';
+import { createLinkElement, ensureSafeUrl, getLocalizedDecorators, normalizeDecorators, openLink, addLinkProtocolIfApplicable } from './utils.js';
+import '../theme/link.css';
+const HIGHLIGHT_CLASS = 'ck-link_selected';
+const DECORATOR_AUTOMATIC = 'automatic';
+const DECORATOR_MANUAL = 'manual';
+const EXTERNAL_LINKS_REGEXP = /^(https?:)?\/\//;
+/**
+ * The link engine feature.
+ *
+ * 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.
+ */
+export default class LinkEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'LinkEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        // Clipboard is required for handling cut and paste events while typing over the link.
+        return [TwoStepCaretMovement, Input, ClipboardPipeline];
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('link', {
+            allowCreatingEmptyLinks: false,
+            addTargetToExternalLinks: false
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const allowedProtocols = this.editor.config.get('link.allowedProtocols');
+        // Allow link attribute on all inline nodes.
+        editor.model.schema.extend('$text', { allowAttributes: 'linkHref' });
+        editor.conversion.for('dataDowncast')
+            .attributeToElement({ model: 'linkHref', view: createLinkElement });
+        editor.conversion.for('editingDowncast')
+            .attributeToElement({ model: 'linkHref', view: (href, conversionApi) => {
+                return createLinkElement(ensureSafeUrl(href, allowedProtocols), conversionApi);
+            } });
+        editor.conversion.for('upcast')
+            .elementToAttribute({
+            view: {
+                name: 'a',
+                attributes: {
+                    href: true
+                }
+            },
+            model: {
+                key: 'linkHref',
+                value: (viewElement) => viewElement.getAttribute('href')
+            }
+        });
+        // Create linking commands.
+        editor.commands.add('link', new LinkCommand(editor));
+        editor.commands.add('unlink', new UnlinkCommand(editor));
+        const linkDecorators = getLocalizedDecorators(editor.t, normalizeDecorators(editor.config.get('link.decorators')));
+        this._enableAutomaticDecorators(linkDecorators
+            .filter((item) => item.mode === DECORATOR_AUTOMATIC));
+        this._enableManualDecorators(linkDecorators
+            .filter((item) => item.mode === DECORATOR_MANUAL));
+        // Enable two-step caret movement for `linkHref` attribute.
+        const twoStepCaretMovementPlugin = editor.plugins.get(TwoStepCaretMovement);
+        twoStepCaretMovementPlugin.registerAttribute('linkHref');
+        // Setup highlight over selected link.
+        inlineHighlight(editor, 'linkHref', 'a', HIGHLIGHT_CLASS);
+        // Handle link following by CTRL+click or ALT+ENTER
+        this._enableLinkOpen();
+        // Clears the DocumentSelection decorator attributes if the selection is no longer in a link (for example while using 2-SCM).
+        this._enableSelectionAttributesFixer();
+        // Handle adding default protocol to pasted links.
+        this._enableClipboardIntegration();
+    }
+    /**
+     * Processes an array of configured {@link module:link/linkconfig~LinkDecoratorAutomaticDefinition automatic decorators}
+     * and registers a {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher downcast dispatcher}
+     * for each one of them. Downcast dispatchers are obtained using the
+     * {@link module:link/utils/automaticdecorators~AutomaticDecorators#getDispatcher} method.
+     *
+     * **Note**: This method also activates the automatic external link decorator if enabled with
+     * {@link module:link/linkconfig~LinkConfig#addTargetToExternalLinks `config.link.addTargetToExternalLinks`}.
+     */
+    _enableAutomaticDecorators(automaticDecoratorDefinitions) {
+        const editor = this.editor;
+        // Store automatic decorators in the command instance as we do the same with manual decorators.
+        // Thanks to that, `LinkImageEditing` plugin can re-use the same definitions.
+        const command = editor.commands.get('link');
+        const automaticDecorators = command.automaticDecorators;
+        // Adds a default decorator for external links.
+        if (editor.config.get('link.addTargetToExternalLinks')) {
+            automaticDecorators.add({
+                id: 'linkIsExternal',
+                mode: DECORATOR_AUTOMATIC,
+                callback: url => !!url && EXTERNAL_LINKS_REGEXP.test(url),
+                attributes: {
+                    target: '_blank',
+                    rel: 'noopener noreferrer'
+                }
+            });
+        }
+        automaticDecorators.add(automaticDecoratorDefinitions);
+        if (automaticDecorators.length) {
+            editor.conversion.for('downcast').add(automaticDecorators.getDispatcher());
+        }
+    }
+    /**
+     * Processes an array of configured {@link module:link/linkconfig~LinkDecoratorManualDefinition manual decorators},
+     * transforms them into {@link module:link/utils/manualdecorator~ManualDecorator} instances and stores them in the
+     * {@link module:link/linkcommand~LinkCommand#manualDecorators} collection (a model for manual decorators state).
+     *
+     * Also registers an {@link module:engine/conversion/downcasthelpers~DowncastHelpers#attributeToElement attribute-to-element}
+     * converter for each manual decorator and extends the {@link module:engine/model/schema~Schema model's schema}
+     * with adequate model attributes.
+     */
+    _enableManualDecorators(manualDecoratorDefinitions) {
+        if (!manualDecoratorDefinitions.length) {
+            return;
+        }
+        const editor = this.editor;
+        const command = editor.commands.get('link');
+        const manualDecorators = command.manualDecorators;
+        manualDecoratorDefinitions.forEach(decoratorDefinition => {
+            editor.model.schema.extend('$text', { allowAttributes: decoratorDefinition.id });
+            // Keeps reference to manual decorator to decode its name to attributes during downcast.
+            const decorator = new ManualDecorator(decoratorDefinition);
+            manualDecorators.add(decorator);
+            editor.conversion.for('downcast').attributeToElement({
+                model: decorator.id,
+                view: (manualDecoratorValue, { writer, schema }, { item }) => {
+                    // Manual decorators for block links are handled e.g. in LinkImageEditing.
+                    if (!(item.is('selection') || schema.isInline(item))) {
+                        return;
+                    }
+                    if (manualDecoratorValue) {
+                        const element = writer.createAttributeElement('a', decorator.attributes, { priority: 5 });
+                        if (decorator.classes) {
+                            writer.addClass(decorator.classes, element);
+                        }
+                        for (const key in decorator.styles) {
+                            writer.setStyle(key, decorator.styles[key], element);
+                        }
+                        writer.setCustomProperty('link', true, element);
+                        return element;
+                    }
+                }
+            });
+            editor.conversion.for('upcast').elementToAttribute({
+                view: {
+                    name: 'a',
+                    ...decorator._createPattern()
+                },
+                model: {
+                    key: decorator.id
+                }
+            });
+        });
+    }
+    /**
+     * Attaches handlers for {@link module:engine/view/document~Document#event:enter} and
+     * {@link module:engine/view/document~Document#event:click} to enable link following.
+     */
+    _enableLinkOpen() {
+        const editor = this.editor;
+        const view = editor.editing.view;
+        const viewDocument = view.document;
+        this.listenTo(viewDocument, 'click', (evt, data) => {
+            const shouldOpen = env.isMac ? data.domEvent.metaKey : data.domEvent.ctrlKey;
+            if (!shouldOpen) {
+                return;
+            }
+            let clickedElement = data.domTarget;
+            if (clickedElement.tagName.toLowerCase() != 'a') {
+                clickedElement = clickedElement.closest('a');
+            }
+            if (!clickedElement) {
+                return;
+            }
+            const url = clickedElement.getAttribute('href');
+            if (!url) {
+                return;
+            }
+            evt.stop();
+            data.preventDefault();
+            openLink(url);
+        }, { context: '$capture' });
+        // Open link on Alt+Enter.
+        this.listenTo(viewDocument, 'keydown', (evt, data) => {
+            const linkCommand = editor.commands.get('link');
+            const url = linkCommand.value;
+            const shouldOpen = !!url && data.keyCode === keyCodes.enter && data.altKey;
+            if (!shouldOpen) {
+                return;
+            }
+            evt.stop();
+            openLink(url);
+        });
+    }
+    /**
+     * Watches the DocumentSelection attribute changes and removes link decorator attributes when the linkHref attribute is removed.
+     *
+     * This is to ensure that there is no left-over link decorator attributes on the document selection that is no longer in a link.
+     */
+    _enableSelectionAttributesFixer() {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        this.listenTo(selection, 'change:attribute', (evt, { attributeKeys }) => {
+            if (!attributeKeys.includes('linkHref') || selection.hasAttribute('linkHref')) {
+                return;
+            }
+            model.change(writer => {
+                removeLinkAttributesFromSelection(writer, getLinkAttributesAllowedOnText(model.schema));
+            });
+        });
+    }
+    /**
+     * Enables URL fixing on pasting.
+     */
+    _enableClipboardIntegration() {
+        const editor = this.editor;
+        const model = editor.model;
+        const defaultProtocol = this.editor.config.get('link.defaultProtocol');
+        if (!defaultProtocol) {
+            return;
+        }
+        this.listenTo(editor.plugins.get('ClipboardPipeline'), 'contentInsertion', (evt, data) => {
+            model.change(writer => {
+                const range = writer.createRangeIn(data.content);
+                for (const item of range.getItems()) {
+                    if (item.hasAttribute('linkHref')) {
+                        const newLink = addLinkProtocolIfApplicable(item.getAttribute('linkHref'), defaultProtocol);
+                        writer.setAttribute('linkHref', newLink, item);
+                    }
+                }
+            });
+        });
+    }
+}
+/**
+ * Make the selection free of link-related model attributes.
+ * All link-related model attributes start with "link". That includes not only "linkHref"
+ * but also all decorator attributes (they have dynamic names), or even custom plugins.
+ */
+function removeLinkAttributesFromSelection(writer, linkAttributes) {
+    writer.removeSelectionAttribute('linkHref');
+    for (const attribute of linkAttributes) {
+        writer.removeSelectionAttribute(attribute);
+    }
+}
+/**
+ * Returns an array containing names of the attributes allowed on `$text` that describes the link item.
+ */
+function getLinkAttributesAllowedOnText(schema) {
+    const textAttributes = schema.getDefinition('$text').allowAttributes;
+    return textAttributes.filter(attribute => attribute.startsWith('link'));
+}

package/src/linkimage.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module link/linkimage
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import LinkImageEditing from './linkimageediting.js';
+import LinkImageUI from './linkimageui.js';
+import '../theme/linkimage.css';
+/**
+ * The `LinkImage` plugin.
+ *
+ * This is a "glue" plugin that loads the {@link module:link/linkimageediting~LinkImageEditing link image editing feature}
+ * and {@link module:link/linkimageui~LinkImageUI link image UI feature}.
+ */
+export default class LinkImage extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof LinkImageEditing, typeof LinkImageUI];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "LinkImage";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}