Skip to content

style: tiptap table #2033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 1 commit into from
Aug 31, 2023
Merged

style: tiptap table #2033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/app/components/tiptap/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}