From f4df168ce442c0f73d3eb765de20cec6ca44482d Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Thu, 13 Nov 2025 00:31:29 +0700 Subject: [PATCH] fix table issues Signed-off-by: Alexander Onnikov --- packages/theme/styles/prose.scss | 2 +- .../components/CollaborativeTextEditor.svelte | 2 +- .../extension/table/TableNodeView.svelte | 4 +-- .../decorations/columnHandlerDecoration.ts | 32 ++++++++++--------- .../table/decorations/rowHandlerDecoration.ts | 32 ++++++++++--------- 5 files changed, 38 insertions(+), 34 deletions(-) diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss index 323f6e264d8..a267da6a863 100644 --- a/packages/theme/styles/prose.scss +++ b/packages/theme/styles/prose.scss @@ -23,7 +23,7 @@ table.proseTable { --table-handle-size: 0.875rem; --table-handle-indent: calc(var(--table-handle-size) * -1 - 1px); --table-handle-col-indent: calc(var(--table-handle-size) * -0.5); - --table-handle-row-indent: calc(var(--table-handle-size) * -1 - 0.75rem); + --table-handle-row-indent: calc(var(--table-handle-size) * -1); --table-insert-marker-indent: calc(-1.25rem - 1px); --table-selection-z-index: 100; diff --git a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte index 81b73719e29..822faa3958e 100644 --- a/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte +++ b/plugins/text-editor-resources/src/components/CollaborativeTextEditor.svelte @@ -423,7 +423,7 @@ editor = new Editor({ extensions: [kit], element, - editable: false, + editable: !readonly, editorProps: { attributes: mergeAttributes(defaultEditorAttributes, editorAttributes, { class: 'flex-grow' }) }, diff --git a/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte b/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte index 5e16911d554..191a4991ea5 100644 --- a/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte +++ b/plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte @@ -195,7 +195,7 @@ &__col { right: calc(var(--table-offscreen-spacing) - 1.5rem); top: 0; - bottom: 0; + bottom: 1rem; margin: 1.5rem 0; .table-button { @@ -204,7 +204,7 @@ } &__row { - bottom: -0.25rem; + bottom: 1rem; left: var(--table-offscreen-spacing); right: var(--table-offscreen-spacing); diff --git a/plugins/text-editor-resources/src/components/extension/table/decorations/columnHandlerDecoration.ts b/plugins/text-editor-resources/src/components/extension/table/decorations/columnHandlerDecoration.ts index f94bfb45c2f..788fedb1d66 100644 --- a/plugins/text-editor-resources/src/components/extension/table/decorations/columnHandlerDecoration.ts +++ b/plugins/text-editor-resources/src/components/extension/table/decorations/columnHandlerDecoration.ts @@ -194,7 +194,24 @@ class ColumnHandler { const dropMarker = getDropMarker() const dragMarker = getColDragMarker() + const handleMove = (event: MouseEvent): void => { + if (dropMarker !== null && dragMarker !== null) { + const currentLeft = startLeft + event.clientX - startX + dropIndex = calculateColumnDropIndex(col, columns, currentLeft) + + const dragMarkerWidthPx = columns[col].widthPx + const dragMarkerLeftPx = Math.max(0, Math.min(currentLeft, tableWidthPx - dragMarkerWidthPx)) + const dropMarkerLeftPx = + dropIndex <= col ? columns[dropIndex].leftPx : columns[dropIndex].leftPx + columns[dropIndex].widthPx + + updateColDropMarker(dropMarker, dropMarkerLeftPx - Math.floor(dropMarkerWidthPx / 2) - 1, dropMarkerWidthPx) + updateColDragMarker(dragMarker, dragMarkerLeftPx, dragMarkerWidthPx) + } + } + const handleFinish = (): void => { + window.removeEventListener('mousemove', handleMove) + if (dropMarker !== null) hideDropMarker(dropMarker) if (dragMarker !== null) hideDragMarker(dragMarker) @@ -211,21 +228,6 @@ class ColumnHandler { } } - const handleMove = (event: MouseEvent): void => { - if (dropMarker !== null && dragMarker !== null) { - const currentLeft = startLeft + event.clientX - startX - dropIndex = calculateColumnDropIndex(col, columns, currentLeft) - - const dragMarkerWidthPx = columns[col].widthPx - const dragMarkerLeftPx = Math.max(0, Math.min(currentLeft, tableWidthPx - dragMarkerWidthPx)) - const dropMarkerLeftPx = - dropIndex <= col ? columns[dropIndex].leftPx : columns[dropIndex].leftPx + columns[dropIndex].widthPx - - updateColDropMarker(dropMarker, dropMarkerLeftPx - Math.floor(dropMarkerWidthPx / 2) - 1, dropMarkerWidthPx) - updateColDragMarker(dragMarker, dragMarkerLeftPx, dragMarkerWidthPx) - } - } - window.addEventListener('mouseup', handleFinish, { once: true }) window.addEventListener('mousemove', handleMove) }) diff --git a/plugins/text-editor-resources/src/components/extension/table/decorations/rowHandlerDecoration.ts b/plugins/text-editor-resources/src/components/extension/table/decorations/rowHandlerDecoration.ts index 2af89e74494..727f972197d 100644 --- a/plugins/text-editor-resources/src/components/extension/table/decorations/rowHandlerDecoration.ts +++ b/plugins/text-editor-resources/src/components/extension/table/decorations/rowHandlerDecoration.ts @@ -194,7 +194,24 @@ class RowHandler { const dropMarker = getDropMarker() const dragMarker = getRowDragMarker() + const handleMove = (event: MouseEvent): void => { + if (dropMarker !== null && dragMarker !== null) { + const cursorTop = startTop + event.clientY - startY + dropIndex = calculateRowDropIndex(row, rows, cursorTop) + + const dragMarkerHeightPx = rows[row].heightPx + const dragMarkerTopPx = Math.max(0, Math.min(cursorTop, tableHeightPx - dragMarkerHeightPx)) + const dropMarkerTopPx = + dropIndex <= row ? rows[dropIndex].topPx : rows[dropIndex].topPx + rows[dropIndex].heightPx + + updateRowDropMarker(dropMarker, dropMarkerTopPx - dropMarkerWidthPx / 2, dropMarkerWidthPx) + updateRowDragMarker(dragMarker, dragMarkerTopPx, dragMarkerHeightPx) + } + } + const handleFinish = (): void => { + window.removeEventListener('mousemove', handleMove) + if (dropMarker !== null) hideDropMarker(dropMarker) if (dragMarker !== null) hideDragMarker(dragMarker) @@ -211,21 +228,6 @@ class RowHandler { } } - const handleMove = (event: MouseEvent): void => { - if (dropMarker !== null && dragMarker !== null) { - const cursorTop = startTop + event.clientY - startY - dropIndex = calculateRowDropIndex(row, rows, cursorTop) - - const dragMarkerHeightPx = rows[row].heightPx - const dragMarkerTopPx = Math.max(0, Math.min(cursorTop, tableHeightPx - dragMarkerHeightPx)) - const dropMarkerTopPx = - dropIndex <= row ? rows[dropIndex].topPx : rows[dropIndex].topPx + rows[dropIndex].heightPx - - updateRowDropMarker(dropMarker, dropMarkerTopPx - dropMarkerWidthPx / 2, dropMarkerWidthPx) - updateRowDragMarker(dragMarker, dragMarkerTopPx, dragMarkerHeightPx) - } - } - window.addEventListener('mouseup', handleFinish, { once: true }) window.addEventListener('mousemove', handleMove) })