Skip to content

Commit

Permalink
style: tiptap table (#2033)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaryan610
aaryan610 committed Aug 31, 2023
1 parent 38b7f43 commit af929ab
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 55 deletions.
6 changes: 3 additions & 3 deletions apps/app/components/tiptap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ const Tiptap = (props: ITipTapRichTextEditor) => {

const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
${noBorder ? "" : "border border-custom-border-200"} ${
borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
} ${customClassName}`;
borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
} ${customClassName}`;

if (!editor) return null;
editorRef.current = editor;
Expand All @@ -93,7 +93,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
{editor && <EditorBubbleMenu editor={editor} />}
<div className={`${editorContentCustomClassNames}`}>
<EditorContent editor={editor} />
{editor?.isActive("table") && <TableMenu editor={editor} />}
<TableMenu editor={editor} />
{editor?.isActive("image") && <ImageResizer editor={editor} />}
</div>
</div>
Expand Down
113 changes: 72 additions & 41 deletions apps/app/components/tiptap/table-menu/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { useState, useEffect } from "react";
import { Rows, Columns, ToggleRight } from "lucide-react";
import { cn } from "../utils";
import { Tooltip } from "components/ui";

interface TableMenuItem {
name: string;
command: () => void;
icon: any;
key: string;
name: string;
}

export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
Expand All @@ -17,79 +19,108 @@ export const findTableAncestor = (node: Node | null): HTMLTableElement | null =>

export const TableMenu = ({ editor }: { editor: any }) => {
const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
const isOpen = editor?.isActive("table");

const items: TableMenuItem[] = [
{
name: "Insert Column right",
command: () => editor.chain().focus().addColumnBefore().run(),
icon: Columns,
key: "insert-column-right",
name: "Insert 1 column right",
},
{
name: "Insert Row below",
command: () => editor.chain().focus().addRowAfter().run(),
icon: Rows,
key: "insert-row-below",
name: "Insert 1 row below",
},
{
name: "Delete Column",
command: () => editor.chain().focus().deleteColumn().run(),
icon: Columns,
key: "delete-column",
name: "Delete column",
},
{
name: "Delete Rows",
command: () => editor.chain().focus().deleteRow().run(),
icon: Rows,
key: "delete-row",
name: "Delete row",
},
{
name: "Toggle Header Row",
command: () => editor.chain().focus().toggleHeaderRow().run(),
icon: ToggleRight,
}

key: "toggle-header-row",
name: "Toggle header row",
},
];

useEffect(() => {
if (typeof window !== "undefined") {
const handleWindowClick = () => {
const selection: any = window?.getSelection();
if (selection.rangeCount !== 0) {
const range = selection.getRangeAt(0);
const tableNode = findTableAncestor(range.startContainer);
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 });
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);
window.addEventListener("click", handleWindowClick);

return () => {
window.removeEventListener("click", handleWindowClick);
};
}
}, [tableLocation]);
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-xl"
style={{ bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`, left: `${tableLocation.left}px` }}
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) => (
<button
key={index}
onClick={item.command}
className="p-2 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-primary-100/10 active:bg-custom-background-100"
title={item.name}
>
<item.icon
className={cn("h-5 w-5 text-lg", {
"text-red-600": item.name.includes("Delete"),
})}
/>
</button>
<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>
);
Expand Down
22 changes: 11 additions & 11 deletions apps/app/styles/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
height: 20px;
border-radius: 50%;
border: 3px solid rgba(var(--color-text-200));
border-top-color: rgba(var(--color-text-800));
border-top-color: rgba(var(--color-text-800));
animation: spinning 0.6s linear infinite;
}
}
Expand All @@ -160,16 +160,13 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
border-collapse: collapse;
table-layout: fixed;
margin: 0;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
border: 2px solid rgb(var(--color-border-100));
border: 1px solid rgb(var(--color-border-200));
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.1);

td,
th {
min-width: 1em;
border: 2px solid rgb(var(--color-border-400));
border: 1px solid rgb(var(--color-border-200));
padding: 10px 15px;
vertical-align: top;
box-sizing: border-box;
Expand All @@ -183,8 +180,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {

th {
font-weight: bold;
text-align: left;
background-color: rgb(var(--color-primary-300));
text-align: left;
background-color: rgb(var(--color-primary-100));
}

td:hover {
Expand All @@ -195,7 +192,10 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
z-index: 2;
position: absolute;
content: "";
left: 0; right: 0; top: 0; bottom: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(var(--color-primary-300), 0.1);
pointer-events: none;
}
Expand All @@ -222,8 +222,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
}

.ProseMirror table * p {
padding: 0px 1px;
margin: 6px 2px;
padding: 0px 1px;
margin: 6px 2px;
}

.ProseMirror table * .is-empty::before {
Expand Down
4 changes: 4 additions & 0 deletions apps/app/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,3 +355,7 @@ body {
.bp4-overlay-content {
z-index: 555 !important;
}

.disable-scroll {
overflow: hidden !important;
}

1 comment on commit af929ab

@vercel
Copy link

@vercel vercel bot commented on af929ab Aug 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-plane.vercel.app
plane-dev-git-develop-plane.vercel.app
plane-dev.vercel.app

Please sign in to comment.