reactjsreact-hooksjodit

`onBlur` is not triggered in 'Jodit` wyswig editor code editor mode, `useCallback` is not working correctly


I have made a codesandbox example with my case and need help making it work. Here is the link to the example.

Repro steps:

  1. Type something on the jodit editor
  2. Mouse click on the outside of the editor and you will see the log that says onBlur is triggered.
  3. Switch to code edit mode using </> icon on the top-left.
  4. Modify something on the html.
  5. Mouse click on outside of the editor and you will NOT see any additional log.

My initial goal is to confirm this mechanism is by design or a bug and I tried to ask to the community before opening a ticket on the github repository.

You may also have noticed that the logging system is not working properly in my example.

I tried to stack all the logs - onChange, onBlur but it is showing only the last log. It works fine when I click on the Add button. Maybe there is something wrong with react hook usage.

Can someone please help me with the above issues?

  1. onBlur is not triggered on code edit mode in the Jodit editor. Is it by design or a bug?
  2. Why do I see only the latest log instead of the stacked logs?

Thank you in advance.


Solution

    1. onBlur is not called because inside jodit a separate textarea is used to display the code, this is either a bug in jodit-react or in jodit itself
    2. Inside jodit-react callbacks for textarea are added inside useEffect which is called only when the config is changed.
      For the correct display of the logs you need to fix the way of saving the logs to the state
    const appendLog = useCallback(
      (message) => {
        setLogs(oldLogs => [...oldLogs, message]);
      },
      []
    );