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

fix: table issues and improve tables button in editor

Browse source
This commit is contained in:
swve 2025-01-26 12:43:31 +01:00
parent 31e8eaf0b5
commit ca6a80702a
3 changed files with 157 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

57
apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx
View file

@ -27,6 +27,10 @@ import AICanvaToolkit from './AI/AICanvaToolkit'
import EmbedObjects from '@components/Objects/Editor/Extensions/EmbedObjects/EmbedObjects'
import Badges from '@components/Objects/Editor/Extensions/Badges/Badges'
import Buttons from '@components/Objects/Editor/Extensions/Buttons/Buttons'
import Table from '@tiptap/extension-table'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
interface Editor {
content: string
@ -100,6 +104,12 @@ function Canva(props: Editor) {
editable: isEditable,
activity: props.activity,
}),
Table.configure({
resizable: true,
}),
TableRow,
TableHeader,
TableCell,
],
content: props.content,
@ -186,6 +196,53 @@ const CanvaWrapper = styled.div`
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;
}
}
&:focus {
outline: none !important;
outline-style: none !important;