Toolbar can render outside of the EditorJS component

[ebrine]

Describe a bug.

Steps to reproduce: It doesn't happen to me everytime, but sometimes when I use my implementation of EditorJS and I hover over the Editor JS component region just as it's loading, the toolbar renders with a negative top value, so it's way above the first component block.

Expected behavior:

I would expect that the toolbar always appears next to the content block hovered, or not at all. I think that means that the top value should only be allowed to be 0px at minimum.

Screenshots:

Device, Browser, OS: Macbook Pro Chrome 14.6.1

Editor.js version:

"@editorjs/editorjs": "^2.30.6",

Plugins you use with their versions:

    "@editorjs/header": "^2.8.7",
    "@editorjs/image": "^2.9.0",
    "@editorjs/paragraph": "^2.11.5",
    "@editorjs/underline": "^1.1.0",

[jakubm95]

I have the same error

[flo3ds]

Same, image plugin cause the bug on toolbar

console.log(r.getBoundingClientRect()); in moveAndOpen(e=this.Editor.BlockManager.currentBlock) return : DOMRect { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 }

[ebrine]

Hey @flo3ds are you suggesting that the bug is in "@editorjs/image": "^2.9.0" and not in this project (editor.js)?

I think the toolbar (with classes ce-toolbar, etc) is rendered in this repo's code, not in @editorjs/image. Let me know if I'm missing something or if you have a suggestion for fixing

[apiaget]

It happens to me too

[curkan]

I have the same behavior, is there a solution?

I checked, this behavior occurs because of

Case with contenteditable="true" if you set it to false, this problem will not occur anymore. It is not entirely clear here whether this problem is in the js or image editor