Unable to interact with tools that are overlapping another editorjs instance

[PluTiper]

I noticed an issue when you have multiple editorjs instances close to each other you are unable to interact with the tooltip options that are overlapping the other editor.

Steps to reproduce:

1. Create at least 2 editorjs instances with min-height: 0 that are close to one another.
2. Try to interact with buttons that are overlapping the other editor's text area.

I created a simple stackblitz project that displays the issue: https://stackblitz.com/edit/vitejs-vite-yq3edc Try to move or delete the paragraphs or click inside the link input box in the top editor.

The issue can be solved by manually increasing the "codex-editor" class's z-index.

Expected behavior: Be able to interact with all of the opened tooltip options without manually changing the z-index.

Screenshots:

Device, Browser, OS: Tested on the newest versions of Firefox and Chrome.

Editor.js version: 2.27.0

Plugins you use with their versions: None

[AdnanSoftograph]

Did you manage to solve it somehow?

[PluTiper]

Did you manage to solve it somehow?

Hi, I ended up writing a function inside onReady that removes the "active" class from all wrappers and adds it to the one that is clicked. Then in css I used the "active" class to increase the z-index of the clicked wrapper. Here is an example: https://stackblitz.com/edit/vitejs-vite-2hajxt

This may not be the best solution, but it worked for me and I did not want to spend more time on this issue.

[AdnanSoftograph]

Did you manage to solve it somehow?

Hi, I ended up writing a function inside onReady that removes the "active" class from all wrappers and adds it to the one that is clicked. Then in css I used the "active" class to increase the z-index of the clicked wrapper. Here is an example: https://stackblitz.com/edit/vitejs-vite-2hajxt

This may not be the best solution, but it worked for me and I did not want to spend more time on this issue.

I found a class called .codex-editor , I used unset on the z-index and seemed to work for me, If i find any bug on my implementation I will try your solution. Thank you for your reply.

[micoraweb]

I solved it with the following 'hack':

added custom css:

.codex-editor { z-index: unset; }

initializeEditorInstances() { document.addEventListener('DOMContentLoaded', () => { const editorElements = document.querySelectorAll('[id$="_editorjs"]'); const editorCount = editorElements.length;

    editorElements.forEach((element, index) => {
        const editorId = element.id;
        const editorInstance = this.editorJsHandler.initializeEditor(editorId);

        //Hack! Set the z-index of the editor to be in reverse order of the editor count
        //This is to fix stacking issues with multiple editors on the same page
        editorInstance.isReady.then(() => {
            const editorDiv = element.querySelector('.codex-editor');
            if (editorDiv) {
                const zIndexValue = editorCount - index;
                editorDiv.style.zIndex = zIndexValue;
            }
        }).catch(e => {
            console.error('Error during Editor.js initialization:', e);
        });
    });
});

}

[apjyotirmay]

@micoraweb thank you! Your hack works like a charm