Comments (4)
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?
from grapesjs.
@bernesto can you check this one as it seems to be related to your changes
from grapesjs.
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.
from grapesjs.
from grapesjs.
Related Issues (20)
- BUG: broken link in the API docs
- BUG: Possible upgrade path issue where 'textnode' is now called 'wrapper' from 0.18 -> latest HOT 1
- BUG: Propagating component defaults can break layers when child comments are introduced HOT 1
- BUG: Whitespace handling in inline elements
- BUG: editing/replacing the text inside of a link HOT 8
- BUG: Wrong Type in ColorPickerOptions Interface
- BUG: Building on Windows 10+ HOT 6
- BUG: XSS vulnerability in iframe attribute src HOT 8
- BUG: The link titles are not editable HOT 2
- BUG: Wrong Type for "content" property in BlockProperties
- BUG: component.get('traits').clone() is no longer available. HOT 1
- BUG: Outlines persist in preview mode HOT 2
- BUG: CSS properties default values HOT 2
- BUG: Editing button text no longer works on 0.21.9 HOT 1
- BUG: How to add a addtional custom block manager like tab or section like block manager and style manager ,and add some blocks it to it? HOT 1
- BUG: typping error in dist/index.d.ts
- BUG: Filtering Blocks does not work as described in Docs HOT 2
- BUG: Unnecessary Canvas style HOT 3
- Interested in Collaboration?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grapesjs.