[Story] RTE Rich text mode on EX

[langleyd]

Description

• As a user
• I want to format message content
• so that I can add structure to my longer messages.

Size estimate

M

Dependencies

• [Story] RTE Plain/Markdown text mode on EX #1936

Acceptance criteria

Formatting buttons

Message content can be formatted with:

• Inline Formatting (Bold, Italic, underline, strikethrough, code)
• Lists(unordered and numbered)
• Blocks (Quotes, Codeblocks)

Hide and show formatting buttons

• Enable rich text formatting buttons from the action bottom sheet
• Quickly hide rich text formatting options with the X button

Message output

When the user presses the send button, the app should send a message event with both: formatted_body containing the HTML output of the rich text editor and body containing the markdown formatted output of the rich text editor.

Out of scope

• Mentions/Slash Commands
• Plain text / markdown
• Links (covered by [Story] Add/edit/delete a link using the RTE in EX #1975)

Sign-off

Android

• Design sign-off on completion
• QA sign-off on completion
• Product sign-off on completion

iOS

• Design sign-off on completion
• QA sign-off on completion
• Product sign-off on completion

Subtasks

Android

Beta Give feedback

1. Replace current composer with rich text editor [Rich text editor] Integrate rich text editor library element-x-android#1172
2. [Rich text editor] Add formatting menu vector-im/element-x-android#1261
   +0
3. Add error tracking
4. Message is interpreted as markdown and cannot be escaped vector-im/element-x-android#1070
   A-Composer A-Timeline O-Occasional S-Major T-Defect X-Needs-Rust +6
   
5. [Android] Add fake mode for compose state for testing matrix-org/matrix-rich-text-editor#796
   Android +1
   

iOS

Beta Give feedback

1. Extract composer toolbar to a dedicated component vector-im/element-x-ios#1427
   +0
2. Initial integration of RTE vector-im/element-x-ios#1464
   +0
3. Add RTE formatting buttons vector-im/element-x-ios#1614
   Trigger-PR-Build +1
   

Other

Beta Give feedback

1. Add binding to create message events from HTML matrix-org/matrix-rust-sdk#2425
   +0
   
2. ffi: use RoomMessageEventContentWithoutRelation for send / reply / edit matrix-org/matrix-rust-sdk#2459
   +0

Links

• Kiwi test case

[jonnyandrew]

@alfogrillo @langleyd I've pulled the error tracking requirement for iOS out of this story into a separate issue to be prioritised separately:

• Rich text editor errors are not tracked element-x-ios#1695

[callumu]

iOS: code block and inline code colours need to be updated to the designs

Android: there is still the border radius issue when moving from one line onto two lines. Code block spacing around the mono font is inaccurate in the composer. Code block and inline code colours are inconsistent in the composer vs on the timeline

[alfogrillo]

iOS: code block and inline code colours need to be updated to the designs

@callumu can you be more specific on this?
What's wrong? The background color looks in line with the design ("color gray 100")

[callumu]

iOS: code block and inline code colours need to be updated to the designs

@callumu can you be more specific on this? What's wrong? The background color looks in line with the design ("color gray 100")

Sorry yes.

On dark mode the text colour for code blocks is the same colour as the background making the text impossible to see.

I also wanted to note that we discussed the difficulty getting inline code and code blocks to match the designs , and it's something to work on when there is more time.

[callumu]

I also noticed on Android that the mono font text size is different for code blocks vs inline code

[callumu]

I think the code block colour error is a bug:

RPReplay_Final1697126127.mp4

[alfogrillo]

On dark mode the text colour for code blocks is the same colour as the background making the text impossible to see.

Just for the record: this seems not to be a color issue, but a bug on the RTE.
Notice how the color changes while typing (especially on new lines).

Simulator.Screen.Recording.-.iPhone.14.-.2023-10-12.at.17.55.20.mp4

[alfogrillo]

I think the code block colour error is a bug:

You found the same problem! 😄

[kittykat]

Any outstanding tasks will be added to element-hq/element-x-ios#1702