fix: link preview editor

[henit-chobisa]

Link Views for viewing, copying & editing links in Pages!

Description

The PR adds Link Previews inside Plane Pages, which enables customer to not only views the link but also can edit and remove the links on hover, which was not possible previously even to view the link. The Link Previews are added using floatingUI which can be beneficial for document-editor's upcoming features.

Features

Preview the Link when hovered

This is a basic feature for the Link Previews, the main challenge here was to handle the referenced element, which is variable, as the references element depends on the link embedded by the user. Hence, to determine the position of the floating element and the change it as the reference element changes.

Screen.Recording.2024-01-09.at.2.12.22.PM.mov

Copying Link to the Clipboard

Link can be copied to clipboard, so that can be used with other resources.

Screen.Recording.2024-01-09.at.2.40.46.PM.mov

Remove Link from Text

There are two ways of removing the link from the next, either the button in the linkPreview can be used or Remove Link button from the LinkEditView can be used.

Screen.Recording.2024-01-09.at.2.41.30.PM.mov

Edit Links

Editing/Adding Correct Link Format
When added with the correct link format, the link from the text can be expected to updated.

Screen.Recording.2024-01-10.at.3.32.37.PM.mov

Preserves previous link in case of adding incorrect link format
When added an invalid link, the previous link should be preserved on dismissal of the LinkView

Screen.Recording.2024-01-10.at.3.25.25.PM.mov

Preview Dismissal on Escape / Enter / Focus Change

There are a few ways to dismiss a link view

• To scroll the page
• To click somewhere else in the editor
• Pressing Escape key
• When in Link Edit View, you can press enter on any input and an action will be taken to update the link or the text, followed by the dismissal of the LinkPreview

Screen.Recording.2024-01-10.at.3.29.44.PM.mov

Edit the Text along with the Link

You can edit text along with the link given in the link edit view. Here in the below video you can see that when the input is completely cleared it keeps one letter out of the last text that holds the link. The behaviour is intentional, as we don't want the user to loose the link, when the user clear the text input and add new text in the text input the last character would be removed and there would be completely new text on the place.

Screen.Recording.2024-01-10.at.3.33.32.PM.mov

Challenges

To get the challenges, it is significant to understand how floating UI handles the popovers. Floating UI has two modes, either a JavaScript or a react, where if you use a react mode, you have to determine the reference element and also the floating element. In that context, we can see that our floating element might be an element we know while the reference element is a variable, that we can only determine when the particular link is being hovered upon. Hence

Challenge 1 - To dynamically determine the position of the floating component based on the variable reference element.
Challenge 2 - Also it’s crucial to update the position of the popover when the reference element updates like change positions or scroll
Challenge 3 - We have to determine if we have to remake and destroy the popover every-time or we go along with the react way.
Challenge 4 - We have to destroy the popover all soon as we focus upon the editor.

Stages Further with Links! 🔗

• Adding a link button to add links on the selected text by showing a popover, which is the third component for the LinkView, the LinkInputView which just takes in a link and apply it to the selected text.
• Improve upon the LinkView positioning when the sidebar is opened or the sidebar is closed.