Text-shadow removes rgb values when element selected
Question
Example: https://jsfiddle.net/benvmatheson/g1ft06qh/8/
Import a style with a text property.
text-shadow:rgb(51, 166, 58) 4px 4px 4px;
This works correctly, and the item is displayed correctly. However, once the item is selected, the rgb value is dropped and replaced with 0.
text-shadow:0 4px 4px 4px;
Answers (3)
It looks like targetUpdated is run twice when the element is clicked. Once with the correct value rgb(89, 89, 89) 5px 6px 7px and a second time with rgb cleared 0 5px 6px 7px. This would explain why it's confused whether the first or last number should be interpreted as the color.
Any ideas where this second run would come from?
Yeah, I'm already aware of this issue.
Unfortunately, the Style Manager parser is quite dumb and what it does is simply splitting the value by a separator, in this case ' ' (space), and distributing splits to relative properties by their order in the definition. So, technically, this change would make it work 4px 4px 4px rgb(51, 166, 58), but... unfortunately it doesn't and this is due to CSSOM inconsistency.
Probably the "best solution", in this case, would be to change the text-shadow property definition but, to be honest, I'd prefer to find a more solid solution. A bit smarter parser might be a good start... so, I'm open to any suggestion/help to this issue
This seems like it could turn into a big project due to cross browser dependencies. Would it be worth bringing in a 3rd party module instead of trying to solve this inside grapes?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
Issue #3515
BUG: gjs-selected Style is Hardcoded
This definition: https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306 is a...
Issue #1434
Toolbar Hide text element
@artf Please check you demo page text is hiding under the toolbar. how can we update the toolbar position?
Issue #1577
Inline CSS Comments break Code Manager
Apparently this is valid piece of html and css: <div style="color: red; / height 200px; /; font-weight: bold;"> (Hence the commented out he...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.