ElementEditor-powered Live Preview

src/controllers/ElementsController.php

@@ -89,6 +89,7 @@ class ElementsController extends Controller
     private bool $_addAnother;
     private array $_visibleLayoutElements;
     private ?string $_selectedTab = null;
+    private bool $_applyParams;
     private bool $_prevalidate;
 
     /**
@@ -125,6 +126,7 @@ public function beforeAction($action): bool
         $this->_addAnother = (bool)$this->_param('addAnother');
         $this->_visibleLayoutElements = $this->_param('visibleLayoutElements') ?? [];
         $this->_selectedTab = $this->_param('selectedTab');
+        $this->_applyParams = (bool)$this->_param('applyParams', true);
         $this->_prevalidate = (bool)$this->_param('prevalidate');
 
         unset($this->_attributes['failMessage']);
@@ -967,11 +969,24 @@ private function _prepareEditor(
         $behavior->contentHtml($contentHtml);
         $behavior->metaSidebarHtml($sidebarHtml);
 
-        $this->view->registerJsWithVars(fn($settingsJs) => <<<JS
-new Craft.ElementEditor($('#$containerId'), $settingsJs);
+        $settings = $jsSettingsFn($form);
+
+        $isSlideout = Craft::$app->getRequest()->getHeaders()->has('X-Craft-Container-Id');
+        if ($isSlideout) {
+            $this->view->registerJsWithVars(fn($settings) => <<<JS
+$('#$containerId').data('elementEditorSettings', $settings);
 JS, [
-            $jsSettingsFn($form),
-        ]);
+                $settings,
+            ]);
+        } else {
+            $this->view->registerJsWithVars(fn($settings) => <<<JS
+new Craft.ElementEditor($('#$containerId'), $settings);
+JS, [
+                $settings,
+            ]);
+        }
+
+
 
         // Give the element a chance to do things here too
         $element->prepareEditScreen($response, $containerId);
@@ -2226,6 +2241,10 @@ private function _validateElementType(string $elementType): void
      */
     private function _applyParamsToElement(ElementInterface $element): void
     {
+        if (!$this->_applyParams) {
+            return;
+        }
+
         if (isset($this->_enabledForSite)) {
             if (is_array($this->_enabledForSite)) {
                 // Make sure they are allowed to edit all of the posted site IDs

src/web/assets/cp/src/css/_cp.scss

@@ -1674,6 +1674,7 @@ li.breadcrumb-toggle-wrapper {
 #content :not(.meta) > .flex-fields,
 #content > .flex-fields,
 .so-content .flex-fields,
+.lp-content .flex-fields,
 .draghelper .flex-fields {
   --row-gap: var(--xl);
   display: flex;
@@ -1757,6 +1758,7 @@ li.breadcrumb-toggle-wrapper {
 }
 
 .so-content .flex-fields,
+.lp-content .flex-fields,
 .draghelper.drag-in-slideout .flex-fields {
   & > :not(h2):not(hr):not(.line-break) {
     &,

src/web/assets/cp/src/css/_preview.scss

@@ -16,6 +16,7 @@
     box-sizing: border-box;
     position: relative;
     z-index: 1;
+    height: 44px;
 
     @supports (backdrop-filter: blur(10px)) {
       & {
@@ -38,6 +39,49 @@
     .checkmark-icon {
       margin-bottom: 0;
     }
+
+    .btn[data-icon='xmark'] {
+      @include margin-left(-12px);
+      &:not(:hover):not(:active):not([aria-expanded='true']) {
+        background-color: transparent;
+      }
+    }
+
+    .lp-toolbar {
+      min-width: 0;
+
+      .pane-tabs {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        [role='tablist'] {
+          padding: 0 12px;
+
+          &.scrollable {
+            mask-image: linear-gradient(
+              to right,
+              rgba(0, 0, 0, 0),
+              rgba(0, 0, 0) 12px,
+              rgba(0, 0, 0) calc(100% - 12px),
+              rgba(0, 0, 0, 0) 100%
+            );
+          }
+
+          [role='tab'] {
+            background-color: transparent;
+          }
+        }
+
+        .menubtn:not(.action-btn) {
+          margin-left: 0;
+          margin-right: 0;
+
+          &:not(:empty):not(.btn-empty)::after {
+            @include margin-left(0px);
+          }
+        }
+      }
+    }
   }
 }
 
@@ -50,6 +94,7 @@
     padding: 24px;
     overflow: auto;
     box-sizing: border-box;
+    position: relative;
 
     & > .field {
       &:last-child {
@@ -61,6 +106,17 @@
       }
     }
 
+    &:not(.loading) > .spinner {
+      display: none;
+    }
+
+    &.loading > .spinner {
+      position: absolute;
+      top: calc(50% - 17px);
+      left: calc(50% - 12px);
+      color: var(--ui-control-color);
+    }
+
     .matrixblock > .fields > .flex-fields > .field > .status-badge {
       @include left(calc(var(--m) * -1));
     }