fix: table menu positioning

makeplane · Oct 3, 2023 · be2229c · be2229c
1 parent 0d0cf30
commit be2229c
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 20 deletions.
diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx
@@ -89,7 +89,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
       onClick={() => {
         editor?.chain().focus().run();
       }}
-      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
+      className={`tiptap-editor-container relative cursor-text ${editorClassNames}`}
     >
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>

diff --git a/web/components/tiptap/table-menu/index.tsx b/web/components/tiptap/table-menu/index.tsx
@@ -80,8 +80,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
         const range = selection.getRangeAt(0);
         const tableNode = findTableAncestor(range.startContainer);
 
-        let parent = tableNode?.parentElement;
-
         if (tableNode) {
           const tableRect = tableNode.getBoundingClientRect();
           const tableCenter = tableRect.left + tableRect.width / 2;
@@ -90,18 +88,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
           const tableBottom = tableRect.bottom;
 
           setTableLocation({ bottom: tableBottom, left: menuLeft });
-
-          while (parent) {
-            if (!parent.classList.contains("disable-scroll"))
-              parent.classList.add("disable-scroll");
-            parent = parent.parentElement;
-          }
-        } else {
-          const scrollDisabledContainers = document.querySelectorAll(".disable-scroll");
-
-          scrollDisabledContainers.forEach((container) => {
-            container.classList.remove("disable-scroll");
-          });
         }
       }
     };
@@ -115,13 +101,9 @@ export const TableMenu = ({ editor }: { editor: any }) => {
 
   return (
     <section
-      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
+      className={`absolute z-20 left-1/2 -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
         isOpen ? "block" : "hidden"
       }`}
-      style={{
-        bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
-        left: `${tableLocation.left}px`,
-      }}
     >
       {items.map((item, index) => (
         <Tooltip key={index} tooltipContent={item.name}>