@social-mail/social-mail-client 1.0.113 → 1.0.115

package/src/site-editor/properties/ColorEditor.tsx

@@ -0,0 +1,36 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import WebApp from "@web-atoms/core/dist/web/WebApp";
+
+function addLinkTag(href, integrity?, rel = "stylesheet") {
+    if (!document.head.querySelector(`[href="${href}"]`)) {
+        const fa = document.createElement("link");
+        fa.href = href;
+        fa.crossOrigin = "anonymous";
+        fa.as = "style";
+        fa.rel = "preload";
+        if (integrity) {
+            fa.integrity = integrity;
+        }
+        fa.onload = () => {
+            fa.onload = null;
+            fa.rel = rel;
+        };
+        document.head.insertBefore(fa, document.head.firstElementChild);
+    }
+}
+
+addLinkTag("https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css");
+
+export default class ColorEditor extends AtomControl {
+
+    constructor(app, e = document.createElement("input")) {
+        super(app, e);
+        e.type = "text";
+        e.className = "coloris";
+    }
+
+    async init() {
+        await this.app.installScript("https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js");
+    }
+
+}

package/src/site-editor/properties/Properties.tsx

@@ -0,0 +1,35 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { StylerSet } from "../styler/StylerSet";
+import Select from "@web-atoms/web-controls/dist/basic/Select";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import type HtmlPageEditor from "../editor/HtmlPageEditor";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import Expander from "@web-atoms/web-controls/dist/basic/Expander";
+
+const BindStyleValue = AtomControl.registerProperty("data-style-property", "custom", (c, e, v) => {
+    const editor = c as HtmlPageEditor;
+    const pv = editor.selection.style(v);
+    (c as any).render(<div value={Bind.sourceTwoWays(pv, (s) => s.source.value)}></div>, e, c);
+});
+
+export default function Properties() {
+
+    const styler = StylerSet.instance;
+
+    return <div
+        data-layout="vertical-flex-stretch-items">
+
+        { ... styler.properties.map((p) => {
+            return <div data-layout="vertical-flex-stretch-items">
+                <label>{p.name}</label>
+                <Select
+                    { ... BindStyleValue(p.key)}
+                    valuePath={(v) => v.value}
+                    items={[ { label: "None", value: ""},  ...p.values.map((pair) => ({ label: pair.name, value: pair.name }))]}/>
+            </div>;
+        }) }
+
+    </div>;
+
+
+}

package/src/site-editor/properties/ThicknessEditor.tsx

@@ -0,0 +1,5 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+export default class ThicknessEditor extends AtomControl {
+
+}

package/src/site-editor/styler/IStylerPair.ts

@@ -0,0 +1,9 @@
+export default interface IStylerPair {
+    [key: string]: {
+        name: string,
+        className: string,
+        values: {
+            [key: string]: any;
+        }
+    }
+}

package/src/site-editor/styler/Styler.ts

