Automatic preview of changes

Created on 2 February 2024, 11 months ago
Updated 28 February 2024, 10 months ago

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.

Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @eucr
  • Merge request !45Issue #3418923: Automatic preview of changes → (Merged) created by eucr
  • Status changed to Needs work 11 months ago
  • This issue needs some work:

    1. Remove external debounce library and use Drupal one
    2. Change some event listeners and add more suitable ones
    3. Determine if current enable/disable automatic preview workflow is the best one
  • 🇩🇪Germany a.dmitriiev

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

    1. Use Drupal.debounce (core/drupal.debounce library) instead of external jquery debounce library (js/jquery.ba-throttle-debounce.js).
    2. Try not to use jQuery in the new automatic preview behavior Drupal.behaviors.autoPreview. (not critical but we should reduce jQuery usage).
    3. 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.
    4. 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

  • 🇩🇪Germany a.dmitriiev

    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 Trigger event when Text Editor is attached Needs work

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

  • 🇩🇪Germany breidert

    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.

  • Status changed to Fixed 10 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024