@social-mail/social-mail-client 1.2.131 → 1.2.133

package/content/editor/edit.html

@@ -10,10 +10,10 @@
         }
     </style>
     <body>
-        <link href="https://cdn.jsdelivr.net/npm/grapesjs@0.21.7/dist/css/grapes.min.css" rel="stylesheet"/>
-        <script src="https://cdn.jsdelivr.net/npm/grapesjs@0.21.7/dist/grapes.min.js"></script>
+        <link href="https://cdn.jsdelivr.net/npm/grapesjs@0.21.10/dist/css/grapes.min.css" rel="stylesheet"/>
+        <script src="https://cdn.jsdelivr.net/npm/grapesjs@0.21.10/dist/grapes.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@1.0.3/dist/index.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@1.0.2"></script>
+        <!-- <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@1.0.2"></script> -->
         <script src="https://cdn.jsdelivr.net/npm/grapesjs-blocks-basic@1.0.1"></script>
         <script src="https://cdn.jsdelivr.net/npm/grapesjs-plugin-forms@2.0.5"></script>
         <script src="https://cdn.jsdelivr.net/npm/grapesjs-component-countdown@1.0.1"></script>

package/dist/admin/AdminAppIndex.pack.js

@@ -39411,6 +39411,13 @@ System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/co
         }
     }
 
+    &[styler-full-screen] {
+        width: 100%;
+        max-width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+
     `.expand("[styler-layout=main]"));
       svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
       svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
@@ -40203,6 +40210,12 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
             }
           }
           return `
+
+    html, body {
+        margin: 0;
+        padding: 0;
+    }
+
     * {
         box-sizing: border-box;
     }
@@ -40215,12 +40228,20 @@ System.register(["./Styler", "./properties/stylerBorder", "./properties/layouts/
         background-color: var(--body-color);
         color: var(--default-text-color);
     }
+
+    img {
+        object-fit: none;
+    }
     
     ${StylerSets.low.join("\n")}
 
     ${properties.join("\n")}
 
     ${StylerSets.high.join("\n")}
+
+    * {
+        caret-color: #40404080 !important;
+    }
     
         `;
         }
@@ -41702,7 +41723,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block"], function (_expor
 System.register(["@web-atoms/core/dist/core/XNode", "./Block", "../styler/StylerSets", "@web-atoms/core/dist/style/styled", "../styler/Styler"], function (_export, _context) {
   "use strict";
 
-  var XNode, Block, StylerSets, styled, stylerVars, BlogComponent;
+  var XNode, Block, StylerSets, styled, stylerVars, BlogComponent, TypeWriterComponent;
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
@@ -41753,6 +41774,17 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "../styler/Styler
           "data-view": "dist/public/channel/ChannelView"
         })
       }));
+      _export("TypeWriterComponent", TypeWriterComponent = Block({
+        className: "fad fa-input-text",
+        title: "Add TypeWriter Component",
+        factory: () => XNode.create("section", {
+          "styler-layout": "component",
+          "data-package": "@social-mail/social-mail-client",
+          "data-host": "true",
+          "data-view": "dist/public/components/TypeWriter",
+          "data-json-args": `["Passionate Actor", "Method Actor", "Teleprompter"]`
+        })
+      }));
     }
   };
 });
@@ -42275,10 +42307,10 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@web-atoms/core/
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/PriceBox");
 
-System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons", "../blocks/Columns2", "../blocks/Columns3", "../blocks/RightImageBox", "@web-atoms/core/dist/web/core/AtomUI", "../blocks/PriceBox"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/sleep", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/view-model/Action", "@web-atoms/core/dist/web/controls/AtomControl", "../drag-drop/DragDropHelper", "../toolbars/UndoRedoToolbar", "../blocks/WrapGrid", "../toolbars/EditorToolbar", "../properties/Properties", "../styler/StylerSet", "./SelectedElement", "@web-atoms/core/dist/core/AtomBinder", "../styler/Styler", "../blocks/ImageBox", "../blocks/RowBox", "../blocks/ColumnBox", "../blocks/VerticalImageBox", "../blocks/Image", "../blocks/ImageCard", "../blocks/TextBox", "../blocks/Card", "../blocks/List", "../blocks/Components", "@web-atoms/core/dist/core/types", "../blocks/Buttons", "../blocks/Columns2", "../blocks/Columns3", "../blocks/RightImageBox", "@web-atoms/core/dist/web/core/AtomUI", "../blocks/PriceBox", "@web-atoms/core/dist/core/BindableProperty"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RowBox, ColumnBox, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, UMD, ImageLink, LinkButton, Columns2, Columns3, RightImageBox, descendentElementIterator, PriceTable, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
+  var __awaiter, __decorate, __metadata, Bind, XNode, sleep, styled, Action, AtomControl, InstallDragDropHelper, UndoRedoToolbar, WrapGrid, EditorToolbar, Properties, StylerSet, SelectedElement, AtomBinder, StylerVariable, ImageBox, RowBox, ColumnBox, VerticalImageBox, Image, ImageCard, TextBox, Card, List, BlogComponent, TypeWriterComponent, UMD, ImageLink, LinkButton, Columns2, Columns3, RightImageBox, descendentElementIterator, PriceTable, BindableProperty, HtmlPageEditor, desktopWidth, tabletWidth, mobileWidth;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -42335,6 +42367,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       List = _blocksList.List;
     }, function (_blocksComponents) {
       BlogComponent = _blocksComponents.BlogComponent;
+      TypeWriterComponent = _blocksComponents.TypeWriterComponent;
     }, function (_webAtomsCoreDistCoreTypes) {
       UMD = _webAtomsCoreDistCoreTypes.UMD;
     }, function (_blocksButtons) {
@@ -42350,6 +42383,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       descendentElementIterator = _webAtomsCoreDistWebCoreAtomUI.descendentElementIterator;
     }, function (_blocksPriceBox) {
       PriceTable = _blocksPriceBox.PriceTable;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
     }],
     execute: function () {
       styled.css`
@@ -42486,102 +42521,23 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             }, 100);
             return;
           }
