List text gets bigger with every click of heading tag

[tomgiam]

When I have a list (ordered or unordered) and I click on any of the Headings (e.g. h1, h3 etc.) The font gets bigger and bigger and the html contains multiple adjacent h1 or h3. It should toggle between h1 and h3 and not add more nested heading tags.

[mohamed-ikram]

@tomgiam I have faced an issue if I selected h1 or h3 it shows bold as active style did u face the issue

[tomgiam]

@mohamed-ikram I have not seen that problem. The h1 and h3 text is bold, the html it produces is correct. If I click on return to go to a new line, any text I type there is no longer bold. Only the text on the same line as the h1 or h3 is bold.

[gontovnik]

I am facing the same problem. @stulip, is it something that can be easily fixed? I am happy to help.

[tomgiam]

@gontovnik you can try something like this. Whenever the text changes (onChange={this.handleChange}) read the html, replace any double heading tags with single heading tags and update the html (i.e. h1 tag immediately followed by another by h1 tag) and write it back. Same for ending tags and h3 tags.

[mchriss]

@gontovnik you can try something like this. Whenever the text changes (onChange={this.handleChange}) read the html, replace any double heading tags with single heading tags and update the html (i.e. h1 tag immediately followed by another by h1 tag) and write it back. Same for ending tags and h3 tags.

How do you write it back in the editor programmatically without resetting the cursor position? If I call the ref.setContentHTML function, it does solve the fontsize issue, but the cursor gets moved to the start on every keypress