@social-mail/social-mail-client 1.2.237 → 1.2.239

package/package.json

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

package/src/common/SocialMailApp.ts

@@ -3,6 +3,7 @@ import type { IUser } from "../model/model";
 interface ISocialMailConfig {
     path: string,
     name: string,
+    cdn: string,
     externalLogin: string
 }
 

package/src/common/fileUrl.ts

@@ -2,10 +2,11 @@ import { IAppFile } from "../model/model";
 import { apiPath } from "./apiPath";
 
 export const imageUrl = (site: IAppFile, file: IAppFile, size?: number) => {
+    const name = encodeURIComponent(file.name);
     if (!size) {
-        return apiPath(`/api/site/asset/webp/${site.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.webp`);
+        return apiPath(`/api/site/asset/webp/${site.appFileID}/${file.appFileID}/${file.fileContentID}/${name}.webp`);
     }
-    return  apiPath(`/api/site/asset/webp(${size})/${site.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.${size}.webp`);
+    return  apiPath(`/api/site/asset/webp(${size})/${site.appFileID}/${file.appFileID}/${file.fileContentID}/${name}.${size}.webp`);
 };
 
 export const srcSetUrl = (site: IAppFile, file: IAppFile) => {

package/src/common/pages/websites/templates/ChooseWebSiteTemplatePage.tsx

@@ -1,5 +1,5 @@
 import { PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
-import { IAppFile, IWebSiteFolder } from "../../../../model/model";
+import { AppFile, IAppFile, IWebSiteFolder } from "../../../../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import { UMD } from "@web-atoms/core/dist/core/types";
@@ -14,6 +14,8 @@ import TemplateService from "./TemplateService";
 import styled from "@web-atoms/core/dist/style/styled";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { AddIconTextButton } from "../../../controls/buttons/IconButton";
+import SocialMailApp from "../../../SocialMailApp";
+import EntityService from "../../../../services/EntityService";
 
 const css = styled.css `
     & .site {
@@ -71,6 +73,9 @@ export default class ChooseWebSiteTemplatePage extends PopupWindowPage {
     @InjectProperty
     cloudFileService: CloudFileService;
 
+    @InjectProperty
+    entityService: EntityService;
+
     @InjectProperty
     mimeTypeService: MimeTypeService;
 
@@ -136,38 +141,8 @@ export default class ChooseWebSiteTemplatePage extends PopupWindowPage {
 
     @Action({ onEvent: "use-template", close: true })
     async useTemplate(item: IWebSiteFolder) {
-        // get vars....
-        const host = `/api/site/draft/${item.folderID}`;
-
-        let html = await FetchBuilder.get(`${host}/index.html`)
-            .responseAsText();
-
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, "text/html");
-
-        // add all stylesheets
-        let modified = false;
-
-        for (const iterator of Array.from(doc.querySelectorAll(`link[rel="stylesheet"]`))) {
-            const href = iterator.getAttribute("href");
-            if( /vars\.css/i.test(href)) {
-                continue;
-            }
-            modified = true;
-            // upload all styles...
-            const path = href.split("#")[0].split("?")[0];
-            const name = path.split("/").pop();
-            const style = await this.upload(void 0, name, "styles", void 0, href);
-            iterator.setAttribute("href", `/api/site/asset/download/${this.parameters.appFileID}/${style.appFileID}/${style.fileContentID}/${name}`);
-        }
-
-        if (modified) {
-            html = doc.documentElement.outerHTML;
-        }
-
-        await this.upload(host, "index.html", void 0, html);
-        await this.upload(host, "vars.css", "styles");
-
+        await this.templateService.copyTemplate(item.folderID, this.parameters.appFileID);
+        return true;
     }
 
     // @Action({ onEvent: "create-template", close: true})

package/src/common/pages/websites/templates/TemplateService.ts

@@ -1,15 +1,26 @@
 import DITransient from "@web-atoms/core/dist/di/DITransient";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import EntityService from "../../../../services/EntityService";
-import { AppFile, WebSiteFolder } from "../../../../model/model";
+import { AppFile, IAppFile, WebSiteFolder } from "../../../../model/model";
 import { Sql } from "../../../Sql";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import CloudFileService from "../../../../web/page/files/service/CloudFileService";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
 
 @DITransient()
-export default class TemplateService {
+export default class TemplateService extends TaskManager {
 
     @Inject
     private entityService: EntityService;
 
+    @Inject
+    private cloudFileService: CloudFileService;
+
+    private fileMap: Map<any, IAppFile>;
+    private fcMap: Map<any, IAppFile>;
+    private absolutePaths: Map<IAppFile, string>;
+    private root: IAppFile;
+
     async search({
         search = "",
         start = 0,
@@ -29,4 +40,229 @@ export default class TemplateService {
         });
     }
 
+    async copyTemplate(templateFolderID, destFolderID, siteRoot = "/") {
+
+        // all files
+        const allFiles = await this.entityService.query(AppFile, "templateSnapshot", templateFolderID)
+            .toArray();
+
+        const fileMap = this.fileMap = new Map();
+        const fcMap = this.fcMap = new Map();
+        this.absolutePaths = new Map();
+
+        for (const iterator of allFiles) {
+            fileMap.set(iterator.appFileID, iterator);
+            if (iterator.fileContentID) {
+                fcMap.set(iterator.fileContentID, iterator);
+            }
+            if (iterator.contentType === "snapshot" && !iterator.parent) {
+                this.root = iterator;
+                continue;
+            }
+        }
+
+        for (const iterator of this.root.children) {
+            await this.copyFile(iterator, destFolderID, siteRoot);
+        }
+
+        this.fcMap = null;
+        this.fileMap = null;
+        this.absolutePaths = null;
+    }
+
+    async copyFile(source: IAppFile, destFolderID: number, siteRoot: string) {
+        siteRoot = siteRoot + source.name + "/";
+
+        // check if file exists...
+
+        let destFile = await this.entityService.query(AppFile)
+            .where({ destFolderID, name: source.name }, (p) => (x) => x.parentID === p.destFolderID
+                && x.isDeleted === false
+                && x.name === p.name)
+            .firstOrDefault();
+        destFile ??= AppFile.create({
+            ... source,
+            fileContentID: void 0,
+            appFileID: void 0,
+            parentID: destFolderID
+        });
+        if (destFile.fileContentID !== source.fileContentID) {
+            destFile.fileContentID = source.fileContentID;
+            await this.entityService.save(destFile, (c) => c);
+            destFile.downloadUrl = source.downloadUrl;
+            destFile.url = source.url;
+        }
+
+        const tasks = [];
+
+        if (source.isFolder && source.children) {
+            for (const child of source.children) {
+                tasks.push(this.run(() => this.copyFile(child, destFile.appFileID, siteRoot)));
+            }
+        }
+
+        if (tasks.length) {
+            await Promise.all(tasks);
+        }
+
+        if (!destFile.fileContentID) {
+            return;
+        }
+
+        // replace html or css...
+        if (/\.html?$/i.test(destFile.name)) {
+            await this.updateHtmlReferences(source, destFile, siteRoot);
+            return;
+        }
+
+        if (/\.css$/i.test(destFile.name)) {
+            let css = await FetchBuilder.get(destFile.downloadUrl).responseAsText();
+            css = this.updateCssReferences(source, destFile, css);
+            if (css) {
+                await this.cloudFileService.saveFile({
+                    appFileID: destFile.appFileID,
+                    content: new File([css], destFile.name, { type: destFile.contentType })
+                });
+            }
+        }
+    }
+
+    updateCssReferences(source: IAppFile, destFile: IAppFile, css: string) {
+
+        const regex = /url\(((\"[^\"]+\")|([^\)]+))\)/gmi;
+
+        let updated = false;
+        let m;
+        const list = new Set<string>();
+        while ((m = regex.exec(css)) !== null) {
+            // This is necessary to avoid infinite loops with zero-width matches
+            if (m.index === regex.lastIndex) {
+                regex.lastIndex++;
+            }
+            if (m.length) {
+                const [matched, group] = m;
+                if (group) {
+                    list.add(group);
+                }
+            }
+        }
+
+        for (const fg of list.values()) {
+            let link = fg;
+            const first = link[0];
+            const encoded = first === '"' || first === "'";
+            if (encoded) {
+                link = link.substring(1, link.length - 1);
+            }
+
+            if (!/(https?\:)?\/\//i.test(link)) {
+                continue;
+            }
+
+            const url = new URL(link, "https://socialmail.in");
+            if(!url.pathname.startsWith("/api/site/snapshot/")) {
+                continue;
+            }
+            const { 6: fcID } = url.pathname.split("/");
+
+            // get relative path...
+            const resource = this.fcMap.get(fcID);
+            link = this.getRelativePath(source, resource);
+            css = css.split(fg).join(link);
+            updated = true;
+        }
+
+        if (updated) {
+            return css;
+        }
+        return null;
+    }
+
+    async updateHtmlReferences(source: IAppFile, destFile: IAppFile, siteRoot: string) {
+        const parser = new DOMParser();
+        const text = await FetchBuilder.get(destFile.downloadUrl).responseAsText();
+        const dom = parser.parseFromString(text, "text/html");
+
+        let modified = false;
+
+        for (const iterator of Array.from(dom.documentElement.querySelectorAll("*"))) {
+
+            let attributeName = "src";
+
+            switch(iterator.tagName) {
+                case "LINK":
+                    attributeName = "href";
+                    break;
+                case "IMG":
+                    break;
+                case "STYLE":
+                    const css = this.updateCssReferences(source, destFile, iterator.textContent);
+                    if (css) {
+                        iterator.textContent = css;
+                    }
+                    continue;
+                default:
+                    continue;
+            }
+
+            let link = iterator[attributeName];
+            const url = new URL(link);
+            if(!url.pathname.startsWith("/api/site/snapshot/")) {
+                continue;
+            }
+            const { 6: fcID } = url.pathname.split("/");
+
+            // get relative path...
+            const resource = this.fcMap.get(fcID);
+            link = this.getRelativePath(source, resource);
+            iterator.setAttribute(attributeName, link);
+            modified = true;
+        }
+
+        if (!modified) {
+            return;
+        }
+
+        // upload changes...
+        const content = dom.documentElement.outerHTML;
+        const fileName = destFile.name;
+        await this.cloudFileService.saveFile({
+            content: new File([content], fileName, { type: "text/html" }),
+            appFileID: destFile.appFileID,
+        });
+    }
+
+    getRelativePath(destFile: IAppFile, resource: IAppFile, prefix = ""): any {
+        const destPath = this.toAbsolutePath(destFile.parent);
+        const resPath = this.toAbsolutePath(resource);
+
+
+        if (resPath.startsWith(destPath)) {
+            prefix = prefix ? "../" : "./";
+            return prefix + resPath.substring(destPath.length + 1);
+        }
+
+        prefix = prefix ? prefix + "../" : "../";
+        return this.getRelativePath(destFile.parent, resource, prefix);
+    }
+
+    toAbsolutePath(resource: IAppFile) {
+        let path = this.absolutePaths.get(resource);
+        if(path) {
+            return path;
+        }
+
+        const parent = resource.parent;
+        if(parent) {
+            path = this.toAbsolutePath(parent) + "/" + resource.name;
+            this.absolutePaths.set(resource, path);
+            return path;
+        }
+
+        path = "/" + resource.name;
+        this.absolutePaths.set(resource, path);
+        return path;
+
+    }
+
 }

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

@@ -72,6 +72,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             script.setAttribute("web-components", "social");
             script.setAttribute("async", "true");
             script.setAttribute("defer", "true");
+            this.htmlDocument.head.appendChild(this.htmlDocument.createTextNode("\n"));
             this.htmlDocument.head.appendChild(script);
         }
         script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@1.0.48/dist/components.webpack.js");
@@ -90,6 +91,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
         }
         if (!link){
             link ??= document.createElement("link");
+            document.head.appendChild(this.htmlDocument.createTextNode("\n"));
             document.head.appendChild(link);
             link.rel = "stylesheet";
             link.setAttribute("styler-css", file.name);