@@ -0,0 +1,169 @@
+/**
+ * Styler class will create a style that will read the default css variables stored as JSON.
+ * Only CSS Variables will be loaded for editing.
+ *
+ * Styler class will serialize all new styles and properties, the values will always be hardcoded, never to be changed in future.
+ * For example, property styler-padding=default, will always use default spacing variable.
+ */
+
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "./IStylerPair";
+
+
+type IStyledVariables<Type> = {
+    [Property in keyof Type]: { name: string, value: Type[Property] };
+};
+
+const camelToSnakeCase = (str: string) => str.replace(/[A-Z]/g, (letter: string) => `-${letter.toLowerCase()}`);
+
+const prepareVariables = <T>(a: T): {[Property in keyof T]: { name: string, value: string }} => {
+    const r = {} as any;
+    for (const key in a) {
+        if (Object.prototype.hasOwnProperty.call(a, key)) {
+            const value = a[key];
+            const name = camelToSnakeCase(key);
+            r[key] = {
+                name,
+                value,
+                toString() {
+                    return `var(--${name}, ${value})`;
+                }
+            };
+        }
+    }
+    return r;
+};
+
+export const stylerVars = prepareVariables({
+
+    sizeTiny: "2px",
+    sizeSmall: "5px",
+    sizeSmaller: "7px",
+    sizeDefault: "10px",
+    sizeLarger: "15px",
+    sizeLarge: "20px",
+
+    defaultColor: "canvas",
+    defaultTextColor: "canvastext",
+
+    borderColor: "lightgray",
+
+    headerColor: "#0571ff30",
+    headerTextColor: "",
+
+    accentColor: "blue",
+    accentTextColor: "white",
+
+    noteColor: "#ffffe0",
+    noteTextColor: "",
+
+    warningColor: "#FFC107",
+    warningTextColor: "darkgray",
+
+    selectionColor: "highlight",
+    selectionTextColor: "highlightText",
+
+    hoverColor: "#A0A0A010",
+    hoverTextColor: "CanvasText",
+
+    stopColor: "red",
+    stopTextColor: "white",
+
+    goColor: "green",
+    goTextColor: "white",
+
+    acceptColor: "blue",
+    acceptTextColor: "white",
+
+    rejectColor: "red",
+    rejectTextColor: "white",
+
+    fontSizeSmall: "0.8125em",
+
+    commandBgColor: "#F0F0F0",
+
+    menuBgColor: "#808080",
+    menuColor: "#F0F0F0",
+
+    linkColor: "blue",
+});
+
+
+export class StylerVariable {
+    constructor(public name: string, public value: string) {}
+
+    toString() {
+        return `--${this.name}: ${this.value};`;
+    }
+}
+
+export class StylerPropertyPair {
+
+    public value: string;
+
+    constructor(
+        public name: string,
+        value: any) {
+            this.value = value.toString();
+        }
+
+    toString() {
+        return this.value.split("\n").join("\n\t");
+    }
+}
+
+export class StylerProperty {
+
+
+    public static from(pairs: IStylerPair) {
+        const r = [];
+        for (const key in pairs) {
+            if (Object.prototype.hasOwnProperty.call(pairs, key)) {
+                const element = pairs[key];
+                r.push(new StylerProperty(element.name, key, element.className, element.values));
+            }
+        }
+        return r;
+    }
+
+    public values: StylerPropertyPair[];
+    constructor(
+        public name: string,
+        public key: string,
+        public className: string,
+        values: any) {
+        this.values = [];
+        for (const k in values) {
+            if (Object.prototype.hasOwnProperty.call(values, k)) {
+                const element = values[k];
+                this.values.push(new StylerPropertyPair(k, element.expand(`[${this.key}=${k}]`)));
+            }
+        }
+    }
+
+    toString() {
+        return this.values.join("\n");
+    }
+}
+
+export type IStyleValue = string | { name: string, value: string };
+
+export const pair = (name: string , value?: string ) => ( !value ? (value=name, name = name.replace(" ", "-")) : (name), { name, value });
+
+export const createSet = (name: string, values: IStyleValue[], appendGlobals = true) => {
+    const r = {
+        custom: styled.css `${name}: var(--${name});`
+    };
+    if (appendGlobals) {
+        values.push(... ["inherit", "initial", "revert", "revert-layer", "unset"]);
+    }
+    for (const iterator of values) {
+        if (typeof iterator === "string") {
+            r[iterator] = styled.css `\t${name}: ${iterator};`;
+            continue;
+        }
+        r[iterator.name] = styled.css `\t${name}: ${iterator.value};`;
+    }
+    return r as any;
+};
+

package/src/site-editor/styler/StylerSet.ts

@@ -0,0 +1,42 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { StylerProperty, StylerPropertyPair, StylerVariable, stylerVars } from "./Styler";
+import { stylerLayout } from "./properties/layout";
+import { stylerCursor } from "./properties/cursor";
+import { stylerColor } from "./properties/color";
+import { stylerBackdropFilter } from "./properties/filter";
+import { stylerBoxShadow } from "./properties/boxShadow";
+import { stylerBorder } from "./properties/border";
+
+const vars = [];
+for (const key in stylerVars) {
+    if (Object.prototype.hasOwnProperty.call(stylerVars, key)) {
+        const element = stylerVars[key];
+        vars.push(new StylerVariable(element.name, element.value));
+    }
+}
+
+export class StylerSet {
+
+    public static instance = new StylerSet();
+
+    vars = vars;
+
+    properties = [
+        ... StylerProperty.from(stylerLayout),
+        ... StylerProperty.from(stylerColor),
+        ... StylerProperty.from(stylerCursor),
+        ... StylerProperty.from(stylerBorder),
+        ... StylerProperty.from(stylerBackdropFilter),
+        ... StylerProperty.from(stylerBoxShadow)
+    ] as StylerProperty[];
+
+    toString() {
+        return `:root{
+            ${this.vars.join("\n")}
+        }
+        
+        ${this.properties.join("\n")}
+        `;
+    }
+
+};

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

