plane/apps/app/components/tiptap/table-menu/index.tsx

128 lines
3.7 KiB
TypeScript
Raw Normal View History

style: plane deploy (#2039) * chore: improve access field for comments for public boards (#1956) Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> * chore: update user activity endpoint to return only workspace activities (#1980) * fix: n+1 in issue history and issue automation tasks (#1994) * fix: issue exports in self hosted instances (#1996) * fix: issue exports in self hosted instances * dev: remove print logs * dev: update url creation function * fix: changed the presigned url for self hosted exports --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> * dev: remove gunicorn config (#1999) * feat: mark all read notifications (#1963) * feat: mark all read notifications * fix: changed string to boolean * fix: changed snoozed condition * chore: project public board issue retrieve (#2003) * chore: project public board issue retrieve * dev: project issues list endpoint * fix: issue public retrieve endpoint * fix: only external comments will show in deploy boards (#2010) * fix: issue votes (#2006) * fix: issue votes * fix: added default as 1 in vote * fix: issue vote migration file * fix: access creation in comments (#2013) * dev: user timezone select option (#2002) * fix: start date filter not working on the platform (#2007) * feat: access selector for comment (#2012) * dev: access specifier for comment * chore: change access order * style: revamp of the issue details sidebar (#2014) * chore: update module status icons and colors (#2011) * chore: update module status icons and colors * refactor: import statements * fix: add default alue to module status * chore: track public board comments and reaction users for public deploy boards (#1972) * chore: track project deploy board comment and reaction users for public deploy boards * dev: remove tracking from project viewsets * feat: user timezones (#2009) * dev: user timezones * feat: user timezones * fix: user created by stats (#2016) * fix: asset key validation (#1938) * fix: asset key validation * chore: asset key validation in user assets --------- Co-authored-by: Bavisetti Narayan <narayan@Bavisettis-MacBook-Pro.local> * dev: revamp peek overview (#2021) * dev: mobx for issues store * refactor: peek overview component * chore: update open issue button * fix: issue mutation after any crud action * chore: remove peek overview from gantt * chore: refactor code * chore: tracking the history of issue reactions and votes. (#2020) * chore: tracking the issues reaction and vote history * fix: changed the keywords for vote and reaction * chore: added validation * dev: revamp publish project modal (#2022) * dev: revamp publish project modal * chore: sidebar dropdown text * fix: bugs on the user profile page (#2018) * chore: return issue votes in public issue list endpoint (#2026) * style: list view * [feat]: Tiptap table integration (#2008) * added basic table support * fixed table position at bottom * fixed image node deletion logic's regression issue * added compatible styles * enabled slash commands * disabled slash command and bubble menu's node selector for table cells * added dropcursor support to type below the table/image * blocked image uploads for handledrop and paste actions * style: kanban view * style: tiptap table (#2033) * style: theming added * chore: issue reactions and votes --------- Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: Bavisetti Narayan <narayan@Bavisettis-MacBook-Pro.local> Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
2023-08-31 17:54:03 +00:00
import { useState, useEffect } from "react";
import { Rows, Columns, ToggleRight } from "lucide-react";
import { cn } from "../utils";
import { Tooltip } from "components/ui";
interface TableMenuItem {
command: () => void;
icon: any;
key: string;
name: string;
}
export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
while (node !== null && node.nodeName !== "TABLE") {
node = node.parentNode;
}
return node as HTMLTableElement;
};
export const TableMenu = ({ editor }: { editor: any }) => {
const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
const isOpen = editor?.isActive("table");
const items: TableMenuItem[] = [
{
command: () => editor.chain().focus().addColumnBefore().run(),
icon: Columns,
key: "insert-column-right",
name: "Insert 1 column right",
},
{
command: () => editor.chain().focus().addRowAfter().run(),
icon: Rows,
key: "insert-row-below",
name: "Insert 1 row below",
},
{
command: () => editor.chain().focus().deleteColumn().run(),
icon: Columns,
key: "delete-column",
name: "Delete column",
},
{
command: () => editor.chain().focus().deleteRow().run(),
icon: Rows,
key: "delete-row",
name: "Delete row",
},
{
command: () => editor.chain().focus().toggleHeaderRow().run(),
icon: ToggleRight,
key: "toggle-header-row",
name: "Toggle header row",
},
];
useEffect(() => {
if (!window) return;
const handleWindowClick = () => {
const selection: any = window?.getSelection();
if (selection.rangeCount !== 0) {
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;
const menuWidth = 45;
const menuLeft = tableCenter - menuWidth / 2;
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");
});
}
}
};
window.addEventListener("click", handleWindowClick);
return () => {
window.removeEventListener("click", handleWindowClick);
};
}, [tableLocation, editor]);
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 ${
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}>
<button
onClick={item.command}
className="p-1.5 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-background-80 active:bg-custom-background-80 rounded"
title={item.name}
>
<item.icon
className={cn("h-4 w-4 text-lg", {
"text-red-600": item.key.includes("delete"),
})}
/>
</button>
</Tooltip>
))}
</section>
);
};