Adding and displaying external text links on the whiteboard

Description

Problem

Currently, it's not possible to add a link (URL) to an external resource on the whiteboard.

Solution

Specs updated, related to Whiteboard: Text Editor v.2

Insert clickable links (URL) into text for reference an external resource on the whiteboard.

We are adding a new action Create link for links in the toolbar.

Paste link from clipboard

If user already has the URL copied to clipboard:

they can simply insert the link as a new text block on the whiteboard using ⌘Cmd+V / Ctrl+V
they can select a specific part of text and press ⌘Cmd+V / Ctrl+V to insert the link
- change the style of a specific part to underlined text

Add a URL without creating a link:

Use the keyboard shortcut ⌘Cmd+Shift+V / Ctrl+Shift+V

Text block

A specific part of the text:

Select a specific part of text in a text block

Click Create link action, or use the keyboard shortcut: ⌘Cmd+K / Ctrl+K

Enter or paste the URL from your clipboard

The highlighted part of the text is transformed into a link

The whole text block:

the Create link action should be inactive when selecting a text block, as we currently do not support the case for the entire text block

Shapes

Shape with text

Select a specific part of text in a shape
Click Create link action, or use the keyboard shortcut: ⌘Cmd+K / Ctrl+K

Enter or paste the URL from your clipboard

The highlighted part of the text is transformed into a link
If the user has selected a shape with text, but has not selected parts of the text, we disable the Create link action

Shape that does't include text

If there is no text in the shape, we disable the Create link action

Sticky Note

Specific text part in a note

Select a specific text part in a note

Click Create link action, or use the keyboard shortcut: ⌘Cmd+K / Ctrl+K

Enter or paste the URL from your clipboard

The highlighted part of the text is transformed into a link
If the user has selected a sticky note with text, but has not selected parts of the text, we disable the Create link action

Note that does't include text

If there is no text in the note, we disable the Create link action

Preview and edit and remove a link

Preview

We apply underlining to all or part of the text that contains a link.

When hovering over the underlined text, we show a popover under which contains the link itself

We display the link preview only to the length of the popover, and hide the rest of the link behind an ellipsis
In text editing mode, if the cursor is on a link, we show a popover which contains the link itself and actions open link , copy link to clipboard, unlink

Edit link

In text editing mode, if the cursor is on a link, we show a popover which contains the link itself and actions and the user can change the link in the input, saving the changes by pressing the enter button

Existing link in the entire text block or in a highlighted piece of text

If a user selects a specific piece of text that contains a link or multiple links, when adding a new link to the selected text, all links are replaced with a single one.

Sections

Text blocks and objects in the section behave as described above.

We are not adding a link to the section itself for now.

Multiple text blocks or objects

If multiple text blocks or objects are selected, we disabled the Create link action.

Images

We are not adding links to images for now.

Insert Fibery link to entity or view

If a user inserts a link to an entity or view, we automatically convert it into a card. Links to documents, entities and views should be pasted as cards

🦄 Transform link to Embed

Will be moved to a separate feature Whiteboard: Transform link to Embed

Figma mocks

https://www.figma.com/design/wZlrqQ7MNLP4vvWWecXM3I/PA---Whiteboard?node-id=1598-3828&m=dev&t=TkQNME507JyJVCtq-1