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

package/src/site-editor/commands/EditorCommand.tsx

@@ -0,0 +1,42 @@
+import type HtmlPageEditor from "../editor/HtmlPageEditor";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+export const EditorCommand = {
+
+    onClick(cb: (editor: HtmlPageEditor, e: Event) => any) {
+        return (e: Event) => {
+            let c = AtomControl.from(e.target);
+            while (c && !c.element?.hasAttribute("data-html-page-editor")) {
+                c = c.parent;
+            }
+            return cb(c as HtmlPageEditor, e);
+        };
+    },
+
+    insertContent(cb: (editor: HtmlPageEditor, e: Event) => any) {
+        return async (e: Event) => {
+            let c = AtomControl.from(e.target);
+            while (c && !c.element?.hasAttribute("data-html-page-editor")) {
+                c = c.parent;
+            }
+            const editor = c as HtmlPageEditor;
+            let content = cb(editor, e);
+            if (!content) {
+                return;
+            }
+            content = await content;
+            const document = editor.htmlDocument;
+            // if it is string..
+            if (typeof content === "string") {
+                const div = document.createElement("div");
+                div.innerHTML = content;
+                for (const iterator of Array.from(div.children)) {
+                    editor.insertElement(iterator as HTMLElement);
+                }
+                return;
+            }
+            editor.insertElement(content as HTMLElement);
+        };
+    }
+
+};

package/src/site-editor/commands/IEditorCommandParameter.ts

@@ -0,0 +1,5 @@
+import type HtmlPageEditor from "../editor/HtmlPageEditor";
+
+export default interface IEditorCommandParameter {
+    editor: HtmlPageEditor;
+}

package/src/site-editor/components/Component.tsx

@@ -0,0 +1,9 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+export default class Component extends AtomControl {
+
+    @BindableProperty
+    public host: HTMLElement;
+
+}

package/src/site-editor/drag-drop/DragDropHelper.ts

