npm - @social-mail/social-mail-client - Versions diffs - 1.5.2 → 1.5.4 - Mend

@social-mail/social-mail-client 1.5.2 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/package.json CHANGED Viewed

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

package/src/site-editor/editor/CssParser.ts ADDED Viewed

@@ -0,0 +1,108 @@
+import sleep from "@web-atoms/core/dist/core/sleep";
+import type HtmlPageEditor from "./HtmlPageEditor";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+export default class CssParser {
+    static async parse(editor: HtmlPageEditor) {
+        const cp = new CssParser(editor);
+        await cp.parse();
+    }
+    constructor(private editor: HtmlPageEditor) {
+    }
+    async parse() {
+        const { editor } = this;
+        const r = {};
+        editor.suggestions = r;
+        const doc = editor.htmlDocument;
+        const tasks = [];
+        const styleSheets = doc.styleSheets;
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let index = 0; index < styleSheets.length; index++) {
+            const element = styleSheets[index];
+            tasks.push(this.parseSheet(element));
+        }
+        await Promise.all(tasks);
+    }
+    async parseSheet(cssSheet: CSSStyleSheet) {
+        try {
+            const r = this.editor.suggestions;
+            let css = cssSheet;
+            if (cssSheet.href) {
+                // we need to download and parse this one...
+                css = await this.downloadStyle(cssSheet.href);
+            }
+            // scan all rules...
+            const suggestions = { ... r };
+            const cssRules = css.cssRules;
+            // eslint-disable-next-line @typescript-eslint/prefer-for-of
+            for (let i = 0; i < cssRules.length;i++) {
+                const rule = cssRules[i] as CSSStyleRule;
+                const match = /\[(styler\-[^=\]]+)=([^\]]+)\]/g.exec(rule.selectorText);
+                if (!match) {
+                    continue;
+                }
+                const {1: styler, 2: value } = match;
+                this.parseRule(suggestions, styler.trim(), this.unescape(value.trim()));
+            }
+            let modified = false;
+            for (const key in suggestions) {
+                if (Object.prototype.hasOwnProperty.call(suggestions, key)) {
+                    const element = suggestions[key];
+                    r[key] = element;
+                    modified = true;
+                }
+            }
+            if (modified) {
+                AtomBinder.refreshValue(this.editor, "suggestions");
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+    async downloadStyle(href: string) {
+        const style = await FetchBuilder.get(href).asText();
+        const parser = new DOMParser();
+        const html = `<!DOCTYPE html>
+        <html>
+            <head>
+                <style style-rules="rules">
+                    ${style}
+                </style>
+            </head>
+            <body></body>
+        </html>`;
+        const doc = parser.parseFromString(html, "text/html");
+        const css = doc.querySelector(`style[style-rules=rules]`);
+        return (css as any).sheet;
+    }
+    parseRule(suggestions: any, styler: string, value: string) {
+        const a = (suggestions[styler] ??= [ { label: "-", value: "" }]) as { label: string , value: string }[];
+        a.add({ label: value, value });
+    }
+    unescape(value: string) {
+        if (value.startsWith('"')) {
+            return JSON.parse(value).trim();
+        }
+        return value;
+    }
+}

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

@@ -57,6 +57,7 @@ import { ScrollAware } from "../blocks/ScrollAware";
 import { InlineSvg } from "../blocks/InlineSvg";
 import "./HtmlPageEditor.global.less";
+import CssParser from "./CssParser";
 const desktopWidth = 992;
 const tabletWidth = 768;
@@ -708,6 +709,8 @@ export default class HtmlPageEditor extends AtomControl {
         await WebComponents.run(this.contentEditor, this.htmlDocument);
+        CssParser.parse(this).catch(console.error);
         this.htmlDocument.addEventListener("click", (e) => {
             const target = e.target as HTMLAnchorElement;
             const previous = this.selection.element;

package/src/site-editor/properties/controls/PropertyEditor.tsx CHANGED Viewed

@@ -31,12 +31,6 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
             value={Bind.sourceTwoWays(pv, (s) => s.source.custom)}></div>, e, c);
 });
-export const BindSuggestions = AtomControl.registerProperty("data-style-property", "value", (c, e, v) => {
-    (c as any).render(<div
-            items={Bind.oneWay<HtmlPageEditor>((s) => s.suggestions[v])}></div>, e, c);
-});
 document.addEventListener("input", (e: InputEvent) => {
     const target = e.target as HTMLSelectElement;
     if (!/select/i.test(target.tagName)) {

package/src/site-editor/styler/styles/properties/layouts/layouts.less CHANGED Viewed

@@ -1,3 +1,5 @@
+@import (reference) "../../ref.less";
 .each-names({
     @display: inherit, initial, revert, revert-layer, unset,