rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Tables feature to the Editor (#340)

Browse source 
* 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
This commit is contained in:
Eduard-Constantin Ibinceanu 2024-10-23 20:08:41 +03:00 • committed by GitHub
parent e6979ed1b4
commit ba6d17827b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 154 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -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