Table column resizing & some bug-fixes for tables (#7591)

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>

packages/theme/styles/prose.scss

@@ -172,6 +172,7 @@ table.proseTable {
 
       &__selected {
         left: 0;
+
         &::before {
           right: 0;
           top: 0;
@@ -203,8 +204,7 @@ table.proseTable {
       }
 
       &:hover {
-        &:not(.table-row-handle__selected) {
-        }
+        &:not(.table-row-handle__selected) {}
 
         button {
           opacity: 1;
@@ -213,6 +213,7 @@ table.proseTable {
 
       &__selected {
         top: 0;
+
         &::before {
           bottom: 0;
           left: 0;
@@ -246,6 +247,27 @@ table.proseTable {
       }
     }
 
+    .column-resize-handle {
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      bottom: -1px;
+      width: 1px;
+      z-index: 100;
+      background-color: var(--primary-button-focused);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -5px;
+        right: -5px;
+        bottom: 0;
+        cursor: col-resize;
+        z-index: 100;
+      }
+    }
+
     .table-row-insert {
       display: flex;
       flex-direction: row;
@@ -291,13 +313,13 @@ table.proseTable {
       }
 
       &:hover+.table-insert-marker {
-        opacity: 1;
+        display: block;
       }
     }
 
     .table-insert-marker {
       background-color: var(--primary-button-focused);
-      opacity: 0;
+      display: none;
     }
   }
 
@@ -526,7 +548,7 @@ pre.proseCodeBlock>pre.proseCode {
   border-bottom: 2px solid rgba(255, 203, 0, .35);
   padding-bottom: 2px;
   transition: background 0.2s ease, border 0.2s ease;
-  
+
   &.active {
     transition-delay: 150ms;
     background: rgba(255, 203, 0, .24);

plugins/text-editor-resources/src/components/extension/table/TableNodeView.svelte

@@ -16,10 +16,10 @@
 -->
 <script lang="ts">
   import { IconAdd } from '@hcengineering/ui'
-  import { onDestroy } from 'svelte'
+  import { onDestroy, onMount } from 'svelte'
   import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '../../node-view'
   import { findTable, insertColumn, insertRow } from './utils'
-  import { TableMap } from '@tiptap/pm/tables'
+  import { TableMap, updateColumnsOnResize } from '@tiptap/pm/tables'
   import TableToolbar from './TableToolbar.svelte'
 
   export let node: NodeViewProps['node']
@@ -66,58 +66,77 @@
     }
   }
 
+  function updateColumns (): void {
+    updateColumnsOnResize(node, colgroupElement, tableElement, 25)
+  }
+
+  $: if (node && colgroupElement && tableElement) {
+    updateColumns()
+  }
+
+  let tableElement: HTMLTableElement
+  let colgroupElement: HTMLTableColElement
+
+  onMount(() => {
+    updateColumns()
+  })
+
   onDestroy(() => {
     editor.off('selectionUpdate', handleSelectionUpdate)
   })
 </script>
 
+<!-- prettier-ignore -->
 <NodeViewWrapper class="table-node-wrapper" data-drag-handle>
   <div class="table-wrapper" class:table-selected={editable && focused}>
-    <table class={className}>
-      <NodeViewContent as="tbody" />
-    </table>
-
-    {#if editable && focused}
-      <div class="table-toolbar-container" contenteditable="false">
-        <TableToolbar {editor} />
-      </div>
-
-      <!-- add col button -->
-      <div class="table-button-container table-button-container__col flex" contenteditable="false">
-        <div class="w-full h-full flex showOnHover">
-          <button class="table-button w-full h-full" on:click={handleAddColumn}>
-            <div class="table-button__dot" />
-            <div class="table-button__icon"><IconAdd size={'small'} /></div>
-          </button>
+    <div class="table-scroller">
+      <table class={className} bind:this={tableElement}>
+        <colgroup bind:this={colgroupElement} />
+        <NodeViewContent as="tbody" />
+      </table><!-- this comment is necessary to remove the whitespace character that Svelte adds between elements, which causes various problems in prosemirror
+    --></div><!--  https://github.com/sveltejs/svelte/issues/12765
+    --><div class="table-toolbar-components" contenteditable="false">
+      {#if editable && focused}
+        <div class="table-toolbar-container">
+          <TableToolbar {editor} />
         </div>
-      </div>
-
-      <!-- add row button -->
-      <div class="table-button-container table-button-container__row flex" contenteditable="false">
-        <div class="w-full h-full flex showOnHover">
-          <button class="table-button w-full h-full" on:click={handleAddRow}>
-            <div class="table-button__dot" />
-            <div class="table-button__icon"><IconAdd size={'small'} /></div>
-          </button>
+        <!-- add col button -->
+        <div class="table-button-container table-button-container__col flex">
+          <div class="w-full h-full flex showOnHover">
+            <button class="table-button w-full h-full" on:click={handleAddColumn}>
+              <div class="table-button__dot" />
+              <div class="table-button__icon"><IconAdd size={'small'} /></div>
+            </button>
+          </div>
         </div>
-      </div>
-    {/if}
+        <!-- add row button -->
+        <div class="table-button-container table-button-container__row flex">
+          <div class="w-full h-full flex showOnHover">
+            <button class="table-button w-full h-full" on:click={handleAddRow}>
+              <div class="table-button__dot" />
+              <div class="table-button__icon"><IconAdd size={'small'} /></div>
+            </button>
+          </div>
+        </div>
+      {/if}
+    </div>
   </div>
 </NodeViewWrapper>
 
 <style lang="scss">
   .table-wrapper {
-    position: relative;
-    display: flex;
-    padding: 1.25rem 0;
+    --table-offscreen-spacing: 2rem;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+    width: max-content;
+    max-width: calc(100% + var(--table-offscreen-spacing) * 2);
+    position: relative;
+
+    margin: 0 calc(var(--table-offscreen-spacing) * -1);
+
+    .table-scroller {
+      padding: 1.25rem var(--table-offscreen-spacing);
+      overflow-x: scroll;
+      scrollbar-width: auto;
     }
 
     .table-button-container {
@@ -156,26 +175,22 @@
       }
 
       &__col {
-        right: -1.25rem;
+        right: -1.5rem;
         top: 0;
         bottom: 0;
         margin: 1.25rem 0;
 
         .table-button {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
           width: 1.25rem;
         }
       }
 
       &__row {
-        bottom: 0;
-        left: 0;
+        bottom: -0.25rem;
+        left: var(--table-offscreen-spacing);
         right: 0;
 
         .table-button {
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
           height: 1.25rem;
         }
       }

plugins/text-editor-resources/src/kits/editor-kit.ts

@@ -77,7 +77,7 @@ export const tableKitExtensions: KitExtension[] = [
   [
     10,
     Table.configure({
-      resizable: false,
+      resizable: true,
       HTMLAttributes: {
         class: 'proseTable'
       }