From a0814ef49a1773b777370b0f9cbb9f0811b9662d Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 18 Aug 2025 13:45:41 -0700
Subject: [PATCH] add tippyoptions for reference

---
 .../components/callout/callout-menu.tsx       |  8 ++++++
 .../editor/components/drawio/drawio-menu.tsx  |  9 +++++++
 .../components/excalidraw/excalidraw-menu.tsx | 12 +++++++++
 .../editor/components/image/image-menu.tsx    | 18 ++++++++++---
 .../components/table/table-cell-menu.tsx      |  1 +
 .../editor/components/table/table-menu.tsx    | 27 +++++++++++++++++++
 6 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/editor/components/callout/callout-menu.tsx b/apps/client/src/features/editor/components/callout/callout-menu.tsx
index 12683bf4c..d658ecd3d 100644
--- a/apps/client/src/features/editor/components/callout/callout-menu.tsx
+++ b/apps/client/src/features/editor/components/callout/callout-menu.tsx
@@ -82,6 +82,14 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
         // zIndex: 99,
         flip: false,
       }}
+      //tippyOptions={{
+      //         getReferenceClientRect,
+      //         offset: [0, 10],
+      //         placement: "bottom",
+      //         zIndex: 99,
+      //         popperOptions: {
+      //           modifiers: [{ name: "flip", enabled: false }],
+      //         },
       shouldShow={shouldShow}
     >
       <ActionIcon.Group className="actionIconGroup">
diff --git a/apps/client/src/features/editor/components/drawio/drawio-menu.tsx b/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
index afa7dd58a..14b06ed5f 100644
--- a/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
@@ -52,6 +52,15 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         // zIndex: 99,
         flip: false,
       }}
+      //    tippyOptions={{
+      //         getReferenceClientRect,
+      //         offset: [0, 8],
+      //         zIndex: 99,
+      //         popperOptions: {
+      //           modifiers: [{ name: 'flip', enabled: false }],
+      //         },
+      //         plugins: [sticky],
+      //         sticky: 'popper',
       shouldShow={shouldShow}
     >
       <div
diff --git a/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx b/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
index 0e82e86d6..1717f223b 100644
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
@@ -52,8 +52,20 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         placement: "bottom",
         offset: 8,
         // zIndex: 99,
+        // plugins: [sticky],
+        // sticky: 'popper',
         flip: false,
       }}
+      //  tippyOptions={{
+      //         getReferenceClientRect,
+      //         offset: [0, 8],
+      //         zIndex: 99,
+      //         popperOptions: {
+      //           modifiers: [{ name: 'flip', enabled: false }],
+      //         },
+      //         plugins: [sticky],
+      //         sticky: 'popper',
+      //       }}
       shouldShow={shouldShow}
     >
       <div
diff --git a/apps/client/src/features/editor/components/image/image-menu.tsx b/apps/client/src/features/editor/components/image/image-menu.tsx
index a75c109c8..6795037cb 100644
--- a/apps/client/src/features/editor/components/image/image-menu.tsx
+++ b/apps/client/src/features/editor/components/image/image-menu.tsx
@@ -17,16 +17,16 @@ import { useTranslation } from "react-i18next";
 
 export function ImageMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
-  
+
   const editorState = useEditorState({
     editor,
     selector: ctx => {
       if (!ctx.editor) {
         return null;
       }
-      
+
       const imageAttrs = ctx.editor.getAttributes("image");
-      
+
       return {
         isImage: ctx.editor.isActive("image"),
         isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
@@ -36,7 +36,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       };
     },
   });
-  
+
   const shouldShow = useCallback(
     ({ state }: ShouldShowProps) => {
       if (!state) {
@@ -108,6 +108,16 @@ export function ImageMenu({ editor }: EditorMenuProps) {
         //zIndex: 99,
         flip: false,
       }}
+      //    tippyOptions={{
+      //         getReferenceClientRect,
+      //         offset: [0, 8],
+      //         zIndex: 99,
+      //         popperOptions: {
+      //           modifiers: [{ name: "flip", enabled: false }],
+      //         },
+      //         plugins: [sticky],
+      //         sticky: "popper",
+      //       }}
       shouldShow={shouldShow}
     >
       <ActionIcon.Group className="actionIconGroup">
diff --git a/apps/client/src/features/editor/components/table/table-cell-menu.tsx b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
index 593f76b11..c50ad2b3e 100644
--- a/apps/client/src/features/editor/components/table/table-cell-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
@@ -65,6 +65,7 @@ export const TableCellMenu = React.memo(
           offset: 15,
           //zIndex: 99,
         }}
+
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>
diff --git a/apps/client/src/features/editor/components/table/table-menu.tsx b/apps/client/src/features/editor/components/table/table-menu.tsx
index 317a43ef8..643f67d17 100644
--- a/apps/client/src/features/editor/components/table/table-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-menu.tsx
@@ -95,6 +95,33 @@ export const TableMenu = React.memo(
           offset: 15,
           //zIndex: 99,
         }}
+        //tippyOptions={{
+        //           getReferenceClientRect: getReferenceClientRect,
+        //           offset: [0, 15],
+        //           zIndex: 99,
+        //           popperOptions: {
+        //             modifiers: [
+        //               {
+        //                 name: "preventOverflow",
+        //                 enabled: true,
+        //                 options: {
+        //                   altAxis: true,
+        //                   boundary: "clippingParents",
+        //                   padding: 8,
+        //                 },
+        //               },
+        //               {
+        //                 name: "flip",
+        //                 enabled: true,
+        //                 options: {
+        //                   boundary: editor.options.element,
+        //                   fallbackPlacements: ["top", "bottom"],
+        //                   padding: { top: 35, left: 8, right: 8, bottom: -Infinity },
+        //                 },
+        //               },
+        //             ],
+        //           },
+        //         }}
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>