lexical
lexical copied to clipboard
Feature: perf: reduce listeners by current selection path
In a text content exceeding 10M, it contains hundreds of thousands of blocks, with each block monitoring a series of events in real time (which can lead to excessive memory and CPU usage). However, there is actually room for optimization.
That is, by monitoring changes in selection to obtain the node path where the selection is located, only the blocks on the free node path execute some monitoring events.
Here is my solution:
export default class Index {
editor = null as LexicalEditor
path = []
constructor() {}
init(editor: Index['editor']) {
this.editor = editor
}
watcher() {
const selection = $getSelection()
if (!$isRangeSelection(selection)) return
const anchor = selection.anchor
const focus = selection.focus
if (anchor.offset !== focus.offset) return
const parents = anchor.getNode().getParents()
const path = parents.map(item => ({ type: item.getType(), key: item.getKey() }))
if (path === this.path) return
this.editor.dispatchCommand(SELECTION_ELEMENTS_CHANGE, path)
console.log(path)
}
register() {
return mergeRegister(
this.editor.registerCommand(
SELECTION_CHANGE_COMMAND,
this.watcher.bind(this),
COMMAND_PRIORITY_CRITICAL
)
)
}
}