@social-mail/social-mail-client 1.2.151 → 1.2.152

package/package.json

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

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

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+import { StylerSets } from "../styler/StylerSets";
+import styled from "@web-atoms/core/dist/style/styled";
+import { defaultImageSrc } from "./defaultImage";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "image-gallery": any;
+        }
+    }
+}
+
+StylerSets.register("low", styled.css `
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & > *:empty:before {
+        background-color: #ddd;
+        color: #000;
+        font-size: 16px;
+        font-weight: bold;
+        font-family: 'Courier New', Courier, monospace;
+        height: 100%;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        min-height: 30px;
+        opacity: 0.3;
+        border-radius: 3px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        content: "Container";
+
+    }
+`.expand("image-gallery"));
+
+StylerSets.register("low", styled.css `
+    & image-gallery {
+        & > * {
+            max-height: 50vh;
+            max-width: 50vw;
+            margin: 10px;
+        }
+    }
+`.expand("body[editing]"));
+
+export const ImageGallery = Block({
+    className: "fad fa-panorama",
+    title: "Add Carousel",
+    factory: () => <image-gallery>
+        <img src={defaultImageSrc}/>
+        <img src={defaultImageSrc}/>
+        <img src={defaultImageSrc}/>
+    </image-gallery>
+});

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

@@ -36,6 +36,7 @@ import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import { Billboard } from "../blocks/Billboard";
 import { OutlineText } from "../blocks/OutlineText";
 import { Carousel } from "../blocks/Carousel";
+import { ImageGallery } from "../blocks/ImageGallery";
 
     styled.css `
         display: grid;
@@ -290,6 +291,7 @@ export default class HtmlPageEditor extends AtomControl {
                 <Billboard/>
                 <OutlineText/>
                 <Carousel/>
+                <ImageGallery/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>
@@ -534,6 +536,7 @@ export default class HtmlPageEditor extends AtomControl {
         const clone = this.htmlDocument.documentElement.cloneNode(true) as HTMLElement;
         const body = clone.querySelector("body");
         body.removeAttribute("contentEditable");
+        body.removeAttribute("editing");
         const all = clone.querySelectorAll("*");
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
         for (let index = 0; index < all.length; index++) {
@@ -584,6 +587,7 @@ export default class HtmlPageEditor extends AtomControl {
         this.redoList.insert(this.redoList.length, this.htmlDocument.documentElement.innerHTML);
         this.htmlDocument.documentElement.innerHTML = this.undoList.removeAt(this.undoList.length-1);
         this.htmlDocument.body.contentEditable = "true";
+        this.htmlDocument.body.setAttribute("editing", "true");
     }
 
     @Action({ onEvent: "redo"})
@@ -591,6 +595,7 @@ export default class HtmlPageEditor extends AtomControl {
         this.undoList.insert(this.undoList.length, this.htmlDocument.documentElement.innerHTML);
         this.htmlDocument.documentElement.innerHTML = this.redoList.removeAt(this.redoList.length-1);
         this.htmlDocument.body.contentEditable = "true";
+        this.htmlDocument.body.setAttribute("editing", "true");
     }
 
     protected initDocument(v: string) {
@@ -674,6 +679,7 @@ export default class HtmlPageEditor extends AtomControl {
             this.htmlDocument.close();
 
             this.htmlDocument.body.contentEditable = "true";
+            this.htmlDocument.body.setAttribute("editing", "true");
 
             // install styler...
             setTimeout(() => {

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

@@ -53,7 +53,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             script.setAttribute("defer", "true");
             this.htmlDocument.head.appendChild(script);
         }
-        script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@1.0.18/dist/components.webpack.js");
+        script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@1.0.24/dist/components.webpack.js");
     }