fix: editor table performance improvements

plugins/text-editor-resources/src/components/extension/leftMenu.ts

@@ -56,6 +56,8 @@ function posAtLeftMenuElement (view: EditorView, leftMenuElement: HTMLElement, o
 function LeftMenu (options: LeftMenuOptions): Plugin {
   let leftMenuElement: HTMLElement | null = null
   const offsetX = options.width + options.marginX
+  let rafId: number | null = null
+  let styleCache = new WeakMap<HTMLElement, { lineHeight: number, paddingTop: number, marginTop: number }>()
 
   function hideLeftMenu (): void {
     if (leftMenuElement !== null) {
@@ -69,6 +71,19 @@ function LeftMenu (options: LeftMenuOptions): Plugin {
     }
   }
 
+  function getCachedStyle (node: HTMLElement): { lineHeight: number, paddingTop: number, marginTop: number } {
+    let cached = styleCache.get(node)
+    if (cached === undefined) {
+      const compStyle = window.getComputedStyle(node)
+      const lineHeight = parseInt(compStyle.lineHeight, 10)
+      const paddingTop = parseInt(compStyle.paddingTop, 10)
+      const marginTop = parseInt(compStyle.marginTop, 10)
+      cached = { lineHeight, paddingTop, marginTop }
+      styleCache.set(node, cached)
+    }
+    return cached
+  }
+
   return new Plugin({
     key: new PluginKey('left-menu'),
     view: (view) => {
@@ -117,8 +132,13 @@ function LeftMenu (options: LeftMenuOptions): Plugin {
 
       return {
         destroy: () => {
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId)
+            rafId = null
+          }
           leftMenuElement?.remove?.()
           leftMenuElement = null
+          styleCache = new WeakMap()
         }
       }
     },
@@ -129,52 +149,65 @@ function LeftMenu (options: LeftMenuOptions): Plugin {
             return
           }
 
-          const node = nodeDOMAtCoords({
-            x: event.clientX + offsetX,
-            y: event.clientY
-          })
-
-          if (!(node instanceof HTMLElement) || node.nodeName === 'HR') {
-            hideLeftMenu()
+          if (rafId !== null) {
             return
           }
 
-          const parent = node?.parentElement
-          if (!(parent instanceof HTMLElement)) {
-            hideLeftMenu()
-            return
-          }
-
-          const compStyle = window.getComputedStyle(node)
-          const lineHeight = parseInt(compStyle.lineHeight, 10)
-          const paddingTop = parseInt(compStyle.paddingTop, 10)
-
-          // For some reason the offsetTop value for all elements is shifted by the first element's margin
-          // so taking it into account here
-          let firstMargin = 0
-          const firstChild = parent.firstChild
-          if (firstChild !== null) {
-            const firstChildCompStyle = window.getComputedStyle(firstChild as HTMLElement)
-            firstMargin = parseInt(firstChildCompStyle.marginTop, 10)
-          }
+          rafId = requestAnimationFrame(() => {
+            rafId = null
+
+            const node = nodeDOMAtCoords({
+              x: event.clientX + offsetX,
+              y: event.clientY
+            })
+
+            if (!(node instanceof HTMLElement) || node.nodeName === 'HR') {
+              hideLeftMenu()
+              return
+            }
+
+            const parent = node?.parentElement
+            if (!(parent instanceof HTMLElement)) {
+              hideLeftMenu()
+              return
+            }
+
+            // For some reason the offsetTop value for all elements is shifted by the first element's margin
+            // so taking it into account here
+            let firstMargin = 0
+            const firstChild = parent.firstChild
+            if (firstChild !== null && firstChild instanceof HTMLElement) {
+              const { marginTop } = getCachedStyle(firstChild)
+              firstMargin = marginTop
+            }
+
+            const { lineHeight, paddingTop } = getCachedStyle(node)
+            const left = -offsetX
+            let top = node.offsetTop
+            top += (lineHeight - options.height) / 2
+            top += paddingTop
+            top += firstMargin
 
-          const left = -offsetX
-          let top = node.offsetTop
-          top += (lineHeight - options.height) / 2
-          top += paddingTop
-          top += firstMargin
-
-          if (leftMenuElement === null) return
+            if (leftMenuElement === null) return
 
-          leftMenuElement.style.left = `${left}px`
-          leftMenuElement.style.top = `${top}px`
+            leftMenuElement.style.left = `${left}px`
+            leftMenuElement.style.top = `${top}px`
 
-          showLeftMenu()
+            showLeftMenu()
+          })
         },
         keydown: () => {
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId)
+            rafId = null
+          }
           hideLeftMenu()
         },
         mousewheel: () => {
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId)
+            rafId = null
+          }
           hideLeftMenu()
         },
         mouseleave: (view, event) => {

plugins/text-editor-resources/src/components/extension/table/decorations/columnHandlerDecoration.ts

@@ -15,6 +15,7 @@
 
 import textEditor from '@hcengineering/text-editor'
 import { type Editor } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { CellSelection, TableMap } from '@tiptap/pm/tables'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
@@ -34,12 +35,12 @@ import {
   updateColDragMarker,
   updateColDropMarker
 } from './tableDragMarkerDecoration'
+import { TableCachePluginKey } from './plugins'
 import { getTableCellWidgetDecorationPos, getTableWidthPx } from './utils'
 
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
 interface TableColumnHandlerDecorationPluginState {
   decorations?: DecorationSet
+  debounceTimeout?: ReturnType<typeof setTimeout>
 }
 
 export const TableColumnHandlerDecorationPlugin = (editor: Editor): Plugin<TableColumnHandlerDecorationPluginState> => {
@@ -52,11 +53,35 @@ export const TableColumnHandlerDecorationPlugin = (editor: Editor): Plugin<Table
       },
       apply (tr, prev, oldState, newState) {
         const table = findTable(newState.selection)
+
+        if (table === undefined && prev.debounceTimeout !== undefined) {
+          clearTimeout(prev.debounceTimeout)
+          return {}
+        }
+
         if (!haveTableRelatedChanges(editor, table, oldState, newState, tr)) {
           return table !== undefined ? prev : {}
         }
 
-        const tableMap = TableMap.get(table.node)
+        const cache = TableCachePluginKey.getState(newState)
+        const tableMap = cache?.tableMap ?? TableMap.get(table.node)
+
+        if (tr.docChanged && tr.steps.length === 1 && !(newState.selection instanceof CellSelection)) {
+          if (prev.debounceTimeout !== undefined) {
+            clearTimeout(prev.debounceTimeout)
+          }
+
+          const debounceTimeout = setTimeout(() => {
+            editor.view.updateState(editor.state)
+          }, 100)
+
+          const mapped = prev.decorations?.map(tr.mapping, tr.doc)
+          return { decorations: mapped, debounceTimeout }
+        }
+
+        if (prev.debounceTimeout !== undefined) {
+          clearTimeout(prev.debounceTimeout)
+        }
 
         let isStale = false
         const mapped = prev.decorations?.map(tr.mapping, tr.doc)
@@ -87,7 +112,15 @@ export const TableColumnHandlerDecorationPlugin = (editor: Editor): Plugin<Table
       decorations (state) {
         return key.getState(state).decorations
       }
-    }
+    },
+    view: () => ({
+      destroy: () => {
+        const state = key.getState(editor.state)
+        if (state?.debounceTimeout !== undefined) {
+          clearTimeout(state.debounceTimeout)
+        }
+      }
+    })
   })
 }
 
