"Auto" preview option that updates on field blur

We whole-heartedly agree @mandclu. In fact this is the main thing we want to accomplish in Phase 2.

Previously, while discussing this feature with @isramv, he suggested that we utilize the "debounce" technique to trigger an update to the preview once a user "stops typing". While the specific event that we use to trigger a preview could be a bunch of different things, one thing is sure. We want this feature too.

We meet every other Wednesday in the #preview channel in Slack to talk about progress. You're welcome to join us and discuss.

Updated issue to capture most of our current thinking.

FYI this is all that's required for a basic implementation of the blur-triggered updates:

(function (Drupal, once) {
  'use strict';

  Drupal.behaviors.samePagePreviewAuto = {
    attach: function (context, settings) {
      once('samePagePreviewAuto', '.node-form input.form-element', context).forEach(function (element) {
        element.addEventListener("blur", function () {
          forceRefresh();
        });
      });
      once('samePagePreviewAuto', '.node-form .ck-editor__editable_inline', context).forEach(function (element) {
        element.addEventListener("blur", function () {
          forceRefresh();
        });
      });

      function forceRefresh() {
        const component = document.querySelector('[data-drupal-selector="edit-refresh"]');
        if (component) {
          component.dispatchEvent(new Event("click"));
        }
      }
    }
  };
}(Drupal, once));

I did try the debounce approach, particularly for the WYSIWYG. I couldn't get it to work, I think because I was also struggling to get the CKEditor instances. For the above I settled on selecting the wrapper div around the inner content, which does receive focus but doesn't "change" for the sake of JS.

Moving this to the 2.0.x branch

First draft of the auto preview. Theoretically we could add a toggle that if enabled would hide the manual refresh button, but since there has been talk of moving those controls anyway, leaving that for now.

Thank you.

Yes, the button is likely going away in version 2, to be replaced by a checkbox. There are a few reasons for this.

First, it's important to give users relief from using this feature if it bombards them with audible text (when using screen readers) or is too visually stimulating.
Second, it might be a good to have a failsafe if the mobile / small form factor experience breaks content creation workflows on those devices.

Did some manual testing.

I discovered that updating an image does not update the preview. The updated image is shown, however, when I update a text field.

While testing I looked at the fields that are getting the "samePagePreviewAuto" behavior applied to them. A lot of the fields that in the "Meta" section (such as path-alias) are also getting the behavior.

I wonder if strategically it would be better to have a function in the .module that is responsible for gathering up all the fields that should getting the auto refresh behavior then crafting our callback to use that inserted class.

Much improvement. Let's get this in and build off of this.

Merged.

Automatically closed - issue fixed for 2 weeks with no activity.