github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: table menu positioning (#2354)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-04 18:36:14 +05:30 committed by GitHub
parent 7bdca9c73a
commit d0a51d75f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/tiptap/index.tsx
View File

@ -89,7 +89,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
onClick={() => { onClick={() => {
editor?.chain().focus().run(); editor?.chain().focus().run();
}} }}
className={`tiptap-editor-container cursor-text ${editorClassNames}`} className={`tiptap-editor-container relative cursor-text ${editorClassNames}`}
> >
{editor && <EditorBubbleMenu editor={editor} />} {editor && <EditorBubbleMenu editor={editor} />}
<div className={`${editorContentCustomClassNames}`}> <div className={`${editorContentCustomClassNames}`}>

20
web/components/tiptap/table-menu/index.tsx
View File

@ -80,8 +80,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
const range = selection.getRangeAt(0); const range = selection.getRangeAt(0);
const tableNode = findTableAncestor(range.startContainer); const tableNode = findTableAncestor(range.startContainer);
let parent = tableNode?.parentElement;
if (tableNode) { if (tableNode) {
const tableRect = tableNode.getBoundingClientRect(); const tableRect = tableNode.getBoundingClientRect();
const tableCenter = tableRect.left + tableRect.width / 2; const tableCenter = tableRect.left + tableRect.width / 2;
@ -90,18 +88,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
const tableBottom = tableRect.bottom; const tableBottom = tableRect.bottom;
setTableLocation({ bottom: tableBottom, left: menuLeft }); 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 ( return (
<section <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" isOpen ? "block" : "hidden"
}`} }`}
style={{
bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
left: `${tableLocation.left}px`,
}}
> >
{items.map((item, index) => ( {items.map((item, index) => (
<Tooltip key={index} tooltipContent={item.name}> <Tooltip key={index} tooltipContent={item.name}>