@@ -0,0 +1,141 @@
+import type HtmlPageEditor from "../editor/HtmlPageEditor";
+
+interface IPoint {
+    x: number;
+    y: number;
+}
+
+/**
+ * Drag and Drop Scenario.
+ *
+ * 1. Inside an empty container, drop the placeholder
+ * 2. Inside a container, within the padding
+ * @param editor HtmlPageEditor
+ */
+export function InstallDragDropHelper(editor: HtmlPageEditor) {
+
+
+    let placeholder: HTMLElement;
+    let dragged: HTMLElement;
+
+    const document = editor.htmlDocument;
+
+    document.addEventListener("dragstart", (e) => {
+        dragged = e.target as HTMLElement;
+        e.dataTransfer.dropEffect = "move";
+        e.dataTransfer.setDragImage(dragged, 0, 0);
+    });
+
+    document.addEventListener("dragover", (e) => {
+        const target = e.target as HTMLElement;
+        e.preventDefault();
+        if (target === placeholder) {
+            return;
+        }
+        e.dataTransfer.dropEffect = "copy";
+        if(!placeholder) {
+            placeholder = document.createElement("div");
+            placeholder.style.display = "block";
+            placeholder.style.backgroundColor = "green";
+            document.body.appendChild(placeholder);
+        }
+
+        const insert = (where: InsertPosition, width = "5px", height = "5px") => {
+            const previous = where === "beforebegin"
+                ? target.previousElementSibling
+                : target.nextElementSibling;
+            if (previous === placeholder) {
+                return;
+            }
+            placeholder.remove();
+            target.insertAdjacentElement(where, placeholder);
+            placeholder.style.width = width;
+            placeholder.style.height = height;
+        };
+
+        const b = target.getBoundingClientRect();
+        const mp = { x: e.clientX, y: e.clientY };
+
+        const style = document.defaultView.getComputedStyle(target);
+        const isVertical = (style.display === "flex" && (style.flexDirection === "row" || style.flexWrap))
+        || style.display === "inline-block"
+        || target.tagName === "TD";
+
+
+        if (isVertical) {
+            if (target.childElementCount === 0) {
+                insert("afterbegin", void 0, "100%");
+                return;
+            }
+            if ((b.x + b.width * 0.2) > mp.x) {
+                insert("beforebegin", void 0, "100%");
+                return;
+            }
+            insert("afterend", void 0, "100%");
+            return;
+        }
+        if (target.childElementCount === 0) {
+            insert("afterbegin", "100%");
+            return;
+        }
+        if ((b.y + b.height * 0.2) > mp.y) {
+            // in the beginning...
+            insert("beforebegin", "100%");
+            return;
+        }
+        insert("afterend", "100%");
+    });
+
+    document.addEventListener("dragend", (e) => {
+        if (placeholder) {
+            if(dragged) {
+                dragged.style.display = "";
+                dragged.remove();
+                placeholder.parentElement.replaceChild(dragged, placeholder);
+                editor.setSelection(dragged, true);
+            } else {
+                // external drop..
+                const div = document.createElement("div");
+                div.innerHTML = e.dataTransfer.getData("text/html");
+                const node = div.firstElementChild;
+                placeholder.parentElement.replaceChild(node, placeholder);
+                editor.setSelection(node, true);
+            }
+        }
+        dragged = null;
+        placeholder?.remove();
+        placeholder = null;
+    });
+
+    document.addEventListener("drop", (e) => {
+        if (placeholder) {
+            if(dragged) {
+                dragged.style.display = "";
+                dragged.remove();
+                placeholder.parentElement.replaceChild(dragged, placeholder);
+                editor.setSelection(dragged, true);
+            } else {
+                // external drop..
+                const div = document.createElement("div");
+                div.innerHTML = e.dataTransfer.getData("text/html");
+                const node = div.firstElementChild;
+                placeholder.parentElement.replaceChild(node, placeholder);
+                editor.setSelection(node, true);
+            }
+        }
+        dragged = null;
+        placeholder?.remove();
+        placeholder = null;
+    });
+
+    document.addEventListener("dragleave", (e) => {
+        // turn off highlight
+        placeholder?.remove();
+        placeholder = null;
+    });
+
+    setTimeout(() => {
+        document.body.querySelectorAll("*").forEach((e: HTMLElement) => e.draggable = true);
+    }, 100);
+
+}

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

