Links contained in Paragraphs are no more clickable

At this moment, the Geysir UI elements are indeed activated from the moment you install the module. These elements interfere with things like links inside the content.

The goal is to introduce an "edit" mode which will actually activate the functionalities provided by Geysir. Before activating this mode, the author actually sees the content like a normal visitor would. Such a "high-fidelity" preview is a much requested feature among clients. We believe it is essential.

In attachment you can find a screenshot which illustrate how we can

• switch between edit mode and preview mode
• minimize disruption during preview by moving the in-page controls of Drupal to the top toolbar
• reduce technical jargon in favor of more general terms used in content management

Same issue as #2916547

That's a great plan. Cores contextual links should be used like with inline edit, activating geysir "edit" for the paragraph field in the frontend. +1

I'll try to sum everything what i found, related to overlay and other.

1. Geysir shouldn't move content of paragraph, we shouldn't add some paddings or margins, etc. Because it may generally break element's position and styles.
2. Overlay should be removed, because currently impossible to select/click content.
3. If we gonna remove overlay, we should highlight somehow our actions to understand what we do.

So, since overlay is adding using :hover css event, we can remove it and restyle everything inside. In this patch:
1. Removed paddings for .geysir-field-paragraph-wrapper.
2. Removed negative margin for geysir links.
3. Increased outline-width for .geysir-field-paragraph-wrapper from 3px on 5px. It helps us to understand what paragraph is currently stands out.

If we have some paragraph inside of another paragraph (through field reference entity for example) - outline-color is changed for child paragraphs. It helps to understand that we work with child paragraph, not parent.

4. Now icons aligned more correct with the help of transform property. It works very well, starting from IE9 https://caniuse.com/#feat=transforms2d and it's ok for browser compability of drupal 8 https://www.drupal.org/docs/8/system-requirements/browser-requirements
So for now:
- icon add-before is sticky to the top border of paragraph and centered horizontly
- icon add-after is sticky to the bottom border of paragraph and centered horizontly
- icons edit and delete are centered vertically and horizontly with the help of transform property.

For paragraph inside of another paragraph - all 4 icons are going to one line (see screens in attachments)

5. Removed overlay to be able to click/select/pick content. Removed z-index for .geysir-field-paragraph-links and added z-index for icons in particular. So now we can click on any link without any troubles.
6. Increased border-width of icons from 1px to 2px + added box-shadow on hover for these icons to more understand what is going on.

You can test this patch by yourself, share your thoughts about it. I'm open to interaction.

Default state on hover:

If paragraph inside of another paragraph

Patch is applied and available in 8.x-1.x-dev

I think you can take ideas from here

https://www.elegantthemesdemo.com/?et_fb=1#

Wow. Thank you for this impression, never seen this. This Wordpress implementation is just super amazing.

Looking at the latest release this change have been reverted, after a little digging around I cannot see how this revert happened :/

Inspired by this module and this patch Make Geysir links alterable

I recreate this module and create another custom one to extend it, and also styled it a bit. Use Fontawesome for the icons. I think what I did will don't work for this module because I modify even the html markup of paragraphs and links. But I share it in the screenshot and maybe can generate ideas. In the capture show a nested paragraphs with different colors.

I think if the links really are alterable this module gain more options to make this kind of things.

Using the latest dev version (of 23 May 2019), the links are not clickable. I think this issue should be re-opened.