formstrap 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 07cc257d4684759a070f1d259212a1e0c10a0edf4f0c9f9dd275b5ef0a3708be
-  data.tar.gz: 626e3625647a1d0e897f03e3c4ed712eb847e20761a112cc8b3dff667d82d072
+  metadata.gz: 8243dd5f8e2fdae1537ffab42b56734ebdfe53e054feb92c68a323954c0a63e0
+  data.tar.gz: 0c5a4a73c1d4c518c2ee71cf36f3ccc882ee106a825d94aef212a639ee0bcb94
 SHA512:
-  metadata.gz: 16262a9223b70aeb5f6e5ae830e124fd329226fd794c070e2b8afb5ebe1ce2f260c944da356fd8bae5246c1f931bc1b09652dab85f1c9ed8a16335b55978a678
-  data.tar.gz: 4d0d78db261a85d8cba1dd449b24f206ecc0aac2b3f3287e25bdc4f6c14b57a764bb17322ec7d8523279ee31135cf20fe0aa312182e894398135243a57afe1e4
+  metadata.gz: 6dbd8118d294ff8a863675299ce236cc3bd7f7a749b958b42cd22ac66465c3a5c751433edb93009a87b203d28995e2581b3f3600160d4f6a68e0b78110ab9fbe
+  data.tar.gz: 90ea13586df35f2db36e0b5f3139c6316ae5be21cf022355c665084a19e5d69663efe329f948bd6287b8deb8c4af76ac4b186a94b73aae5b73c8f6aded3659f9

data/README.md

@@ -72,6 +72,7 @@ An overview of all the Formstrap / Ruby on Rails form helpers:
 | Textarea          | textarea          | textarea formstrap: false or text_area      |
 | URL               | url               | url formstrap: false or url_field           |
 | WYSIWYG *         | wysiwyg           | N/A                                         |
+| Repeater          | repeater_for      | Adds advanced features to fields_for        |
 
 \* Formstrap provides the implementation of these 3rd party libraries, however it is up to the user to provide the
 correct assets.

data/app/assets/javascripts/formstrap/controllers/nested_preview_controller.js

@@ -0,0 +1,167 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['fields', 'iframeWrapper', 'iframe', 'offcanvas', 'error', 'loader']
+  }
+
+  static get values () {
+    return {
+      url: String
+    }
+  }
+
+  connect () {
+    this.prepareIframe()
+
+    // Resize iFrame after content is loaded
+    this.iframeTarget.addEventListener('load', () => {
+      this.hideLoader()
+      this.resizeIframe()
+    })
+
+    // Offcanvas closes
+    this.offcanvasTarget.addEventListener('hide.bs.offcanvas', (event) => {
+      if (!this.update()) {
+        event.preventDefault()
+      }
+    })
+  }
+
+  showLoader () {
+    this.loaderTarget.classList.remove('d-none')
+  }
+
+  hideLoader () {
+    this.loaderTarget.classList.add('d-none')
+  }
+
+  showError () {
+    this.errorTarget.classList.remove('d-none')
+  }
+
+  hideError () {
+    this.errorTarget.classList.add('d-none')
+  }
+
+  update () {
+    // Validate fields
+    const isValid = this.validateFields()
+
+    if (isValid) {
+      this.requestPreview()
+      this.hideError()
+      return true
+    } else {
+      this.showError()
+      return false
+    }
+  }
+
+  requestPreview () {
+    // Create an AJAX request
+    // eslint-disable-next-line no-undef
+    const xhr = new XMLHttpRequest()
+    xhr.open('POST', this.urlValue, true)
+
+    // Submit the form data
+    const formData = this.buildFormData()
+    xhr.send(formData)
+
+    // Show loader
+    this.showLoader()
+
+    // Handle the request once it's done
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        this.hideLoader()
+        this.handleRequest(xhr)
+      }
+    }
+  }
+
+  handleRequest (request) {
+    // Handle the response
+    if (request.status === 200) {
+      this.updatePreview(request.responseText)
+    } else {
+      this.showError()
+    }
+  }
+
+  validateFields () {
+    let allValid = true
+    const fields = this.fieldsTarget
+    const formElements = fields.querySelectorAll('input[name], select[name], textarea[name]')
+    formElements.forEach(function (element) {
+      const isValid = element.reportValidity()
+      if (!isValid) {
+        allValid = false
+      }
+    })
+    return allValid
+  }
+
+  buildFormData () {
+    // Get fields
+    const fields = this.fieldsTarget
+
+    // Build FormData
+    const formData = new FormData()
+
+    // Replace all occurrences of "page[blocks_attributes][0]" with "block"
+    const regex = /\w+\[([^\]]+)s_attributes\]\[\d+\]/g
+    const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])')
+    formElements.forEach(function (element) {
+      const currentName = element.getAttribute('name')
+      const newName = currentName.replace(regex, '$1')
+      formData.append(newName, element.value)
+    })
+
+    // Add authenticity token
+    formData.append('authenticity_token', this.getAuthenticityToken())
+
+    return formData
+  }
+
+  // Prepare the iFrame for rendering
+  // Objective: render the iframe content at the scale of the browser window, but resize it to fit the preview container
+  prepareIframe () {
+    const scaleFactor = this.scaleFactor()
+    const style = `
+      transform: scale(${scaleFactor}); 
+      opacity: 0;
+      transform-origin: 0 0; 
+      width: ${100 / scaleFactor}%;
+    `
+    this.iframeTarget.setAttribute('style', style)
+  }
+
+  // Relative size of the preview container compared to the browser window
+  scaleFactor () {
+    const width = this.iframeWrapperTarget.getBoundingClientRect().width
+    const viewportWidth = window.innerWidth
+    return (width / viewportWidth).toFixed(1)
+  }
+
+  // Replace the body of the iframe with the new content
+  updatePreview (html) {
+    this.iframeTarget.contentWindow.document.body.innerHTML = html
+    this.resizeIframe()
+  }
+
+  // Dynamically resize the iFrame to fit its content
+  resizeIframe () {
+    const scaleFactor = this.scaleFactor()
+    const iframeContentHeight = this.iframeTarget.contentWindow.document.body.scrollHeight
+    const iframeHeight = iframeContentHeight * scaleFactor
+    this.iframeTarget.style.height = iframeContentHeight + 'px'
+    this.iframeTarget.style.opacity = 1
+    this.iframeWrapperTarget.style.height = iframeHeight + 'px'
+  }
+
+  getAuthenticityToken () {
+    const tokenTag = document.querySelector('meta[name="csrf-token"]')
+    return tokenTag.getAttribute('content')
+  }
+}

