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 kontent-ai/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

Blocked by: https://github.com/Kentico/kontent-delivery-sdk-js/issues/52

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

[leniquenoralez]

I can work on this.

[Simply007]

Hello @leniquenoralez, I've just sent you an invitation to the project. If you accept it, I'll be able to assign the issue to you.

Currently there is no support for generating links in javascript SDK (kontent-ai/delivery-sdk-js#29), so it is required to implement the Preview edit links generation in an application.

It would be great to implement this functionality similarily as it is in content management SDK for .net:
https://github.com/Kentico/content-management-sdk-net/pull/8/files (EditLinkBuilder class) to be able to use the code in the SDK in the future.

There is the documentation fot the preview edit links.
https://developer.kenticocloud.com/docs/implementing-a-preview-edit-button

If you have any questions, feel free to ask!

[petrsvihlik]

unassigning due to inactivity

[web20opensource]

HI, is this project still alive ?

[petrsvihlik]

Hey @web20opensource , absolutely. This sample project is being updated along with releases of new features in Kentico Cloud.