Support for links in RichText

[koke]

We currently have basic styling options but we don't support adding and editing links yet.

For reference, here's how adding a link looks in Aztec:

And how the add/edit UI looks on the web:

I think for the alpha we could do with the simpler approach we can implement (a dialog) but we should do some design explorations for the beta. I'm not sure the existing floating UI that we have on the web will work great on mobile. cc @iamthomasbishop

[iamthomasbishop]

I think for the alpha we could go with the simpler approach we can implement (a dialog) but we should do some design explorations for the beta

I've already done some explorations of this, utilizing the bottom sheet pattern combined with elements from the existing dialog/table view. It looks like this (iOS):

[koke]

I spent some time looking at this, so I'm making some notes of what I know so far.

First, I tried the solution that was closer to Gutenberg by using @wordpress/format-library to handle the formatting toolbar. This would be ideal, but to make it work we'd need the native RichText to start using the new internal structure, which seems like a good amount of work.

The quick solution seemed like reusing whatever the apps have in place, but looking at AztecPostViewController on iOS, it seems it's not done in Aztec but in the apps, so we'd need to have a method in the bridge to bring up link settings. It seems a bit fragile, but doable, although it requires some work as well to decouple that from AztecPostViewController, and we would have to do something similar for Android, so it'd be twice the effort.

The intermediate solution is to build the link settings UI in JavaScript (so we're closer to doing it the right way), but let RichText handle it instead of format-library. This seemed reasonable, but it requires some changes to how Aztec communicates with Gutenberg. Currently, changing formats is oversimplified and you can only tell Aztec to toggle a format (bold, italic, ...) in the selected text, but a link it's not just something you toggle, you need to pass the URL (and other options). This would require changing the protocol with which Gutenberg communicates format changes to Aztec, or expose the selected text range to RN and dealing with the format operations there (closer to the desired state). I tried the second one, but I think I hit some RN oddities when I added a new onSelectionChange prop to the Aztec view and it told me that was a duplicate.

[koke]

Another update. I managed to make the format-library work in #275, although it's not working great.
I'm seeing some issues with isSelected where sometimes a button won't change the format and sometimes you'd see more than one button of each kind in the toolbar.

When it works, it only does so for selected text, not for changing the format as you type. The reason for this is that applyFormat uses a formatPlaceholder for the typing formats, which doesn't directly translate into HTML. I tried to port applyRecord to native, but I was hitting an error with jsdom. One of the RichText DOM manipulation functions (apply) creates an empty DOM that it then places the new record into, then it both traverses the old and new DOM trees to decide what to change, using replaceChild, appendChild, and removeChild. The jsdom implementation of these functions will throw an exception if the nodes have different parent documents.

I started thinking of an approach where we could just feed the changed record to aztec, but it sounds really hard an in the wrong direction, so I'm thinking the next goods step might be trying to make jsdom OK with that.

Other than that, we still have to build the whole link editing UI: if you tap the link button now it'll crash

[koke]

As discussed in Slack:

• The iOS implementation was done by @etoledom in Adding set/remove link methods. react-native-aztec#87
• @marecar3 opened PR for Android in Feature/set remove link interface android react-native-aztec#99
• @Tug has built the UI to add/edit/remove links in Use format-library for the formatting bar #275

[diegoreymendez]

Assigning this issue to me as well for tracking purposes since I'll now be checking the iOS side of it.

[diegoreymendez]

Removing my assignment for now as I don't currently have any pending tasks on this. Also my work was limited to reviewing existing PRs.

Let me know if there's more that needs to be done.