@social-mail/social-mail-client 1.2.86 → 1.2.88

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

@@ -27,6 +27,7 @@ import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
 import styled from "@web-atoms/core/dist/style/styled";
 import { descendentElementIterator, descendentIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+import { IAppFile } from "../../../model/model";
 
 const link = document.createElement("link");
 link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
@@ -134,13 +135,28 @@ const css = styled.css `
 
 export class MailHtmlEditor extends InlineHtmlEditor {
 
-    public files: IUploadedFile[];
+    public files: IUploadedFile[] = [];
+
+    public attachments: IAppFile[] = [];
 
     public autofocus = false;
 
     @InjectProperty
     private localFileService: LocalFileService;
 
+    protected onContentSet(): void {
+        super.onContentSet();
+        const files = this.attachments;
+        const items = Array.from(this.editor.querySelectorAll(`*[data-content-id]`)) as HTMLElement[];
+        for (const iterator of items) {
+            const file = files.find((x) => x.contentID === iterator.getAttribute("data-content-id"));
+            if (!file) {
+                continue;
+            }
+            iterator.setAttribute("src", file.url);
+        }
+    }
+
     protected onPasteEvent(e: ClipboardEvent): void {
         if (e.clipboardData.files.length) {
             e.preventDefault();
@@ -161,7 +177,7 @@ export class MailHtmlEditor extends InlineHtmlEditor {
         super.preCreate();
         this.element.className = css;
         this.sanitizeHtml = (node) => {
-            const images = Array.from(node.querySelectorAll(`img[data-content-id]`));
+            const images = Array.from(node.querySelectorAll(`*[data-content-id]`));
             for (const image of images) {
                 image.setAttribute("src", `cid:${image.getAttribute("data-content-id")}`);
             }

package/src/services/files/LocalFileService.tsx

@@ -171,7 +171,7 @@ export default class LocalFileService extends TaskManager {
 
         const sha256 = await this.sha256(file);
 
-        if (extra.parentID) {
+        if (extra?.parentID) {
             const existing = await this.entityService.query(AppFile, "children", extra.parentID, folder ? folder + "/" + file.name : file.name, sha256)
                 .firstOrDefault();
             if (existing) {

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

@@ -68,6 +68,8 @@ export default class ComposeMailPage extends PopupWindowPage {
             attachments: []
         });
 
+        this.model.attachments ??= [];
+
         if (this.parameters.social) {
             // load social template....
             const senderName = this.parameters.mailbox.emailAddress.name;
@@ -102,6 +104,7 @@ export default class ComposeMailPage extends PopupWindowPage {
                     data-html-editor="email-editor"
                     presenter={Bind.presenter((c) => this.editor = c )}
                     content={this.model.htmlBody}
+                    attachments={this.model.attachments}
                     style-min-height="200px"
                 />
                 <AtomRepeater

package/src/web/page/mails/mini-compose/Atttach.tsx

@@ -0,0 +1,68 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IPopupOptions } from "@web-atoms/core/dist/web/services/PopupService";
+import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";
+import PopupButton, { MenuItem } from "@web-atoms/web-controls/dist/basic/PopupButton";
+import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
+import CodeSnippetPage from "../../../../code-editor/CodeSnippetPage";
+import type { MailHtmlEditor } from "../../../../common/controls/html/InlineHtmlEditorWithToolbar";
+
+export default function Attach({ alignment = "above" as IPopupOptions["alignment"]}) {
+    return <PopupButton
+        class="command"
+        data-layout="toolbar-button"
+        icon="fa-light fa-file-plus"
+        title="Attach"
+        alignment={alignment}>
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "image/*",
+                    multiple: true,
+                    extra: {
+                    }
+                })}
+                icon="fas fa-image"
+                label="Attach Photos"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "image/*",
+                    capture: "user",
+                    extra: {
+                    }
+                })}
+                icon="fa-duotone fa-camera-retro"
+                label="Take Photo"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "video/*",
+                    multiple: false,
+                    extra: {
+                    }
+                })}
+                icon="fas fa-file-video"
+                label="Attach Video"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "video/*",
+                    capture: "user",
+                    extra: {
+                    }
+                })}
+                icon="fa-duotone fa-video-plus"
+                label="Record Video"
+                />
+            <MenuItem
+                { ... UploadEvent.AttachUploadAction({
+                    accept: "*/*",
+                    extra: {
+                    }
+                })}
+                icon="fa-duotone fa-file"
+                label="Attach Documents"
+                style-min-width="150px"
+                />
+        </PopupButton>;
+}

package/src/web/page/mails/mini-compose/Insert.tsx

@@ -12,7 +12,7 @@ export default function Insert({ alignment = "above" as IPopupOptions["alignment
         class="command"
         data-layout="toolbar-button"
         icon="fas fa-plus"
-        title="Change Alignment"
+        title="Insert"
         alignment={alignment}>
             <MenuItem
                 icon="ri-list-unordered"
@@ -36,7 +36,9 @@ export default function Insert({ alignment = "above" as IPopupOptions["alignment
                 { ... UploadEvent.AttachUploadAction({
                     accept: "image/*",
                     multiple: true,
-                    extra: {}
+                    extra: {
+                        insert: true
+                    }
                 })}
                 data-click-event="send-photos"
                 icon="fas fa-image"
@@ -46,7 +48,9 @@ export default function Insert({ alignment = "above" as IPopupOptions["alignment
                 { ... UploadEvent.AttachUploadAction({
                     accept: "image/*",
                     capture: "user",
-                    extra: {}
+                    extra: {
+                        insert: true
+                    }
                 })}
                 data-click-event="take-photo"
                 icon="fa-duotone fa-camera-retro"
@@ -56,27 +60,21 @@ export default function Insert({ alignment = "above" as IPopupOptions["alignment
                 { ... UploadEvent.AttachUploadAction({
                     accept: "video/*",
                     multiple: false,
-                    extra: {}
+                    extra: {
+                        insert: true
+                    }
                 })}
                 data-click-event="send-video"
                 icon="fas fa-file-video"
                 label="Add Video"
                 />
-            <MenuItem
-                { ... UploadEvent.AttachUploadAction({
-                    accept: "*/*",
-                    multiple: false,
-                    extra: {}
-                })}
-                data-click-event="send-document"
-                icon="fas fa-file"
-                label="Add Document"
-                />
             <MenuItem
                 { ... UploadEvent.AttachUploadAction({
                     accept: "video/*",
                     capture: "user",
-                    extra: {}
+                    extra: {
+                        insert: true
+                    }
                 })}
                 data-click-event="record-video"
                 icon="fa-duotone fa-video-plus"

package/src/web/page/mails/mini-compose/MiniComposeBox.tsx

@@ -28,6 +28,8 @@ import Separator from "@web-atoms/web-controls/dist/html-editor/commands/Separat
 import Insert from "./Insert";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 import ToggleEmoji from "./ToggleEmoji";
+import Attach from "./Atttach";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
 
 const css = styled.css `
     display: grid;
@@ -115,6 +117,8 @@ export default class MiniComposeBox extends AtomControl {
                     <Toolbar>
                         <Insert/>
                         <Separator/>
+                        <Attach/>
+                        <Separator/>
                         <Bold/>
                         <Italic/>
                         <Underline/>
@@ -123,8 +127,6 @@ export default class MiniComposeBox extends AtomControl {
                         <Separator/>
                         <AddLink/>
                         <Unlink/>
-                        <Separator/>
-                        <ToggleEmoji/>
                     </Toolbar>
                     <input
                         style-place-self="stretch"
@@ -142,6 +144,7 @@ export default class MiniComposeBox extends AtomControl {
                 presenter={Bind.presenter((c) => this.editor = c )}
                 content={this.typedMessage}
                 style-min-height="50px"
+                attachments={Bind.oneWay(() => this.draft.attachments)}
                 />
             <i
                 data-element="send"
@@ -173,8 +176,57 @@ export default class MiniComposeBox extends AtomControl {
     }
 
     @Action({ onEvent: "filesAvailable"})
-    async filesAvailable({ files, extra }) {
-        this.addFiles(... files);
+    async filesAvailable({ files, extra }: { files: IUploadedFile[], extra: any }) {
+
+        if (extra.stream) {
+            await this.streamFiles({ files, extra });
+            return;
+        }
+
+        const size = files.reduce((pv, cv) => pv + cv.file.size , 0);
+        if (size > 20*1024*1024) {
+            if (!extra.stream) {
+                throw new Error(`Total size of attachments cannot be more than 20MB.`);
+            }
+        }
+
+        if (extra.insert) {
+            this.ensureDraft();
+            // insert into the email..
+            const firstChild = this.editor.editor.firstElementChild;
+            for (const iterator of files) {
+                if (/^image\//.test(iterator.contentType)) {
+                    const af = this.createAppFile(iterator);
+                    const img = firstChild.ownerDocument.createElement("img");
+                    img.src = iterator.url;
+                    img.setAttribute("data-content-id", af.contentID);
+                    this.draft.attachments.add(af);
+                    firstChild.appendChild(img);
+                    const newLine = document.createElement("div");
+                    newLine.appendChild(document.createElement("br"));
+                    firstChild.appendChild(newLine);
+                    continue;
+                }
+                if (/^(video|audio)\//.test(iterator.contentType)) {
+                    const af = this.createAppFile(iterator);
+                    const img = firstChild.ownerDocument.createElement("video");
+                    img.src = iterator.url;
+                    img.setAttribute("data-content-id", af.contentID);
+                    this.draft.attachments.add(af);
+                    firstChild.appendChild(img);
+                    const newLine = document.createElement("div");
+                    newLine.appendChild(document.createElement("br"));
+                    firstChild.appendChild(newLine);
+                    continue;
+                }
+            }
+            return;
+        }
+        await this.addFiles(... files);
+    }
+
+    async streamFiles({ files, extra }: { files: IUploadedFile[], extra: any }) {
+        // do nothing...
     }
 
     @Action({
@@ -187,10 +239,13 @@ export default class MiniComposeBox extends AtomControl {
     }
 
     @Action({ onEvent: CommonEvents.onDraftDeleted })
-    async refreshDraft() {
+    async recreateDraft() {
+        this.draft = null;
         this.draft ??= Email.create({
+            subject: "",
             attachments: []
         });
+        this.draft.attachments ??= [];
     }
 
     @Action({ onEvent: "input", defer: 500, blockMultipleExecution: true })
@@ -246,28 +301,38 @@ export default class MiniComposeBox extends AtomControl {
     @Action({})
     async sendAudioMessage() {
         const uploadedFile = await AudioRecorder.show<IUploadedFile>();
-        this.draft ??= Email.create({
-            attachments: []
-        });
+        this.ensureDraft();
         this.draft.mdBody = this.typedMessage;
-        this.addFiles(uploadedFile);
+        await this.addFiles(uploadedFile);
         await this.save();
     }
 
-    private addFiles(... files: IUploadedFile[]) {
-        const attachments = this.draft.attachments ??= [];
-        AtomBinder.refreshValue(this, "draft");
-        for (const { appFileID, url, file } of files) {
-            attachments.add(AppFile.create({
-                appFileID,
-                contentType: file.type,
-                name: file.name,
-                contentID: appFileID.toString(36),
-                url
-            }));
+    private async addFiles(... files: IUploadedFile[]) {
+        this.ensureDraft();
+        const attachments = this.draft.attachments;
+        for (const file of files) {
+            attachments.add(this.createAppFile(file));
         }
     }
 
+    private createAppFile(file: IUploadedFile): IAppFile {
+        return AppFile.create({
+            appFileID: file.appFileID,
+            contentType: file.file.type,
+            name: file.file.name,
+            contentID: file.appFileID.toString(36),
+            url: file.url
+        });
+    }
+
+    private ensureDraft() {
+        this.draft ??= Email.create({
+            subject: "",
+            attachments: []
+        });
+        this.draft.attachments ??= [];
+    }
+
     private async save() {
         this.draft = await this.conversationService.draft({ ... this.mailboxContact, email: this.draft }, true);
     }

package/src/web/page/mails/service/ConversationService.tsx

@@ -34,11 +34,19 @@ export const renderMail = AtomControl.registerProperty("data-html", "html", (c,
     }
     msg.innerHTML = html;
     for (const iterator of descendentElementIterator(msg)) {
-        if(iterator.tagName === "IMG") {
+        let cid = iterator.getAttribute("data-content-id");
+        if (cid) {
+            const a = mail.attachments.find((x) => x.contentID === cid);
+            if (a) {
+                iterator.setAttribute("src", a.url);
+                continue;
+            }
+        }
+        if(/^(IMG|VIDEO)$/.test(iterator.tagName)) {
             const src = iterator.getAttribute("src");
             if (src) {
                 if (src.startsWith("cid:")) {
-                    const cid = src.substring(4);
+                    cid = src.substring(4);
                     const a = mail.attachments.find((x) => x.contentID === cid);
                     if (a) {
                         iterator.setAttribute("src", `/api/files/${a.appFileID}/${a.fileContentID}/${a.name}`);