fix: rich text edit link tooltip clipped

Author: gjulivan

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue where tab `\t` being removed on save.
 
+- We fixed an issue where link tooltip get clipped by the boundaries of rich text.
+
 ## [4.11.0] - 2025-11-06
 
 ### Fixed

packages/pluggableWidgets/rich-text-web/package.json

@@ -45,6 +45,7 @@
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
         "@codemirror/state": "^6.5.2",
+        "@floating-ui/dom": "^1.7.4",
         "@floating-ui/react": "^0.26.27",
         "@melloware/coloris": "^0.25.0",
         "@uiw/codemirror-theme-github": "^4.23.13",

packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTooltip.ts

@@ -4,6 +4,7 @@ import LinkBlot from "quill/formats/link";
 import { BaseTooltip } from "quill/themes/base";
 import { linkConfigType } from "../formats";
 import { ACTION_DISPATCHER } from "../helpers";
+import { computePosition, flip, shift } from "@floating-ui/dom";
 
 export default class MxTooltip extends BaseTooltip {
     static TEMPLATE = [
@@ -56,10 +57,7 @@ export default class MxTooltip extends BaseTooltip {
                     // @ts-expect-error Fix me later
                     this.preview.setAttribute("href", preview);
                     this.show();
-                    const bounds = this.quill.getBounds(this.linkRange);
-                    if (bounds != null) {
-                        this.position(bounds);
-                    }
+                    this.setPosition(link.domNode);
                     return;
                 }
             } else {
@@ -86,6 +84,18 @@ export default class MxTooltip extends BaseTooltip {
         }
     }
 
+    setPosition(domNode: HTMLElement): void {
+        computePosition(domNode, this.root, {
+            placement: "bottom",
+            middleware: [flip(), shift({ padding: 5 })]
+        }).then(({ x, y }) => {
+            Object.assign(this.root.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
+        });
+    }
+
     show(): void {
         super.show();
         this.root.removeAttribute("data-mode");