[Bug] its not possible to make part of H1 non-bold

[fedulovivan]

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:

[robsonsobral]

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?

[fedulovivan]

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.

[robsonsobral]

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.

[fedulovivan]

Provided steps are reproducible for me on newsletter demo on macos 10.14.5 on four different browsers:

• chrome 83.0
• safari 12.1.1
• opera 68.0
• firefox 70.0

For chrome html markup right from canvas:

• right after drop <h1 data-gjs-type="text" draggable="true" data-highlightable="1" class="heading gjs-selected" id="id8q">Insert title here</h1>
• after first click on B icon (B is deactivated) <h1 data-gjs-type="text" draggable="false" data-highlightable="1" class="heading gjs-selected cke_editable cke_editable_inline cke_contents_ltr cke_show_borders cke_focus" id="id8q" contenteditable="true" spellcheck="false">Insert <strong>title</strong> here</h1>
• after blur <h1 data-gjs-type="text" draggable="true" data-highlightable="1" class="heading cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" id="id8q" contenteditable="false" spellcheck="false">Insert <strong>title</strong> here</h1>
• after second click on B (B is activated)<h1 data-gjs-type="text" draggable="false" data-highlightable="1" class="heading cke_editable cke_editable_inline cke_contents_ltr cke_show_borders gjs-selected cke_focus" id="id8q" contenteditable="true" spellcheck="false">Insert title here</h1>
• after blur <h1 data-gjs-type="text" draggable="true" data-highlightable="1" class="heading cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" id="id8q" contenteditable="false" spellcheck="false">Insert title here</h1>

Markup and CKE behaviour are correct. Looks like this is styling issue only.

[artf]

I'm not sure it's something fixable on our side. It's more like CKE behavior which doesn't see <h1> as a bold element. I'd close this for now, but I welcome to hear good workarounds/fixes