From ba6d17827baf54da770c9d6c80fd6534db8278c3 Mon Sep 17 00:00:00 2001 From: Eduard-Constantin Ibinceanu Date: Wed, 23 Oct 2024 20:08:41 +0300 Subject: [PATCH] Add Tables feature to the Editor (#340) * Install table extension * Add the table extension to editor * Add table button to toolbar * Fix packages * Add table icon * Add table style * Change table style * Add buttons to add rows and columns * Add buttons to remove columns and rows * Fix resize icon --- apps/web/components/Objects/Editor/Editor.tsx | 67 +++++++++++++++++++ .../Objects/Editor/Toolbar/ToolbarButtons.tsx | 33 +++++++++ apps/web/package.json | 4 ++ apps/web/pnpm-lock.yaml | 50 ++++++++++++++ 4 files changed, 154 insertions(+) diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx index 594de491..ddd40192 100644 --- a/apps/web/components/Objects/Editor/Editor.tsx +++ b/apps/web/components/Objects/Editor/Editor.tsx @@ -25,6 +25,10 @@ import { ComputerIcon, Eye, Monitor } from 'lucide-react' import MathEquationBlock from './Extensions/MathEquation/MathEquationBlock' import PDFBlock from './Extensions/PDF/PDFBlock' import QuizBlock from './Extensions/Quiz/QuizBlock' +import Table from '@tiptap/extension-table' +import TableCell from '@tiptap/extension-table-cell' +import TableHeader from '@tiptap/extension-table-header' +import TableRow from '@tiptap/extension-table-row' import ToolTip from '@components/StyledElements/Tooltip/Tooltip' import Link from 'next/link' import { getCourseThumbnailMediaDirectory } from '@services/media/media' @@ -149,6 +153,12 @@ function Editor(props: Editor) { editable: true, activity: props.activity, }), + Table.configure({ + resizable: true, + }), + TableRow, + TableHeader, + TableCell, // Add Collaboration and CollaborationCursor only if isCollabEnabledOnThisOrg is true ...(props.isCollabEnabledOnThisOrg ? [ @@ -551,6 +561,16 @@ export const EditorContentWrapper = styled.div` font-weight: 700; } } + + &.resize-cursor { + cursor: ew-resize; + cursor: col-resize; + } + + .tableWrapper { + margin: 1.5rem 0; + overflow-x: auto; + } } iframe { @@ -570,6 +590,53 @@ export const EditorContentWrapper = styled.div` padding-left: 20px; list-style-type: decimal; } + + table { + border-collapse: collapse; + margin: 0; + overflow: hidden; + table-layout: fixed; + width: 100%; + + td, + th { + border: 1px solid rgba(139, 139, 139, 0.4); + box-sizing: border-box; + min-width: 1em; + padding: 6px 8px; + position: relative; + vertical-align: top; + + > * { + margin-bottom: 0; + } + } + + th { + background-color: rgba(217, 217, 217, 0.4); + font-weight: bold; + text-align: left; + } + + .selectedCell:after { + background: rgba(139, 139, 139, 0.2); + content: ""; + left: 0; right: 0; top: 0; bottom: 0; + pointer-events: none; + position: absolute; + z-index: 2; + } + + .column-resize-handle { + background-color: #8d78eb; + bottom: -2px; + pointer-events: none; + position: absolute; + right: -2px; + top: 0; + width: 4px; + } + } ` export default Editor diff --git a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index e96deef4..5819bad6 100644 --- a/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx +++ b/apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx @@ -7,6 +7,11 @@ import { ArrowRightIcon, DividerVerticalIcon, ListBulletIcon, + TableIcon, + RowsIcon, + ColumnsIcon, + SectionIcon, + ContainerIcon, } from '@radix-ui/react-icons' import { AlertCircle, @@ -92,6 +97,34 @@ export const ToolbarButtons = ({ editor, props }: any) => { + + editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()} + > + + + editor.chain().focus().addRowAfter().run()} + > + + + editor.chain().focus().addColumnAfter().run()} + > + + + editor.chain().focus().deleteColumn().run()} + > + + + editor.chain().focus().deleteRow().run()} + > + + {/* TODO: fix this : toggling only works one-way */}