@social-mail/social-mail-client 1.2.511 → 1.2.516

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

@@ -50,6 +50,7 @@ import { PDFViewer } from "../blocks/PDFViewer";
 import { EditorCustomElements } from "./custom-elements/EditorCustomElements";
 import { Banner } from "../blocks/Banner";
 import BreadCrum from "./BreadCrum";
+import LanguageDropDown from "./LanguageDropDown";
 
     styled.css `
         display: grid;
@@ -202,6 +203,8 @@ const desktopWidth = 992;
 const tabletWidth = 768;
 const mobileWidth = 480;
 
+const languageSymbol = Symbol.for("language");
+
 export default class HtmlPageEditor extends AtomControl {
 
     public htmlDocument: Document;
@@ -222,6 +225,8 @@ export default class HtmlPageEditor extends AtomControl {
     public lastCommittedHtml: string = null;
     public lastCommittedBody: string = null;
 
+    public languages = null;
+
     // public get htmlPageUrl() {
     //     return this.htmlDocument.baseURI.toString();
     // }
@@ -257,28 +262,36 @@ export default class HtmlPageEditor extends AtomControl {
             return;
         }
         void this.ready.then(() => {
-            const dom = new DOMParser();
-            const doc = dom.parseFromString(v, "text/html");
-            let baseElement = doc.querySelector("base");
-            if (baseElement?.getAttribute("href")?.startsWith("/api/site/")) {
-                baseElement.remove();
-                baseElement = null;
-            }
-            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);
+            return this.initDocument(v);
         });
     }
 
+    public get language() {
+        return this[languageSymbol];
+    }
+
+    public set language(v: string) {
+        if (v === this[languageSymbol]) {
+            return;
+        }
+        this[languageSymbol] = v;
+        localStorage.setItem("editing-lang", v);
+        if(this.htmlDocument?.body) {
+            this.htmlDocument.body.setAttribute("editing-lang", v);
+        }
+        AtomBinder.refreshValue(this, "language");
+    }
+
+    // public get languages() {
+    //     const l = this.htmlDocument?.querySelector("language-chooser");
+    //     const all = { label: "Lang", value: "all"};
+    //     if (!l) {
+    //         return [all];
+    //     }
+    //     return [all, ... l.getAttribute("languages")?.split(/[\,\;\s]+/).filter((x) => x).map((x) => ({ label: x, value: x}))];
+    // }
+
+
     private lastHtml: string;
     private ready: Promise<void>;
     private contentEditor: HTMLIFrameElement;
@@ -318,6 +331,7 @@ export default class HtmlPageEditor extends AtomControl {
                     <i
                         data-click-event="edit-code"
                         class="fa-solid fa-code"/>
+                    <LanguageDropDown/>
                 </EditorToolbar>
             </div>
             <EditorToolbar data-element="left">
@@ -642,6 +656,7 @@ export default class HtmlPageEditor extends AtomControl {
         const body = clone.querySelector("body");
         body.removeAttribute("contentEditable");
         body.removeAttribute("editing");
+        body.removeAttribute("editing-lang");
         const all = clone.querySelectorAll("*");
         const deleteAll = [] as HTMLElement[];
         const removeAll = [];
@@ -689,6 +704,10 @@ export default class HtmlPageEditor extends AtomControl {
             this.lastCommittedBody = body.innerHTML;
             return;
         }
+        const currentCommitedHtml = clone.outerHTML;
+        if (this.lastCommittedHtml === currentCommitedHtml) {
+            return;
+        }
         this.undoList.add(this.lastHtml);
         this.lastHtml = currentHtml;
         this.lastCommittedHtml = clone.outerHTML;
@@ -727,110 +746,150 @@ export default class HtmlPageEditor extends AtomControl {
         this.htmlDocument.body.setAttribute("editing", "true");
     }
 
-    protected initDocument(v: string) {
-        void this.ready.then(async () => {
-            this.htmlDocument = void 0;
-            await this.loadContentDocument();
-            this.htmlDocument.open();
-            this.htmlDocument.write(v);
-            this.htmlDocument.addEventListener("click", (e) => {
-                const target = e.target as HTMLAnchorElement;
-                const previous = this.selection.element;
-                if (previous?.isContentEditable) {
-                    let start = target;
-                    while (start) {
-                        if (previous === target) {
-                            return;
-                        }
-                        start = start.parentElement as any;
-                    }
-                    if (previous !== this.htmlDocument.body) {
-                        previous.removeAttribute("contentEditable");
-                    }
-                    this.queueCommit();
-                }
-                e.preventDefault();
-                this.setSelection(target);
-            });
-
-            this.htmlDocument.addEventListener("dblclick", (e) => {
-                const target = e.target as Node;
-                e.preventDefault();
-                const element: HTMLElement = target.nodeType === Node.ELEMENT_NODE ? target as HTMLElement : target.parentElement;
-                if (/^(IMG|INJECT|VIDEO|PDF)/.test(element.tagName)) {
-                    this.changeImage().catch(console.error);
-                    return;
-                }
-                if (element.getAttribute("data-editable") === "false") {
-                    return;
-                }
-                if (element.hasAttribute("data-web-atoms-view")) {
-                    return;
-                }
-                this.setSelection(element as any);
-            });
+    protected async initDocument(v: string) {
 
-            this.htmlDocument.addEventListener("scroll", (e) => {
-                this.hover.update();
-                this.selection.update();
-            }, { passive: true });
+        const dom = new DOMParser();
+        const doc = dom.parseFromString(v, "text/html");
+
+        doc.body.contentEditable = "true";
+        doc.body.setAttribute("editing", "true");
 
-            this.htmlDocument.addEventListener("pointerover", (e) => {
-                let target = e.target as HTMLElement;
-                target = target.nodeType === Node.ELEMENT_NODE && target.tagName ? target : target.parentElement;
-                if (this.hover.element === target) {
-                    return;
+        this.updateBaseUrl(doc);
+
+        await this.setStylerSheet(doc);
+
+        const lc = doc.querySelector("language-chooser");
+        const languageStyles = [];
+        if (lc) {
+            const languages = [ { label: "Lang", value: "all"}];
+            const list = lc.getAttribute("languages");
+            if (list) {
+                for (const token of list.split(/[\,\;\s]+/)) {
+                    const lang = token.trim();
+                    if (!lang) {
+                        continue;
+                    }
+                    languageStyles.push(`body[editing-lang=${lang}] *[lang]:not([lang=${lang}]) { display: none; }`);
+                    languages.push({ label: lang, value: lang});
                 }
-                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;
+            }
+            this.languages = languages;
+            const current = localStorage.getItem("editing-lang");
+            if(current) {
+                doc.body.setAttribute("editing-lang", current);
+                this[languageSymbol] = current;
+                AtomBinder.refreshValue(this, "language");
+            } else {
+                this[languageSymbol] = "all";
+            }
+        }
+
+        const cursorStyle = doc.createElement("style");
+        cursorStyle.textContent = `* {
+            caret-color: currentColor !important;
+        }
+        ${languageStyles.join("\n")}
+        `;
+        cursorStyle.setAttribute("data-cursor-style", "editing");
+        doc.head.append(cursorStyle);
+
+
+        this.htmlDocument = void 0;
+        await this.loadContentDocument();
+        this.htmlDocument.open();
+        this.htmlDocument.write(doc.documentElement.outerHTML);
+        this.htmlDocument.close();
+
+        this.htmlDocument.addEventListener("click", (e) => {
+            const target = e.target as HTMLAnchorElement;
+            const previous = this.selection.element;
+            if (previous?.isContentEditable) {
+                let start = target;
+                while (start) {
+                    if (previous === target) {
+                        return;
                     }
+                    start = start.parentElement as any;
                 }
-            });
+                if (previous !== this.htmlDocument.body) {
+                    previous.removeAttribute("contentEditable");
+                }
+                this.queueCommit();
+            }
+            e.preventDefault();
+            this.setSelection(target);
+        });
+
+        this.htmlDocument.addEventListener("dblclick", (e) => {
+            const target = e.target as Node;
+            e.preventDefault();
+            const element: HTMLElement = target.nodeType === Node.ELEMENT_NODE ? target as HTMLElement : target.parentElement;
+            if (/^(IMG|INJECT|VIDEO|PDF)/.test(element.tagName)) {
+                this.changeImage().catch(console.error);
+                return;
+            }
+            if (element.getAttribute("data-editable") === "false") {
+                return;
+            }
+            if (element.hasAttribute("data-web-atoms-view")) {
+                return;
+            }
+            this.setSelection(element as any);
+        });
 
-            this.htmlDocument.addEventListener("input", () => this.queueCommit());
+        this.htmlDocument.addEventListener("scroll", (e) => {
+            this.hover.update();
+            this.selection.update();
+        }, { passive: true });
 
-            InstallDragDropHelper(this);
+        this.htmlDocument.addEventListener("pointerover", (e) => {
+            let target = e.target as HTMLElement;
+            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;
+                }
+            }
+        });
 
-            this.htmlDocument.close();
+        this.htmlDocument.addEventListener("input", () => this.queueCommit());
 
-            EditorCustomElements.register(this.htmlDocument);
+        InstallDragDropHelper(this);
 
-            this.htmlDocument.body.contentEditable = "true";
-            this.htmlDocument.body.setAttribute("editing", "true");
+        EditorCustomElements.register(this.htmlDocument);
 
-            const cursorStyle = this.htmlDocument.createElement("style");
-            cursorStyle.textContent = `* {
-                caret-color: currentColor !important;
-            }`;
-            cursorStyle.setAttribute("data-cursor-style", "editing");
-            this.htmlDocument.head.append(cursorStyle);
+        // this.htmlDocument.body.contentEditable = "true";
+        // this.htmlDocument.body.setAttribute("editing", "true");
 
-            // install styler...
-            setTimeout(() => {
-                this.app.runAsync(async () => {
-                    await this.setStylerSheet();
-                    this.loadVariables();
+        // const cursorStyle = this.htmlDocument.createElement("style");
+        // cursorStyle.textContent = `* {
+        //     caret-color: currentColor !important;
+        // }`;
+        // cursorStyle.setAttribute("data-cursor-style", "editing");
+        // this.htmlDocument.head.append(cursorStyle);
 
-                    this.commit();
-                });
-            },10);
-        });
+        // install styler...
+        setTimeout(() => {
+            this.commit();
+        },10);
     }
 
     protected queueCommit() {
@@ -841,32 +900,50 @@ export default class HtmlPageEditor extends AtomControl {
         this.lastCommitTimerID = setTimeout(() => this.commit(), 1000);
     }
 
-    protected async setStylerSheet() {
-        const document = this.htmlDocument;
-        let style = document.querySelector(`[styler-style-sheet]`);
+    protected async setStylerSheet(doc = this.htmlDocument) {
+        let style = doc.querySelector(`[styler-style-sheet]`);
         if (!style) {
-            style = document.createElement("style");
+            style = doc.createElement("style");
             style.setAttribute("styler-style-sheet", "inline");
-            document.head.appendChild(style);
+            doc.head.appendChild(style);
         }
         style.textContent = StylerSet.instance.toString();
     }
 
-    protected loadVariables() {
-        const onChange = () => {
-            const document = this.htmlDocument;
-            let style = document.querySelector("[styler-style-variables]");
-            if (!style) {
-                style = document.createElement("style");
-                style.setAttribute("styler-style-variables", "override");
-                document.head.appendChild(style);
-            }
-            style.textContent = `:root {
-                ${this.pageVariables.map((x) => `${x.propertyName}: ${x.currentValue};`).join("\n\t")}
-            }`;
-        };
-        this.pageVariables = StylerSet.instance.vars.map((x) => new StylerVariable(x.name, x.value, this.htmlDocument, onChange));
+    // protected loadVariables() {
+    //     const onChange = () => {
+    //         const document = this.htmlDocument;
+    //         let style = document.querySelector("[styler-style-variables]");
+    //         if (!style) {
+    //             style = document.createElement("style");
+    //             style.setAttribute("styler-style-variables", "override");
+    //             document.head.appendChild(style);
+    //         }
+    //         style.textContent = `:root {
+    //             ${this.pageVariables.map((x) => `${x.propertyName}: ${x.currentValue};`).join("\n\t")}
+    //         }`;
+    //     };
+    //     this.pageVariables = StylerSet.instance.vars.map((x) => new StylerVariable(x.name, x.value, this.htmlDocument, onChange));
+
+    // }
 
+    private updateBaseUrl(doc: Document) {
+        let baseElement = doc.querySelector("base");
+        if (baseElement?.getAttribute("href")?.startsWith("/api/site/")) {
+            baseElement.remove();
+            baseElement = null;
+        }
+        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);
+        }
     }
 
     private async loadContentDocument() {

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

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+import Select from "@web-atoms/web-controls/dist/basic/Select";
+import HtmlPageEditor from "./HtmlPageEditor";
+
+export default function LanguageDropDown() {
+    return <Select
+        style-max-width="80px"
+        style-border="none"
+        style-display={Bind.oneWay((c: HtmlPageEditor) => !!c.languages )}
+        items={Bind.oneWay((c: HtmlPageEditor) => c.languages ?? void 0)}
+        labelPath={(x) => x.label}
+        valuePath={(x) => x.value}
+        value={Bind.twoWaysImmediate((c: HtmlPageEditor) => c.language)}
+        />;
+}

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

@@ -146,14 +146,14 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             });
             file = await this.cloudFileService.getFile(file.appFileID);
         }
