@ckeditor/ckeditor5-link 43.3.1-alpha.0 → 44.0.0-alpha.0

package/lang/translations/vi.po

@@ -58,3 +58,7 @@ msgstr "Tạo liên kết"
 msgctxt "Keystroke description for assistive technologies: keystroke for moving out of a link."
 msgid "Move out of a link"
 msgstr "Di chuyển ra khỏi một liên kết"
+
+msgctxt "Button scrolling to the link target."
+msgid "Scroll to target"
+msgstr ""

package/lang/translations/zh-cn.po

@@ -58,3 +58,7 @@ msgstr "创建链接"
 msgctxt "Keystroke description for assistive technologies: keystroke for moving out of a link."
 msgid "Move out of a link"
 msgstr "移出链接"
+
+msgctxt "Button scrolling to the link target."
+msgid "Scroll to target"
+msgstr ""

package/lang/translations/zh.po

@@ -58,3 +58,7 @@ msgstr "建立連結"
 msgctxt "Keystroke description for assistive technologies: keystroke for moving out of a link."
 msgid "Move out of a link"
 msgstr "移出連結"
+
+msgctxt "Button scrolling to the link target."
+msgid "Scroll to target"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-link",
-  "version": "43.3.1-alpha.0",
+  "version": "44.0.0-alpha.0",
   "description": "Link feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,14 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-core": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-engine": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-typing": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-ui": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-utils": "43.3.1-alpha.0",
-    "@ckeditor/ckeditor5-widget": "43.3.1-alpha.0",
-    "ckeditor5": "43.3.1-alpha.0",
+    "@ckeditor/ckeditor5-clipboard": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "44.0.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "44.0.0-alpha.0",
+    "ckeditor5": "44.0.0-alpha.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/linkediting.js

@@ -12,7 +12,7 @@ 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 { createLinkElement, ensureSafeUrl, getLocalizedDecorators, normalizeDecorators, addLinkProtocolIfApplicable, createBookmarkCallbacks, openLink } from './utils.js';
 import '../theme/link.css';
 const HIGHLIGHT_CLASS = 'ck-link_selected';
 const DECORATOR_AUTOMATIC = 'automatic';
@@ -193,6 +193,15 @@ export default class LinkEditing extends Plugin {
         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 {
+                openLink(url);
+            }
+        }
         this.listenTo(viewDocument, 'click', (evt, data) => {
             const shouldOpen = env.isMac ? data.domEvent.metaKey : data.domEvent.ctrlKey;
             if (!shouldOpen) {
@@ -211,7 +220,7 @@ export default class LinkEditing extends Plugin {
             }
             evt.stop();
             data.preventDefault();
-            openLink(url);
+            handleLinkOpening(url);
         }, { context: '$capture' });
         // Open link on Alt+Enter.
         this.listenTo(viewDocument, 'keydown', (evt, data) => {
@@ -222,7 +231,7 @@ export default class LinkEditing extends Plugin {
                 return;
             }
             evt.stop();
-            openLink(url);
+            handleLinkOpening(url);
         });
     }
     /**

package/src/linkui.js

@@ -11,7 +11,7 @@ import { ButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisabl
 import { isWidget } from 'ckeditor5/src/widget.js';
 import LinkFormView from './ui/linkformview.js';
 import LinkActionsView from './ui/linkactionsview.js';
-import { addLinkProtocolIfApplicable, isLinkElement, LINK_KEYSTROKE } from './utils.js';
+import { addLinkProtocolIfApplicable, isLinkElement, createBookmarkCallbacks, LINK_KEYSTROKE } from './utils.js';
 import linkIcon from '../theme/icons/link.svg';
 const VISUAL_SELECTION_MARKER_NAME = 'link-ui';
 /**
@@ -124,7 +124,7 @@ export default class LinkUI extends Plugin {
      */
     _createActionsView() {
         const editor = this.editor;
-        const actionsView = new LinkActionsView(editor.locale, editor.config.get('link'));
+        const actionsView = new LinkActionsView(editor.locale, editor.config.get('link'), createBookmarkCallbacks(editor));
         const linkCommand = editor.commands.get('link');
         const unlinkCommand = editor.commands.get('unlink');
         actionsView.bind('href').to(linkCommand, 'value');

package/src/ui/linkactionsview.d.ts

@@ -50,11 +50,12 @@ export default class LinkActionsView extends View {
      */
     private readonly _focusCycler;
     private readonly _linkConfig;
+    private readonly _options?;
     t: LocaleTranslate;
     /**
      * @inheritDoc
      */
-    constructor(locale: Locale, linkConfig?: LinkConfig);
+    constructor(locale: Locale, linkConfig?: LinkConfig, options?: LinkActionsViewOptions);
     /**
      * @inheritDoc
      */
@@ -101,3 +102,16 @@ 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

@@ -8,7 +8,7 @@
 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 } from '../utils.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';
@@ -22,7 +22,7 @@ export default class LinkActionsView extends View {
     /**
      * @inheritDoc
      */
-    constructor(locale, linkConfig = {}) {
+    constructor(locale, linkConfig = {}, options) {
         super(locale);
         /**
          * Tracks information about DOM focus in the actions.
@@ -37,6 +37,7 @@ export default class LinkActionsView extends 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');
@@ -132,8 +133,7 @@ export default class LinkActionsView extends View {
         const bind = this.bindTemplate;
         const t = this.t;
         button.set({
-            withText: true,
-            tooltip: t('Open link in new tab')
+            withText: true
         });
         button.extendTemplate({
             attributes: {
@@ -144,14 +144,30 @@ export default class LinkActionsView extends View {
                 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';
-        button.template.eventListeners = {};
         return button;
     }
 }

package/src/utils.d.ts

@@ -6,8 +6,10 @@
  * @module link/utils
  */
 import type { DowncastConversionApi, Element, Schema, ViewAttributeElement, ViewNode, ViewDocumentFragment } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.js';
 import type { LocaleTranslate } from 'ckeditor5/src/utils.js';
 import type { LinkDecoratorAutomaticDefinition, LinkDecoratorDefinition, LinkDecoratorManualDefinition } from './linkconfig.js';
+import type { LinkActionsViewOptions } from './ui/linkactionsview.js';
 /**
  * A keystroke used by the {@link module:link/linkui~LinkUI link UI feature}.
  */
@@ -71,6 +73,10 @@ export declare function linkHasProtocol(link: string): boolean;
  * Opens the link in a new browser tab.
  */
 export declare function openLink(link: string): void;
+/**
+ * Creates the bookmark callbacks for handling link opening experience.
+ */
+export declare function createBookmarkCallbacks(editor: Editor): LinkActionsViewOptions;
 export type NormalizedLinkDecoratorAutomaticDefinition = LinkDecoratorAutomaticDefinition & {
     id: string;
 };

package/src/utils.js

@@ -133,3 +133,38 @@ export function linkHasProtocol(link) {
 export function openLink(link) {
     window.open(link, '_blank', 'noopener');
 }
+/**
+ * Creates the bookmark callbacks for handling link opening experience.
+ */
+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
+        });
+    }
+    return {
+        isScrollableToTarget,
+        scrollToTarget
+    };
+}