[BUGFIX] Prevent CKEditor link splitting on partial selection edit

When editing an existing link and selecting only part of the link
text (e.g., selecting "word" in "multi word link"), changing the link
target would split the link into multiple separate <a> elements.

This change automatically expands the selection to encompass the
entire link when:
- The user clicks the link button in the toolbar while positioned
  inside or partially selecting a link
- The link browser is opened for an existing link

The expandSelectionToFullLink() method detects if the selection
is within a link and uses findAttributeRange() to expand it to
cover the complete link element before any modifications are made.

This prevents unwanted link fragmentation and ensures a consistent
editing experience.

Resolves: #108331
Releases: main, 13.4
Change-Id: Ida981a20db6171e975b057017ef9540f98f98318
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/91897
Tested-by: Garvin Hicking <[email protected]>
Reviewed-by: Garvin Hicking <[email protected]>
Tested-by: core-ci <[email protected]>
Reviewed-by: Andreas Nedbal <[email protected]>
Tested-by: Andreas Nedbal <[email protected]>

Author: Philipp Kitzberger

Build/Sources/TypeScript/rte-ckeditor/plugin/typo3-link.ts

@@ -571,10 +571,14 @@ export class Typo3LinkUI extends Core.Plugin {
   }
 
   private showUI(): void {
-    if (!this.getSelectedLinkElement()) {
+    const selectedLink = this.getSelectedLinkElement();
+    if (!selectedLink) {
       this.showFakeVisualSelection();
       this.openLinkBrowser(this.editor);
     } else {
+      // When clicking inside a link, check if we need to expand selection to full link
+      // This prevents link splitting when editing with partial selection
+      this.expandSelectionToFullLink();
       this.addToolbarView();
       this.balloon.showStack('main');
     }
@@ -736,11 +740,43 @@ export class Typo3LinkUI extends Core.Plugin {
     return position.getAncestors().find((ancestor: any) => LinkUtils.isLinkElement(ancestor));
   }
 
+  /**
+   * Expands the current selection to encompass the entire link element.
+   * This prevents link splitting when editing a link with partial text selection.
+   */
+  private expandSelectionToFullLink(): void {
+    const model = this.editor.model;
+    const selection = model.document.selection;
+
+    // Only expand if we have a link attribute in the selection
+    if (!selection.hasAttribute('linkHref')) {
+      return;
+    }
+
+    const linkHref = selection.getAttribute('linkHref') as string;
+    if (!linkHref) {
+      return;
+    }
+
+    model.change(writer => {
+      const position = selection.getFirstPosition();
+      // Find the full range of the link using the linkHref attribute
+      const linkRange = Typing.findAttributeRange(position, 'linkHref', linkHref, model);
+
+      if (linkRange) {
+        // Expand selection to cover the entire link
+        writer.setSelection(linkRange);
+      }
+    });
+  }
+
   private openLinkBrowser(editor: Core.Editor): void {
     const linkCommand = editor.commands.get('link') as unknown as Typo3LinkCommand;
     let additionalParameters = '';
 
+    // If editing an existing link, expand selection to full link first
     if (linkCommand.value) {
+      this.expandSelectionToFullLink();
       additionalParameters += '&P[curUrl][url]=' + encodeURIComponent(linkCommand.value);
       for (const [attr, value] of Object.entries(linkCommand.attrs)) {
         additionalParameters += '&P[curUrl][' + encodeURIComponent(attr) + ']=' + encodeURIComponent(value);