PRO-7380 PRO-7483 Widget live preview (#4893)

boutell · web-flow · commit ff981690b113 · 2025-04-08T09:36:27.000-04:00
* live preview wip

* working, needs some touches &amp; cypress

* removed unused code, unrelated

* fixed bugs with "add widget"

* guess the origin

* cleaned up

* experimenting with fixing flicker in video step 1

* much better video widget rendering all around, but still too flickery in preview

* changelog

* quiet

* fixed unused variable

* progress with the tests but still problems

* wip

* backed out use of placeholders for image widgets during preview, that logic is more complex tha nexpected

* eslint sigh

* better handling of invalid schemas

* fix lint
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,13 +2,18 @@
 
 ## UNRELEASED
 
+### Adds
+
+* To display a live preview on the page as changes are made to widgets, set the `preview: true` option on any widget module. To turn it on for all widgets, you can set it on the `@apostrophecms/widget-type` module, the base class of all widget modules. This works especially well when `range` fields are used to achieve visual effects.
+
 ### Changes
 
 * Improve the Page Manager experience when dragging and dropping pages - the updates happen in background and the UI is not blocked anymore.
 * Allow scrolling while dragging a page in the Page Manager.
 * Change user's email field type to `email`.
 * Improve media manager experience after uploading images. No additional server requests are made, no broken UI on error.
 * Change reset password form button label to `Reset Password`.
+* Removed overly verbose logging of schema errors in the schema module itself. These are already logged appropriately if they become the actual result of an API call. With this change it becomes possible to catch and discard or mitigate these in some situations without excessive log output.
 * Bumps eslint-config-apostrophe, fix errors and a bunch of warnings.
 
 ### Fixes
diff --git a/modules/@apostrophecms/area/index.js b/modules/@apostrophecms/area/index.js
@@ -37,7 +37,7 @@ module.exports = {
           const type = self.apos.launder.string(req.body.type);
           const _docId = self.apos.launder.id(req.body._docId);
           const field = self.apos.schema.getFieldById(areaFieldId);
-
+          const livePreview = self.apos.launder.boolean(req.body.livePreview);
           if (!field) {
             throw self.apos.error('invalid');
           }
@@ -51,7 +51,14 @@ module.exports = {
             self.warnMissingWidgetType(type);
             throw self.apos.error('invalid');
           }
-          widget = await sanitize(widget);
+          try {
+            widget = await sanitize(widget);
+          } catch (e) {
+            if (livePreview) {
+              return 'aposLivePreviewSchemaNotYetValid';
+            }
+            throw e;
+          }
           widget._edit = true;
           widget._docId = _docId;
           // So that carrying out relationship loading again can yield results
@@ -634,6 +641,7 @@ module.exports = {
         const widgetEditors = {};
         const widgetManagers = {};
         const widgetIsContextual = {};
+        const widgetPreview = {};
         const widgetHasPlaceholder = {};
         const widgetHasInitialModal = {};
         const contextualWidgetDefaultData = {};
@@ -645,6 +653,7 @@ module.exports = {
           widgetEditors[name] = (browserData && browserData.components && browserData.components.widgetEditor) || 'AposWidgetEditor';
           widgetManagers[name] = manager.__meta.name;
           widgetIsContextual[name] = manager.options.contextual;
+          widgetPreview[name] = manager.options.preview;
           widgetHasPlaceholder[name] = manager.options.placeholder;
           widgetHasInitialModal[name] = !manager.options.placeholder && manager.options.initialModal !== false;
           contextualWidgetDefaultData[name] = manager.options.defaultData || {};
@@ -659,6 +668,7 @@ module.exports = {
           widgetIsContextual,
           widgetHasPlaceholder,
           widgetHasInitialModal,
+          widgetPreview,
           contextualWidgetDefaultData,
           widgetManagers,
           action: self.action
diff --git a/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue b/modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue
@@ -197,6 +197,10 @@ export default {
     }
   },
   watch: {
+    // Note: please don't make this a deep watcher as that could cause
+    // issues with live widget preview and also performance, the top level
+    // array will change in situations where a patch API call is actually
+    // needed at this level
     next() {
       if (!this.docId) {
         // For the benefit of AposInputArea which is the
@@ -304,8 +308,8 @@ export default {
         ...this.next.slice(i + 2)
       ];
     },
-    async remove(i) {
-      if (this.docId === window.apos.adminBar.contextId) {
+    async remove(i, { autosave = true } = {}) {
+      if (autosave && (this.docId === window.apos.adminBar.contextId)) {
         apos.bus.$emit('context-edited', {
           $pullAllById: {
             [`@${this.id}.items`]: [ this.next[i]._id ]
@@ -382,13 +386,15 @@ export default {
         const componentName = this.widgetEditorComponent(widget.type);
         apos.area.activeEditor = this;
         apos.bus.$on('apos-refreshing', cancelRefresh);
+        const preview = this.widgetPreview(widget.type, i, false);
         const result = await apos.modal.execute(componentName, {
           modelValue: widget,
           options: this.widgetOptionsByType(widget.type),
           type: widget.type,
           docId: this.docId,
           parentFollowingValues: this.followingValues,
-          meta: this.meta[widget._id]?.aposMeta
+          meta: this.meta[widget._id]?.aposMeta,
+          preview
         });
         apos.area.activeEditor = null;
         apos.bus.$off('apos-refreshing', cancelRefresh);
@@ -433,12 +439,12 @@ export default {
         // actual files, and the reference count will update automatically
       }
     },
-    async update(widget) {
+    async update(widget, { autosave = true } = {}) {
       widget.aposPlaceholder = false;
       if (!widget.metaType) {
         widget.metaType = 'widget';
       }
-      if (this.docId === window.apos.adminBar.contextId) {
+      if (autosave && (this.docId === window.apos.adminBar.contextId)) {
         apos.bus.$emit('context-edited', {
           [`@${widget._id}`]: widget
         });
@@ -489,12 +495,14 @@ export default {
       } else {
         const componentName = this.widgetEditorComponent(name);
         apos.area.activeEditor = this;
+        const preview = this.widgetPreview(name, index, true);
         const widget = await apos.modal.execute(componentName, {
           modelValue: null,
           options: this.widgetOptionsByType(name),
           type: name,
           docId: this.docId,
-          parentFollowingValues: this.followingValues
+          parentFollowingValues: this.followingValues,
+          preview
         });
         apos.area.activeEditor = null;
         if (widget) {
@@ -520,20 +528,22 @@ export default {
     contextualWidgetDefaultData(type) {
       return this.moduleOptions.contextualWidgetDefaultData[type];
     },
-    async insert({ index, widget }) {
+    async insert({
+      index, widget, autosave = true
+    } = {}) {
       if (!widget._id) {
         widget._id = createId();
       }
       if (!widget.metaType) {
         widget.metaType = 'widget';
       }
-      const push = {
-        $each: [ widget ]
-      };
-      if (index < this.next.length) {
-        push.$before = this.next[index]._id;
-      }
-      if (this.docId === window.apos.adminBar.contextId) {
+      if (autosave && (this.docId === window.apos.adminBar.contextId)) {
+        const push = {
+          $each: [ widget ]
+        };
+        if (index < this.next.length) {
+          push.$before = this.next[index]._id;
+        }
         apos.bus.$emit('context-edited', {
           $push: {
             [`@${this.id}.items`]: push
@@ -561,6 +571,15 @@ export default {
     widgetEditorComponent(type) {
       return this.moduleOptions.components.widgetEditors[type];
     },
+    widgetPreview(type, index, create) {
+      return this.moduleOptions.widgetPreview[type]
+        ? {
+          area: this,
+          index,
+          create
+        }
+        : null;
+    },
     // Recursively seek `subObject` within `object`, based on whether
     // its _id matches that of a sub-object of `object`. If found,
     // replace that sub-object with `subObject` and return `true`.
diff --git a/modules/@apostrophecms/area/views/area.html b/modules/@apostrophecms/area/views/area.html
@@ -1,6 +1,5 @@
 {# area needs its own copy of the widget options as #}
 {# JSON, for adding new widgets #}
-{%- set isSingleton = data.options.limit == 1 and data.options.type -%}
 
 <div class="apos-area" {%- if data.canEdit %} data-apos-area-newly-editable data-doc-id='{{ data.area._docId | jsonAttribute({ single: true }) }}' data-field-id='{{ data.field._id | jsonAttribute({ single: true }) }}' data-options='{{ apos.util.omit(data.options, 'area') | jsonAttribute({ single: true }) }}' data='{{ data.area | jsonAttribute({ single: true }) }}' data-choices='{{ data.choices | jsonAttribute({ single: true }) }}'{% endif %}>
   {%- for item in data.area.items -%}
diff --git a/modules/@apostrophecms/image-widget/views/widget.html b/modules/@apostrophecms/image-widget/views/widget.html
@@ -1,3 +1,5 @@
+{% set attachment = apos.image.first(data.widget._image) %}
+
 {% if data.widget.aposPlaceholder and data.manager.options.placeholderUrl %}
   <img
     src="{{ data.manager.options.placeholderUrl }}"
@@ -10,7 +12,6 @@
   {% set loadingType = data.options.loadingType or data.manager.options.loadingType %}
   {% set size = data.options.size or data.manager.options.size or 'full' %}
 
-  {% set attachment = apos.image.first(data.widget._image) %}
 
   {% if attachment %}
     <img {% if className %} class="{{ className }}"{% endif %}
diff --git a/modules/@apostrophecms/schema/index.js b/modules/@apostrophecms/schema/index.js
@@ -684,10 +684,6 @@ module.exports = {
           nonVisibleFields
         });
 
-        for (const error of validErrors) {
-          self.apos.util.error(error.stack);
-        }
-
         if (validErrors.length) {
           throw validErrors;
         }
diff --git a/modules/@apostrophecms/video-widget/ui/src/index.js b/modules/@apostrophecms/video-widget/ui/src/index.js
@@ -1,4 +1,5 @@
 export default () => {
+  apos.oembedCache ||= {};
   apos.util.widgetPlayers['@apostrophecms/video'] = {
     selector: '[data-apos-video-widget]',
     player: function(el) {
@@ -30,15 +31,25 @@ export default () => {
       }
 
       function query(options, callback) {
+        if (Object.hasOwn(apos.oembedCache, options.url)) {
+          return callback(null, apos.oembedCache[options.url]);
+        }
         const opts = {
           qs: {
             url: options.url
           }
         };
-        return apos.http.get('/api/v1/@apostrophecms/oembed/query', opts, callback);
+        return apos.http.get('/api/v1/@apostrophecms/oembed/query', opts, function(err, result) {
+          if (err) {
+            return callback(err);
+          }
+          apos.oembedCache[options.url] = result;
+          return callback(null, result);
+        });
       }
 
       function play(el, result) {
+        // Use aspect-ratio to eliminate the need for any timeout at all
         const shaker = document.createElement('div');
         shaker.innerHTML = result.html;
         const inner = shaker.firstChild;
@@ -49,33 +60,11 @@ export default () => {
         }
         inner.removeAttribute('width');
         inner.removeAttribute('height');
-        el.append(inner);
-        // wait for CSS width to be known
-        setTimeout(function() {
-          // If oembed results include width and height we can get the
-          // video aspect ratio right
-          if (result.width && result.height) {
-            inner.style.width = '100%';
-            resizeVideo(inner);
-            // If we need to initially size the video, also resize it on window
-            // resize.
-            window.addEventListener('resize', resizeHandler);
-          } else {
-            // No, so assume the oembed HTML code is responsive.
-          }
-        }, 0);
-      }
-
-      function resizeVideo(canvasEl) {
-        canvasEl.style.height = ((queryResult.height / queryResult.width) * canvasEl.offsetWidth) + 'px';
-      };
-
-      function resizeHandler() {
-        if (document.contains(el)) {
-          resizeVideo(el.querySelector('[data-apos-video-canvas]'));
-        } else {
-          window.removeEventListener('resize', resizeHandler);
+        if (result.width && result.height) {
+          inner.style.width = '100%';
+          inner.style.aspectRatio = `${queryResult.width} / ${queryResult.height}`;
         }
+        el.append(inner);
       }
 
       function fail(err) {
diff --git a/modules/@apostrophecms/video-widget/views/widget.html b/modules/@apostrophecms/video-widget/views/widget.html
@@ -18,10 +18,7 @@
       data-apos-video-widget
       data-apos-video-url={{ data.widget.video.url }}
     >
-      {% if data.widget.video.thumbnail %}
-      <img src="{{ data.widget.video.thumbnail }}" alt="{{ data.widget.video.thumbnail }}"/>
-      {% endif %}
-    </div>
+   </div>
   {% elif data.user %}
     <p {% if data.manager.options.className %} class="{{ data.manager.options.className }} {{ data.manager.options.className }}--error"{% endif %}>No video selected</p>
   {% endif %}
diff --git a/modules/@apostrophecms/widget-type/index.js b/modules/@apostrophecms/widget-type/index.js
@@ -58,6 +58,11 @@
 // that information will not be available yet in any asynchronous node.js code.
 // It is the last thing to happen before the actual page template rendering.
 //
+// ### `preview`
+//
+// If true, the image widget is automatically previewed live following changes in the editor modal.
+// Should not be combined with `contextual`.
+//
 // ## Fields
 //
 // You will need to configure the schema fields for your widget using
@@ -420,7 +425,8 @@ module.exports = {
           className: self.options.className,
           components: self.options.components,
           width: self.options.width,
-          origin: self.options.origin
+          origin: self.options.origin,
+          preview: self.options.preview
         });
         return result;
       }
diff --git a/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue b/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue
diff --git a/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js b/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js
diff --git a/test/areas.js b/test/areas.js
diff --git a/test/widgets.js b/test/widgets.js
