Minor: add wrapper for table in block editor to make it scrollable (#15574)

* Minor: add wrapper for table in block editor to make it scrollable

* Refactor TableMenu component to use class name 'tableWrapper' instead of attribute 'data-om-table'
This commit is contained in:
Sachin Chaurasiya 2024-03-14 21:49:59 +05:30 committed by GitHub
parent 234164584a
commit 2d1cc58664
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 1 deletions

View File

@ -124,6 +124,7 @@ export const extensions = [
class: 'om-table',
'data-om-table': 'om-table',
},
resizable: true,
}),
TableRow.configure({
HTMLAttributes: {

View File

@ -32,7 +32,7 @@ const TableMenu = (props: TableMenuProps) => {
const handleMouseDown = useCallback((event: MouseEvent) => {
const target = event.target as HTMLElement;
const table = target?.closest('[data-om-table]');
const table = target?.closest('.tableWrapper');
if (table?.contains(target)) {
tableMenuPopup.current?.setProps({

View File

@ -27,6 +27,10 @@
// this is to have enough space after last node, referred from the reference editor
padding-bottom: 30vh;
}
.om-block-editor > .tableWrapper {
width: 100%;
overflow-x: auto;
}
// show placeholder when editor is in focused mode
.tiptap.ProseMirror-focused .is-node-empty.has-focus::before {
color: @grey-3;