El desplazamiento de ColorPicker incorrecto cuando los paneles están fuera del contenedor del editor

Hola @artf,

El problema raíz es que intentamos colocar una paleta popover absolutamente situada sobre otro elemento en una ubicación arbitraria de la página. Y necesitamos hacer esto incluso cuando el elemento de origen está fuera del nodo contenedor del editor.

Para cumplir este requisito, la paleta popover no puede contenerse en ningún lugar dentro de un 'offsetParent', y además debe estar en el índice z más alto. De lo contrario, estará sujeto al área visible de su 'offsetParent' y ordenado por el 'z-index' del padre.

En mi parche anterior, parecía funcionar porque el editor de ejemplos ocupaba toda la ventana, y así, 'left: 0' y 'top: 0' dentro del elemento editor también estaban 'left: 0' y 'top: 0' dentro del cuerpo, y el padre de spectrum estaba rooteado justo debajo del nodo superior del editor, situándolo en las mismas coordenadas.

En ese momento, no consideré que el StyleManager no estuviera dentro del elemento editor; y que nunca encontraríamos el elemento raíz mientras trepábamos al árbol. Esto resultó en que las coordenadas de la paleta relativas a la entrada de origen se calcularan inexactamente en 'getOffset'.

En 'InputColor.ts' añadimos el contenedor de Spectrum al nodo editor. Que funcionará en casos donde el editor contiene el elemento InputColor y la paleta, pero no fuera de él.

Para resolver esto, necesitamos mover el contenedor de la paleta de Spectrum hasta el cuerpo en su lugar.

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

Dicho esto, y como era de esperar... añadir el contenedor padre de Spectrum en el cuerpo tiene el efecto en cascada de no heredar los estilos de editor. Como se muestra a continuación:

! [imagen](https://github.com/GrapesJS/grapesjs/assets/1020507/ccc6d3a9-4be9-4b43-addd-8af052b04a8a)

vs.

! [imagen](https://github.com/GrapesJS/grapesjs/assets/1020507/e620c256-d278-43ed-899b-a61ba1142a24)

Tendríamos que eliminar todas las clases padres '.gjs-editor-cont' en la hoja de estilo, o reemplazarlas por algo como '.gjs-editor-sp' y añadirlas al contenedor.

¿Tienes algún problema con estos cambios? 

@bernesto puedes comprobar este, ya que parece estar relacionado con tus cambios

Sí, veo el problema. La lógica debe tener en cuenta cuándo el padre está fuera del contenedor. Déjame ver qué puedo hacer ahí.

Gracias por informar de esto, @rhoenerSBS.

Buena pregunta sobre ColorPicker Offset incorrecto cuando los paneles están fuera del contenedor del editor. El enfoque recomendado con ProseMirror es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!