@social-mail/social-mail-client 1.4.21 → 1.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.4.21",
+  "version": "1.4.23",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/blocks/GridBox.tsx

@@ -27,3 +27,34 @@ export const GridBox = Block({
 });
 
 
+StylerSets.register("low", styled.css `
+    display: grid;
+    gap: ${stylerVars.sizeDefault};
+    padding: ${stylerVars.sizeDefault};
+    border-radius: ${stylerVars.sizeDefault};
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+
+    & > * {
+        grid-row: 1;
+        grid-column: 1;
+    }
+
+`.expand("[styler-layout=grid-1x1]"));
+
+
+export const Grid1x1Box = Block({
+    className: "fa-duotone fa-solid fa-grid-5",
+    title: "Add Grid Box",
+    // text: "\uf73f",
+    factory: () => <section
+        styler-layout="grid-1x1">
+        <section></section>
+        <section></section>
+    </section>
+});
+
+

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -81,7 +81,7 @@ import { GridBox } from "../blocks/GridBox";
 
         & > [data-element=left] {
             background-color: canvas;
-            grid-row: 1 / span 3;
+            grid-row: 1 / span 2;
             grid-column: 1;
             border-right: solid 1px lightgray;
             border-radius: 0;
@@ -90,7 +90,7 @@ import { GridBox } from "../blocks/GridBox";
 
         & > [data-element=right] {
             background-color: canvas;
-            grid-row: 1 / span 3;
+            grid-row: 1 / span 2;
             grid-column: 3;
             border-left: solid 1px lightgray;
             border-radius: 0;

package/src/site-editor/editor/SelectedElement.tsx

@@ -40,6 +40,7 @@ export class SelectedElement {
 
     private dragTimeout: number;
     private mo: MutationObserver;
+    private ro: ResizeObserver;
     private e: HTMLElement;
     private styles = new Map();
     private cachedStyle: CSSStyleDeclaration;
@@ -75,6 +76,10 @@ export class SelectedElement {
                 AtomBinder.refreshValue(iterator, "custom");
             }
         });
+
+        this.ro = new ResizeObserver(() => this.updateRect());
+
+        // setInterval(() => this.updateRect(), 1000);
     }
 
     setDraggable() {
@@ -188,6 +193,7 @@ export class SelectedElement {
                     clearTimeout(this.dragTimeout);
                     this.dragTimeout = 0;
                 }
+                this.ro.disconnect();
             }
             this.e = e;
             AtomBinder.refreshValue(this, "element");
@@ -198,6 +204,8 @@ export class SelectedElement {
             AtomBinder.refreshValue(this, "attributes");
             AtomBinder.refreshValue(this, "styleProperty");
             this.mo.observe(e, { attributes: true });
+            this.ro.observe(e.ownerDocument.body);
+            this.ro.observe(e);
         }
         e = this.e;
         if (!e) {
@@ -205,15 +213,28 @@ export class SelectedElement {
         }
         this.name = e.tagName.toLowerCase();
         this.parentName = e.parentElement?.tagName.toLowerCase();
-        const r = e.getBoundingClientRect();
         this.isImage = /^(img|video|pdf)/i.test(this.name);
+        this.updateRect();
+
+        for (const iterator of this.styles.values()) {
+            AtomBinder.refreshValue(iterator, "value");
+            AtomBinder.refreshValue(iterator, "custom");
+        }
+    }
+
+    private updateRect() {
+        const { e } = this;
+        if (!e) {
+            return;
+        }
+        const r = e.getBoundingClientRect();
         const minusWidth = Math.min(0, r.left);
         this.top = `${r.top + 10}px`;
         this.left = `${Math.max(0, r.left) + 10}px`;
         this.width = `${r.width + minusWidth}px`;
         this.height = `${r.height}px`;
 
-        switch(this.dropAnchor) {
+        switch (this.dropAnchor) {
             case "top":
                 this.height = "2px";
                 break;
@@ -229,10 +250,5 @@ export class SelectedElement {
                 this.width = "2px";
                 break;
         }
-
-        for (const iterator of this.styles.values()) {
-            AtomBinder.refreshValue(iterator, "value");
-            AtomBinder.refreshValue(iterator, "custom");
-        }
     }
 }

package/src/site-editor/properties/groups/LayoutEditor.tsx

@@ -19,6 +19,7 @@ export default function LayoutEditor () {
                 "component",
                 "feature",
                 "grid",
+                "grid-1x1",
                 "image-box",
                 "image-card",
                 "main",