Improve performance of table editing cell selection by throttling it

Author: bZichett

.gitignore

@@ -2,3 +2,4 @@
 .tern-port
 /dist
 /demo_bundle.js
+.idea

demo.base.js

@@ -0,0 +1,74 @@
+import {EditorView} from "prosemirror-view"
+import {EditorState} from "prosemirror-state"
+import {DOMParser, Schema}  from "prosemirror-model"
+import {schema as baseSchema}  from "prosemirror-schema-basic"
+import {baseKeymap}  from "prosemirror-commands"
+import {keymap}  from "prosemirror-keymap"
+import {exampleSetup, buildMenuItems}  from "prosemirror-example-setup"
+import {MenuItem, Dropdown}  from "prosemirror-menu"
+
+import {addColumnAfter, addColumnBefore, deleteColumn, addRowAfter, addRowBefore, deleteRow,
+        mergeCells, splitCell, setCellAttr, toggleHeaderRow, toggleHeaderColumn, toggleHeaderCell,
+        goToNextCell, deleteTable}  from "./src/commands"
+import {tableEditing, columnResizing, tableNodes, fixTables}  from "./src"
+
+let schema = new Schema({
+  nodes: baseSchema.spec.nodes.append(tableNodes({
+    tableGroup: "block",
+    cellContent: "block+",
+    cellAttributes: {
+      background: {
+        default: null,
+        getFromDOM(dom) { return dom.style.backgroundColor || null },
+        setDOMAttr(value, attrs) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
+      }
+    }
+  })),
+  marks: baseSchema.spec.marks
+})
+
+let menu = buildMenuItems(schema).fullMenu
+function item(label, cmd) { return new MenuItem({label, select: cmd, run: cmd}) }
+let tableMenu = [
+  item("Insert column before", addColumnBefore),
+  item("Insert column after", addColumnAfter),
+  item("Delete column", deleteColumn),
+  item("Insert row before", addRowBefore),
+  item("Insert row after", addRowAfter),
+  item("Delete row", deleteRow),
+  item("Delete table", deleteTable),
+  item("Merge cells", mergeCells),
+  item("Split cell", splitCell),
+  item("Toggle header column", toggleHeaderColumn),
+  item("Toggle header row", toggleHeaderRow),
+  item("Toggle header cells", toggleHeaderCell),
+  item("Make cell green", setCellAttr("background", "#dfd")),
+  item("Make cell not-green", setCellAttr("background", null))
+]
+menu.splice(2, 0, [new Dropdown(tableMenu, {label: "Table"})])
+
+function initialize(doc, {plugins = [], tableEditingOptions = {}, columnResizingOptions = {}} = {}) {
+  let state = EditorState.create({
+    doc,
+    plugins: [
+      ...plugins,
+      columnResizing(columnResizingOptions),
+      tableEditing(tableEditingOptions),
+      keymap({
+        "Tab": goToNextCell(1),
+        "Shift-Tab": goToNextCell(-1)
+      })
+    ].concat(exampleSetup({schema, menuContent: menu}))})
+  let fix = fixTables(state)
+  if (fix) state = state.apply(fix.setMeta("addToHistory", false))
+
+  window.view = new EditorView(document.querySelector("#editor"), {
+    state,
+  })
+
+  document.execCommand("enableObjectResizing", false, false)
+  document.execCommand("enableInlineTableEditing", false, false)
+}
+
+
+export { initialize, schema }

demo.js

@@ -1,65 +1,6 @@
-import {EditorView} from "prosemirror-view"
-import {EditorState} from "prosemirror-state"
-import {DOMParser, Schema}  from "prosemirror-model"
-import {schema as baseSchema}  from "prosemirror-schema-basic"
-import {baseKeymap}  from "prosemirror-commands"
-import {keymap}  from "prosemirror-keymap"
-import {exampleSetup, buildMenuItems}  from "prosemirror-example-setup"
-import {MenuItem, Dropdown}  from "prosemirror-menu"
-
-import {addColumnAfter, addColumnBefore, deleteColumn, addRowAfter, addRowBefore, deleteRow,
-        mergeCells, splitCell, setCellAttr, toggleHeaderRow, toggleHeaderColumn, toggleHeaderCell,
-        goToNextCell, deleteTable}  from "./src/commands"
-import {tableEditing, columnResizing, tableNodes, fixTables}  from "./src"
-
-let schema = new Schema({
-  nodes: baseSchema.spec.nodes.append(tableNodes({
-    tableGroup: "block",
-    cellContent: "block+",
-    cellAttributes: {
-      background: {
-        default: null,
-        getFromDOM(dom) { return dom.style.backgroundColor || null },
-        setDOMAttr(value, attrs) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
-      }
-    }
-  })),
-  marks: baseSchema.spec.marks
-})
-
-let menu = buildMenuItems(schema).fullMenu
-function item(label, cmd) { return new MenuItem({label, select: cmd, run: cmd}) }
-let tableMenu = [
-  item("Insert column before", addColumnBefore),
-  item("Insert column after", addColumnAfter),
-  item("Delete column", deleteColumn),
-  item("Insert row before", addRowBefore),
-  item("Insert row after", addRowAfter),
-  item("Delete row", deleteRow),
-  item("Delete table", deleteTable),
-  item("Merge cells", mergeCells),
-  item("Split cell", splitCell),
-  item("Toggle header column", toggleHeaderColumn),
-  item("Toggle header row", toggleHeaderRow),
-  item("Toggle header cells", toggleHeaderCell),
-  item("Make cell green", setCellAttr("background", "#dfd")),
-  item("Make cell not-green", setCellAttr("background", null))
-]
-menu.splice(2, 0, [new Dropdown(tableMenu, {label: "Table"})])
+import {initialize, schema} from './demo.base'
+import {DOMParser} from "prosemirror-model";
 
 let doc = DOMParser.fromSchema(schema).parse(document.querySelector("#content"))
-let state = EditorState.create({doc, plugins: [
-  columnResizing(),
-  tableEditing(),
-  keymap({
-    "Tab": goToNextCell(1),
-    "Shift-Tab": goToNextCell(-1)
-  })
-].concat(exampleSetup({schema, menuContent: menu}))})
-let fix = fixTables(state)
-if (fix) state = state.apply(fix.setMeta("addToHistory", false))
-
-window.view = new EditorView(document.querySelector("#editor"), {state})
 
-document.execCommand("enableObjectResizing", false, false)
-document.execCommand("enableInlineTableEditing", false, false)
+initialize(doc)

demo.large.js

@@ -0,0 +1,27 @@
+const {initialize, schema} = require('./demo.base')
+const {decoPlugin} = require("./test/plugins/decorations");
+
+const n = schema.nodes
+const rows = new Array(1000).fill(undefined).map((x, R) => {
+		return n.table_row.createAndFill(
+			{},
+			new Array(20).fill(undefined).map((x, C) => {
+					return n.table_cell.createAndFill(
+						{}, n.paragraph.create({}, [schema.text(R + ' | ' + C)])
+					)
+				}
+			)
+		)
+	}
+)
+
+const largeTable = schema.nodes.table.createChecked({}, rows)
+const doc = schema.nodes.doc.create({}, largeTable)
+
+initialize(doc, {
+	plugins: [decoPlugin(['Test Decoration'])],
+	tableEditingOptions: {
+		mouseMoveThrottleOptOut: window.location.search.includes('throttle=false')
+	},
+	columnResizingOptions: {}
+})