@web-atoms/web-controls 2.3.67 → 2.3.68

package/src/basic/UploadEvent.tsx

@@ -0,0 +1,203 @@
+import { App } from "@web-atoms/core/dist/App";
+import Command from "@web-atoms/core/dist/core/Command";
+import EventScope from "@web-atoms/core/dist/core/EventScope";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+
+const acceptCache = {};
+
+export const isFileType = (acceptType: string) => {
+
+    function isFileTypeFactory(accept: string): ((file: File) => boolean) {
+        // Accept ny file
+        if (!accept || accept === "*/*") {
+            return () => true;
+        }
+        const types = accept.split(/\,/g).map((x) => {
+            x = x.trim();
+            if (x.startsWith(".")) {
+                return (file: File) => file.name.endsWith(x);
+            }
+            if (x.endsWith("/*")) {
+                const prefix = x.substring(0, x.length - 1);
+                return (file: File) => file.type.startsWith(prefix);
+            }
+            return (file: File) => file.type === x;
+        });
+        return (file: File) => {
+            for (const iterator of types) {
+                if (iterator(file)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+    }
+
+    return acceptCache[acceptType] ??= isFileTypeFactory(acceptType);
+};
+
+export type FilesAvailableEventArgs<T = any> = CustomEvent<{ files: File[], extra: T }>;
+
+export interface IUploadParams<T = any> {
+    "event-files-available"?: (ce: FilesAvailableEventArgs<T>) => any,
+    uploadEvent?: string;
+    accept?: string,
+    capture?: string;
+    multiple?: any;
+    /** Will enforce that the selected file matches the given accept types */
+    forceType?: boolean;
+    maxSize?: number;
+    upload?: boolean;
+    /** Extra will hold other information that will be available in upload event */
+    extra?: T;
+    authorize?: boolean;
+    ariaLabel?: string;
+} 
+
+const requestUpload = new Command();
+
+let previousFile: HTMLInputElement;
+
+requestUpload.eventScope.listen((ce: CustomEvent) => {
+    const element = ce.target as HTMLElement;
+    const authorize = element.dataset.authorize;
+    if (authorize === "true") {
+        if(!App.authorize()) {
+            return;
+        }
+    }
+
+    const multiple = element.dataset.multiple === "true";
+    const extra = (element as any).extra;
+    const upload = element.dataset.upload === "true";
+    const uploadEvent = element.getAttribute("data-upload-event");
+
+    const chain: HTMLElement[] = [];
+    let start = element;
+    while(start) {
+        chain.push(start);
+        start = start.parentElement;
+    }
+
+    previousFile?.remove();
+    const file = document.createElement("input");
+    file.type = "file";
+    file.multiple = multiple;
+    const accept = element.dataset.accept || "*/*";
+    file.accept = accept;
+    const capture = element.dataset.capture;
+    if (capture) {
+        file.capture = capture;
+    }
+    file.style.position = "absolute";
+    file.style.left = "-1000px";
+    file.style.top = "-1000px";
+    document.body.append(file);
+    previousFile = file;
+    const maxSize = parseInt(element.dataset.maxSize || "0", 10);
+    const forceType = element.dataset.forceType === "true";
+
+    file.addEventListener("change", () => {
+        let files = Array.from(file.files);
+
+        let msg = "";
+
+        if (forceType || maxSize) {
+            
+            const validated = [];
+
+            const checkFileType = isFileType(accept);
+
+            for (const iterator of files) {
+                if (maxSize && iterator.size > maxSize) {
+                    msg += `Size of ${iterator.name} is more than ${maxSize}`;
+                    continue;
+                }
+                if (forceType) {
+                    if (!checkFileType(iterator)) {
+                        msg += `${iterator.name} is invalid file.`;
+                        continue;
+                    }
+                }
+                validated.push(iterator);
+            }
+
+            files = validated;
+        }
+
+        file.remove();
+        previousFile = null;
+
+        chain.reverse();
+        while(chain.length) {
+            const root = chain.pop();
+            if (root.isConnected) {
+
+                const control = AtomControl.from(root);
+                if (msg) {
+                    control.app.runAsync(() => PopupService.alert({ message: msg}));
+                    if (files.length === 0) {
+                        return;
+                    }
+                }
+                // if (upload) {
+                //     (window as any).uploading = true;
+                //     control.app.runAsync(async () => {
+                //         try {
+                //             const afs = await UploadFilesWindow.showModal({ parameters: { files, uploadEvent}});
+                //             root.dispatchEvent(new CustomEvent(uploadEvent, { detail: { files: afs, extra }, bubbles: true}));
+                //         } finally {
+                //             (window as any).uploading = false;
+                //         }
+                //     });
+                //     break;
+                // }
+                root.dispatchEvent(new CustomEvent(uploadEvent, { detail: {
+                    files,
+                    extra
+                }, bubbles: true }));
+                break;
+            }
+        }
+    });
+
+    setTimeout(() => {
+        file.dispatchEvent(new MouseEvent("click"));
+    });
+});
+
+
+let id = 1;
+
+export default class UploadEvent {
+
+    public static AttachUploadAction({
+        uploadEvent = "files-available",
+        accept = "*/*",
+        capture,
+        multiple = false,
+        forceType = true,
+        maxSize = 524288000,
+        extra,
+        upload = true,
+        authorize = true,
+        ariaLabel = "Upload",
+        ... others
+    }: IUploadParams) {
+        return {
+            ... others,
+            ... requestUpload.registerOnClick(""),
+            "data-upload-event": uploadEvent,
+            "data-accept": accept,
+            "data-multiple": multiple ? "true" : "false",
+            "data-capture": capture,
+            "data-upload": upload ? "true" : "false",
+            "data-force-type": forceType ? "true" : "false",
+            "data-max-size" : maxSize ? maxSize.toString() : undefined,
+            "data-authorize": authorize.toString(),
+            "aria-label": ariaLabel,
+            extra,
+        };
+    }
+}

package/src/html-editor/HtmlEditorCommands.tsx

@@ -0,0 +1,16 @@
+import { IRangeUpdate } from "./RangeEditor";
+
+export interface IHtmlEditorCommand {
+    [key: string]: (e: IRangeUpdate) => void;
+}
+
+
+const HtmlEditorCommands = {
+
+    bold({ range, check, update}) {
+
+    }
+
+} as IHtmlEditorCommand;
+
+export default HtmlEditorCommands;

package/src/html-editor/InlineHtmlEditor.tsx

@@ -0,0 +1,209 @@
+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 StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import RangeEditor, { RangeEditorCommands } from "./RangeEditor";
+
+import "@web-atoms/data-styles/data-styles";
+import { showImageDialog } from "./commands/AddImage";
+import { FilesAvailableEventArgs } from "../basic/UploadEvent";
+
+CSS(StyleRule()
+    .child(StyleRule("[data-element=toolbar]")
+        .verticalFlexLayout({})
+        .child(StyleRule(".toolbar")
+            .flexLayout({})
+            .nested(StyleRule(".command")
+                .and(StyleRule(".pressed")
+                    .fontWeight("bold")
+                )
+            )
+        )
+    )
+, "[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 get htmlContent() {
+        return this.content;
+    }
+
+    public set htmlContent(v: string) {
+        this.content = v;
+    }
+
+    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);
+    }
+
+    private version: number;
+
+    private selection: Range;
+
+    private editor: HTMLElement;
+
+    private toolbarElement: HTMLElement;
+
+    private token: CancelToken;
+
+    protected executeCommand(command: string, showUI?: boolean, value?: string) {
+        // restore selection...
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        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 = this.editor.querySelector(this.editableSelector) as HTMLElement;
+        if (start) {
+            start.contentEditable = "true";
+        } else {
+            (this.editor.firstElementChild as HTMLElement).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: KeyboardEvent) => this.updateQueryCommand());
+        this.bindEvent(this.editor, "paste", () => this.onContentInput());
+        this.bindEvent(this.editor, "cut", () => this.onContentInput());
+        this.bindEvent(this.editor, "drop", (e: DragEvent) => this.onDrop(e));
+    }
+
+    protected updateQueryCommand() {
+        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 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/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/src/html-editor/commands/AttachFile.tsx

@@ -1,63 +1,37 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
-
-function promptForFiles(
-    accept = "*",
-    multiple = true
-) {
-    const file = document.createElement("input");
-    file.type = "file";
-    file.multiple = multiple;
-    file.accept = accept;
-    file.style.position = "absolute";
-    file.style.left = "-1000px";
-    file.style.top = "-1000px";
-    document.body.append(file);
-    const previous = file;
-    return new Promise<File[]>((resolve, reject) => {
-        file.addEventListener("change", () => {
-            if (file.files.length) {
-                const files = Array.from(file.files);
-                resolve(files);
-            } else {
-                reject("cancelled");
-            }
-            if (previous) {
-                previous.remove();
-            }
-        });
-        file.dispatchEvent(new MouseEvent("click"));
-    });
-}
+import UploadEvent from "../../basic/UploadEvent";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
 export default function AttachFile({
-    eventInsertHtml = (source: AtomHtmlEditor, e: Event) => {
-        const ce = new CustomEvent("attachFile",
-        {
-            detail: {
-                source,
-                files: source.files
-            },
-            cancelable: true
-        });
-        source.element.dispatchEvent(ce);
-        if (ce.defaultPrevented) {
-            return;
-        }
-        source.app.runAsync(async () => {
-            const result = await promptForFiles();
-            source.files ??= [];
-            source.files.addAll(result);
-        })
-    },
-    insertCommand = HtmlCommands.insertImage
+    accept = "image/*",
+    maxSize = 204800,
+    authorize = true,
+    capture = null as string,
+    ariaLabel = "upload"
 }) {
-    return CommandButton({
-        icon: "ri-attachment-2",
-        insertCommand,
-        disabled: false,
-        title: "Insert Image",
-        eventInsertHtml
-    });
+    // 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>;
 }