@@ -0,0 +1,30 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "../IStylerPair";
+import { stylerVars } from "../Styler";
+
+export const stylerBorder: IStylerPair = {
+    "styler-border": {
+
+        name: "Border",
+        className: "",
+        values: {
+            "none": styled.css `
+                border: none !important;
+            `,
+
+            "solid": styled.css `
+                border: solid 1px lightgray;
+            `
+        }
+    },
+
+    "styler-border-radius": {
+        name: "Border Radius",
+        className: "",
+        values: {
+            "default": styled.css `
+                border-radius: ${stylerVars.sizeDefault};
+            `
+        }
+    }
+};

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

@@ -0,0 +1,14 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "../IStylerPair";
+
+export const stylerBoxShadow: IStylerPair = {
+    "styler-box-shadow": {
+        name: "Box Shadow",
+        className: "",
+        values: {
+            "default": styled.css `
+                box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.14);
+            `
+        }
+    }
+};

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

@@ -0,0 +1,82 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "../IStylerPair";
+import { stylerVars } from "../Styler";
+
+export const stylerColor: IStylerPair = {
+    "styler-color": {
+        name: "Text Color",
+        className: "",
+        values: {
+            "custom": styled.css `color: var(--styler-color);`,
+            "red": styled.css `color: red ;`,
+            "blue": styled.css `color: blue ;`,
+            "green": styled.css `color: green ;`,
+            "lightgreen": styled.css `color: lightgreen ;`,
+            "lightyellow": styled.css `color: lightyellow ;`,
+            "gold": styled.css `color: gold ;`,
+            "goldenrod": styled.css `color: goldenrod ;`,
+            "fuchsia": styled.css `color: fuchsia ;`,
+            "black": styled.css `color: black ;`,
+            "white": styled.css `color: white ;`,
+            "header": styled.css `color: ${stylerVars.headerTextColor} ;`,
+            "default": styled.css `color: ${stylerVars.defaultTextColor} ;`,
+            "highlight": styled.css `color: ${stylerVars.selectionTextColor} ;`,
+            "selection": styled.css `color: ${stylerVars.selectionTextColor} ;`,
+            "accent": styled.css `color: ${stylerVars.accentColor} ;`,
+            "force-custom": styled.css `color: var(--styler-color) !important;`,
+            "force-red": styled.css `color: red !important;`,
+            "force-blue": styled.css `color: blue !important;`,
+            "force-green": styled.css `color: green !important;`,
+            "force-lightgreen": styled.css `color: lightgreen !important;`,
+            "force-lightyellow": styled.css `color: lightyellow !important;`,
+            "force-gold": styled.css `color: gold !important;`,
+            "force-goldenrod": styled.css `color: goldenrod !important;`,
+            "force-fuchsia": styled.css `color: fuchsia !important;`,
+            "force-black": styled.css `color: black !important;`,
+            "force-white": styled.css `color: white !important;`,
+            "force-header": styled.css `color: ${stylerVars.headerTextColor} !important;`,
+            "force-default": styled.css `color: ${stylerVars.defaultTextColor} !important;`,
+            "force-highlight": styled.css `color: ${stylerVars.selectionTextColor} !important;`,
+            "force-selection": styled.css `color: ${stylerVars.selectionTextColor} !important;`,
+            "force-accent": styled.css `color: ${stylerVars.accentColor} !important;`,
+        }
+    },
+    "styler-background-color": {
+        name: "Box Color",
+        className: "",
+        values: {
+            "custom": styled.css `background-color: var(--styler-color);`,
+            "red": styled.css `background-color: red ;`,
+            "blue": styled.css `background-color: blue ;`,
+            "green": styled.css `background-color: green ;`,
+            "lightgreen": styled.css `background-color: lightgreen ;`,
+            "lightyellow": styled.css `background-color: lightyellow ;`,
+            "gold": styled.css `background-color: gold ;`,
+            "goldenrod": styled.css `background-color: goldenrod ;`,
+            "fuchsia": styled.css `background-color: fuchsia ;`,
+            "black": styled.css `background-color: black ;`,
+            "white": styled.css `background-color: white ;`,
+            "header": styled.css `background-color: ${stylerVars.headerColor} ;`,
+            "default": styled.css `background-color: ${stylerVars.defaultColor} ;`,
+            "highlight": styled.css `background-color: ${stylerVars.selectionColor} ;`,
+            "selection": styled.css `background-color: ${stylerVars.selectionColor} ;`,
+            "accent": styled.css `background-color: ${stylerVars.accentColor} ;`,
+            "force-custom": styled.css `background-color: var(--styler-color) !important;`,
+            "force-red": styled.css `background-color: red !important;`,
+            "force-blue": styled.css `background-color: blue !important;`,
+            "force-green": styled.css `background-color: green !important;`,
+            "force-lightgreen": styled.css `background-color: lightgreen !important;`,
+            "force-lightyellow": styled.css `background-color: lightyellow !important;`,
+            "force-gold": styled.css `background-color: gold !important;`,
+            "force-goldenrod": styled.css `background-color: goldenrod !important;`,
+            "force-fuchsia": styled.css `background-color: fuchsia !important;`,
+            "force-black": styled.css `background-color: black !important;`,
+            "force-white": styled.css `background-color: white !important;`,
+            "force-header": styled.css `background-color: ${stylerVars.headerColor} !important;`,
+            "force-default": styled.css `background-color: ${stylerVars.defaultTextColor} !important;`,
+            "force-highlight": styled.css `background-color: ${stylerVars.selectionTextColor} !important;`,
+            "force-selection": styled.css `background-color: ${stylerVars.selectionTextColor} !important;`,
+            "force-accent": styled.css `background-color: ${stylerVars.accentColor} !important;`,
+        }
+    }
+};

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

