add tippyoptions for reference

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">

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

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

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">

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>

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>