Blocks - Editable links

[adrian-moisa]

Can't edit links. Typing in a link splits the link. Can't remove links

The current behaviour for links is rather crude. They don't behave as typical word processing links. Text inside of links should be editable while preserving the metadata. This behaviour works just fine when applying such an edit for other attributes such as bold.

To the best of my current understanding typing in link should preserver the style. There must be some rule that overrides this behaviour. We need to check the callstack to see what exactly happens when inserting a char in a link.

As for editing links, look at how reddit, or google docs deal with the situation. We should follow the reddit solution. We can make use of the knowhow we have with markers and rectangles to position boxes near a link.

Technical suggestion

• We need a dedicated state to track which is the currently tapped link. Inside the state we will store: url, nam, rectangles.
• When tapping on a link the state is updated. When tapping outside of link the state is cleared.
• If state is not null then we display the link editor tooltip widget. The controller will have to host code for editing links.
• Since we create this code we might as well expose it to the public API so we can edit links programatically as well.
• We can have an additional state to keep all links. We can identify them and cache their rectangles the same way we did it for the headings. This state will be exposed outside the same way we expose the headings. This list will also be super useful for populating the related panel in VS articles.
• Once tapping the link the text selection changes. which triggers the build cycle. Which triggers the build ready callback. In this callback we can hook our code for displaying link cards.
• Once again we can take inspiration from another feature: the quick menu demo. We could follow the exact same approach for placing the link edit tooltip/card. And once again we go with an API design that exposes this feature to the client instead of encapsulating it in the editor. The reason to do so is to allow other devs to implement whatever they believe is best when editing links.
• In the future we might. Create some ready made plugins to add the edit links or markers features as simply plug and play setups for novice devs. But for now we desire maximum flexibility for expert devs. VS requires this setup. And since we don't want to impose the features of VS onto others therefore we use this approach again.
• Setup demo showcasing how to Insert link via controller 970. The entire API already exists. It needs a demo.

https://user-images.githubusercontent.com/11160141/169508793-b2eb6a73-00b2-4129-a31a-0ef7f1c1ba6d.mov

Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

[DariusMuscalu]

For styling:

• Add hover link color
• Make the cursor to pointer while hovering a link

[DariusMuscalu]

• Added link menu, now when tapping on a link, a menu opens, displaying the URL of the link, and 3 buttons (edit link, remove link from text/url, and copy link to clipboard).

There are some small fixes to be done, like the styling in the above comment, and adding the functionality for the copy to clipboard button

https://user-images.githubusercontent.com/72706978/222151071-191321dd-24ba-45f7-a3cc-9a393476b4e8.mp4

[DariusMuscalu]

Also, we need to add collision detection

[adrian-moisa]

Remaining issues:

• Use overlay instead of stack
• There's no new method in the controller that enables me to remove links programatically. This method should be mirrored from LinksService
• Section comments and. rename _removeLinks() to indicate selection
• missing gif in readme.md