BUG: GrapesJS export functionality and 'View Code' functionality and the Canvas not operating in a similar manner with regards to hex colors.

[akhalid-dev]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v91

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Headover to the website: https://grapesjs.com/demo.html.
2. Clear the canvas for a simpler demonstration.
3. Drop in a text element from the 'Blocks' section.
4. Select the dropped in text element, and select 'Style Manager', expand 'Typography' section.
5. Paste the Hex Value: '8ceb34'. This will update the text color to green in the GrapesJS canvas.
6. However, when we view generated CSS, or export as zip, the missing '#' sign will be missing and the color won't be applied.

What is the expected behavior?
Either, the color shouldn't be updated in the canvas if the '#' is missing, giving the user a false impression that the color is being applied or the '#' should also be added to the Export to zip, or View Code capability.

What is the current behavior?
Current behavior is that the color applies in the GrapesJS canvas, giving the user the False impression that it works, but upon export or viewing Code, it is not generating proper CSS.

Code of Conduct

• I agree to follow this project's Code of Conduct