I found the reason, when the tableEditing
create the selectedCell decorations,it will enter to iterDeco
function. the iterDeco function speed up compute time greatly. when it forChild, the condition result == empty
is not true, even though the result is empty, but they are not the same variable, which will cause foreachall nodes of document(large document will speed up compute time greatly)
DecorationGroup.prototype.forChild = function forChild (offset, child) {
if (child.isLeaf) { return DecorationSet.empty }
var found = [];
for (var i = 0; i < this.members.length; i++) {
var result = this.members[i].forChild(offset, child);
if (result == empty) { continue }
if (result instanceof DecorationGroup) { found = found.concat(result.members); }
else { found.push(result); }
}
return DecorationGroup.from(found)
}
So, I copy the tableEditing code from prosemirror-tables
into my project. then it’s solved. I’m not sure this is a bug of prosemirror-view
?
the following is a part of tableEditing code
export function tableEditing({ allowTableNodeSelection = false } = {}) {
return new Plugin({
key: tableEditingKey,
state: {
init() {
return null;
},
apply(tr, cur) {
let set = tr.getMeta(tableEditingKey);
if (set != null) return set == -1 ? null : set;
if (cur == null || !tr.docChanged) return cur;
let { deleted, pos } = tr.mapping.mapResult(cur);
return deleted ? null : pos;
},
},
props: {
decorations: drawCellSelection,
handleDOMEvents: {
mousedown: handleMouseDown,
},
createSelectionBetween(view) {
if (tableEditingKey.getState(view.state) != null)
return view.state.selection;
},
handleTripleClick,
handleKeyDown,
handlePaste,
},
appendTransaction(_, oldState, state) {
return normalizeSelection(
state,
fixTables(state, oldState),
allowTableNodeSelection,
);
},
});
}
export function drawCellSelection(state) {
if (!(state.selection instanceof CellSelection)) return null;
let cells = [];
state.selection.forEachCell((node, pos) => {
cells.push(
Decoration.node(pos, pos + node.nodeSize, { class: 'selectedCell' }),
);
});
return DecorationSet.create(state.doc, cells);
}