fix table issues (#10207)

Signed-off-by: Alexander Onnikov <[email protected]>

Author: aonnikov

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;

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' })
       },

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);
 

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)
     })

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)
     })