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;

benvmatheson · Accepted Answer

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?

artf · Answer

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 propert...

benvmatheson · Answer

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?

Text-shadow removes rgb values when element selected

Question

Answers (3)

Related Questions and Answers

Toolbar Hide text element

Inline CSS Comments break Code Manager

[Bug] Link element selection shows no toolbar

Modal width

Paid Plugins That Match This Issue

Related tutorials

Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉

GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework

Browse Plugin Categories