@social-mail/social-mail-client 1.9.68 → 1.9.70

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

@@ -97,6 +97,7 @@ export default class HtmlPageEditor extends AtomControl {
     public maxWidth = desktopWidth;
 
     public contentEditor: HTMLIFrameElement;
+    public dndStyle: CSSStyleSheet;
 
 
     public get modifiedDocument() {
@@ -481,6 +482,9 @@ export default class HtmlPageEditor extends AtomControl {
     }
 
     setSelection(element, commit = true) {
+        if (element.tagName === "HTML") {
+            element = element.querySelector("body > *:nth-child(1)");
+        }
         const old = this.selection?.element;
         if (old?.draggable) {
             old.removeAttribute("draggable");
@@ -817,9 +821,11 @@ export default class HtmlPageEditor extends AtomControl {
         caret.insertRule(`* {
             caret-color: currentColor !important;
         }`);
+        const dndStyle = new this.htmlDocument.defaultView.CSSStyleSheet();
+        this.dndStyle = dndStyle;
         this.htmlDocument.adoptedStyleSheets = this.htmlDocument.adoptedStyleSheets?.length
-            ? [ ... this.htmlDocument.adoptedStyleSheets, caret]
-            : [caret];
+            ? [ ... this.htmlDocument.adoptedStyleSheets, caret, dndStyle]
+            : [caret, dndStyle];
 
         const clone = this.htmlDocument;
         let stylerCss = clone.querySelector(`link[rel="stylesheet"][styler-css="styler.css"]`);
@@ -832,131 +838,132 @@ export default class HtmlPageEditor extends AtomControl {
 
         this.undoRedo = new UndoRedo(this.htmlDocument, this);
 
+        await sleep(10);
+
         // install styler...
-        setTimeout(() => {
 
-            if (clone.querySelector(`[styler-layout="component"]`)) {
-                let componentScript = clone.querySelector("[styler-component-script]") as HTMLScriptElement;
-                if(!componentScript) {
-                    componentScript = this.htmlDocument.createElement("script");
-                    componentScript.setAttribute("styler-component-script", "component-script");
-                    const head = clone.querySelector("head");
-                    head.appendChild(componentScript);
-
-                    // remove existing script with src..
-                    const scripts = clone.querySelectorAll("script[src]");
-                    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-                    for (let index = 0; index < scripts.length; index++) {
-                        const script = scripts[index];
-                        const srcScript = script.getAttribute("src");
-                        if (srcScript.includes("@social-mail/social-mail-client/") || srcScript.includes("/component.js")) {
-                            script.remove();
-                            break;
-                        }
+        if (clone.querySelector(`[styler-layout="component"]`)) {
+            let componentScript = clone.querySelector("[styler-component-script]") as HTMLScriptElement;
+            if(!componentScript) {
+                componentScript = this.htmlDocument.createElement("script");
+                componentScript.setAttribute("styler-component-script", "component-script");
+                const head = clone.querySelector("head");
+                head.appendChild(componentScript);
+
+                // remove existing script with src..
+                const scripts = clone.querySelectorAll("script[src]");
+                // eslint-disable-next-line @typescript-eslint/prefer-for-of
+                for (let index = 0; index < scripts.length; index++) {
+                    const script = scripts[index];
+                    const srcScript = script.getAttribute("src");
+                    if (srcScript.includes("@social-mail/social-mail-client/") || srcScript.includes("/component.js")) {
+                        script.remove();
+                        break;
                     }
                 }
-                const src = socialMailComponentPath;
-                if (componentScript.getAttribute("src") !== src) {
-                    componentScript.setAttribute("src", src);
-                }
-            }
-
-            let wc = clone.querySelector("script[web-components]");
-            if (!wc) {
-                wc = this.htmlDocument.createElement("script");
-                wc.setAttribute("web-components", "social");
-                wc.setAttribute("async", "true");
-                wc.setAttribute("defer", "true");
-                clone.head.appendChild(doc.createTextNode("\n"));
-                clone.head.appendChild(wc);
-                clone.head.appendChild(doc.createTextNode("\n"));
             }
-            const wcs = `${WebComponents.path}/dist/main.js`;
-            if (wc.getAttribute("src") !== wcs) {
-                wc.setAttribute("src", wcs);
+            const src = socialMailComponentPath;
+            if (componentScript.getAttribute("src") !== src) {
+                componentScript.setAttribute("src", src);
             }
+        }
 
-            const sc = "//cdn.jsdelivr.net/npm/@social-mail/social-mail-client@latest/styler-lite/styler.css";
-            const oldStylerCss = stylerCss.getAttribute("href");
-            if (oldStylerCss !== sc) {
-                stylerCss.setAttribute("href", sc);
-            }
+        let wc = clone.querySelector("script[web-components]");
+        if (!wc) {
+            wc = this.htmlDocument.createElement("script");
+            wc.setAttribute("web-components", "social");
+            wc.setAttribute("async", "true");
+            wc.setAttribute("defer", "true");
+            clone.head.appendChild(doc.createTextNode("\n"));
+            clone.head.appendChild(wc);
+            clone.head.appendChild(doc.createTextNode("\n"));
+        }
+        const wcs = `${WebComponents.path}/dist/main.js`;
+        if (wc.getAttribute("src") !== wcs) {
+            wc.setAttribute("src", wcs);
+        }
+
+        const sc = "//cdn.jsdelivr.net/npm/@social-mail/social-mail-client@latest/styler-lite/styler.css";
+        const oldStylerCss = stylerCss.getAttribute("href");
+        if (oldStylerCss !== sc) {
+            stylerCss.setAttribute("href", sc);
+        }
 
-            // let us clean up...
-            for(const node of descendentElementIterator(clone.documentElement)) {
+        // let us clean up...
+        for(const node of descendentElementIterator(clone.documentElement)) {
 
-                const style = (node as HTMLElement).style;
-                if (style) {
+            const style = (node as HTMLElement).style;
+            if (style) {
 
-                    // this is fix for changes in names...
-                    for(const attributeName of node.getAttributeNames()) {
-                        let av = node.getAttribute(attributeName);
-                        if (av === "null") {
-                            node.removeAttribute(attributeName);
-                            continue;
-                        }
+                // this is fix for changes in names...
+                for(const attributeName of node.getAttributeNames()) {
+                    let av = node.getAttribute(attributeName);
+                    if (av === "null") {
+                        node.removeAttribute(attributeName);
+                        continue;
+                    }
 
-                        if (attributeName.includes("-desktop-")) {
-                            const a = attributeName.replace("-desktop-", "-");
-                            node.removeAttribute(attributeName);
-                            node.setAttribute(a, av);
-                            continue;
-                        }
+                    if (attributeName.includes("-desktop-")) {
+                        const a = attributeName.replace("-desktop-", "-");
+                        node.removeAttribute(attributeName);
+                        node.setAttribute(a, av);
+                        continue;
+                    }
 
-                        const s = editorSuggestions[attributeName] as { label: string, value: string }[];
-                        if (s) {
-                            const cv = s.find((x) => x.label === av);
-                            if (cv && cv.value !== av) {
-                                av = cv.value;
-                                node.setAttribute(attributeName, av);
-                            }
-                        }
-                        if(attributeName.startsWith("styler-all-child")) {
-                            node.removeAttribute(attributeName);
-                            node.setAttribute(attributeName.replace("styler-all-", "styler-"), av);
+                    const s = editorSuggestions[attributeName] as { label: string, value: string }[];
+                    if (s) {
+                        const cv = s.find((x) => x.label === av);
+                        if (cv && cv.value !== av) {
+                            av = cv.value;
+                            node.setAttribute(attributeName, av);
                         }
                     }
+                    if(attributeName.startsWith("styler-all-child")) {
+                        node.removeAttribute(attributeName);
+                        node.setAttribute(attributeName.replace("styler-all-", "styler-"), av);
+                    }
+                }
 
-                    const remove = [];
-                    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-                    for (let index = 0; index < style.length; index++) {
-                        const styleName = style[index];
-                        if (styleName.startsWith("--styler-")) {
-                            const stylerName = styleName.substring(2);
-                            if (node.getAttribute(stylerName) !== "custom") {
-                                // remove this one..
-                                remove.push(styleName);
-                            }
+                const remove = [];
+                // eslint-disable-next-line @typescript-eslint/prefer-for-of
+                for (let index = 0; index < style.length; index++) {
+                    const styleName = style[index];
+                    if (styleName.startsWith("--styler-")) {
+                        const stylerName = styleName.substring(2);
+                        if (node.getAttribute(stylerName) !== "custom") {
+                            // remove this one..
+                            remove.push(styleName);
                         }
                     }
+                }
 
-                    for (const n of remove) {
-                        style.removeProperty(n);
-                    }
+                for (const n of remove) {
+                    style.removeProperty(n);
                 }
             }
+        }
 
-            // add meta utf-8
-            if(!clone.querySelector(`meta[charset]`)) {
-                clone.head.appendChild(doc.createTextNode("\n\t"));
-                clone.head.appendChild(
-                    ElementBuilder.create("meta", clone)
-                    .attr("charset", "utf-8")
-                    .element);
-                clone.head.appendChild(doc.createTextNode("\n"));
-            }
+        // add meta utf-8
+        if(!clone.querySelector(`meta[charset]`)) {
+            clone.head.appendChild(doc.createTextNode("\n\t"));
+            clone.head.appendChild(
+                ElementBuilder.create("meta", clone)
+                .attr("charset", "utf-8")
+                .element);
+            clone.head.appendChild(doc.createTextNode("\n"));
+        }
 
-            setTimeout(() => {
-                this.undoRedo.pause();
-                stylerCss.setAttribute("original-href", sc);
-                stylerCss.setAttribute("href", UMD.resolvePath("@social-mail/social-mail-client/styler-lite/styler.css"));
+        await sleep(5);
 
-                if(!clone.body.hasAttribute("styler-expansion-enabled")) {
-                    clone.body.setAttribute("styler-expansion-enabled", "true");
-                }
-            }, 5);
+        this.undoRedo.pause();
+        stylerCss.setAttribute("original-href", sc);
+        stylerCss.setAttribute("href", UMD.resolvePath("@social-mail/social-mail-client/styler-lite/styler.css"));
+
+        if(!clone.body.hasAttribute("styler-expansion-enabled")) {
+            clone.body.setAttribute("styler-expansion-enabled", "true");
+        }
 
-        },10);
+        this.setSelection(this.htmlDocument.querySelector("body > *:nth-child(1)"));
     }
 
     protected async updateEditable(doc: Document) {

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

@@ -55,13 +55,15 @@ export default class UndoRedo {
 
     observe(records: MutationRecord[]) {
         const { documentObserver } = this;
-        if (this.silent && documentObserver?.length) {
-            for (const x of records) {
-                if (x.target[isDragged]) {
-                    continue;
-                }
-                for (const d of documentObserver) {
-                    d(x);
+        if (this.silent) {
+            if (documentObserver?.length) {
+                for (const x of records) {
+                    if (x.target[isDragged]) {
+                        continue;
+                    }
+                    for (const d of documentObserver) {
+                        d(x);
+                    }
                 }
             }
             return;

package/src/site-editor/editor/ui/SelectionUI.tsx

@@ -26,6 +26,33 @@ interface IRect {
 
 const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
+const cssPath = (el) => {
+    // if (!(el instanceof Element)) {
+    //     return;
+    // }
+    const path = [];
+    while (el.nodeType === Node.ELEMENT_NODE) {
+        let selector = el.nodeName.toLowerCase();
+        if (el.id) {
+            selector += '#' + el.id;
+        } else {
+            let nth = 1;
+            let f = (el as HTMLElement).parentElement.firstElementChild;
+            while(f !== el) {
+                nth++;
+                f = f.nextElementSibling;
+            }
+            selector += ":nth-child("+nth+")";
+        }
+        path.unshift(selector);
+        if (el.tagName === "BODY") {
+            break;
+        }
+        el = el.parentNode;
+    }
+    return path.join(" > ");
+};
+
 const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLElement) => {
 
     const snaps = new SnapGuides(direction, editor, element);
@@ -79,6 +106,10 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
 
     let updateTimer = void 0;
 
+    const dndStyle = editor.dndStyle;
+
+    const elementSelector = cssPath(selectedElement);
+
     const move = ({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) => {
 
         changed = true;
@@ -108,18 +139,25 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
         r = snaps.snap(r);
 
         inset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
-        selectedElement.style.inset =  inset;
+        let rules = `${elementSelector} {
+            inset: ${inset};
+        `;
 
         if (!r.move) {
             resized = true;
             newWidth = ps(elementWidth + dx, width) + "%";
-            selectedElement.style.width = newWidth;
+            rules += ` width: ${newWidth}; `;
+            // selectedElement.style.width = newWidth;
             // // selectedElement.setAttribute(widthAttribute, newWidth);
             newHeight = ps(elementHeight + dy, height) + "%";
-            selectedElement.style.height = newHeight;
+            rules += ` height: ${newHeight}; `;
+            // selectedElement.style.height = newHeight;
             // selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
+        rules += "}";
+
+        dndStyle.replaceSync(rules);
 
         if(!updateTimer) {
             updateTimer = setTimeout(() => {
@@ -138,9 +176,7 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
     const commit = () => {
 
 
-        selectedElement.style.removeProperty("inset");
-        selectedElement.style.removeProperty("width");
-        selectedElement.style.removeProperty("height");
+        dndStyle.replaceSync("");
 
         selectedElement.setAttribute(insetAttribute, inset);
         if (resized) {
@@ -231,10 +267,10 @@ const setCapture = (direction: string, editor: HtmlPageEditor, element: HTMLElem
         element.removeEventListener("pointermove", captureMove);
         element.removeEventListener("pointerup", release);
 
-        sc.resume();
 
         if (!sc.changed) {
 
+            sc.resume();
             const { selectedElement, selectedParent } = sc;
             const frameDocument = selectedElement.ownerDocument;
             const frame = editor.contentEditor;