@@ -0,0 +1,49 @@
+import IStylerPair from "../IStylerPair";
+import { createSet } from "../Styler";
+
+export const stylerCursor: IStylerPair = {
+    "styler-cursor": {
+        name: "Cursor",
+        className: "",
+        values: {
+            ... createSet("cursor", [
+                "auto",
+                "default",
+                "nope",
+                "context-menu",
+                "help",
+                "pointer",
+                "progress",
+                "wait",
+                "cell",
+                "crosshair",
+                "text",
+                "vertical-text",
+                "alias",
+                "copy",
+                "move",
+                "no-drop",
+                "not-allowed",
+                "grab",
+                "grabbing",
+                "e-resize",
+                "n-resize",
+                "ne-resize",
+                "nw-resize",
+                "s-resize",
+                "se-resize",
+                "sw-resize",
+                "w-resize",
+                "ew-resize",
+                "ns-resize",
+                "nesw-resize",
+                "nwse-resize",
+                "col-resize",
+                "row-resize",
+                "all-scroll",
+                "zoom-in",
+                "zoom-out"
+            ])
+        }
+    }
+};

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

@@ -0,0 +1,14 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "../IStylerPair";
+
+export const stylerBackdropFilter: IStylerPair = {
+    "styler-backdrop-filter": {
+        name: "Backdrop Filter",
+        className: "",
+        values: {
+            "blur": styled.css `
+                backdrop-filter: blur(15px);
+            `
+        }
+    }
+};

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

