@luscii-healthtech/web-ui 54.6.1 → 54.7.0

package/dist/index.development.js

@@ -5296,7 +5296,7 @@ const MentionList = React.forwardRef(({ items, command }, ref) => {
 MentionList.displayName = "MentionList";
 
 const MAX_RESULTS = 8;
-const createMentionSuggestion = (getTags) => ({
+const createMentionSuggestion = (getTags, getPopupContainer = () => null) => ({
   items: ({ query }) => {
     const normalizedQuery = query.toLowerCase();
     return getTags().filter((tag) => tag.label.toLowerCase().includes(normalizedQuery)).slice(0, MAX_RESULTS);
@@ -5304,7 +5304,10 @@ const createMentionSuggestion = (getTags) => ({
   render: () => {
     let component = null;
     let popup = null;
+    let latestClientRect = null;
+    let mountTarget = document.body;
     const reposition = (clientRect) => {
+      latestClientRect = clientRect;
       if (!popup || !clientRect) {
         return;
       }
@@ -5312,11 +5315,14 @@ const createMentionSuggestion = (getTags) => ({
       if (!rect) {
         return;
       }
-      popup.style.top = `${rect.bottom + 4}px`;
-      popup.style.left = `${rect.left}px`;
+      const originRect = mountTarget.getBoundingClientRect();
+      popup.style.top = `${rect.bottom - originRect.top + 4}px`;
+      popup.style.left = `${rect.left - originRect.left}px`;
     };
+    const handleViewportChange = () => reposition(latestClientRect);
     return {
       onStart: (props) => {
+        var _a, _b;
         component = new react.ReactRenderer(MentionList, {
           props,
           editor: props.editor
@@ -5324,12 +5330,15 @@ const createMentionSuggestion = (getTags) => ({
         if (!props.clientRect) {
           return;
         }
+        mountTarget = (_b = (_a = getPopupContainer()) !== null && _a !== void 0 ? _a : props.editor.view.dom.closest("dialog")) !== null && _b !== void 0 ? _b : document.body;
         popup = document.createElement("div");
-        popup.style.position = "fixed";
+        popup.style.position = "absolute";
         popup.style.zIndex = "1000";
         popup.appendChild(component.element);
-        document.body.appendChild(popup);
+        mountTarget.appendChild(popup);
         reposition(props.clientRect);
+        window.addEventListener("scroll", handleViewportChange, true);
+        window.addEventListener("resize", handleViewportChange);
       },
       onUpdate: (props) => {
         component === null || component === void 0 ? void 0 : component.updateProps(props);
@@ -5340,6 +5349,9 @@ const createMentionSuggestion = (getTags) => ({
         return (_b = (_a = component === null || component === void 0 ? void 0 : component.ref) === null || _a === void 0 ? void 0 : _a.onKeyDown(props)) !== null && _b !== void 0 ? _b : false;
       },
       onExit: () => {
+        window.removeEventListener("scroll", handleViewportChange, true);
+        window.removeEventListener("resize", handleViewportChange);
+        latestClientRect = null;
         popup === null || popup === void 0 ? void 0 : popup.remove();
         popup = null;
         component === null || component === void 0 ? void 0 : component.destroy();
@@ -5356,8 +5368,13 @@ const MentionView = ({ node }) => {
   const char = (_b = node.attrs.mentionSuggestionChar) !== null && _b !== void 0 ? _b : "@";
   const display = `${char}${label}`;
   const tooltipText = id && id !== label ? id : null;
-  const pill = jsxRuntime.jsx("span", { className: "web-ui-mention", children: display });
-  return jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", children: tooltipText ? jsxRuntime.jsx(Tooltip$1.Provider, { children: jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: pill }), jsxRuntime.jsx(Tooltip.Content, { children: jsxRuntime.jsx(Tooltip.Text, { children: tooltipText }) })] }) }) : pill });
+  const [dialogContainer, setDialogContainer] = React.useState(null);
+  const pillRef = React.useCallback((el) => {
+    var _a2;
+    setDialogContainer((_a2 = el === null || el === void 0 ? void 0 : el.closest("dialog")) !== null && _a2 !== void 0 ? _a2 : null);
+  }, []);
+  const pill = jsxRuntime.jsx("span", { ref: pillRef, className: "web-ui-mention", children: display });
+  return jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", children: tooltipText ? jsxRuntime.jsx(Tooltip$1.Provider, { children: jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: pill }), jsxRuntime.jsx(Tooltip.Content, { container: dialogContainer !== null && dialogContainer !== void 0 ? dialogContainer : void 0, children: jsxRuntime.jsx(Tooltip.Text, { children: tooltipText }) })] }) }) : pill });
 };
 
 const TEXT_EDITOR_TRANSLATIONS = {
@@ -5472,12 +5489,13 @@ const TextEditor = (_a) => {
     ["bold", "italic", "underline", "strike"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
-  ], placeholder, tags, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "tags", "onValueChange"]);
+  ], placeholder, tags, popupContainer, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "tags", "popupContainer", "onValueChange"]);
   const rawId = React.useId();
   const toolbarId = `toolbar-${rawId.replace(/:/g, "")}`;
   const defaultValueRef = React.useRef(sanitize(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""));
   const onTextChangeRef = React.useRef(onValueChange);
   const tagsRef = React.useRef(tags !== null && tags !== void 0 ? tags : []);
+  const popupContainerRef = React.useRef(popupContainer);
   const mentionsEnabled = tags !== void 0;
   const [linkTooltip, setLinkTooltip] = React.useState(null);
   const [hasTextSelected, setHasTextSelected] = React.useState(false);
@@ -5486,6 +5504,7 @@ const TextEditor = (_a) => {
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
     tagsRef.current = tags !== null && tags !== void 0 ? tags : [];
+    popupContainerRef.current = popupContainer;
   });
   const editor = react.useEditor({
     extensions: [
@@ -5516,7 +5535,7 @@ const TextEditor = (_a) => {
       ...mentionsEnabled ? [
         MentionWithTooltip.configure({
           HTMLAttributes: { class: "web-ui-mention" },
-          suggestion: createMentionSuggestion(() => tagsRef.current)
+          suggestion: createMentionSuggestion(() => tagsRef.current, () => popupContainerRef.current)
         })
       ] : []
     ],