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 */}