ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Toolbar in InlineEditor is wrongly positioned when CKEditor is nested in fixed block

Open GrabowskiM opened this issue 4 months ago • 1 comments

📝 Provide detailed reproduction steps (if any)

Ready code: https://jsfiddle.net/s9rzmwvn/

  1. Create structure so that Inline CKEditor is nested in overflow-y: scroll div that starts from certain point on page (like 200px from top in my example)
  2. CKEditor has to also be nested in some div that has position: fixed and starts before block from point 1 (top position for CKEditor has to be higher than block with overflow)
  3. Focus CKeditor to show toolbar

✔️ Expected result

Toolbar is glued to the top of CKEditor

❌ Actual result

Toolbar is position somewhere in the middle of editor, to be more precise: it's positioned in the place where block with overflow starts

❓ Possible solution

Bug is caused by Rect class, or rather its function getVisible that is used to position toolbar. while loop traverse from CKEditor element up to body element, where in this case it probably should stop on parent that has position: fixed https://github.com/ckeditor/ckeditor5/blob/453f50748a12e87d36c64d395f9fb24f3cc883a4/packages/ckeditor5-utils/src/dom/rect.ts#L254

📃 Other details

  • Browser: …
  • OS: …
  • First affected CKEditor version: …
  • Installed CKEditor plugins: …

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

GrabowskiM avatar Oct 09 '24 08:10 GrabowskiM