data/app/assets/javascripts/formstrap/controllers/popup_controller.js

@@ -1,6 +1,6 @@
 /* global HTMLInputElement */
-import {Controller} from '@hotwired/stimulus'
-import {createPopper} from '@popperjs/core'
+import { Controller } from '@hotwired/stimulus'
+import { createPopper } from '@popperjs/core'
 
 export default class extends Controller {
   static get targets () {

data/app/assets/javascripts/formstrap/controllers/preview_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    url: String
+  }
+
+  connect () {
+    this.button = this.element
+    this.button.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.requestPreview()
+    })
+  }
+
+  requestPreview () {
+    const form = this.buildFakeForm()
+
+    // Insert in DOM
+    document.body.appendChild(form)
+
+    // Submit form
+    form.submit()
+
+    // Remove from DOM
+    document.body.removeChild(form)
+  }
+
+  buildFakeForm () {
+    const form = this.form().cloneNode(true)
+
+    // Empty [id] fields
+    const idInputs = form.querySelectorAll('input[name$="[id]"], select[name$="[id]"], textarea[name$="[id]"], button[name$="[id]"]')
+    idInputs.forEach((input) => {
+      input.value = ''
+    })
+
+    // Set preview action
+    form.setAttribute('action', this.urlValue)
+
+    // Set target to blank
+    form.setAttribute('target', '_blank')
+
+    // Refresh authenticity token
+    const authenticityTokenInput = form.querySelector('input[name="authenticity_token"]')
+    authenticityTokenInput.value = this.getAuthenticityToken()
+
+    // Remove method input if present (to force POST)
+    form.querySelector('input[name="_method"]')?.remove()
+
+    // Ensure POST method
+    form.setAttribute('method', 'POST')
+
+    return form
+  }
+
+  getAuthenticityToken () {
+    const tokenTag = document.querySelector('meta[name="csrf-token"]')
+    return tokenTag.getAttribute('content')
+  }
+
+  form () {
+    return this.button.closest('form')
+  }
+}

data/app/assets/javascripts/formstrap/controllers/repeater_controller.js

