codex-team
Unexpected Closure of Toolbar in Nested Editor.js Editors
Issue Description:
Encountered an issue with the closure of the toolbar while using nested Editor.js editors. In nested scenarios, the toolbar unexpectedly closes, leading to a degraded user experience.
Steps to Reproduce:
Create a block in an Editor.js editor. Insert another Editor.js editor within this block, creating a nested structure. Click on a toolbar button, such as the link toolbar, within the inner editor. When the focus is within the input field of the inner editor, the toolbar unexpectedly closes.
Expected Behavior:
The toolbar should remain open when the user interacts with the inner editor until the user completes the action or moves out of the editor area.
Actual Behavior:
The toolbar closes unexpectedly when the focus is within the input field of the inner editor, affecting the user's editing experience.
Debugging Process:
Upon debugging, it was found that the issue lies in the closing logic of the toolbar. The condition for checking whether the focused element is outside the block's content area is inaccurate due to the nested structure of Editor.js, resulting in the incorrect closure of the toolbar.
Solution Suggestions:
Adjust the condition for checking: Redefine the logic to determine whether the focused element is outside the block's content area to accommodate nested editor scenarios. Avoid conflicts: When designing nested editors, consider avoiding conflicts that may arise when switching focus between parent and child editors, and minimize such occurrences through thoughtful layout design. Additional Information:
The issue lies in the selectionChanged function within the ui.ts file of the Editor.js source code, specifically at line 864.
It can be changed this way
if (focusedElement.classList.contains(`${this.Editor.InlineToolbar.CSS.actionsWrapper}`)) {
