facebook/lexical

Bug: When AutoFocusPlugin is Combined with CodeHighlightPlugin and LexicalOnChangePlugin - an OnChange Event is raised on document load.

Open

#4493 opened on May 14, 2023

View on GitHub
 (5 comments) (10 reactions) (0 assignees)JavaScript (16,523 stars) (1,349 forks)batch import
all-platforms-bugcontribution-weekgood first issueother

Description

When the React AutoFocusPlugin, (@lexical/react/LexicalAutoFocusPlugin) React OnChangePlugin (@lexical/react/LexicalOnChangePlugin) and the CodeHighlightPlugin (calling {registerCodeHighlighting} from '@lexical/code') are all enabled in the editor - then when the application first loads the document / editor and is 'AutoFocused' - an OnChange event is raised.

Pretty sure it's being caused by the code highlighter registration - but it only happens when the AutoFocus (or the call to editor.focus()) occurs (i.e. it doesn't happen when the editor is manually focused by clicking inside the editor window).

Lexical version: 0.10.0

Steps To Reproduce

  1. Enable all three plugins - AutoFocusPlugin, OnChangePlugin, and CodeHighlightPlugin
  2. Close the document / editor application and then re-open and existing document / editor - the editor will auto-focus, but it will also raise an onChange event - even though the editor state has not changed.

The current behavior

An onChange event is being raised even though there is no change to editorState

The expected behavior

There should be no onChange event when the document / editor is loaded (for example when a user is simply opening a document in the application)

Contributor guide

Tech stack
javascripttypescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic understanding of Lexical editorReact plugin system
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the interaction between AutoFocusPlugin, CodeHighlightPlugin, and OnChangePlugin in Lexical. Focus on the sequence of plugin initialization and how auto focus triggers the code highlighting registration, leading to an unintended OnChange event. Look at the Lexical source code for these plugins and the event firing mechanism.