Improve performance of column resizing mousemouse handler by debouncing

src/columnresizing.js

@@ -1,6 +1,6 @@
 import {Plugin, PluginKey} from "prosemirror-state"
 import {Decoration, DecorationSet} from "prosemirror-view"
-import {cellAround, pointsAtCell, setAttr} from "./util"
+import {cellAround, debounce, pointsAtCell, setAttr} from "./util"
 import {TableMap} from "./tablemap"
 import {TableView, updateColumns} from "./tableview"
 import {tableNodeTypes} from "./schema"
@@ -27,7 +27,7 @@ export function columnResizing({ handleWidth = 5, cellMinWidth = 25, View = Tabl
       },
 
       handleDOMEvents: {
-        mousemove(view, event) { handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable) },
+        mousemove(view, event) { debouncedHandleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable) },
         mouseleave(view) { handleMouseLeave(view) },
         mousedown(view, event) { handleMouseDown(view, event, cellMinWidth) }
       },
@@ -93,6 +93,8 @@ function handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResiz
   }
 }
 
+const debouncedHandleMouseMove = debounce(handleMouseMove)
+
 function handleMouseLeave(view) {
   let pluginState = key.getState(view.state)
   if (pluginState.activeHandle > -1 && !pluginState.dragging) updateHandle(view, -1)

src/util.js

@@ -107,3 +107,26 @@ export function columnIsHeader(map, table, col) {
       return false
   return true
 }
+
+const defaultDebounceTime = 100
+export function debounce(func, wait = defaultDebounceTime, immediate) {
+  let timeout
+  return function() {
+    let context = this,
+      args = arguments
+    let later = function() {
+      timeout = null
+      if (!immediate) {
+        func.apply(context, args)
+      }
+    }
+    let callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) {
+      func.apply(context, args)
+    }
+
+    return timeout
+  }
+}