Page MenuHomePhabricator

[Task] Reading controls popover support and bold / italics formatting
Closed, ResolvedPublic

Assigned To
Authored By
Seddon
Oct 3 2023, 2:36 AM
Referenced Files
F41819361: Screenshot 2024-02-08 at 3.38.03 PM
Feb 8 2024, 9:40 PM
F41819348: Screenshot 2024-02-08 at 3.36.25 PM.jpeg
Feb 8 2024, 9:40 PM
F41817600: IMG_5860.PNG
Feb 8 2024, 6:22 PM
F41817597: IMG_5859.PNG
Feb 8 2024, 6:22 PM
F41817593: IMG_5858.PNG
Feb 8 2024, 6:22 PM
F41817516: IMG_338DBA673D08-1.jpeg
Feb 8 2024, 6:22 PM
F41744996: IMG_0325.PNG
Feb 2 2024, 12:16 AM
F41744979: IMG_0326.PNG
Feb 2 2024, 12:16 AM

Description

Dependencies
T347870
T344508

Goal:
Add first formatters and connect theming popover!

Requirements:

  • Add bold, italic, and bold italic button
  • Add formatter inserts / deletions for bold, italic, and bold italic
  • Add selection states for bold, italic, and bold italic
  • Add syntax highlighting for bold, italic, and bold italic.
  • Add formatters for double tap on text.
  • Provides support for theming popover font size slider and theme change
  • Provides support for syntax highlighting toggle
  • Fix any cursor jumping
  • Confirm RTL works

Ticket UI focus

Text formatting submenuDouble tap, Syntax highlightingReading controls popover
IMG_0326.PNG (2×1 px, 307 KB)
IMG_0325.PNG (2×1 px, 461 KB)
Screenshot 2024-02-01 at 7.09.16 PM.jpeg (2×1 px, 321 KB)

Mocks
Figma

Testing Notes
Please test:

  1. Reading controls popover support (theme selection, syntax highlighting toggle, font size slider)
  2. Bold/italics syntax highlighting
  3. Bold/italics button function

Event Timeline

Seddon renamed this task from [Task] Barebones implemetation of formatting toolbar to [Task] Barebones implemetation of NativeEditor.Oct 4 2023, 5:27 PM

PR: https://github.com/wikimedia/wikipedia-ios/pull/4679 - adds syntax highlighting for bold / italics, plus syntax highlighting toggle support

PR: https://github.com/wikimedia/wikipedia-ios/pull/4681 - adds button selection states for bold and italic. Also adds formatting insertion and deletion upon button tap.

So far I haven't seen much cursor jumping. Sometimes it jumps to the last text the user had selected, when you bring up the keyboard formatting input view, but I'm not sure if that's unexpected. Going to check this off for now and keep an eye out.

RTL mostly works. I have a fix for the expanding input accessory view orientation in T347870

Tsevener updated the task description. (Show Details)
Tsevener moved this task from Doing to Needs Code Review on the iOS Release FY2023-24 (Archive) board.
Tsevener subscribed.

Can be tested in TestFlight Experimental build 7.4.6 (60). Moving to Needs Design Review.

Tsevener raised the priority of this task from Low to Medium.Jan 19 2024, 9:31 PM
Tsevener renamed this task from [Task] Barebones implemetation of NativeEditor to [Task] Theming popover and bold / italics formatting.Feb 1 2024, 11:55 PM
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener renamed this task from [Task] Theming popover and bold / italics formatting to [Task] Reading controls popover support and bold / italics formatting.Feb 1 2024, 11:58 PM
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
Tsevener updated the task description. (Show Details)
ABorbaWMF subscribed.

Looking pretty good to me, aside from the comments below, on 7.4.7 (3162)

I noticed some oddities that I wanted to pass on:

Bold/Italics seem to work when using the buttons, but when typing in apostrophes, using the four apostrophes (e.g. ''''Bold Italics'''') does not produce the expected result.

IMG_338DBA673D08-1.jpeg (2×1 px, 458 KB)

When highlighting one word in a multi-word bold text string, selecting the bold button to remove bolding, there are some odd results. If the word is unbolded, it adds apostrophes rather than removing the bolding, resulting in bold and italics.

HighlightUnboldingPreview
IMG_5858.PNG (2×1 px, 369 KB)
IMG_5859.PNG (2×1 px, 294 KB)
IMG_5860.PNG (2×1 px, 685 KB)

@ABorbaWMF

Bold/Italics seem to work when using the buttons, but when typing in apostrophes, using the four apostrophes (e.g. ''''Bold Italics'''') does not produce the expected result.

I set it up to bold and italic using five apostrophes (3 for bold, plus 2 for italics). Let me know if I set that logic up wrong though.

When highlighting one word in a multi-word bold text string, selecting the bold button to remove bolding, there are some odd results. If the word is unbolded, it adds apostrophes rather than removing the bolding, resulting in bold and italics.

Good catch, it is a bit weird. Looks like our old web editor can do this properly. I checked the Android app and their implementation matches what our native editor does.

iOS web editor

Screenshot 2024-02-08 at 3.36.25 PM.jpeg (2×1 px, 690 KB)

Android editor

Screenshot 2024-02-08 at 3.38.03 PM (2×1 px, 1 MB)

JTannerWMF claimed this task.