Heading button in WYSIWYG editor does not always apply instantly when clicked

[anikbrazeau]

Description

Clicking on H2 or H3 does not always immediately apply the styling. Though this is inconsistent.

Steps to reproduce

1. Go to form builder > create a form > edit
2. Click on "Add a form element"
3. Scroll down to "Page text"
4. Add page text
5. Try to click on H2 and H3
6. Type text and then select it and try to click H2 and H3
7. Sometimes it works, sometimes it doesn't

Details

• Browser: Chrome
• Operating system: Windows
• Environment: App router PR
• Language: French
• Viewport: Tablet

Expected behaviour

Formatting applied immediately and predictably

Screenshots or videos

[dsamojlenko]

I think I see what you're seeing, not sure it's a bug (or if it is, if it's one we can fix). What I think is happening:

• add a PageText element
• click h2 or h3
• this will not do anything as you have not cursored into the text area, so there is no text to apply the heading to
• click into the text area
• click h2 or h3
• notice the cursor size changes and when you type its in the new heading size

The key difference being whether the cursor enters the text area first, which initializes the contents of the text area. Until that happens, there is no text to apply the formatting to.

[anikbrazeau]

I think this might be okay to descope, it does not appear to be as jarring now.

When we have more capacity, it seems the behaviour might be different between the "form description" field and an added "page text" field, in terms of whether the cursor is in the text area?

[timarney]

@Abi-Nada can we remove this from the app router work and explore further outside the current epics?

[Abi-Nada]

Yeah, let's descope for now