haxtheweb/issues#1898 start

Author: btopro

elements/grid-plate/grid-plate.js

@@ -186,31 +186,6 @@ class GridPlate extends LitElement {
             0.5s margin ease-in-out
           );
         }
-        :host([data-hax-ray]) [data-layout-slotname].not-shown {
-          display: block;
-          opacity: 0.4;
-          width: 0;
-        }
-        :host([data-hax-ray]) [data-layout-slotname].not-shown.has-nodes {
-          width: 100%;
-          transition: none;
-        }
-        :host([data-hax-ray]) .not-shown:hover {
-          opacity: 1;
-        }
-        :host([data-hax-ray]) .not-shown:hover::before {
-          content: "Hidden bylayout";
-          position: sticky;
-          display: inline-flex;
-          background-color: black;
-          color: white;
-          padding: 0px 8px;
-          font-size: 12px;
-          line-height: 16px;
-          margin: 12px 13px;
-          float: right;
-          width: 124px;
-        }
         /** this implies hax editing state is available **/
         :host([data-hax-ray]) div ::slotted(*) {
           border: var(
@@ -327,7 +302,7 @@ class GridPlate extends LitElement {
     this.breakpointMd = 1200;
     this.breakpointLg = 1500;
     this.breakpointXl = 1800;
-    this.columns = 6;
+    this.columns = 4;
     this.disableResponsive = false;
     this.layout = "1-1";
     this.layouts = new GridPlateLayoutOptions().layouts;

elements/grid-plate/src/grid-plate.js

@@ -186,31 +186,6 @@ class GridPlate extends LitElement {
             0.5s margin ease-in-out
           );
         }
-        :host([data-hax-ray]) [data-layout-slotname].not-shown {
-          display: block;
-          opacity: 0.4;
-          width: 0;
-        }
-        :host([data-hax-ray]) [data-layout-slotname].not-shown.has-nodes {
-          width: 100%;
-          transition: none;
-        }
-        :host([data-hax-ray]) .not-shown:hover {
-          opacity: 1;
-        }
-        :host([data-hax-ray]) .not-shown:hover::before {
-          content: "Hidden bylayout";
-          position: sticky;
-          display: inline-flex;
-          background-color: black;
-          color: white;
-          padding: 0px 8px;
-          font-size: 12px;
-          line-height: 16px;
-          margin: 12px 13px;
-          float: right;
-          width: 124px;
-        }
         /** this implies hax editing state is available **/
         :host([data-hax-ray]) div ::slotted(*) {
           border: var(
@@ -327,7 +302,7 @@ class GridPlate extends LitElement {
     this.breakpointMd = 1200;
     this.breakpointLg = 1500;
     this.breakpointXl = 1800;
-    this.columns = 6;
+    this.columns = 4;
     this.disableResponsive = false;
     this.layout = "1-1";
     this.layouts = new GridPlateLayoutOptions().layouts;

elements/hax-body-behaviors/lib/HAXLayouts.js

@@ -23,31 +23,6 @@ export const HaxLayoutBehaviors = function (SuperClass) {
               0.5s margin ease-in-out
             );
           }
-          :host([data-hax-ray]) [data-layout-slotname].not-shown {
-            display: block;
-            opacity: 0.4;
-            width: 0;
-          }
-          :host([data-hax-ray]) [data-layout-slotname].not-shown.has-nodes {
-            width: 100%;
-            transition: none;
-          }
-          :host([data-hax-ray]) .not-shown:hover {
-            opacity: 1;
-          }
-          :host([data-hax-ray]) .not-shown:hover::before {
-            content: "Hidden by layout";
-            position: sticky;
-            display: inline-flex;
-            background-color: black;
-            color: white;
-            padding: 0px 8px;
-            font-size: 12px;
-            line-height: 16px;
-            margin: 12px 13px;
-            float: right;
-            width: 124px;
-          }
           /** this implies hax editing state is available **/
           :host([data-hax-ray]) ::slotted(*) {
             outline: var(--hax-layout-slotted-outline-width, 0px)

elements/hax-body/lib/hax-store.js

@@ -1276,6 +1276,27 @@ class HaxStore extends I18NMixin(winEventsElement(HAXElement(LitElement))) {
     if (e.detail.command && e.detail.command === "removeFormat") {
       this.activeNode.innerHTML = stripMSWord(this.activeNode.innerHTML);
     }
+    // @todo this will help with keeping styling and slot in some situation
+    // there's still something odd w/ ul/ol in grids that will need explored.
+    if (e.detail.command && e.detail.command === "formatBlock") {
+      let dataset = {...this.activeNode.dataset};
+      let slot = this.activeNode.slot;
+      // the delay allows HAX to switch the element and insert where it used to be
+      // after which point we can quickly set these prims that get lost otherwise
+      // as this is handled by the browser to do the text editing transform
+      // as opposed to HAX directly like web components get :)
+      setTimeout(() => {
+        for (var i in dataset) {
+          if (!i.startsWith('hax')) {
+            this.activeNode.dataset[i] = dataset[i];
+          }
+        }
+        // if it had a slot, ensure we maintain that
+        if (slot) {
+          this.activeNode.setAttribute('slot', slot);
+        }
+      }, 0);
+    }
   }
   /**
    * Intercept paste event and clean it up before inserting the contents