@@ -0,0 +1,497 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import styled from "@web-atoms/core/dist/style/styled";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import ChooseMediaPage from "../../web/page/files/media/ChooseMediaPage";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import { IAppFile } from "../../model/model";
+import { ImageBlock } from "../blocks/ImageBlock";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
+import { InstallDragDropHelper } from "../drag-drop/DragDropHelper";
+import { CodeCommand } from "../commands/CodeCommand";
+import UndoRedoToolbar from "../toolbars/UndoRedoToolbar";
+import { WrapGrid } from "../blocks/WrapGrid";
+import EditorToolbar from "../toolbars/EditorToolbar";
+import Properties from "../properties/Properties";
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import { StylerSet } from "../styler/StylerSet";
+
+    styled.css `
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto 1fr auto;
+        overflow: hidden !important;
+
+        & > [data-element=top] {
+            grid-row: 1;
+            grid-column: 2;
+            display: flex;
+            padding: 5px;
+            gap: 10px;
+            border-bottom: solid 1px lightgray;
+            border-radius: 0;
+            & > [data-element=max-width] {
+                display: flex;
+                gap: 10px;
+            }
+        }
+
+        & > [data-element=left] {
+            grid-row: 1 / span 3;
+            grid-column: 1;
+            border-right: solid 1px lightgray;
+            border-radius: 0;
+            width: 40px;
+        }
+
+        & > [data-element=right] {
+            grid-row: 1 / span 3;
+            grid-column: 3;
+            border-left: solid 1px lightgray;
+            border-radius: 0;
+        }
+
+        & > [data-element=editor] {
+            grid-row: 2;
+            grid-column: 2;
+            overflow: hidden;
+            align-self: stretch;
+            justify-self: center;
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            & > [data-element=content-frame] {
+                width: 100%;
+                height: 100%;
+                margin: 2px;
+                position: absolute;
+                & > iframe {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                }
+            }
+            & > [data-element=selection] {
+                position: absolute;
+                pointer-events: none;
+                outline: solid 1px green;
+                z-index: 22;
+                & > div {
+                    pointer-events: all;
+                    position: absolute;
+                    right: 0;
+                    transform: translate(0, -100%);
+                    background-color: #0000ff;
+                    color: white;
+                    font-size: smaller;
+                    text-transform: capitalize;
+                    padding: 2px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                    display: flex;
+                    gap: 5px;
+                    & * {
+                        cursor: pointer;
+                        padding: 2px;
+                        &:hover {
+                            background-color: white;
+                            color: blue;
+                        }
+                    }
+                }
+            }
+            & > [data-element=hover] {
+                position: absolute;
+                outline: solid 1px blue;
+                pointer-events: none;
+                transition: all 100ms ease;
+                z-index: 20;
+                & > label {
+                    position: absolute;
+                    transform: translate(0, -100%);
+                    background-color: #0000ff6a;
+                    color: white;
+                    font-size: smaller;
+                    text-transform: capitalize;
+                    padding: 2px;
+                    padding-left: 5px;
+                    padding-right: 5px;
+                }
+            }
+        }
+    `.installGlobal("[data-html-page-editor=html-page-editor]");
+
+const desktopWidth = 992;
+const tabletWidth = 768;
+const mobileWidth = 480;
+
+class SelectedElement {
+
+    public name: string;
+
+    public top: string;
+    public left: string;
+    public width: string;
+    public height: string;
+
+    public isImage: boolean;
+
+    public get element() {
+        return this.e;
+    }
+
+    private mo: MutationObserver;
+    private e: HTMLElement;
+    private styles = new Map();
+
+    constructor(private editor: HtmlPageEditor) {
+        this.name = "";
+        this.isImage = false;
+        this.mo = new MutationObserver(() => {
+            AtomBinder.refreshValue(this, "element");
+            for (const iterator of this.styles.values()) {
+                AtomBinder.refreshValue(iterator, "value");
+            }
+        });
+    }
+
+    public style(name) {
+        let mapper = this.styles.get(name);
+        if (!mapper) {
+            const owner = this;
+            mapper = {
+                name,
+                get value() {
+                    return owner.e?.getAttribute(name) ?? "";
+                },
+                set value(v) {
+                    if (!owner.e) {
+                        return;
+                    }
+                    if (!v) {
+                        owner.e.removeAttribute(name);
+                    } else {
+                        owner.e.setAttribute(name, v);
+                    }
+                    owner.editor.commit();
+                    AtomBinder.refreshValue(this, "value");
+                }
+            };
+            this.styles.set(name, mapper);
+        }
+        return mapper;
+    };
+
+
+    update(e?: HTMLElement) {
+        if (e) {
+            if (this.e) {
+                this.mo.disconnect();
+            }
+            this.e = e;
+            AtomBinder.refreshValue(this, "element");
+            this.mo.observe(e, { attributes: true });
+        }
+        e = this.e;
+        if (!e) {
+            return;
+        }
+        this.name = e.tagName.toLowerCase();
+        const r = e.getBoundingClientRect();
+        this.isImage = this.name === "img";
+        this.top = `${r.top + 2}px`;
+        this.left = `${r.left + 2}px`;
+        this.width = `${r.width}px`;
+        this.height = `${r.height}px`;
+        for (const iterator of this.styles.values()) {
+            AtomBinder.refreshValue(iterator, "value");
+        }
+    }
+}
+
+export default class HtmlPageEditor extends AtomControl {
+
+    public htmlDocument: Document;
+
+    public readonly selection: SelectedElement = new SelectedElement(this);
+
+    public undoList: string[] = [];
+    public redoList: string[] = [];
+
+    @BindableProperty
+    public folder: IAppFile;
+
+    public get htmlPage() {
+        return this.htmlDocument?.documentElement?.outerHTML;
+    }
+
+    public set htmlPage(v: string) {
+        if(!this.element) {
+            return;
+        }
+        if (!this.ready) {
+            setTimeout(() => {
+                this.htmlPage = v;
+            }, 100);
+            return;
+        }
+        void this.ready.then(() => {
+            if(!this.htmlDocument) {
+                return;
+            }
+            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;
+                    }
+                    previous.removeAttribute("contentEditable");
+                    this.commit();
+                }
+                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;
+                element.setAttribute("contentEditable", "true");
+                this.setSelection(element as any);
+                if (element.tagName === "IMG") {
+                    this.changeImage().catch(console.error);
+                }
+            });
+
+            this.htmlDocument.addEventListener("scroll", (e) => {
+                this.hover.update();
+                this.selection.update();
+            }, { passive: 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.hover.update(target);
+            }, { capture: true });
+
+            InstallDragDropHelper(this);
+
+            this.htmlDocument.close();
+
+            // install styler...
+            setTimeout(() => {
+                const document = this.htmlDocument;
+                let style = document.querySelector(`[styler-style-sheet]`);
+                if (!style) {
+                    style = document.createElement("style");
+                    style.setAttribute("styler-style-sheet", "inline");
+                    document.head.appendChild(style);
+                }
+                style.textContent = StylerSet.instance.toString();
+            },10);
+
+
+            setTimeout(() => {
+                this.lastHtml = this.htmlDocument.documentElement.innerHTML;
+            }, 1);
+        });
+    }
+
+    private lastHtml: string;
+    private ready: Promise<void>;
+    private contentEditor: HTMLIFrameElement;
+
+    private readonly hover: SelectedElement = new SelectedElement(this);
+
+    private maxWidth = desktopWidth;
+
+    constructor(app, e) {
+        super(app, e);
+        this.folder = null;
+        this.ready = this.init();
+    }
+
+    async init() {
+        this.render(<div data-html-page-editor="html-page-editor">
+            <div data-element="top">
+                <EditorToolbar data-element="max-width" event-click={() => this.deferUpdate()}>
+                    <i
+                        data-selected={Bind.oneWay(() => this.maxWidth === desktopWidth)}
+                        event-click={() => this.maxWidth = desktopWidth}
+                        class="fas fa-desktop"/>
+                    <i
+                        data-selected={Bind.oneWay(() => this.maxWidth === tabletWidth)}
+                        event-click={() => this.maxWidth = tabletWidth}
+                        class="fas fa-tablet-screen"/>
+                    <i
+                        data-selected={Bind.oneWay(() => this.maxWidth === mobileWidth)}
+                        event-click={() => this.maxWidth = mobileWidth}
+                        class="fas fa-mobile-screen"/>
+                </EditorToolbar>
+                <UndoRedoToolbar/>
+                <EditorToolbar>
+                    <CodeCommand/>
+                </EditorToolbar>
+            </div>
+            <EditorToolbar data-element="left">
+                <ImageBlock/>
+                <WrapGrid/>
+            </EditorToolbar>
+            <div data-element="editor"
+                style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>
+                <div data-element="resizer"></div>
+                <div data-element="selection"
+                    style-left={Bind.oneWay(() => this.selection.left)}
+                    style-top={Bind.oneWay(() => this.selection.top)}
+                    style-width={Bind.oneWay(() => this.selection.width)}
+                    style-height={Bind.oneWay(() => this.selection.height)}>
+                        <div>
+                            <i
+                                class="fa-regular fa-arrow-up"
+                                event-click={() => {
+                                    if (this.selection.element.parentElement !== this.htmlDocument.body) {
+                                        this.selection.update(this.selection.element.parentElement);
+                                    }
+                                }}
+                                />
+                            <i
+                                event-click={() => {
+                                    this.selection.element.draggable = true;
+                                }}
+                                class="fa-solid fa-up-down-left-right"
+                                data-click-event="start-drag"/>
+                            <i
+                                style-display={Bind.oneWay(() => this.selection.isImage)}
+                                data-click-event="change-image"
+                                title="Change Image (Double Click)"
+                                class="fa-solid fa-arrows-rotate-reverse"></i>
+                            <i
+                                title="Duplicate"
+                                data-click-event="copy-element" class="fas fa-copy"/>
+                            <i
+                                title="Delete"
+                                data-click-event="delete-element" class="fas fa-trash-can"/>
+                        </div>
+                </div>
+                <div data-element="hover"
+                    style-left={Bind.oneWay(() => this.hover.left)}
+                    style-top={Bind.oneWay(() => this.hover.top)}
+                    style-width={Bind.oneWay(() => this.hover.width)}
+                    style-height={Bind.oneWay(() => this.hover.height)}>
+                    <label text={Bind.oneWay(() => this.hover.name)}/>
+                </div>
+                <div
+                    data-element="content-frame">
+                    <iframe
+                        data-element="content-editor"
+                        />
+                </div>
+            </div>
+            <div data-element="right">
+                <Properties/>
+            </div>
+        </div>);
+
+        this.contentEditor = this.element.querySelector(`[data-element="content-editor"]`);
+        while(!this.htmlDocument) {
+            this.htmlDocument = this.contentEditor.contentDocument;
+            await sleep(100);
+        }
+    }
+
+    @Action({ onEvent: "delete-element"})
+    async deleteElement() {
+        const current = this.selection.element;
+        let previous = current.previousElementSibling ?? current.parentElement;
+        current.remove();
+        this.commit();
+        if (!previous.textContent) {
+            previous = previous.previousElementSibling.lastElementChild as any;
+        }
+        this.setSelection(previous);
+        await sleep(100);
+        this.selection.update();
+    }
+
+    @Action({ onEvent: "copy-element" , blockMultipleExecution: false})
+    copyElement() {
+        const current = this.selection.element;
+        const copy = current.cloneNode(true) as any;
+        current.insertAdjacentElement("afterend", copy);
+        this.commit();
+    }
+
+    @Action({ onEvent: "change-image"})
+    async changeImage() {
+        const { file, size } = await PageNavigator.pushPageForResult(ChooseMediaPage, { folder: this.folder, accept: "image/*" });
+        const src =  `/api/site/asset/jpg(${size})/${this.folder.appFileID}/${file.appFileID}/${file.fileContentID}/${file.name}.${size}.jpg`;
+
+        if(this.selection.isImage) {
+            this.selection.element.setAttribute("src", src);
+            this.selection.element.onload = () => this.selection.update();
+            this.commit();
+            return;
+        }
+
+        const img = this.htmlDocument.createElement("img");
+        img.style.height = size + "px";
+        img.src = src;
+        this.selection.element.appendChild(img);
+        this.selection.element.onload = () => this.selection.update();
+        this.commit();
+    }
+
+    insertElement(e: HTMLElement , parent: HTMLElement = this.selection.element) {
+        parent.appendChild(e);
+        if(!e.id) {
+            e.id = "sm-" + Date.now().toString();
+        }
+        setTimeout(() => {
+            this.setSelection(e);
+            this.commit();
+        }, 100);
+    }
+
+    async deferUpdate() {
+        await sleep(100);
+        this.hover?.update();
+        this.selection?.update();
+    }
+
+    setSelection(element, commit = true) {
+        const old = this.selection?.element;
+        if (old) {
+            old.draggable = false;
+        }
+        this.selection.update(element);
+        if (commit) {
+            this.commit();
+        }
+    }
+
+    commit() {
+        this.redoList.clear();
+        const lastHtml = this.htmlDocument.documentElement.innerHTML;
+        if (lastHtml === this.lastHtml) {
+            return;
+        }
+        this.undoList.add(this.lastHtml);
+        this.lastHtml = lastHtml;
+    }
+}