thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: tiptap table (#2033)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-08-31 16:30:28 +05:30 committed by GitHub
parent 38b7f4382f
commit af929ab741
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 90 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app/components/tiptap/index.tsx
View File

@ -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 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"} ${ ${noBorder ? "" : "border border-custom-border-200"} ${
borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0" borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
} ${customClassName}`; } ${customClassName}`;
if (!editor) return null; if (!editor) return null;
editorRef.current = editor; editorRef.current = editor;
@ -93,7 +93,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
{editor && <EditorBubbleMenu editor={editor} />} {editor && <EditorBubbleMenu editor={editor} />}
<div className={`${editorContentCustomClassNames}`}> <div className={`${editorContentCustomClassNames}`}>
<EditorContent editor={editor} /> <EditorContent editor={editor} />
{editor?.isActive("table") && <TableMenu editor={editor} />} <TableMenu editor={editor} />
{editor?.isActive("image") && <ImageResizer editor={editor} />} {editor?.isActive("image") && <ImageResizer editor={editor} />}
</div> </div>
</div> </div>

113
apps/app/components/tiptap/table-menu/index.tsx
View File

@ -1,11 +1,13 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Rows, Columns, ToggleRight } from "lucide-react"; import { Rows, Columns, ToggleRight } from "lucide-react";
import { cn } from "../utils"; import { cn } from "../utils";
import { Tooltip } from "components/ui";
interface TableMenuItem { interface TableMenuItem {
name: string;
command: () => void; command: () => void;
icon: any; icon: any;
key: string;
name: string;
} }
export const findTableAncestor = (node: Node | null): HTMLTableElement | null => { export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
@ -17,79 +19,108 @@ export const findTableAncestor = (node: Node | null): HTMLTableElement | null =>
export const TableMenu = ({ editor }: { editor: any }) => { export const TableMenu = ({ editor }: { editor: any }) => {
const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 }); const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
const isOpen = editor?.isActive("table");
const items: TableMenuItem[] = [ const items: TableMenuItem[] = [
{ {
name: "Insert Column right",
command: () => editor.chain().focus().addColumnBefore().run(), command: () => editor.chain().focus().addColumnBefore().run(),
icon: Columns, icon: Columns,
key: "insert-column-right",
name: "Insert 1 column right",
}, },
{ {
name: "Insert Row below",
command: () => editor.chain().focus().addRowAfter().run(), command: () => editor.chain().focus().addRowAfter().run(),
icon: Rows, icon: Rows,
key: "insert-row-below",
name: "Insert 1 row below",
}, },
{ {
name: "Delete Column",
command: () => editor.chain().focus().deleteColumn().run(), command: () => editor.chain().focus().deleteColumn().run(),
icon: Columns, icon: Columns,
key: "delete-column",
name: "Delete column",
}, },
{ {
name: "Delete Rows",
command: () => editor.chain().focus().deleteRow().run(), command: () => editor.chain().focus().deleteRow().run(),
icon: Rows, icon: Rows,
key: "delete-row",
name: "Delete row",
}, },
{ {
name: "Toggle Header Row",
command: () => editor.chain().focus().toggleHeaderRow().run(), command: () => editor.chain().focus().toggleHeaderRow().run(),
icon: ToggleRight, icon: ToggleRight,
} key: "toggle-header-row",
name: "Toggle header row",
},
]; ];
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (!window) return;
const handleWindowClick = () => {
const selection: any = window?.getSelection(); const handleWindowClick = () => {
if (selection.rangeCount !== 0) { const selection: any = window?.getSelection();
const range = selection.getRangeAt(0);
const tableNode = findTableAncestor(range.startContainer); if (selection.rangeCount !== 0) {
if (tableNode) { const range = selection.getRangeAt(0);
const tableRect = tableNode.getBoundingClientRect(); const tableNode = findTableAncestor(range.startContainer);
const tableCenter = tableRect.left + tableRect.width / 2;
const menuWidth = 45; let parent = tableNode?.parentElement;
const menuLeft = tableCenter - menuWidth / 2;
const tableBottom = tableRect.bottom; if (tableNode) {
setTableLocation({ bottom: tableBottom, left: menuLeft }); 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 () => { return () => {
window.removeEventListener("click", handleWindowClick); window.removeEventListener("click", handleWindowClick);
}; };
} }, [tableLocation, editor]);
}, [tableLocation]);
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-xl" 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 ${
style={{ bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`, left: `${tableLocation.left}px` }} isOpen ? "block" : "hidden"
}`}
style={{
bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
left: `${tableLocation.left}px`,
}}
> >
{items.map((item, index) => ( {items.map((item, index) => (
<button <Tooltip key={index} tooltipContent={item.name}>
key={index} <button
onClick={item.command} 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" 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} title={item.name}
> >
<item.icon <item.icon
className={cn("h-5 w-5 text-lg", { className={cn("h-4 w-4 text-lg", {
"text-red-600": item.name.includes("Delete"), "text-red-600": item.key.includes("delete"),
})} })}
/> />
</button> </button>
</Tooltip>
))} ))}
</section> </section>
); );

22
apps/app/styles/editor.css
View File

@ -144,7 +144,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
border: 3px solid rgba(var(--color-text-200)); 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; animation: spinning 0.6s linear infinite;
} }
} }
@ -160,16 +160,13 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
margin: 0; margin: 0;
margin-bottom: 1.5rem; border: 1px solid rgb(var(--color-border-200));
margin-top: 1.5rem;
border: 2px solid rgb(var(--color-border-100));
width: 100%; width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
td, td,
th { th {
min-width: 1em; min-width: 1em;
border: 2px solid rgb(var(--color-border-400)); border: 1px solid rgb(var(--color-border-200));
padding: 10px 15px; padding: 10px 15px;
vertical-align: top; vertical-align: top;
box-sizing: border-box; box-sizing: border-box;
@ -183,8 +180,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
th { th {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
background-color: rgb(var(--color-primary-300)); background-color: rgb(var(--color-primary-100));
} }
td:hover { td:hover {
@ -195,7 +192,10 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
content: ""; 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); background-color: rgba(var(--color-primary-300), 0.1);
pointer-events: none; pointer-events: none;
} }
@ -222,8 +222,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
} }
.ProseMirror table * p { .ProseMirror table * p {
padding: 0px 1px; padding: 0px 1px;
margin: 6px 2px; margin: 6px 2px;
} }
.ProseMirror table * .is-empty::before { .ProseMirror table * .is-empty::before {

4
apps/app/styles/globals.css
View File

@ -355,3 +355,7 @@ body {
.bp4-overlay-content { .bp4-overlay-content {
z-index: 555 !important; z-index: 555 !important;
} }
.disable-scroll {
overflow: hidden !important;
}