editor.js
editor.js copied to clipboard
Editor Js instance inside EditorJs custom BlockTool has strange behavior and focus ERROR in React Js
First of all, I want to thank you for this cool library😎, but I have a little difficulty, and I noticed an error that EditorJs gives me.
BUG:
When you first load the application, when you focus on a paragraph of the child EditorJs and try to delete a character - an error
Details:
stack: React Js(17, or 18 versions) + Editor Js(2.28.2 or 2.29.0-rc.8)
Description:
I have the following case:
I have parent component of EditorJs instance in React js. I also have my own custom blockTool in which i have nested EditorJs instance. Yes, it isn't a typical case but however i need to do it.
And i see a strange behavior when i try to call EditorJs inside EditorJs blockTool. And the main problem is focus. When i render my application in first time i immediately focus on Paragraph(or i also tried to use my custom paragraph - It did not help), and i try to delete last characters in this input and i see Error: "Cannot read properties of undefined (reading 'focusable'), at get isAtStart, at Qo.backspace, at Qo.keydown". When i use BACKSPACE or Navigation Arrow i got this ERROR.
But, i don't get problem with focus if i: When the first loading of the component occurs, I first click on the wrapper of my nested instance and then only on the paragraph, then I no longer see this error, but another one appears: the focus begins to jump from the nested editorJs to the parent one
I tried a lot of different options to fix the focus problem. I used different versions of EditorJs (I also took pre-release ), and took the latest stable one. I tried different versions of React(17 and 18). I tried playing with the autofocus setting in editorJs. Moreover, I had not one EditorJs component, but 2. One for internal calls and the other one external. But still there are always problems with focus and the fact that caret jumps from internal to external EditorJs.
I am attaching a link to my implementation: https://codesandbox.io/p/sandbox/thirsty-cloud-xj2d3d
You can change the React version here or the EditorJs version and try to several option this problem
If you have examples how to do "correct call" nested EditorJs in parent EditorJs in React - I will be grateful😊