Balloon panel is misplaced if there's more than one formatted text field

Not sure how supported this is but if you're looking into this, in `idattributesui.js` in the plugin, in the `_showForm()` method, just needs a better selector for the target. Right now it is only using a queryselector on a class, so it will always be the first one on the page.

I'm not a CKEditor plugin writer or anything but, I changed it to this, based on another plugin I was looking at. Places the label in the element you are adding the id to.

const view = this.editor.editing.view;
const viewDocument = view.document;
let target = null;

// Set a target position by converting view selection range to DOM.
target = () => view.domConverter.viewRangeToDom(
  viewDocument.selection.getFirstRange()
); 

Ali_W → made their first commit to this issue’s fork.

Patch to make balloon pop up position more specific to the button clicked

Rerolled the patch after update

Rerolled again as previous version didn't work

Re-roll again to accommodate latest dev changes

Updated patch after latest code updates
included changes to src files too

The latest patch/MR fixes the issue for me.

Wouldn´t it be the easiest solution to just use the current ckeditor-container instead of the whole document to search for our button?

const target = editor.ui.view.element.querySelector( '.element-add-attributes-btn' );

I tested that and yes, that works too! Thanks for the suggestion.

dieterholvoet → closed merge request !1

dieterholvoet → changed the visibility of the branch 3391771-balloon-panel-is-misplaced to hidden.

dieterholvoet → closed merge request !4

Automatically closed - issue fixed for 2 weeks with no activity.

The problem seems to be back with Drupal v10.5.1 (CKEditor v45.2.0).

When multiple formatted text fields are present and an ID attribute balloon is shown, scrolling will trigger the sticky mode of the CKEditor toolbar but the balloon wont follow.

This is working as expected with only one formatted text field on a page.

Should we open another issue for this one?

Another thing I note is that focusing outside of the balloon force a scroll to the top of the page.