@@ -39,7 +39,7 @@ export default class extends Controller {
 
   updatePopupButtonIndices (index) {
     const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
-    const buttons = popup.querySelectorAll('a')
+    const buttons = popup.querySelectorAll('[data-popup-target="button"]')
     buttons.forEach((button) => {
       button.dataset.rowIndex = index
     })
@@ -52,17 +52,17 @@ export default class extends Controller {
     const rowIndex = button.dataset.rowIndex
 
     // Prepare html from template
-    const template = this.getTemplate(templateName)
-    const html = this.replaceIdsWithTimestamps(template)
+    let template = this.getTemplate(templateName).content.cloneNode(true)
+    template = this.replaceIdsWithTimestamps(template)
 
     // Fallback to last row if no index is set
     if (rowIndex) {
       // Insert new row after defined row
       const row = this.rowTargets[rowIndex]
-      row.insertAdjacentHTML('afterend', html)
+      this.listTarget.insertBefore(template, row.nextSibling)
     } else {
       // Insert before footer
-      this.footerTarget.insertAdjacentHTML('beforebegin', html)
+      this.listTarget.insertBefore(template, this.footerTarget)
     }
 
     this.resetIndices()
@@ -108,8 +108,40 @@ export default class extends Controller {
   }
 
   replaceIdsWithTimestamps (template) {
-    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
-    return template.innerHTML.replace(regex, new Date().getTime())
+    const pattern = 'rrrrrrrrr'
+    const replacement = new Date().getTime().toString()
+
+    // Replace ids
+    template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute('id')
+      node.setAttribute('id', idValue.replace(pattern, replacement))
+    })
+
+    // Replace labels
+    template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
+      const forValue = node.getAttribute('for')
+      node.setAttribute('for', forValue.replace(pattern, replacement))
+    })
+
+    // Replace names
+    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
+      const nameValue = node.getAttribute('name')
+      node.setAttribute('name', nameValue.replace(pattern, replacement))
+    })
+
+    // Replace offcanvas targets
+    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
+      const targetValue = node.getAttribute('data-bs-target')
+      node.setAttribute('data-bs-target', targetValue.replace(pattern, replacement))
+    })
+
+    // Replace offcanvas ids
+    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute('id')
+      node.setAttribute('id', idValue.replace(pattern, replacement))
+    })
+
+    return template
   }
 
   visibleRowsCount () {

data/app/assets/javascripts/formstrap/index.js

@@ -8,7 +8,9 @@ import FlatpickrController from './controllers/flatpickr_controller'
 import InfiniteScrollerController from './controllers/infinite_scroller_controller'
 import MediaController from './controllers/media_controller'
 import MediaModalController from './controllers/media_modal_controller'
+import NestedPreviewController from './controllers/nested_preview_controller'
 import PopupController from './controllers/popup_controller'
+import PreviewController from './controllers/preview_controller'
 import RedactorxController from './controllers/redactorx_controller'
 import RepeaterController from './controllers/repeater_controller'
 import SelectController from './controllers/select_controller'
@@ -25,7 +27,9 @@ export class Formstrap {
     Stimulus.register('infinite-scroller', InfiniteScrollerController)
     Stimulus.register('media', MediaController)
     Stimulus.register('media-modal', MediaModalController)
+    Stimulus.register('nested-preview', NestedPreviewController)
     Stimulus.register('popup', PopupController)
+    Stimulus.register('preview', PreviewController)
     Stimulus.register('redactorx', RedactorxController)
     Stimulus.register('repeater', RepeaterController)
     Stimulus.register('select', SelectController)

data/app/assets/javascripts/formstrap.js

@@ -4,6 +4,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
@@ -19,6 +20,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 
 // node_modules/tom-select/dist/js/tom-select.complete.js
 var require_tom_select_complete = __commonJS({
@@ -11288,6 +11293,129 @@ var media_modal_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/formstrap/controllers/nested_preview_controller.js
+var nested_preview_controller_default = class extends Controller {
+  static get targets() {
+    return ["fields", "iframeWrapper", "iframe", "offcanvas", "error", "loader"];
+  }
+  static get values() {
+    return {
+      url: String
+    };
+  }
+  connect() {
+    this.prepareIframe();
+    this.iframeTarget.addEventListener("load", () => {
+      this.hideLoader();
+      this.resizeIframe();
+    });
+    this.offcanvasTarget.addEventListener("hide.bs.offcanvas", (event) => {
+      if (!this.update()) {
+        event.preventDefault();
+      }
+    });
+  }
+  showLoader() {
+    this.loaderTarget.classList.remove("d-none");
+  }
+  hideLoader() {
+    this.loaderTarget.classList.add("d-none");
+  }
+  showError() {
+    this.errorTarget.classList.remove("d-none");
+  }
+  hideError() {
+    this.errorTarget.classList.add("d-none");
+  }
+  update() {
+    const isValid = this.validateFields();
+    if (isValid) {
+      this.requestPreview();
+      this.hideError();
+      return true;
+    } else {
+      this.showError();
+      return false;
+    }
+  }
+  requestPreview() {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", this.urlValue, true);
+    const formData = this.buildFormData();
+    xhr.send(formData);
+    this.showLoader();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        this.hideLoader();
+        this.handleRequest(xhr);
+      }
+    };
+  }
+  handleRequest(request) {
+    if (request.status === 200) {
+      this.updatePreview(request.responseText);
+    } else {
+      this.showError();
+    }
+  }
+  validateFields() {
+    let allValid = true;
+    const fields = this.fieldsTarget;
+    const formElements = fields.querySelectorAll("input[name], select[name], textarea[name]");
+    formElements.forEach(function(element) {
+      const isValid = element.reportValidity();
+      if (!isValid) {
+        allValid = false;
+      }
+    });
+    return allValid;
+  }
+  buildFormData() {
+    const fields = this.fieldsTarget;
+    const formData = new FormData();
+    const regex = /\w+\[([^\]]+)s_attributes\]\[\d+\]/g;
+    const formElements = fields.querySelectorAll('input[name]:not([name$="[id]"]), select[name]:not([name$="[id]"]), textarea[name]:not([name$="[id]"]), button[name]:not([name$="[id]"])');
+    formElements.forEach(function(element) {
+      const currentName = element.getAttribute("name");
+      const newName = currentName.replace(regex, "$1");
+      formData.append(newName, element.value);
+    });
+    formData.append("authenticity_token", this.getAuthenticityToken());
+    return formData;
+  }
+  prepareIframe() {
+    const scaleFactor = this.scaleFactor();
+    const style = `
+      transform: scale(${scaleFactor}); 
+      opacity: 0;
+      transform-origin: 0 0; 
+      width: ${100 / scaleFactor}%;
+    `;
+    this.iframeTarget.setAttribute("style", style);
+  }
+  scaleFactor() {
+    const width = this.iframeWrapperTarget.getBoundingClientRect().width;
+    const viewportWidth = window.innerWidth;
+    return (width / viewportWidth).toFixed(1);
+  }
+  updatePreview(html) {
+    this.iframeTarget.contentWindow.document.body.innerHTML = html;
+    this.resizeIframe();
+  }
+  resizeIframe() {
+    const scaleFactor = this.scaleFactor();
+    const iframeContentHeight = this.iframeTarget.contentWindow.document.body.scrollHeight;
+    const iframeHeight = iframeContentHeight * scaleFactor;
+    this.iframeTarget.style.height = iframeContentHeight + "px";
+    this.iframeTarget.style.opacity = 1;
+    this.iframeWrapperTarget.style.height = iframeHeight + "px";
+  }
+  getAuthenticityToken() {
+    const tokenTag = document.querySelector('meta[name="csrf-token"]');
+    return tokenTag.getAttribute("content");
+  }
+};
+
 // node_modules/@popperjs/core/lib/enums.js
 var top = "top";
 var bottom = "bottom";
@@ -12917,6 +13045,47 @@ var popup_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/formstrap/controllers/preview_controller.js
+var preview_controller_default = class extends Controller {
+  connect() {
+    this.button = this.element;
+    this.button.addEventListener("click", (event) => {
+      event.preventDefault();
+      this.requestPreview();
+    });
+  }
+  requestPreview() {
+    const form = this.buildFakeForm();
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+  }
+  buildFakeForm() {
+    const form = this.form().cloneNode(true);
+    const idInputs = form.querySelectorAll('input[name$="[id]"], select[name$="[id]"], textarea[name$="[id]"], button[name$="[id]"]');
+    idInputs.forEach((input) => {
+      input.value = "";
+    });
+    form.setAttribute("action", this.urlValue);
+    form.setAttribute("target", "_blank");
+    const authenticityTokenInput = form.querySelector('input[name="authenticity_token"]');
+    authenticityTokenInput.value = this.getAuthenticityToken();
+    form.querySelector('input[name="_method"]')?.remove();
+    form.setAttribute("method", "POST");
+    return form;
+  }
+  getAuthenticityToken() {
+    const tokenTag = document.querySelector('meta[name="csrf-token"]');
+    return tokenTag.getAttribute("content");
+  }
+  form() {
+    return this.button.closest("form");
+  }
+};
+__publicField(preview_controller_default, "values", {
+  url: String
+});
+
 // app/assets/javascripts/formstrap/controllers/redactorx_controller.js
 var redactorx_controller_default = class extends Controller {
   connect() {
@@ -12980,7 +13149,7 @@ var repeater_controller_default = class extends Controller {
   }
   updatePopupButtonIndices(index2) {
     const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`);
-    const buttons = popup.querySelectorAll("a");
+    const buttons = popup.querySelectorAll('[data-popup-target="button"]');
     buttons.forEach((button) => {
       button.dataset.rowIndex = index2;
     });
@@ -12990,13 +13159,13 @@ var repeater_controller_default = class extends Controller {
     const button = event.target;
     const templateName = button.dataset.templateName;
     const rowIndex = button.dataset.rowIndex;
-    const template = this.getTemplate(templateName);
-    const html = this.replaceIdsWithTimestamps(template);
+    let template = this.getTemplate(templateName).content.cloneNode(true);
+    template = this.replaceIdsWithTimestamps(template);
     if (rowIndex) {
       const row = this.rowTargets[rowIndex];
-      row.insertAdjacentHTML("afterend", html);
+      this.listTarget.insertBefore(template, row.nextSibling);
     } else {
-      this.footerTarget.insertAdjacentHTML("beforebegin", html);
+      this.listTarget.insertBefore(template, this.footerTarget);
     }
     this.resetIndices();
     this.resetPositions();
@@ -13028,8 +13197,29 @@ var repeater_controller_default = class extends Controller {
     })[0];
   }
   replaceIdsWithTimestamps(template) {
-    const regex = new RegExp(template.dataset.templateIdRegex, "g");
-    return template.innerHTML.replace(regex, new Date().getTime());
+    const pattern = "rrrrrrrrr";
+    const replacement = new Date().getTime().toString();
+    template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute("id");
+      node.setAttribute("id", idValue.replace(pattern, replacement));
+    });
+    template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
+      const forValue = node.getAttribute("for");
+      node.setAttribute("for", forValue.replace(pattern, replacement));
+    });
+    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
+      const nameValue = node.getAttribute("name");
+      node.setAttribute("name", nameValue.replace(pattern, replacement));
+    });
+    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
+      const targetValue = node.getAttribute("data-bs-target");
+      node.setAttribute("data-bs-target", targetValue.replace(pattern, replacement));
+    });
+    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute("id");
+      node.setAttribute("id", idValue.replace(pattern, replacement));
+    });
+    return template;
   }
   visibleRowsCount() {
     return this.visibleRows().length;
@@ -13157,7 +13347,9 @@ var Formstrap = class {
     Stimulus.register("infinite-scroller", infinite_scroller_controller_default);
     Stimulus.register("media", media_controller_default);
     Stimulus.register("media-modal", media_modal_controller_default);
+    Stimulus.register("nested-preview", nested_preview_controller_default);
     Stimulus.register("popup", popup_controller_default);
+    Stimulus.register("preview", preview_controller_default);
     Stimulus.register("redactorx", redactorx_controller_default);
     Stimulus.register("repeater", repeater_controller_default);
     Stimulus.register("select", select_controller_default);

data/app/assets/stylesheets/formstrap/shared/nested_preview.scss

@@ -0,0 +1,31 @@
+.nested-preview-offcanvas, .nested-preview .hiding {
+  display: none !important;
+
+  &.show, &.showing {
+    display: flex !important;
+  }
+}
+
+.nested-preview-iframe-wrapper {
+  position: relative;
+  cursor: pointer;
+
+  iframe {
+    width: 100%;
+  }
+}
+
+.nested-preview-loader {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  padding: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bs-secondary-bg);
+  opacity: 0.5;
+}

data/app/assets/stylesheets/formstrap/shared.scss

@@ -1,2 +1,3 @@
 @import "shared/thumbnail";
 @import "shared/popup";
+@import "shared/nested_preview";