Text formatting mode lost after backspace is used

[guarani]

Description

If the user has formatting ON (e.g. bold) and types text, then deletes a portion of it, the formatting is turned OFF as soon as the backspace key is tapped.

Step-by-step reproduction instructions

1. In a paragraph block, turn on bold
2. Type some text, notice that the text will be bold as expected
3. Delete the last character(s)
4. Again type text, notice that the new text is not bolded (unexpected)

Expected behaviour

I expect that deleting text should not reset formatting (bold, italics, strikethrough, etc). On Gutenberg web and the Gutenberg Android demo app, deleting does not reset formatting.

Actual behaviour

Tapping backspace resets formatting to its default state of regular text weight, emphasis, etc.

Screenshots or screen recording (optional)

bold-ios.mov

Device information

• Device: iPhone 12
• Operating system: 14.5
• Gutenberg demo app for latest commit on trunk: fcc32ee

Additional info

First reported in wordpress-mobile/gutenberg-mobile#757 (comment)

[hypest]

Possibly also related: wordpress-mobile/gutenberg-mobile#2055

[fluiddot]

Step-by-step reproduction instructions
3. Delete the last character(s), notice that the bold format button is now in its OFF state (unexpected)

@guarani Not sure if it refers to the bold format button located in the toolbar, if so, I noticed in the video and testing locally that the button is in its enabled state after pressing backspace, is this step accurate?

[guarani]

You're right @fluiddot, I've now fixed that step above (not sure why I had that in there originally).

[fluiddot]

After checking both web and native version behaviors related to the calculation of the active format (reference), looks like there are some differences but I couldn't find yet the culprit of this issue. I'll keep exploring the web version (reference) in case there are any potential cases we might be missing in the native version hence, we should incorporate.

[fluiddot]

Upon further investigations, I found that the issue is unrelated to what I stated in the previous comment but Aztec which automatically recalculates the active text format when pressing the backspace key (i.e. deleting backward), as shown in the following example on an empty paragraph:

1. Enable bold format (note the font attribute attribute font-weight: bold)

activeFormats props passed from RichText to Aztec: [ { type: 'core/bold' } ]
Aztec typing attributes = {
    NSColor = ...
    NSFont = "<UICTFont: 0x7fa9f93dd6d0> font-family: \"Noto Serif\"; font-weight: bold; font-style: normal; font-size: 16.00pt";
    NSParagraphStyle = ...
}

2. Type 123

Aztec typing attributes = {
    NSColor = ...
    NSFont = "<UICTFont: 0x7fa9f93dd6d0> font-family: \"Noto Serif\"; font-weight: bold; font-style: normal; font-size: 16.00pt";
    NSParagraphStyle = ...
}
activeFormats props passed from RichText to Aztec: [ { type: 'core/bold' } ]
Aztec typing attributes = {
    NSColor = ...
    NSFont = "<UICTFont: 0x7fa9f93dd6d0> font-family: \"Noto Serif\"; font-weight: bold; font-style: normal; font-size: 16.00pt";
    NSParagraphStyle = ...
}
activeFormats props passed from RichText to Aztec: [ { type: 'core/bold' } ]
Aztec typing attributes = {
    NSColor = ...
    NSFont = "<UICTFont: 0x7fa9f93dd6d0> font-family: \"Noto Serif\"; font-weight: bold; font-style: normal; font-size: 16.00pt";
    NSParagraphStyle = ...
}

3. Press the backspace key (note the font attribute change to font-style: normal)

Aztec typing attributes = {
    NSColor = ...
    NSFont = "<UICTFont: 0x7fa9a93abad0> font-family: \"Noto Serif\"; font-weight: normal; font-style: normal; font-size: 16.00pt";
    NSParagraphStyle = ...
}
activeFormats props passed from RichText to Aztec: [ { type: 'core/bold' } ]

This explains the behavior described in the issue, the bold format button is active because it's controlled by the RichtText component, however, the active format in Aztec is different. This change is produced when handling the event produced by pressing the backspace button (reference) which calls the recalculateTypingAttributes function and sets a different format disabling bold (reference). The recalculation logic basically sets the typing attributes by retrieving the attributes of the text located at the current position, since the caret is placed at the end of the text in the example (specifically after text 12), Aztec determines that there's no text format to apply and sets the font style to normal.

A potential workaround for this would be to prevent that Aztec from executing the typing attributes recalculation, and let the RichText component be in full control of the active format. I applied this solution in the following PRs:

• Aztec-iOS PR: Add variable to control whether typing attributes should be recalculated when deleting backward wordpress-mobile/AztecEditor-iOS#1346
• Gutenberg PR: [RNMobile] Fix text formatting mode lost after backspace is used #37676

---

Something I noticed is that on Android this issue can't be reproduced, although it also produces a mismatching on the active format between Aztec and the format toolbar on a different case.

Screen_Recording_20211231-131413_WordPress.Pre-Alpha.mp4

For this case, I opened another PR with a similar change, although for this case, the selected styles (i.e. the active format) were being modified by Aztec on text changes.

• Aztec-Android PR: Prevent update selected styles when text changes on Gutenberg mode wordpress-mobile/AztecEditor-Android#949
• Gutenberg PR: [RNMobile] Fix text formatting mode lost after backspace is used #37676

[guarani]

You're right @fluiddot, I've now fixed that step above (not sure why I had that in there originally).

Oops, seems like I didn't delete this earlier, fixed now.