BlockEditor - Add Link within dotCMS

[wezell]

Is your feature request related to a problem? Please describe. As a users I want to to search for linkable content within dotCMS (page, urlmap, file, dotAsset) to make linking within dotCMS easy.

What is linkable:

1. url mapped content (on the same host?)
2. Any file or dotAsset (use the /dA pathing.
3. Any htmlpage (on the same host ?).

Describe the solution you'd like We can transform the current UI into one to do search, here is the idea:

https://user-images.githubusercontent.com/751424/167724847-18839ce7-fb62-47df-89b6-f1008742ba45.mp4

Describe alternatives you've considered We need to search for URL path and title of all the pages content types in the system.

Additional context

• We need to query by current language
• We have to make sure that the whole process can be done with keyboard interactions
• We need backend work so if the page change the URL it doesn't breaks the links

Mocks and prototypes

• Design
• Prototype

[fmontes]

Question... what about if the urlmap changes? are we updating the editor content?

• We can save the identifier

[rjvelazco]

Fixed:

1. Paste links in the link-form input should not close the form link.
2. Paste a link directly into the editor should work. ~3. Type a link directly in the editor (E.g: google.com ) and it should be set as a link.~
3. ScrollIntoView on the suggestions list.
4. Improve Link Form plugin states.
5. We now can use PrimeNG components inside the editor.

Behavior

1. You should be able to open the form link by clicking on the corresponding button in the menu.
2. If we click on the corresponding button in the menu when the form is open, it should close.
3. If we hit Escape we close the form link.
4. If the link form does not have enough room to open down, it should open up.

On Search Suggestions

1. Display a loading on search.
2. Min 3 characters to start searching for a contentlet.
3. While typing a valid URL on the link form input, we do not search contentlets.

Suggestions

1. If you type in the link form input, we show dotcms content suggestions:
2. Link Suggestions have full keyboard support:

• When contentlets are not available:
  • If we hit Enter we set the current input value as a link.
• When contentlets are available:
  • On ArrowUp and ArrowDown we update the selected item.
  • If we hit Enter we set the ‘url’ of the selected item.
  • If we hit Escape we close the form Link.

6. The link-form should not hide on the suggestion list scroll but on the document scroll.

On Click

1. If we click a link, we select the entire node and show the link form.
2. Bubble menu should not be open if we open the form link click.
3. If the link form was open on click, when we close it, the bubble menu should not be open.
4. If the form link is open on click, and the selected node is clicked again, we hide the link form and enabled link editing.

On Double Click

1. If we double click on a link, we select the entire node and show the link form.

[hmoreras]

Scenarios I found:

1. When we hit scape we need to stop the propagation of the event when the link dialog is open, so do not close the modal of the edit mode.
2. if a link is without the http like facebook.com, is not opening in another tab.

[rjvelazco]

PR: #22879

[fmontes]

More info.

https://user-images.githubusercontent.com/751424/187983148-0ea007da-3add-4f07-931e-d048f043165b.mp4

[josemejias07]

Approved QA - Tested on 22.09_845c64ab_SNAPSHOT // Docker // FF