-          void this.ready.then(() => __awaiter(this, void 0, void 0, function* () {
-            if (!this.htmlDocument) {
-              return;
-            }
-            const iframe = this.element;
-            if (this.htmlDocument !== iframe.contentDocument) {
-              this.htmlDocument = void 0;
-              yield this.loadContentDocument();
-            }
-            this.htmlDocument.open();
-            this.htmlDocument.write(v);
-            this.htmlDocument.addEventListener("click", e => {
-              const target = e.target;
-              const previous = this.selection.element;
-              if (previous === null || previous === void 0 ? void 0 : previous.isContentEditable) {
-                let start = target;
-                while (start) {
-                  if (previous === target) {
-                    return;
-                  }
-                  start = start.parentElement;
-                }
-                if (previous !== this.htmlDocument.body) {
-                  previous.removeAttribute("contentEditable");
-                }
-                this.commit();
+          void this.ready.then(() => {
+            const dom = new DOMParser();
+            const doc = dom.parseFromString(v, "text/html");
+            let baseElement = doc.querySelector("base");
+            if (baseElement) {
+              const href = baseElement.getAttribute("href");
+              if (href !== this.baseUrl) {
+                this.originalBaseUrl = href;
+                baseElement.setAttribute("href", this.baseUrl);
               }
-              e.preventDefault();
-              this.setSelection(target);
-            });
-            this.htmlDocument.addEventListener("dblclick", e => {
-              const target = e.target;
-              e.preventDefault();
-              const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
-              if (element.tagName === "IMG") {
-                this.changeImage().catch(console.error);
-                return;
-              }
-              if (element.getAttribute("data-editable") === "false") {
-                return;
-              }
-              if (element.hasAttribute("data-web-atoms-view")) {
-                return;
-              }
-              this.setSelection(element);
-            });
-            this.htmlDocument.addEventListener("scroll", e => {
-              this.hover.update();
-              this.selection.update();
-            }, {
-              passive: true
-            });
-            this.htmlDocument.addEventListener("pointerover", e => {
-              let target = e.target;
-              target = target.nodeType === Node.ELEMENT_NODE && target.tagName ? target : target.parentElement;
-              if (this.hover.element === target) {
-                return;
-              }
-              this.hover.update(target);
-            }, {
-              capture: true
-            });
-            this.htmlDocument.addEventListener("keydown", e => {
-              if (e.ctrlKey || e.metaKey) {
-                switch (e.key) {
-                  case "s":
-                    this.contentEditor.dispatchEvent(new CustomEvent("savePage", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                  case "z":
-                    this.contentEditor.dispatchEvent(new CustomEvent("undo", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                  case "y":
-                    this.contentEditor.dispatchEvent(new CustomEvent("redo", {
-                      bubbles: true
-                    }));
-                    e.preventDefault();
-                    break;
-                }
-              }
-            });
-            InstallDragDropHelper(this);
-            this.htmlDocument.close();
-            this.htmlDocument.body.contentEditable = "true";
-            setTimeout(() => {
-              this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-                yield this.setStylerSheet();
-                this.loadVariables();
-              }));
-            }, 10);
-          }));
+            } else {
+              baseElement = doc.createElement("base");
+              baseElement.setAttribute("href", this.baseUrl);
+              doc.head.insertAdjacentElement("afterbegin", baseElement);
+            }
+            return this.initDocument(doc.documentElement.outerHTML);
+          });
         }
         constructor(app, e) {
           super(app, e);
@@ -42620,7 +42576,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               class: "fa-solid fa-code"
             }))), XNode.create(EditorToolbar, {
               "data-element": "left"
-            }, XNode.create(TextBox, null), XNode.create(Image, null), XNode.create(WrapGrid, null), XNode.create(VerticalImageBox, null), XNode.create(ImageBox, null), XNode.create(RightImageBox, null), XNode.create(Card, null), XNode.create(ImageCard, null), XNode.create(RowBox, null), XNode.create(ColumnBox, null), XNode.create(Columns2, null), XNode.create(Columns3, null), XNode.create(List, null), XNode.create(BlogComponent, null), XNode.create(ImageLink, null), XNode.create(LinkButton, null), XNode.create(PriceTable, null)), XNode.create("div", {
+            }, XNode.create(TextBox, null), XNode.create(Image, null), XNode.create(WrapGrid, null), XNode.create(VerticalImageBox, null), XNode.create(ImageBox, null), XNode.create(RightImageBox, null), XNode.create(Card, null), XNode.create(ImageCard, null), XNode.create(RowBox, null), XNode.create(ColumnBox, null), XNode.create(Columns2, null), XNode.create(Columns3, null), XNode.create(List, null), XNode.create(BlogComponent, null), XNode.create(ImageLink, null), XNode.create(LinkButton, null), XNode.create(PriceTable, null), XNode.create(TypeWriterComponent, null)), XNode.create("div", {
               "data-element": "editor",
               "style-max-width": Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px")
             }, XNode.create("div", {
@@ -42694,7 +42650,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             }, XNode.create("i", {
               class: "fas fa-code"
             }), "Variables"), XNode.create(Properties, null))));