@@ -176,8 +209,6 @@ class ColumnHandler {
           }
           editor.view.dispatch(tr)
         }
-        window.removeEventListener('mouseup', handleFinish)
-        window.removeEventListener('mousemove', handleMove)
       }
 
       const handleMove = (event: MouseEvent): void => {
@@ -195,7 +226,7 @@ class ColumnHandler {
         }
       }
 
-      window.addEventListener('mouseup', handleFinish)
+      window.addEventListener('mouseup', handleFinish, { once: true })
       window.addEventListener('mousemove', handleMove)
     })
 

plugins/text-editor-resources/src/components/extension/table/decorations/columnInsertDecoration.ts

@@ -14,16 +14,16 @@
 //
 
 import { type Editor } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { TableMap } from '@tiptap/pm/tables'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 import { findTable, haveTableRelatedChanges, insertColumn } from '../utils'
-import { addSvg } from './icons'
 
+import { addSvg } from './icons'
+import { TableCachePluginKey } from './plugins'
 import { getTableCellWidgetDecorationPos, getTableHeightPx } from './utils'
 
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
 interface TableColumnInsertDecorationPluginState {
   decorations?: DecorationSet
 }
@@ -44,7 +44,8 @@ export const TableColumnInsertDecorationPlugin = (editor: Editor): Plugin<TableC
 
         const decorations: Decoration[] = []
 
