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

package/src/utils.js

@@ -2,7 +2,7 @@
  * @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 { upperFirst } from 'lodash-es';
+import { upperFirst } from 'es-toolkit/compat';
 const ATTRIBUTE_WHITESPACES = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g; // eslint-disable-line no-control-regex
 const SAFE_URL_TEMPLATE = '^(?:(?:<protocols>):|[^a-z]|[a-z+.-]+(?:[^a-z+.:-]|$))';
 // Simplified email test - should be run over previously found URL.
@@ -134,37 +134,17 @@ export function openLink(link) {
     window.open(link, '_blank', 'noopener');
 }
 /**
- * Creates the bookmark callbacks for handling link opening experience.
+ * Returns a text of a link range.
+ *
+ * If the returned value is `undefined`, the range contains elements other than text nodes.
  */
-export 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
-        });
+export 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;
 }

package/theme/linkform.css

@@ -5,42 +5,20 @@
 
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 
+/* Generic class that wraps each link balloon view. */
 .ck.ck-link-form {
-	display: flex;
-	align-items: flex-start;
-
-	& .ck-label {
-		display: none;
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			flex-basis: 50%;
+	& .ck-link-form__providers-list {
+		display: flex;
+		flex-direction: column;
+
+		& .ck-link__button {
+			& > .ck-button__label {
+				flex-grow: 1;
+			}
 		}
 	}
-}
-
-/*
- * Style link form differently when manual decorators are available.
- * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
- */
-.ck.ck-link-form_layout-vertical {
-	display: block;
 
-	/*
-	 * Whether the form is in the responsive mode or not, if there are decorator buttons
-	 * keep the top margin of action buttons medium.
-	 */
-	& .ck-button {
-		&.ck-button-save,
-		&.ck-button-cancel {
-			margin-top: var(--ck-spacing-medium);
-		}
+	& .ck-link__items:empty {
+		display: none;
 	}
 }

package/theme/linkproperties.css

@@ -0,0 +1,4 @@
+/*
+ * 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
+ */

package/theme/linkprovideritems.css

@@ -0,0 +1,18 @@
+/*
+ * 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
+ */
+
+.ck.ck-link-providers {
+	& > .ck-link-providers__list {
+		overflow-x: hidden;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+
+		& .ck-button {
+			& > .ck-icon {
+				flex-shrink: 0;
+			}
+		}
+	}
+}

package/theme/linktoolbar.css

@@ -0,0 +1,12 @@
+/*
+ * 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
+ */
+
+.ck.ck-link-toolbar__preview {
+	display: inline-block;
+
+	& .ck-button__label {
+		overflow: hidden;
+	}
+}

package/src/ui/linkactionsview.d.ts

@@ -1,117 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module link/ui/linkactionsview
- */
-import { ButtonView, View } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler, type LocaleTranslate, type Locale } from 'ckeditor5/src/utils.js';
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/linkactions.css';
-import type { LinkConfig } from '../linkconfig.js';
-/**
- * The link actions view class. This view displays the link preview, allows
- * unlinking or editing the link.
- */
-export default class LinkActionsView extends View {
-    /**
-     * Tracks information about DOM focus in the actions.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The href preview view.
-     */
-    previewButtonView: ButtonView;
-    /**
-     * The unlink button view.
-     */
-    unlinkButtonView: ButtonView;
-    /**
-     * The edit link button view.
-     */
-    editButtonView: ButtonView;
-    /**
-     * The value of the "href" attribute of the link to use in the {@link #previewButtonView}.
-     *
-     * @observable
-     */
-    href: string | undefined;
-    /**
-     * A collection of views that can be focused in the view.
-     */
-    private readonly _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the view.
-     */
-    private readonly _focusCycler;
-    private readonly _linkConfig;
-    private readonly _options?;
-    t: LocaleTranslate;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale: Locale, linkConfig?: LinkConfig, options?: LinkActionsViewOptions);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist {@link #_focusables} in the actions.
-     */
-    focus(): void;
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @returns The button view instance.
-     */
-    private _createButton;
-    /**
-     * Creates a link href preview button.
-     *
-     * @returns The button view instance.
-     */
-    private _createPreviewButton;
-}
-/**
- * Fired when the {@link ~LinkActionsView#editButtonView} is clicked.
- *
- * @eventName ~LinkActionsView#edit
- */
-export type EditEvent = {
-    name: 'edit';
-    args: [];
-};
-/**
- * Fired when the {@link ~LinkActionsView#unlinkButtonView} is clicked.
- *
- * @eventName ~LinkActionsView#unlink
- */
-export type UnlinkEvent = {
-    name: 'unlink';
-    args: [];
-};
-/**
- * The options that are passed to the {@link ~LinkActionsView#constructor} constructor.
- */
-export type LinkActionsViewOptions = {
-    /**
-     * Returns `true` when bookmark `id` matches the hash from `link`.
-     */
-    isScrollableToTarget: (href: string | undefined) => boolean;
-    /**
-     * Scrolls the view to the desired bookmark or open a link in new window.
-     */
-    scrollToTarget: (href: string) => void;
-};

package/src/ui/linkactionsview.js

@@ -1,173 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module link/ui/linkactionsview
- */
-import { ButtonView, View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
-import { ensureSafeUrl, openLink } from '../utils.js';
-// See: #8833.
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/linkactions.css';
-import unlinkIcon from '../../theme/icons/unlink.svg';
-/**
- * The link actions view class. This view displays the link preview, allows
- * unlinking or editing the link.
- */
-export default class LinkActionsView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, linkConfig = {}, options) {
-        super(locale);
-        /**
-         * Tracks information about DOM focus in the actions.
-         */
-        this.focusTracker = new FocusTracker();
-        /**
-         * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-         */
-        this.keystrokes = new KeystrokeHandler();
-        /**
-         * A collection of views that can be focused in the view.
-         */
-        this._focusables = new ViewCollection();
-        const t = locale.t;
-        this._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._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-link-actions',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: [
-                this.previewButtonView,
-                this.editButtonView,
-                this.unlinkButtonView
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const childViews = [
-            this.previewButtonView,
-            this.editButtonView,
-            this.unlinkButtonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the fist {@link #_focusables} in the actions.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @returns The button view instance.
-     */
-    _createButton(label, icon, eventName) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
-        });
-        button.delegate('execute').to(this, eventName);
-        return button;
-    }
-    /**
-     * Creates a link href preview button.
-     *
-     * @returns The button view instance.
-     */
-    _createPreviewButton() {
-        const button = new ButtonView(this.locale);
-        const bind = this.bindTemplate;
-        const t = this.t;
-        button.set({
-            withText: true
-        });
-        button.extendTemplate({
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-link-actions__preview'
-                ],
-                href: bind.to('href', href => href && ensureSafeUrl(href, this._linkConfig.allowedProtocols)),
-                target: '_blank',
-                rel: 'noopener noreferrer'
-            },
-            on: {
-                click: bind.to(evt => {
-                    if (this._options && this._options.isScrollableToTarget(this.href)) {
-                        evt.preventDefault();
-                        this._options.scrollToTarget(this.href);
-                    }
-                    else {
-                        openLink(this.href);
-                    }
-                })
-            }
-        });
-        button.bind('tooltip').to(this, 'href', href => {
-            if (this._options && this._options.isScrollableToTarget(href)) {
-                return t('Scroll to target');
-            }
-            return t('Open link in new tab');
-        });
-        button.bind('label').to(this, 'href', href => {
-            return href || t('This link has no URL');
-        });
-        button.bind('isEnabled').to(this, 'href', href => !!href);
-        button.template.tag = 'a';
-        return button;
-    }
-}

package/theme/icons/link.svg

@@ -1 +0,0 @@
-<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>

package/theme/icons/unlink.svg

@@ -1 +0,0 @@
-<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>

package/theme/linkactions.css

@@ -1,32 +0,0 @@
-/*
- * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck.ck-link-actions {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-
-	& .ck-link-actions__preview {
-		display: inline-block;
-
-		& .ck-button__label {
-			overflow: hidden;
-		}
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-link-actions__preview {
-			flex-basis: 100%;
-		}
-
-		& .ck-button:not(.ck-link-actions__preview) {
-			flex-basis: 50%;
-		}
-	}
-}