@social-mail/social-mail-client 1.0.21 → 1.0.23

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

@@ -11,6 +11,18 @@ 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;
@@ -207,13 +219,35 @@ export default class InlineHtmlEditor extends AtomControl {
         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, "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() {
+    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++;
     }
 
@@ -238,6 +272,7 @@ export default class InlineHtmlEditor extends AtomControl {
     protected onPasteEvent(e: ClipboardEvent) {
         // tslint:disable-next-line: no-console
         if (!e.clipboardData.types.find((x) => x === "text/html")) {
+            this.onContentInput();
             return;
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@web-atoms/font-awesome": "^1.0.37",
     "@web-atoms/hybrid-clr": "^1.0.21",
     "@web-atoms/module-loader": "^2.1.32",
-    "@web-atoms/web-controls": "^2.3.250",
+    "@web-atoms/web-controls": "^2.3.254",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {

package/src/common/controls/html/InlineHtmlEditorWithToolbar.tsx

@@ -16,12 +16,15 @@ import NumberedList from "@web-atoms/web-controls/dist/html-editor/commands/Numb
 import UnorderedList from "@web-atoms/web-controls/dist/html-editor/commands/UnorderedList";
 import IndentLess from "@web-atoms/web-controls/dist/html-editor/commands/IndentLess";
 import IndentMore from "@web-atoms/web-controls/dist/html-editor/commands/IndentMore";
-import AttachImage from "@web-atoms/web-controls/dist/html-editor/commands/AttachImage";
 import AttachFile from "@web-atoms/web-controls/dist/html-editor/commands/AttachFile";
 import AddLink from "@web-atoms/web-controls/dist/html-editor/commands/AddLink";
 import Unlink from "@web-atoms/web-controls/dist/html-editor/commands/Unlink";
 import RemoveFormat from "@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat";
 import Source from "@web-atoms/web-controls/dist/html-editor/commands/Source";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import LocalFileService, { IUploadedFile, UploadedFiles } from "../../../services/files/LocalFileService";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 
 const link = document.createElement("link");
 link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
@@ -33,7 +36,79 @@ link.onload = () => {
 };
 document.head.appendChild(link);
 
-export default function InlineHtmlEditorWithToolbar(a: Partial<InlineHtmlEditor> & { presenter?: any}) {
+const onAttachImage = async (ce: UploadedFiles) => {
+    const c = AtomControl.from(ce.target) as any;
+    // create data url...
+    if(!ce.detail?.files?.length) {
+        return;
+    }
+    const file = ce.detail.files[0];
+
+    c.executeCommand("insertHTML", void 0, `<div><img data-content="data-url" data-content-id=${file.appFileID} src="${file.url}" style='max-height: 700px;'/></div>`);
+};
+
+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 as any
+        })}
+        >
+        <i class="ri-image-add-fill" />
+    </button>;
+}
+
+export class MailHtmlEditor extends InlineHtmlEditor {
+
+    public files: IUploadedFile[];
+
+    @InjectProperty
+    private localFileService: LocalFileService;
+
+    protected onPasteEvent(e: ClipboardEvent): void {
+        if (e.clipboardData.files.length) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.app.runAsync(async() => {
+                const files = await this.localFileService.uploadWithProgress(Array.from(e.clipboardData.files));
+                for (const file of files) {
+                    this.executeCommand("insertHTML", void 0, `<div><img data-content="data-url" data-content-id=${file.appFileID} src="${file.url}" style='max-height: 700px;'/></div>`);
+                }
+                this.element.dispatchEvent(new CustomEvent("filesAvailable", { detail: { files, extra: "none" }, bubbles: true }));
+            });
+            return;
+        }
+        super.onPasteEvent(e);
+    }
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.sanitizeHtml = (node) => {
+            const images = Array.from(node.querySelectorAll(`img[data-content-id]`));
+            for (const image of images) {
+                image.setAttribute("src", `cid:${image.getAttribute("data-content-id")}`);
+            }
+        };
+
+    }
+
+}
+
+export default function InlineHtmlEditorWithToolbar(a: Partial<MailHtmlEditor> & { presenter?: any}) {
     const toolbar = () => <div>
             <Toolbar>
                 <Bold/>
@@ -66,7 +141,7 @@ export default function InlineHtmlEditorWithToolbar(a: Partial<InlineHtmlEditor>
                 <Source/>
             </Toolbar>
         </div>;
-    return <InlineHtmlEditor
+    return <MailHtmlEditor
         { ... a}
         toolbar={toolbar}
         />;

package/src/services/files/LocalFileService.tsx

@@ -79,6 +79,11 @@ export default class LocalFileService {
         });
     }
 
+    async uploadWithProgress(files: File[]) {
+        const detail = await FileUploadWindow.showModal<{ files: IUploadedFile[]}>({ parameters: { files, extra: "" }});
+        return detail.files;
+    }
+
     async upload(files: File[]) {
         return files.map((file) => {
             const uploadFile: IFileUpload = {

package/src/web/page/mails/ComposeMailPage.tsx

@@ -43,7 +43,7 @@ export default class ComposeMailPage extends PopupWindowPage {
         this.model = this.parameters.model ?? Email.create({
             subject: this.parameters.subject ?? "",
             textBody: "",
-            htmlBody: `<div contentEditable="true">Type message here... </div>`,
+            htmlBody: `<div contentEditable="true"><p><br/><br/><br/><br/><br/></p></div>`,
             recipients: [],
             attachments: []
         });

package/src/web/page/mails/MailsPage.tsx

@@ -50,7 +50,7 @@ export default class MailsPage extends MasterDetailPage {
                 data-list-selection="default"
                 data-items-updated-event="mails-available"
                 data-selection-updated-event="mail-selected"
-                selectedItem={Bind.oneWay(() => this.selectedThread)}
+                selectedItem={Bind.twoWays(() => this.selectedThread)}
                 selectOnClick={true}
                 items={this.mails}
                 { ... InfiniteRepeater.pagedItems((start) => (c, e, cancelToken) => this.mailService.list({