Automatic preview of changes [#3418923]

Problem/Motivation

Add automatic preview feature so that when the user is editing, the content is automatically previewed without the need of clicking "Preview" button. This way the user has the ability to enable or disable the automatic preview feature, both from the module settings and the editing form.

Issue fork frontend_editing-3418923

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3418923-automatic-preview changes, plain diff MR !45
Check out this branch

About issue forks

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

2 February 2024 at 15:25

eucr created an issue. See original summary.

Comment #2

2 February 2024 at 15:53

eucr opened merge request !45

Comment #3

eucr CreditAttribution: eucr commented 2 February 2024 at 16:42

Status:

Active

» Needs work

Comment #4

eucr CreditAttribution: eucr at 1xINTERNET commented 2 February 2024 at 16:44

This issue needs some work:

Remove external debounce library and use Drupal one
Change some event listeners and add more suitable ones
Determine if current enable/disable automatic preview workflow is the best one

Comment #5

a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commented 2 February 2024 at 16:45

Thank you for a nice feature. I still have some suggestions:

Use Drupal.debounce (core/drupal.debounce library) instead of external jquery debounce library (js/jquery.ba-throttle-debounce.js).
Try not to use jQuery in the new automatic preview behavior Drupal.behaviors.autoPreview. (not critical but we should reduce jQuery usage).
I suggest that "Automatic preview" in frontend editing form is not changing the global config, but just uses pure js to change Drupal settings state and also hides/displays "Preview" button based on its value.
Listen also to `autocompleclose' event when using entity reference autocomplete fields, check the event for drag and drop inside multivalue field when changing the order

I will also leave the comments in MR

Comment #6

a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commented 5 February 2024 at 18:03

I have worked on some comments from MR. What is left is polishing the detection of changes in the form. What would be nice to have: autocompleteclose, draggable stop and also changes in CKEditor5. For the last one maybe this can be useful https://github.com/ckeditor/ckeditor5/issues/996 and https://www.drupal.org/project/drupal/issues/3319358

Comment #7

eucr CreditAttribution: eucr at 1xINTERNET commented 9 February 2024 at 13:37

Event listeners have been modified. Now this is using formUpdated, autocompleteclose and onDrop.

Comment #8

breidert CreditAttribution: breidert at 1xINTERNET commented 12 February 2024 at 11:02

I tested it and found it working nicely.

However, there a small bug: When you drag a media reference field for example in a gallery, the change is detected, but the content is not updated. First after the next change, the previous change is updated.

I think the error handling is ok. For me it is enough, when the message is displaying on top. However, I think we should make it sticky, because sometimes you work on the bottom of the form, and cannot see the message on top. Also you have a layout shift, when the error message appears.

Furthermore, I suggest to not hide the preview button, when automatic preview is enabled. Having the button can help, to trigger a new preview to get the error message away and update the order of items if the preview did not send them correctly.