-        await this.addStyleSheet(file, "styles/vars.css");
+        await this.addStyleSheet(this.htmlDocument, file, "styles/vars.css");
     }
 
-    protected async setStylerSheet() {
+    protected async setStylerSheet(doc: Document) {
 
 
         // inject injected component....
-        for(const e of Array.from(this.htmlDocument.querySelectorAll("inject"))) {
+        for(const e of Array.from(doc.querySelectorAll("inject"))) {
             let src = e.getAttribute("src");
             if(src.startsWith("/")) {
                 src = src.substring(1);
@@ -177,7 +177,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
 
         const stylerCSS = await this.createFile("styler.css", StylerSet.instance.toString());
 
-        await this.addStyleSheet(stylerCSS, "styles/styler.css");
+        await this.addStyleSheet(doc, stylerCSS, "styles/styler.css");
 
         let vars = await this.cloudFileService.children(this.folder.appFileID, "styles/vars.css")
             .firstOrDefault();
@@ -186,32 +186,32 @@ export default class WebSitePageEditor extends HtmlPageEditor {
                 ${StylerSet.instance.varsCss}
             }`);
         }
-        await this.addStyleSheet(vars, "styles/vars.css");
+        await this.addStyleSheet(doc, vars, "styles/vars.css");
 
-        let script = this.htmlDocument.querySelector("script[web-components]");
+        let script = doc.querySelector("script[web-components]");
         if (!script) {
-            script = this.htmlDocument.createElement("script");
+            script = doc.createElement("script");
             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);
-            this.htmlDocument.head.appendChild(this.htmlDocument.createTextNode("\n"));
+            doc.head.appendChild(doc.createTextNode("\n"));
+            doc.head.appendChild(script);
+            doc.head.appendChild(doc.createTextNode("\n"));
         }
         script.setAttribute("src", "//cdn.jsdelivr.net/npm/@social-mail/web-components@1.0.88/dist/components.webpack.js");
 
         // install free fa script...
         const start = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free";
-        if(!Array.from(this.htmlDocument.querySelectorAll(`link[rel=stylesheet]`)).find((x) => x.getAttribute("href").startsWith(start))) {
-            const css = this.htmlDocument.createElement("link");
+        if(!Array.from(doc.querySelectorAll(`link[rel=stylesheet]`)).find((x) => x.getAttribute("href").startsWith(start))) {
+            const css = doc.createElement("link");
             css.setAttribute("rel", "stylesheet");
             css.setAttribute("href", start + "@6.6.0/css/all.min.css");
-            this.htmlDocument.head.appendChild(css);
+            doc.head.appendChild(css);
         }
     }
 
 
-    private async addStyleSheet(file: IAppFile, path: string) {
+    private async addStyleSheet(doc: Document, file: IAppFile, path: string) {
 
         // get path...
         const filePath = this.selectedFile.path.substring(this.folder.path.length);
@@ -221,7 +221,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
             folder--;
         }
 
-        const document = this.htmlDocument;
+        const document = doc;
         const href = "./" + path;
         let link: HTMLLinkElement;
         for (const iterator of Array.from(document.querySelectorAll(`link[rel="stylesheet"][styler-css]`))) {
@@ -232,7 +232,7 @@ export default class WebSitePageEditor extends HtmlPageEditor {
         }
         if (!link){
             link ??= document.createElement("link");
-            document.head.appendChild(this.htmlDocument.createTextNode("\n"));
+            document.head.appendChild(doc.createTextNode("\n"));
             document.head.appendChild(link);
             link.rel = "stylesheet";
             link.setAttribute("styler-css", file.name);

package/src/site-editor/styler/properties/stylerPosition.ts

@@ -10,12 +10,12 @@ export const stylerPosition = {
     stylerBottom: new StylerProperty("styler-bottom", createVarSet("bottom", sizeVarList)),
 
     stylerZIndex: new StylerProperty("styler-z-index", createSet("z-index", [
-        "none",
-        "last",
-        "back",
-        "front",
-        "first"
-    ])),
+        { name: "none", value: "unset" },
+        { name: "last", value: "-100000" },
+        { name: "back", value: "-100" },
+        { name: "front", value: "100" },
+        { name: "first", value: "100000" },
+    ], true, true)),
 };
 
 StylerSets.register("high", styled.css `