-            yield this.loadContentDocument();
+            this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
           });
         }
         buildXNode(node) {
@@ -42846,6 +42802,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           }
         }
         commit() {
+          var _a;
           this.redoList.clear();
           const lastHtml = this.lastHtml;
           const clone = this.htmlDocument.documentElement.cloneNode(true);
@@ -42876,6 +42833,16 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           }
           this.undoList.add(this.lastHtml);
           this.lastHtml = currentHtml;
+          if (this.baseUrl) {
+            if (!this.originalBaseUrl) {
+              (_a = clone.querySelector("base")) === null || _a === void 0 ? void 0 : _a.remove();
+            } else {
+              const baseUrl = clone.querySelector("base");
+              if (baseUrl) {
+                baseUrl.setAttribute("href", this.originalBaseUrl);
+              }
+            }
+          }
           this.element.dispatchEvent(new CustomEvent("htmlPageChanged", {
             detail: clone.outerHTML,
             bubbles: true
@@ -42896,6 +42863,98 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           this.htmlDocument.documentElement.innerHTML = this.redoList.removeAt(this.redoList.length - 1);
           this.htmlDocument.body.contentEditable = "true";
         }
+        initDocument(v) {
+          void this.ready.then(() => __awaiter(this, void 0, void 0, function* () {
+            this.htmlDocument = void 0;
+            yield this.loadContentDocument();
+            this.htmlDocument.open();
+            this.htmlDocument.write(v);
+            this.htmlDocument.addEventListener("click", e => {
+              const target = e.target;
+              const previous = this.selection.element;
+              if (previous === null || previous === void 0 ? void 0 : previous.isContentEditable) {
+                let start = target;
+                while (start) {
+                  if (previous === target) {
+                    return;
+                  }
+                  start = start.parentElement;
+                }
+                if (previous !== this.htmlDocument.body) {
+                  previous.removeAttribute("contentEditable");
+                }
+                this.commit();
+              }
+              e.preventDefault();
+              this.setSelection(target);
+            });
+            this.htmlDocument.addEventListener("dblclick", e => {
+              const target = e.target;
+              e.preventDefault();
+              const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
+              if (element.tagName === "IMG") {
+                this.changeImage().catch(console.error);
+                return;
+              }
+              if (element.getAttribute("data-editable") === "false") {
+                return;
+              }
+              if (element.hasAttribute("data-web-atoms-view")) {
+                return;
+              }
+              this.setSelection(element);
+            });
+            this.htmlDocument.addEventListener("scroll", e => {
+              this.hover.update();
+              this.selection.update();
+            }, {
+              passive: true
+            });
+            this.htmlDocument.addEventListener("pointerover", e => {
+              let target = e.target;
+              target = target.nodeType === Node.ELEMENT_NODE && target.tagName ? target : target.parentElement;
+              if (this.hover.element === target) {
+                return;
+              }
+              this.hover.update(target);
+            }, {
+              capture: true
+            });
+            this.htmlDocument.addEventListener("keydown", e => {
+              if (e.ctrlKey || e.metaKey) {
+                switch (e.key) {
+                  case "s":
+                    this.contentEditor.dispatchEvent(new CustomEvent("savePage", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                  case "z":
+                    this.contentEditor.dispatchEvent(new CustomEvent("undo", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                  case "y":
+                    this.contentEditor.dispatchEvent(new CustomEvent("redo", {
+                      bubbles: true
+                    }));
+                    e.preventDefault();
+                    break;
+                }
+              }
+            });
+            InstallDragDropHelper(this);
+            this.htmlDocument.close();
+            this.htmlDocument.body.contentEditable = "true";
+            setTimeout(() => {
+              this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+                yield this.setStylerSheet();
+                this.loadVariables();
+              }));
+            }, 10);
+          }));
+        }
         setStylerSheet() {
           return __awaiter(this, void 0, void 0, function* () {
             const document = this.htmlDocument;
@@ -42930,10 +42989,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               this.htmlDocument = this.contentEditor.contentDocument;
               yield sleep(100);
             }
-            this.htmlDocument.body.contentEditable = "true";
           });
         }
       });
