Expectations for Bold functionality

Describe the bug

We are currently trying to add support for headings and we noticed that when you toggle a heading, bold is also toggled.

To Reproduce

Steps to reproduce the behavior:

1. Go to the RoosterJs Demo Site
2. Add a heading
3. Notice the Bold icon is highlighted

Expected behavior

My expectations are that headings and bold are two different states -- heading is a block state and bold is an inline state. The two states are stylistically similar, but they are semantically different. Adding a new heading should only enable the heading state and not the bold state (although a user can choose to also toggle the bold state for all or part of the heading if they so choose).

Additional context

I think styles and semantics are being conflated here. Visually, headings might appear to be bold, but that is a presentational concern of the heading element. Some clients, for example, might choose to render headings as semibold, normal, or thin. Some clients might even choose to give headings an underline (like the headings in this GitHub bug report). The format state for headings shouldn't be based on any of these presentational styles, rather it should be based on the semantic markup.

Here is an example where I change the default styles of the h1 element:

Notice that the heading no longer appears to be bold but bold is toggled in the toolbar. The heading also appears to be italic and underline, but those toolbar icons are not toggled (as I would expect).

Prior art

I've checked this behavior in many other JavaScript rich text editors and they all treat bold as a separate state from heading. Note that not all of them will have a visual distinction, but the markup differentiates the two.

• Lexcial
• CKEditor
• Quill
• Draft.js
• Tiptap
• Slate.js
• TinyMCE

I also tested the behavior in some other clients, and they also treat bold as a separate state from heading.

Microsoft Word

Google Docs