lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Feature: perf: reduce listeners by current selection path

Open 1yasa opened this issue 1 year ago • 0 comments

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
			)
		)
	}
}

1yasa avatar May 14 '24 12:05 1yasa