@social-mail/social-mail-hosted-web 1.0.2

package/node_modules/@web-atoms/web-controls/src/html-editor/InlineHtmlEditor.tsx

@@ -0,0 +1,321 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import sleep from "@web-atoms/core/dist/core/sleep";
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+
+import "@web-atoms/data-styles/data-styles";
+import { showImageDialog } from "./commands/AddImage";
+import { FilesAvailableEventArgs } from "../basic/UploadEvent";
+import styled from "@web-atoms/core/dist/style/styled";
+
+    styled.css `
+
+    & > [data-element=editor] {
+
+        padding: var(--spacing, 5px);
+        border: solid 1px lightgray;
+        border-radius: var(--spacing, 5px);
+        margin: var(--spacing, 5px);
+
+        & > * {
+            outline: none;
+        }
+    }
+
+    & > [data-element=toolbar] {
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        gap: 4px;
+        display: flex;
+
+        & > .toolbar {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-around;
+            gap: 4px;
+            display: flex;
+
+            & .command {
+
+                &.pressed {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    `.installGlobal("[data-inline-editor=inline-editor]")
+
+export default class InlineHtmlEditor extends AtomControl {
+
+    /**
+     * Maximum undo limit
+     */
+    public undoLimit = 100;
+
+    public "event-content-changed"?: (ce: CustomEvent<string>) => any;
+    public "event-content-ready"?: (ce: CustomEvent<HTMLElement>) => any;
+    public "event-load-suggestions"?: (ce: CustomEvent<string>) => any;
+    public "event-files-available"?: (ce: FilesAvailableEventArgs) => any;
+
+    public editableSelector: string = ".editable";
+
+    public sanitizeHtml: (node: HTMLElement) => void;
+
+    /**
+     * This will return the html content
+     * after sanitizing everything, removing editable
+     * attributes etc.
+     */
+    public get htmlContent() {
+        return this.htmlTextContent.html;
+    }
+
+    public set htmlContent(v: string) {
+        this.content = v;
+    }
+
+    public get htmlTextContent() {
+
+        // we will sanitize...
+        // remove editable
+        const copy = document.createElement("div");
+        copy.innerHTML = this.editor.innerHTML;
+
+        for(const node of descendentElementIterator(copy)) {
+            (node as HTMLElement).contentEditable = "false";
+        }
+
+        this.sanitizeHtml?.(copy);
+
+        return { html: copy.innerHTML , text: copy.innerText };
+    }
+
+    public get content() {
+        return this.editor.innerHTML;
+    }
+
+    public set content(value: string) {
+        this.editor.innerHTML = value;
+        setTimeout(() => this.onContentSet(), 100);
+    }
+
+    public set toolbar(v: () => XNode) {
+        this.dispose(this.toolbarElement);
+        this.toolbarElement.innerHTML = "";
+        this.render(v(), this.toolbarElement, this);
+    }
+
+    public editor: HTMLElement;
+
+    private version: number;
+
+    private selection: Range;
+
+
+    private toolbarElement: HTMLElement;
+
+    private token: CancelToken;
+
+    protected executeCommand(command: string, showUI?: boolean, value?: string) {
+        // restore selection...
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        if (!this.selection) {
+            const range = document.createRange();
+            // find editable...
+            const start = ChildEnumerator.find(this.editor, (x) => x.isContentEditable) ?? this.editor.firstElementChild;
+            range.setEndAfter(start.lastChild);
+            range.setStartAfter(start.lastChild);
+            selection.addRange(range);
+        } else {
+            selection.addRange(this.selection);
+        }
+        return document.execCommand(command, showUI, value);
+        // // debugger;
+        // // restore selection
+        // const selection = window.getSelection();
+        // selection.removeAllRanges();
+        // const range = this.selection;
+        // // document.execCommand(command, showUI, value);
+        // const cmd = RangeEditorCommands[command];
+        // if (cmd) {
+        //     RangeEditor.updateRange({
+        //         ... cmd,
+        //         value,
+        //         range,
+        //     });
+        // }
+        // selection.addRange(range);
+    }
+
+    protected getStyle(name: string) {
+        
+        const selection = this.selection;
+        if (!selection) {
+            return void 0;
+        }
+        const node = selection;
+        const e = node.startContainer.parentElement as HTMLElement;
+        return window.getComputedStyle(e)[name];        // const range = selection.getRangeAt(0);
+        // const container = range.commonAncestorContainer;
+        // if(container.nodeType === Node.ELEMENT_NODE) {
+        //     return window.getComputedStyle(container as HTMLElement)[name];
+        // }
+        // return void 0;
+    }
+
+    protected queryCommandState(command: string) {
+        return document.queryCommandState(command);
+        // const selection = this.selection;
+        // if (!selection) {
+        //     return;
+        // }
+        // const range = selection;
+        // const cmd = RangeEditorCommands[command];
+        // if (cmd) {
+        //     return RangeEditor.checkRange({
+        //         ... cmd,
+        //         range,
+        //     });
+        // }
+    }
+
+    protected onContentSet() {
+
+        const start = (
+            Array.from(this.editor.querySelectorAll<HTMLElement>(this.editableSelector))
+            ??
+            [this.editor.firstElementChild as HTMLElement]
+        );
+        if (start.length) {
+            for (const iterator of start) {
+                iterator.contentEditable = "true";
+            }
+        }
+        this.editor.dispatchEvent(new CustomEvent("contentReady", { detail: this.editor.innerHTML, bubbles: true }));
+    }
+
+    protected saveSelection() {
+        const selection = window.getSelection();
+        this.selection = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
+    }
+
+    public insertImage(s: any, e: Event) {
+        return showImageDialog(s, e);
+    }
+
+    protected preCreate(): void {
+        this.version = 1;
+        this.element.setAttribute("data-inline-editor", "inline-editor");
+        this.render(<div>
+            <div data-element="toolbar"/>
+            <div data-element="editor"/>
+        </div>);
+
+        this.editor = this.element.querySelector(`[data-element=editor]`);
+        this.toolbarElement = this.element.querySelector(`[data-element=toolbar]`);
+
+        this.bindEvent(this.editor, "blur", () => this.saveSelection(), void 0, true);
+        this.bindEvent(this.editor, "input", (e: InputEvent) => this.onContentInput(e));
+        this.bindEvent(this.editor, "keydown", (e: KeyboardEvent) => this.updateQueryCommand());
+        this.bindEvent(this.editor, "click", (e: MouseEvent) => this.updateQueryCommand(e));
+        this.bindEvent(this.editor, "paste", (e: ClipboardEvent) => this.onPasteEvent(e));
+        this.bindEvent(this.editor, "cut", () => this.onContentInput());
+        this.bindEvent(this.editor, "drop", (e: DragEvent) => this.onDrop(e));
+    }
+
+    protected updateQueryCommand(e?: Event) {
+        if (e?.type === "click") {
+            if (!this.editor.textContent) {
+                let first = this.editor.firstElementChild;
+                if(!first) {
+                    first = document.createElement("div");
+                    first.innerHTML = "<p><br/></p>";
+                    this.editor.appendChild(first);
+                }
+                else {
+                    if (!first.lastChild) {
+                        first.innerHTML = "<p></br></b>";
+                    }
+                }
+                // const selection = window.getSelection();
+                // selection.removeAllRanges();
+                // const range = document.createRange();
+                // // find editable...
+                // range.setEndAfter(first.lastChild);
+                // range.setStartAfter(first.lastChild);
+                // selection.addRange(range);
+            }
+        }
+        this.version++;
+    }
+
+    protected onDrop(e: DragEvent) {
+        e.preventDefault();
+        const text = e.dataTransfer.getData("text/plain");
+        if (!text) {
+            return;
+        }
+        let last: HTMLElement = null;
+        for (const node of descendentElementIterator(this.element)) {
+            if ((node as HTMLElement).isContentEditable) {
+                last = node as HTMLElement;
+                continue;
+            }
+        }
+        if (last) {
+            last.appendChild(document.createTextNode(text));
+        }
+    }
+
+    protected onPasteEvent(e: ClipboardEvent) {
+        // tslint:disable-next-line: no-console
+        if (!e.clipboardData.types.find((x) => x === "text/html")) {
+            this.onContentInput();
+            return;
+        }
+
+        const d = e.clipboardData.getData("text/plain");
+        if (d) {
+            // we need to sanitize this one...
+            const s = window.getSelection();
+            const r = s.getRangeAt(0);
+            let last: HTMLElement;
+            const tags = [];
+            for (const iterator of d.split("\n")) {
+                const text = iterator.trim();
+                if (!text) {
+                    continue;
+                }
+                last = document.createElement("p");
+                last.innerText = iterator;
+                tags.push(last);
+            }
+            while(tags.length) {
+                r.insertNode(tags.pop());
+            }
+            r.setStartAfter(last);
+            this.onContentInput();
+        }
+        e.preventDefault();
+    }
+
+    protected contentModified() {
+        this.element.dispatchEvent(new CustomEvent("contentChanged", { detail: this.editor.innerHTML, bubbles: true }));
+    }
+
+    private onContentInput(e?: InputEvent) {
+        this.token?.cancel();
+        const token = this.token = new CancelToken();
+        this.app.runAsync(async () => {
+            await sleep(500, token, false);
+            if(token.cancelled) {
+                return;
+            }
+            this.contentModified();
+        });
+    }
+
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/RangeEditor.tsx

@@ -0,0 +1,99 @@
+import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+
+export const checkAnyParent = (check: (e: HTMLElement) => boolean) => (e: HTMLElement) => {
+    while (e) {
+        if (check(e)) {
+            return true;
+        }
+        e = e.parentElement;    
+    }
+    return false;
+};
+
+export interface IRangeUpdate {
+    range: Range;
+    check: (e: HTMLElement) => boolean;
+    update: (e: HTMLElement, v?: any) => HTMLElement;
+    value?: any;
+}
+
+export interface IRangeCommand {
+    check: (e: HTMLElement) => boolean;
+    update: (e: HTMLElement, v?: any) => HTMLElement;
+    value?: any;
+}
+
+export default class RangeEditor {
+
+    public static updateAttribute(range: Range, name: string, value: string, anyParent: boolean = true) {
+        return this.updateRange({
+            range,
+            check: anyParent
+                ? checkAnyParent((e) => e.getAttribute(name) === value)
+                : (e) => e.getAttribute(name) === value,
+            update: (e) => (e.setAttribute(name, value), e)
+        })
+    }
+
+    public static checkRange(
+        {
+            range,
+            check,
+        }: IRangeUpdate
+    ) {
+        const root = range.startContainer.nodeType !== Node.ELEMENT_NODE
+            ? range.startContainer.parentElement
+            : range.startContainer as HTMLElement;
+        return check(root);
+    }
+
+
+    public static updateRange(
+        {
+            range,
+            check,
+            update,
+            value
+        }: IRangeUpdate
+    ) {
+                
+    }
+
+}
+
+const updateAttribute = (name: string, value: string, anyParent = true) => ({
+    update: (e: HTMLElement, v = value) =>
+        (e.setAttribute(name, v), e),
+    check: anyParent
+        ? checkAnyParent((e: HTMLElement) => e.getAttribute(name) === value)
+        : (e: HTMLElement) => e.getAttribute(name) === value
+});
+
+const updateStyle = (name: keyof CSSStyleDeclaration, value: string, anyParent = true) => ({
+    update: (e: HTMLElement, v = value) =>
+        (e.style[name as any] = v, e),
+    check: anyParent
+        ? checkAnyParent((e: HTMLElement) => e.style[name as any] === value)
+        : (e: HTMLElement) => e.style[name as any] === value
+});
+
+export const RangeEditorCommands: Record<string, IRangeCommand> = {
+    bold: updateStyle("fontWeight", "bold"),
+    italic: updateStyle("fontStyle", "italic"),
+    underline: updateStyle("textDecoration", "underline"),
+    strikeThrough: updateStyle("textDecoration", "line-through"),
+    foreColor: {
+        check: () => false,
+        update: (e, value) => {
+            e.style.color = value;
+            return e;
+        }
+    },
+    removeFormat: {
+        check: () => false,
+        update: (e) => {
+            e.removeAttribute("style");
+            return e;
+        }
+    }
+};

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AddImage.tsx

@@ -0,0 +1,59 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import FormField from "../../basic/FormField";
+import type AtomHtmlEditor from "../AtomHtmlEditor";
+import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
+
+class ImageDialog extends PopupWindow {
+
+    @BindableProperty
+    public link: string;
+
+    @BindableProperty
+    public alt: string;
+
+    protected create(): void {
+        this.link = "";
+        this.alt = "";
+        this.render(<div>
+            <FormField label="Url">
+                <input value={Bind.twoWaysImmediate(() => this.link)}/>
+            </FormField>
+            <FormField label="Alt">
+                <input value={Bind.twoWaysImmediate(() => this.alt)}/>
+            </FormField>
+            <div class="command-bar">
+                <button
+                    eventClick={() => this.close(this.createImage())}
+                    text="Add"/>
+            </div>
+        </div>);
+    }
+
+    private createImage() {
+        if (this.alt) {
+            return `<img src="${this.link}" alt="${this.alt}" />`;
+        }
+        return `<img src="${this.link}"/>`;
+    }
+}
+
+export function showImageDialog(s: AtomHtmlEditor, e: Event): Promise<string> | string {
+    return PopupService.showWindow<string>(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
+}
+
+export default function AddImage({
+    eventInsertHtml = (s: AtomHtmlEditor, e: Event) => s.insertImage(s, e),
+    insertCommand = HtmlCommands.insertImage
+}) {
+    return CommandButton({
+        icon: "ri-image-add-fill",
+        insertCommand,
+        disabled: false,
+        title: "Insert Image",
+        eventInsertHtml
+    });
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AddLink.tsx

@@ -0,0 +1,89 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
+import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import FormField from "../../basic/FormField";
+import type AtomHtmlEditor from "../AtomHtmlEditor";
+import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
+import styled from "@web-atoms/core/dist/style/styled";
+
+const linkTypes = [
+    {
+        label: "Web Page",
+        value: "web-page"
+    },
+    {
+        label: "Email",
+        value: "email"
+    },
+    {
+        label: "Anchor",
+        value: "anchor"
+    },
+    {
+        label: "Phone",
+        value: "phone"
+    }
+];
+
+const linkDialogCss = styled.css `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+`.installLocal();
+
+class LinkDialog extends PopupWindow {
+
+    @BindableProperty
+    public link: string;
+
+    @BindableProperty
+    public type: string;
+
+    protected create(): void {
+        this.type = "web-page";
+        this.title = "Create Link";
+        this.render(<div class={linkDialogCss}>
+            <FormField label="Type">
+                <AtomToggleButtonBar
+                    items={linkTypes}
+                    value={Bind.twoWays(() => this.type)}/>
+            </FormField>
+            <FormField label="Link" required={true}>
+                <input
+                    placeholder="https://..."
+                    value={Bind.twoWaysImmediate(() => this.link)}/>
+            </FormField>
+            <div class="command-bar">
+                <button
+                    text="Add"
+                    eventClick={Bind.event(() => this.close(this.toLink(this.link)))} />
+            </div>
+        </div>);
+    }
+
+    private toLink(link: string): string {
+        switch (this.type) {
+            case "web-page":
+                return /^(http|https)\:\/\//.test(link) ? link : `http://${link}`;
+        }
+    }
+}
+
+function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
+    return PopupService.showWindow(s.element, LinkDialog);
+}
+
+export default function AddLink({
+    insertCommand = HtmlCommands.createLink
+}) {
+    return CommandButton({
+        icon: "ri-link-m",
+        insertCommand,
+        disabled: false,
+        eventInsertHtml: showDialog,
+        title: "Create Hyper Link"
+    });
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Align.tsx

@@ -0,0 +1,33 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import PopupButton, { MenuItem } from "../../basic/PopupButton";
+import type AtomHtmlEditor from "../AtomHtmlEditor";
+
+export default function Align() {
+    return <PopupButton
+        class="command"
+        data-layout="toolbar-button"
+        icon="ri-align-left"
+        title="Change Alignment">
+        <MenuItem
+            icon="ri-align-left"
+            title="Align Left"
+            eventClick={Bind.event((e: AtomHtmlEditor) =>
+                e.executeCommand("justifyLeft"))}/>
+        <MenuItem
+            icon="ri-align-center"
+            title="Align Center"
+            eventClick={Bind.event((e: AtomHtmlEditor) =>
+                e.executeCommand("justifyCenter"))}/>
+        <MenuItem
+            icon="ri-align-right"
+            title="Align Right"
+            eventClick={Bind.event((e: AtomHtmlEditor) =>
+                e.executeCommand("justifyRight"))}/>
+        <MenuItem
+            icon="ri-align-justify"
+            title="Justify"
+            eventClick={Bind.event((e: AtomHtmlEditor) =>
+                e.executeCommand("justifyFull"))}/>
+    </PopupButton>;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AttachFile.tsx

@@ -0,0 +1,37 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import AtomHtmlEditor from "../AtomHtmlEditor";
+import CommandButton from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
+import UploadEvent from "../../basic/UploadEvent";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+export default function AttachFile({
+    accept = "image/*",
+    maxSize = 1024*1024*5,
+    authorize = true,
+    capture = null as string,
+    ariaLabel = "upload"
+}) {
+    // return CommandButton({
+    //     icon: "ri-attachment-2",
+    //     insertCommand,
+    //     disabled: false,
+    //     title: "Insert Image",
+    //     eventInsertHtml
+    // });
+    return <button
+        title="Insert Image"
+        class="command"
+        { ... UploadEvent.AttachUploadAction({
+            accept,
+            forceType: true,
+            maxSize,
+            authorize,
+            capture,
+            multiple: false,
+            ariaLabel
+        })}
+        >
+        <i class="ri-attachment-2" />
+    </button>;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/AttachImage.tsx

@@ -0,0 +1,43 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import UploadEvent, { FilesAvailableEventArgs } from "../../basic/UploadEvent";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+const onAttachImage = async (ce: FilesAvailableEventArgs) => {
+    const c = AtomControl.from(ce.target) as any;
+    // create data url...
+    if(!ce.detail?.files?.length) {
+        return;
+    } 
+    const file = ce.detail.files[0];
+
+    const fr = new FileReader();
+    fr.onload = () => {
+        c.executeCommand("insertHTML", void 0, `<div><img data-content="data-url" src="${fr.result}" style='max-height: 700px;'/></div>`);
+    }
+    fr.readAsDataURL(file);
+}
+
+export default function AttachImage({
+    accept = "image/*",
+    maxSize = 1024*1024*5,
+    authorize = true,
+    capture = null as string,
+    ariaLabel = "upload"
+}) {
+    return <button
+        title="Insert Image"
+        class="command"
+        { ... UploadEvent.AttachUploadAction({
+            accept,
+            forceType: true,
+            maxSize,
+            authorize,
+            capture,
+            multiple: false,
+            ariaLabel,
+            "event-files-available": onAttachImage
+        })}
+        >
+        <i class="ri-image-add-fill" />
+    </button>;
+}

package/node_modules/@web-atoms/web-controls/src/html-editor/commands/Bold.ts

@@ -0,0 +1,13 @@
+import Command, { ICommand } from "./Command";
+
+export default function Bold(cmd: ICommand) {
+    return Command({
+        icon: "ri-bold",
+        queryState: "bold",
+        title: "Bold",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("bold");
+        }
+    });
+}