@social-mail/social-mail-client 1.2.132 → 1.2.134

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,6 +40228,10 @@ 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")}
 
@@ -40314,112 +40331,17 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/groups/LayoutEditor");
 
-System.register(["tslib", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/AtomBinder"], function (_export, _context) {
+System.register(["./PropertyEditor"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, BindableProperty, AtomControl, XNode, Bind, AtomBinder, SizeEditorControl, BindSizeEditor;
-  _export("default", void 0);
+  var DropDownProperty, SizeEditorControl;
   return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistCoreBindableProperty) {
-      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistCoreAtomBinder) {
-      AtomBinder = _webAtomsCoreDistCoreAtomBinder.AtomBinder;
+    setters: [function (_PropertyEditor) {
+      DropDownProperty = _PropertyEditor.DropDownProperty;
     }],
     execute: function () {
-      _export("BindSizeEditor", BindSizeEditor = Bind.forControl());
-      _export("default", SizeEditorControl = class SizeEditorControl extends AtomControl {
-        constructor() {
-          super(...arguments);
-          this._value = "";
-          this._isChanging = false;
-          this._old = "";
-        }
-        get isCustom() {
-          return this.propertyValue === "custom";
-        }
-        set isCustom(v) {
-          if (v) {
-            this.propertyValue = "custom";
-          } else {
-            this.propertyValue = this._old;
-          }
-        }
-        get propertyValue() {
-          return this._value;
-        }
-        set propertyValue(v) {
-          if (this._isChanging) {
-            return;
-          }
-          this._isChanging = true;
-          this._old = v && v !== "custom" ? this._value : this._old;
-          this._value = v;
-          AtomBinder.refreshValue(this, "propertyValue");
-          AtomBinder.refreshValue(this, "valueAsNumber");
-          AtomBinder.refreshValue(this, "isCustom");
-          this._isChanging = false;
-        }
-        get valueAsNumber() {
-          var _a;
-          const v = this.propertyValue;
-          if (!v || v === "custom") {
-            return 0;
-          }
-          return (_a = this.values.findIndex(item => item.name === v)) !== null && _a !== void 0 ? _a : 0;
-        }
-        set valueAsNumber(v) {
-          var _a;
-          this.propertyValue = ((_a = this.values[v]) === null || _a === void 0 ? void 0 : _a.name) || this._old;
-        }
-        init() {
-          return __awaiter(this, void 0, void 0, function* () {
-            const parent = this.parent;
-            const pv = parent.selection.style(this.property.key);
-            this.values = this.property.values.filter(x => x.name !== "custom");
-            this.render(XNode.create("div", {
-              propertyValue: Bind.sourceTwoWays(pv, x => x.source.value),
-              custom: Bind.sourceTwoWays(pv, x => x.source.custom),
-              "data-element": "property-editor",
-              "data-display": "flex",
-              "data-justify-items": "stretch"
-            }, XNode.create("div", {
-              "data-layout": "row"
-            }, XNode.create("label", {
-              "data-font-size": "small",
-              text: Bind.oneWay(() => this.label)
-            }), XNode.create("input", {
-              type: "checkbox",
-              checked: Bind.twoWaysImmediate(() => this.isCustom)
-            })), XNode.create("div", null, XNode.create("input", {
-              "style-display": Bind.oneWay(() => !this.isCustom),
-              type: "range",
-              min: 0,
-              max: this.values.length - 2,
-              value: Bind.twoWays(() => this.valueAsNumber)
-            }), XNode.create("input", {
-              "style-display": Bind.oneWay(() => this.isCustom),
-              type: "text",
-              value: Bind.twoWaysImmediate(() => this.custom)
-            }))));
-          });
-        }
-        preCreate() {
-          this.runAfterInit(() => this.app.runAsync(() => this.init()));
-        }
-      });
-      __decorate([BindableProperty, __metadata("design:type", String)], SizeEditorControl.prototype, "label", void 0);
-      __decorate([BindableProperty, __metadata("design:type", Function)], SizeEditorControl.prototype, "property", void 0);
-      __decorate([BindableProperty, __metadata("design:type", String)], SizeEditorControl.prototype, "custom", void 0);
+      SizeEditorControl = DropDownProperty;
+      _export("default", SizeEditorControl);
     }
   };
 });
@@ -40649,43 +40571,41 @@ System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor"
 System.register(["@web-atoms/core/dist/core/XNode", "../controls/PropertyEditor", "../../styler/StylerSet", "../controls/SizeEditorControl"], function (_export, _context) {
   "use strict";
 
-  var XNode, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, BindSizeEditor, properties;
+  var XNode, BindEditor, DropDownProperty, ExpanderPropertyEditor, StylerSet, SizeEditorControl, properties;
   function PositionGroupEditor() {
     return XNode.create(ExpanderPropertyEditor, {
       label: "Position"
     }, XNode.create(DropDownProperty, {
       label: "Position",
       property: properties.stylerPosition
-    }), XNode.create(SizeEditorControl, {
+    }), XNode.create("section", {
+      "style-display": BindEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.selection.currentStyle.position))
+    }, XNode.create(SizeEditorControl, {
       label: "Left",
-      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
       property: properties.stylerLeft
     }), XNode.create(SizeEditorControl, {
       label: "Top",
-      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
       property: properties.stylerTop
     }), XNode.create(SizeEditorControl, {
       label: "Right",
-      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
       property: properties.stylerRight
     }), XNode.create(SizeEditorControl, {
       label: "Bottom",
-      "style-display": BindSizeEditor.oneWay(e => /relative|fixed|absolute|sticky/i.test(e.parent.selection.currentStyle.position)),
       property: properties.stylerBottom
-    }));
+    })));
   }
   _export("default", PositionGroupEditor);
   return {
     setters: [function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
     }, function (_controlsPropertyEditor) {
+      BindEditor = _controlsPropertyEditor.BindEditor;
       DropDownProperty = _controlsPropertyEditor.DropDownProperty;
       ExpanderPropertyEditor = _controlsPropertyEditor.ExpanderPropertyEditor;
     }, function (_stylerStylerSet) {
       StylerSet = _stylerStylerSet.StylerSet;
     }, function (_controlsSizeEditorControl) {
       SizeEditorControl = _controlsSizeEditorControl.default;
-      BindSizeEditor = _controlsSizeEditorControl.BindSizeEditor;
     }],
     execute: function () {
       ({
@@ -41706,7 +41626,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;
@@ -41757,6 +41677,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"]`
+        })
+      }));
     }
   };
 });
