[Bug] its not possible to make part of H1 non-bold
Question
Steps:
- open newsletter demo at https://grapesjs.com/demo-newsletter-editor.html
- clean the canvas
- drop "Text Section"
- select any word within H1, e.g. word "title"
- press Bold modifier once or twice
Expected:
- Selected text became non-bold
Actual:
- Text remains bold
Those steps above are for CKE editor, which is now enabled on newsletter demo.
For built-in editor behaviour is a bit different: Selected word is changing its style to non-bold while the editing is activated. Generated html is also contains correct styles. But canvas renders it as bold again, once editing of H1 is finished.
See demo:

Answers (3)
This looks like a flaw of logic to me. <Hn> elements aren't bold, but titles. As you mentioned, even the browser native execCommand, used on built-in editor, doesn't know what to do.
@fedulovivan, do you have a suggestion of a possible HTML markup for the situation?
Hi, @robsonsobral
An html, generated by built-in RTE is correct:
Original:
<h1>Insert title here</h1>
After making word "title" non-bold:
<h1>Insert <span style="font-weight: normal">title</span> here</h1>
The problem is it's not rendered properly on the canvas. The whole text remains bold.
I dig a little into this. After the blur event, the markup changes from <span style="font-weight: normal">title</span> to <span data-gjs-type="default"><span data-gjs-type="text">title </span></span>. If I try again, it becomes <span data-gjs-type="default"><span data-gjs-type="default"><span data-gjs-type="text">title </span></span></span>.
It's hard to have a simple, but functional built-in editor other than markdown.
I couldn't reproduce the error on the newsletter demo. It worked fine.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2403
editor.load possibly causes memory leak
How to reproduce:Naviagate to https://grapesjs.com/demo.htmlOpen browser console (Chrome) and type the following: setInterval(() => editor....
Issue #1224
[Bug] Media query and classes rendering issue
Hi, I was trying to make a responsive layout but I discovered that the device switcher does not work consistently. The issue can be replica...
Issue #2876
[Bug] Resizing frame may be positioned around invalid element
Steps to reproduce:open newsletter demo at https://grapesjs.com/demo-newsletter-editor.htmlclean canvasplace "1/3 section"place "Image" in...
Issue #2196
[Bug] Link element selection shows no toolbar
Steps to reproduce: add Text, select a word, click on Link icon in RTE panel, select a Link. Expected behaviour: when I select Link I expec...
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.