@@ -0,0 +1,72 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import IStylerPair from "../IStylerPair";
+import { stylerVars } from "../Styler";
+
+export const stylerLayout: IStylerPair = {
+    "styler-layout": {
+
+        name: "Layout",
+        className: "",
+        values: {
+            "wrap-list": styled.css `
+                display: flex;
+                flex-direction: column;
+                flex-wrap: wrap;
+                gap: ${stylerVars.sizeDefault};
+                padding: ${stylerVars.sizeDefault};
+                margin: ${stylerVars.sizeDefault};
+            `,
+
+            "column": styled.css `
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                gap: ${stylerVars.sizeDefault};
+                padding: ${stylerVars.sizeDefault};
+                margin: ${stylerVars.sizeDefault};
+            `,
+
+            "row": styled.css `
+                display: flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                gap: ${stylerVars.sizeDefault};
+                padding: ${stylerVars.sizeDefault};
+                margin: ${stylerVars.sizeDefault};
+            `,
+
+            "block": styled.css `
+                display: block;
+                padding: ${stylerVars.sizeDefault};
+                margin: ${stylerVars.sizeDefault};
+            `,
+            "nav-bar": styled.css `
+                display: flex;
+                padding: ${stylerVars.sizeSmall};
+                margin: ${stylerVars.sizeDefault};
+                border-radius: ${stylerVars.sizeLarge};
+                align-items: center;
+                justify-content: space-between;
+                & > h1, & > h2, & > h3, & > h5, & > h6 {
+                    margin-block-start: 0;
+                    margin-block-end: 0;
+                }
+            `,
+
+            "floating-nav-bar": styled.css `
+                display: flex;
+                padding: ${stylerVars.sizeSmall};
+                margin: ${stylerVars.sizeDefault};
+                position: sticky;
+                top: ${stylerVars.sizeDefault};
+                border-radius: ${stylerVars.sizeLarge};
+                align-items: center;
+                justify-content: space-between;
+                & > h1, & > h2, & > h3, & > h5, & > h6 {
+                    margin-block-start: 0;
+                    margin-block-end: 0;
+                }
+            `,
+        }
+    }
+};

package/src/site-editor/toolbars/EditorToolbar.tsx

@@ -0,0 +1,40 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    align-content: flex-start;
+    & > * {
+        color: #555555;
+        padding: 5px;
+        cursor: pointer;
+        &:not([data-disabled]):hover, &[data-disabled=false]:hover {
+            background-color: #00800050;
+        }
+        &[data-disabled=true] {
+            color: #80808080;
+        }
+        &[data-selected=true] {
+            color: green;
+            background-color: lightgray;
+        }
+    }
+    & + [data-html-editor-element] {
+        margin-left: 20px;
+    }
+
+`.installGlobal("[data-html-editor-element=toolbar]");
+
+export default function EditorToolbar(a, ... nodes: XNode[]) {
+    return <div
+        data-html-editor-element="toolbar"
+        { ... a}
+        >
+            { ... nodes }
+        </div>;
+}

package/src/site-editor/toolbars/UndoRedoToolbar.tsx

@@ -0,0 +1,27 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import EditorToolbar from "./EditorToolbar";
+import { EditorCommand } from "../commands/EditorCommand";
+import HtmlPageEditor from "../editor/HtmlPageEditor";
+
+export default function UndoRedoToolbar() {
+    return <EditorToolbar
+        data-element="undo">
+        <i
+            event-click={EditorCommand.onClick((editor) => {
+                editor.redoList.insert(editor.redoList.length, editor.htmlDocument.documentElement.innerHTML);
+                editor.htmlDocument.documentElement.innerHTML = editor.undoList.removeAt(editor.undoList.length-1);
+            })}
+            title="Undo"
+            data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.undoList.length === 0)}
+            class="fas fa-undo" />
+        <i
+            event-click={EditorCommand.onClick((editor) => {
+                editor.undoList.insert(editor.undoList.length, editor.htmlDocument.documentElement.innerHTML);
+                editor.htmlDocument.documentElement.innerHTML = editor.redoList.removeAt(editor.redoList.length-1);
+            })}
+            title="Redo"
+            data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.redoList.length === 0)}
+            class="fas fa-redo" />
+    </EditorToolbar>;
+}

package/src/style/GlobalStyle.ts

@@ -30,7 +30,7 @@ function addLinkTag(href, integrity?, rel = "stylesheet") {
 }
 
 addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
-addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.4.2/css/all.min.css");
+addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.1/css/all.min.css");
 addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
 
     styled.css `