-        const tableMap = TableMap.get(table.node)
+        const cache = TableCachePluginKey.getState(newState)
+        const tableMap = cache?.tableMap ?? TableMap.get(table.node)
         const { width } = tableMap
 
         let isStale = false
@@ -99,44 +100,38 @@ class ColumnInsertHandler {
     const handle = document.createElement('div')
     handle.classList.add('table-col-insert')
 
+    const marker = document.createElement('div')
+    marker.className = 'table-insert-marker'
+    handle.appendChild(marker)
+
     const button = document.createElement('button')
     button.className = 'table-insert-button'
     button.innerHTML = addSvg
-    button.addEventListener('mousedown', (event) => {
-      event.stopPropagation()
-      event.preventDefault()
+    handle.appendChild(button)
 
+    button.addEventListener('mouseenter', () => {
       const table = findTable(editor.state.selection)
       if (table === undefined) {
         return
       }
-      editor.view.dispatch(insertColumn(table, col + 1, editor.state.tr))
+      const tableHeightPx = getTableHeightPx(table, editor)
+      marker.style.height = tableHeightPx + 'px'
     })
-    handle.appendChild(button)
-
-    const marker = document.createElement('div')
-    marker.className = 'table-insert-marker'
 
-    handle.appendChild(marker)
+    button.addEventListener('mousedown', (event) => {
+      event.stopPropagation()
+      event.preventDefault()
 
-    const updateMarkerHeight = (): void => {
       const table = findTable(editor.state.selection)
       if (table === undefined) {
         return
       }
-      const tableHeightPx = getTableHeightPx(table, editor)
-      marker.style.height = tableHeightPx + 'px'
-    }
-
-    updateMarkerHeight()
-    editor.on('update', updateMarkerHeight)
+      editor.view.dispatch(insertColumn(table, col + 1, editor.state.tr))
+    })
 
     if (this.destroy !== undefined) {
       this.destroy()
     }
-    this.destroy = () => {
-      editor.off('update', updateMarkerHeight)
-    }
 
     return handle
   }

plugins/text-editor-resources/src/components/extension/table/decorations/plugins.ts

@@ -0,0 +1,49 @@
+//
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { TableMap } from '@tiptap/pm/tables'
+import { findTable } from '../utils'
+
+export interface TableCachePluginState {
+  tableMap?: TableMap
+  tablePos?: number
+}
+
+export const TableCachePluginKey = new PluginKey<TableCachePluginState>('tableCache')
+
+export const TableCachePlugin = (): Plugin<TableCachePluginState> => {
+  return new Plugin<TableCachePluginState>({
+    key: TableCachePluginKey,
+    state: {
+      init: () => ({}),
+      apply (tr, prev, _oldState, newState) {
+        const table = findTable(newState.selection)
+        if (table === undefined) {
+          return {}
+        }
+
+        if (prev.tablePos === table.pos && !tr.docChanged) {
+          return prev
+        }
+
+        return {
+          tableMap: TableMap.get(table.node),
+          tablePos: table.pos
+        }
+      }
+    }
+  })
+}