Add Preview Edit Links

[petrsvihlik]

Kentico Kontent admin UI now supports navigating to specific content items via URLs in a certain format.

The goal of this task is to enrich the markup of this sample application with the links.

Suggested approach:

• observe the reference implementation in the .NET sample site
  • Preview Edit Links sample-app-net#65
  • https://github.com/Kentico/kontent-sample-app-net/pull/67/files
• copy the CSS stylesheets 1:1.
• implement the preview links on the "About us" page
  • use the JS SDK to generate the links

Motivation

We want to present to our customers an example of this feature – how they can use that

Solution

When
I open About Us preview
Then
I see enabled "Edit mode" in the fixed bar on the bottom of the page
And
I am able to click on each element from the page About Us

When
I open About Us preview
Then
I see the link "Open in KC" in the fixed bar on the bottom of the page
And
I am able to click on it

When
I click on toggle button Edit mode
Then
Edit mode is turned off
And
I am able to preview page without distraction - only the fixed bar is presented

Design notes

• Do not show button for menu/navigation,Language selector, Dancing goat heading
• For Text element – show edit button next to the element (on the right)
• For Richt text element (and others) – show edit button in the center of the element
• While in Edit mode, I am able to click anywhere on the element (not just on the button) to be redirected to KC
• When I hover over the element, the button should be in hover state

[PetrSvirak]

Please, note kontent-ai/sample-app-net#130