Its not possible to make part of H1 non-bold
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?
Read full answer below ↓Question
Steps:open newsletter demo at https://grapesjs.com/demo-newsletter-editor.htmlclean the canvasdrop "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-...
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...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.