@@ -42282,7 +42213,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "./Block", "@web-atoms/core/
 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, BindableProperty, 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) {
@@ -42339,6 +42270,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) {
@@ -42478,29 +42410,37 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
       tabletWidth = 768;
       mobileWidth = 480;
       _export("default", HtmlPageEditor = class HtmlPageEditor extends AtomControl {
-        get htmlPageUrl() {
-          return this.htmlDocument.baseURI.toString();
+        get htmlPage() {
+          var _a, _b;
+          return (_b = (_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.outerHTML;
         }
-        set htmlPageUrl(v) {
+        set htmlPage(v) {
           if (!this.element) {
             return;
           }
           if (!this.ready) {
             setTimeout(() => {
-              this.htmlPageUrl = v;
+              this.htmlPage = v;
             }, 100);
             return;
           }
-          console.log("Loading url");
-          this.contentEditor.setAttribute("src", v);
-          this.initDocument();
-        }
-        get htmlPage() {
-          var _a, _b;
-          return (_b = (_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.documentElement) === null || _b === void 0 ? void 0 : _b.outerHTML;
-        }
-        set htmlPage(v) {
-          throw new Error("Use url");
+          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);
+              }
+            } 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);
@@ -42539,7 +42479,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", {
@@ -42771,16 +42711,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           const clone = this.htmlDocument.documentElement.cloneNode(true);
           const body = clone.querySelector("body");
           body.removeAttribute("contentEditable");
-          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);
-              }
-            }
-          }
           const all = clone.querySelectorAll("*");
           for (let index = 0; index < all.length; index++) {
             const element = all[index];
@@ -42806,6 +42736,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
@@ -42826,10 +42766,12 @@ 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() {
+        initDocument(v) {
           void this.ready.then(() => __awaiter(this, void 0, void 0, function* () {
-            yield this.loadContentDocument(this.contentEditor.contentDocument.baseURI);
-            console.log("Attaching events");
+            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;
@@ -42906,6 +42848,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               }
             });
             InstallDragDropHelper(this);
+            this.htmlDocument.close();
             this.htmlDocument.body.contentEditable = "true";
             setTimeout(() => {
               this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
@@ -42942,20 +42885,13 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           };
           this.pageVariables = StylerSet.instance.vars.map(x => new StylerVariable(x.name, x.value, this.htmlDocument, onChange));
         }
-        loadContentDocument(url) {
-          var _a;
+        loadContentDocument() {
           return __awaiter(this, void 0, void 0, function* () {
-            while (url === this.contentEditor.contentDocument.baseURI) {
-              yield sleep(100);
-            }
-            for (;;) {
+            this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
+            while (!this.htmlDocument) {
               this.htmlDocument = this.contentEditor.contentDocument;
-              if (((_a = this.htmlDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
-                break;
-              }
               yield sleep(100);
             }
-            this.htmlDocument.body.contentEditable = "true";
           });
         }
       });
@@ -43792,14 +43728,14 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
           this.pageContent = "";
         }
         init() {
-          var _a, _b, _c;
-          var _d;
+          var _a, _b;
+          var _c;
           return __awaiter(this, void 0, void 0, function* () {
             this.search = "";
             this.root = yield this.cloudFileService.root(this.parameters);
             this.title = this.root.name;
             this.webSite = yield this.websiteService.get(this.root.appFileID);
-            (_a = (_d = this.root).children) !== null && _a !== void 0 ? _a : _d.children = [];
+            (_a = (_c = this.root).children) !== null && _a !== void 0 ? _a : _c.children = [];
             this.root.children.remove(x => x.isDeleted || !(/^(text\/(html|css))$/i.test(x.contentType) || x.isFolder));
             this.root.children.sort((a, b) => a.isFolder ? -1 : 0);
             yield this.onItemExpanded(this.root);
@@ -43809,11 +43745,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;
-            let baseUrl = void 0;
-            const firstHost = (_c = this.webSite.hosts) === null || _c === void 0 ? void 0 : _c[0];
-            if (firstHost) {
-              baseUrl = `https://draft-${firstHost.host}`;
-            }
+            const baseUrl = `/api/site/draft/${this.root.appFileID}/`;
             this.titleRenderer = () => XNode.create("div", {
               "data-layout": "row"
             }, XNode.create("div", {
@@ -43844,7 +43776,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", {
@@ -43877,10 +43815,11 @@ 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,
-              htmlPageUrl: Bind.oneWay(() => "/api/site/draft/" + this.webSite.folderID + "/" + this.selectedFile.name)
+              htmlPage: Bind.oneWayAsync((s, e, cancelToken) => this.selectedFile ? FetchBuilder.get(this.selectedFile.downloadUrl).cancelToken(cancelToken).responseAsText(true) : void 0)
             }));
             this.footerRenderer = () => XNode.create("div", {
               "data-layout": "command-row",