BUG: ColorPicker Offset incorrect when Panels are outside of Editor Container

[rhoenerSBS]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v122

Reproducible demo link

https://grapesjs.com/docs/getting-started.html#style-manager

Describe the bug

How to reproduce the bug?

1. Go to the "StyleManager" section of the "Getting Started" doc from GrapeJS
2. Try to use the color picker in the editor example of that section.
3. Even if you add "position:relative" to .editor-canvas the color picker still calculates a wrong offset when the panels are outside of the editor container

What is the expected behavior?
the color picker shows up next to the corresponding input

What is the current behavior?
the relative offset is calculated incorrectly and the colorpicker sits outside of the editor window

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

@bernesto can you check this one as it seems to be related to your changes

[bernesto]

Yes, I see the issue. The logic needs to account for when the parent is outside of the container. Let me see what I can do there.

[bernesto]

Hi @artf,

The root issue is that we are trying to place a popover palette absolutely positioned over another element at an arbitrary location on the page. And we need to do this even when the origin element is outside of the editor container node.

To meet this requirement, the popover palette can not be contained anywhere within an offsetParent, and further it must be at the highest z-index. Otherwise it will be subject to the visible area of it's offsetParent and ordered by the parent's z-index.

In my prior patch, it appeared to work because the example editor took up the full window, and thus, left: 0 and top: 0 inside the editor element were left: 0 and top: 0 inside the body as well, and the parent for spectrum was rooted right under the top most editor node placing it at the same coordinates.

At the time, I didn't consider that the StyleManager may not be within the editor element; and that we'd never find the root element as we climbed the tree. This resulted in the coordinates of the palette relative to the origin input being inaccurately calculated in getOffset.

In InputColor.ts we append the container for spectrum to the editor node. Which will work in instances where the editor contains the InputColor element and the palette, but not outside of it.

To resolve this, we need to move the Spectrum palette container all the way to the body instead.

      var colorEl = $(`<div class="${this.ppfx}field-color-picker"></div>`);
      var cpStyle = colorEl.get(0)!.style;
      //var elToAppend = em && em.config ? em.config.el : '';
      var elToAppend = $('body');
      var colorPickerConfig = (em && em.getConfig && em.getConfig().colorPicker) || {};

That said, and as expected... appending Spectrum's parent container at the body has the cascading effect of not inheriting the editor styles either. As shown below:

vs.

We'd need to remove all of the .gjs-editor-cont parent classes in the style sheet, or replace them with something like .gjs-editor-sp and add that to the container.

Do you have any issues with these changes?

[artf]

Fixed by @bernesto here