Inline CSS Comments break Code Manager
Question
Apparently this is valid piece of html and css:
<div style="color: red; /* height 200px; */; font-weight: bold;">
(Hence the commented out height property)
Grapesjs has trouble dealing with such attribute as the style attribute on the model is stored as this:
The big problem is that CssGenerator's buildFromObject considers /* as part of the rule name for /* height, and concatenates it the whole css string. So the css code is basically commented out when it reaches this model and is rendered unusable blob of commented out css.
Obviously the real fix is not on CodeManager. Whoever parses /* height to be a rule name is making a mistake.
Answers (3)
Alright I finally managed to reproduce this again. Reopening with better fiddle.
The code inside gjs is
<p style="/* color: #ffffff; */"></p>
<span style="color: red;">Bar</span>
The CSS retrieved by editor.getCss() is:
* { box-sizing: border-box; } body {margin: 0;}.c620{/* color:#ffffff;}.c629{color:red;}
The bug is that the /* color:#ffffff; doesn't have the closing comment tag. Therefore, it'd render any css that comes after it.
My apologies for the late response.
Hi Emil, I tried this https://jsfiddle.net/37n5691f/ but can't see the issue
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2207
[BUG]: Can't drag component if there is some space on top/left with Mode Absolute
Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See F...
Issue #1526
[QUESTION] how to make fullscreen command
Hi, unfortunately I do not find documentation and can't manage to get it understand from code: I know there is a built-in command 'fullscre...
Issue #1703
[Question] How to allow special characters in class name or data attribute?
In my HTML code, I have some variable placeholders defined in element's class name or data attributes. For example, consider following code...
Issue #2026
[Feature request] style manager css functions (for example transform: rotate(90deg)) accepts only one parameter
I would like to provide an option for the css function translate(x,y) but the addProperty parameter functionName accepts only one parameter...
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.