+      __decorate([BindableProperty, __metadata("design:type", String)], HtmlPageEditor.prototype, "baseUrl", void 0);
       __decorate([Action({
         onEvent: "delete-element"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], HtmlPageEditor.prototype, "deleteElement", null);
@@ -43783,6 +43842,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             }
             const indexHtml = this.root.children.find(x => x.name === "index.html");
             this.selectedFile = indexHtml;
+            const baseUrl = `/api/site/draft/${this.root.appFileID}/`;
             this.titleRenderer = () => XNode.create("div", {
               "data-layout": "row"
             }, XNode.create("div", {
@@ -43813,7 +43873,13 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               "data-click-event": "view-website",
               icon: "fad fa-globe-pointer",
               text: "View Site"
-            }), this.parameters.templates && XNode.create("div", {
+            }), XNode.create("a", {
+              href: `/api/site/draft/${this.webSite.folderID}`,
+              target: "_blank"
+            }, XNode.create(EditIconTextButton, {
+              icon: "fad fa-globe-pointer",
+              text: "Preview Draft"
+            })), this.parameters.templates && XNode.create("div", {
               "data-layout": "row",
               "style-display": Bind.oneWay(() => this.selectedFile.appFileID > 0)
             }, XNode.create("i", {
@@ -43846,6 +43912,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               }
             }), XNode.create(WebSitePageEditor, {
               class: "file-list",
+              baseUrl: baseUrl,
               folder: this.root,
               presenter: Bind.presenter(c => this.htmlEditor = c),
               "event-html-page-changed": ce => this.pageContent = ce.detail,