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

package/dist/web/AppIndex.pack.js

@@ -1864,7 +1864,7 @@ const UMD = new UMDClass();
 
         AmdLoader.instance.register(
             ["@social-mail/social-mail-client","@web-atoms/core","reflect-metadata","@web-atoms/web-controls","@web-atoms/date-time","@web-atoms/entity","@web-atoms/data-styles"],
-            ["@social-mail/social-mail-client/dist/web/AppIndex","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/Pack","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomBridge","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/web/commands/AppCommands","@social-mail/social-mail-client/dist/web/page/home/HomePage","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxListPage","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/MailboxService","@web-atoms/core/dist/di/DITransient","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/model/model","@social-mail/social-mail-client/dist/common/Sql","@web-atoms/core/dist/view-model/Action","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxEditorPage","@web-atoms/web-controls/dist/basic/Form","@social-mail/social-mail-client/dist/common/controls/form/RequiredFormField","@web-atoms/web-controls/dist/basic/FormField","@web-atoms/web-controls/dist/basic/styles/form-field-style","@web-atoms/web-controls/dist/basic/PasswordBox","@web-atoms/web-controls/dist/basic/styles/password-box-style","@web-atoms/web-controls/dist/basic/ComboBox","@social-mail/social-mail-client/dist/common/NumberFormats","@social-mail/social-mail-client/dist/web/page/mails/MailsPage","@web-atoms/web-controls/dist/basic/DropDown","@web-atoms/web-controls/dist/basic/styles/drop-down-style","@social-mail/social-mail-client/dist/web/page/mails/service/MailService","@web-atoms/web-controls/dist/mobile-app/MasterDetailPage","@social-mail/social-mail-client/dist/web/page/mails/ConversationPage","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@social-mail/social-mail-client/dist/web/page/mails/ComposeMailPage","@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar","@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor","@web-atoms/data-styles/data-styles","@web-atoms/web-controls/dist/html-editor/commands/AddImage","@web-atoms/web-controls/dist/html-editor/commands/CommandButton","@web-atoms/web-controls/dist/html-editor/commands/HtmlCommands","@web-atoms/web-controls/dist/html-editor/commands/Toolbar","@web-atoms/web-controls/dist/html-editor/commands/Bold","@web-atoms/web-controls/dist/html-editor/commands/Command","@web-atoms/web-controls/dist/html-editor/commands/Italic","@web-atoms/web-controls/dist/html-editor/commands/Underline","@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough","@web-atoms/web-controls/dist/html-editor/commands/Align","@web-atoms/web-controls/dist/basic/PopupButton","@web-atoms/web-controls/dist/basic/styles/popup-button-style","@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule","@web-atoms/web-controls/dist/html-editor/commands/Separator","@web-atoms/web-controls/dist/html-editor/commands/Headings","@web-atoms/web-controls/dist/html-editor/commands/ChangeColor","@web-atoms/web-controls/dist/html-editor/commands/ChangeFont","@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize","@web-atoms/web-controls/dist/html-editor/commands/NumberedList","@web-atoms/web-controls/dist/html-editor/commands/UnorderedList","@web-atoms/web-controls/dist/html-editor/commands/IndentLess","@web-atoms/web-controls/dist/html-editor/commands/IndentMore","@web-atoms/web-controls/dist/html-editor/commands/AttachImage","@web-atoms/web-controls/dist/basic/UploadEvent","@web-atoms/web-controls/dist/html-editor/commands/AttachFile","@web-atoms/web-controls/dist/html-editor/commands/AddLink","@web-atoms/core/dist/web/controls/AtomToggleButtonBar","@web-atoms/core/dist/web/styles/AtomToggleButtonBarStyle","@web-atoms/core/dist/web/styles/AtomListBoxStyle","@web-atoms/core/dist/web/controls/AtomListBox","@web-atoms/core/dist/web/controls/AtomItemsControl","@web-atoms/core/dist/core/AtomEnumerator","@web-atoms/core/dist/core/AtomList","@web-atoms/web-controls/dist/html-editor/commands/Unlink","@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat","@web-atoms/web-controls/dist/html-editor/commands/Source","@web-atoms/web-controls/dist/basic/AtomChips","@web-atoms/web-controls/dist/basic/Chip","@web-atoms/web-controls/dist/basic/styles/chip-style","@web-atoms/web-controls/dist/basic/styles/chips-style","@web-atoms/web-controls/dist/basic/styles/item-suggestion-style","@social-mail/social-mail-client/dist/style/GlobalStyle","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@social-mail/social-mail-client/dist/services/UserService","@social-mail/social-mail-client/dist/common/SocialMailApp","@social-mail/social-mail-client/dist/common/pages/user/LoginPage","@social-mail/social-mail-client/dist/common/controls/password/PasswordStrength","@social-mail/social-mail-client/dist/common/validators/Validators","@social-mail/social-mail-client/dist/web/drawer/AppDrawer","@social-mail/social-mail-client/dist/common/controls/menu/MenuItem","@social-mail/social-mail-client/dist/services/files/LocalFileService","@social-mail/social-mail-client/dist/common/controls/ModuleInfo","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
+            ["@social-mail/social-mail-client/dist/web/AppIndex","@web-atoms/core/dist/core/InjectProperty","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/ExpressionParser","@web-atoms/core/dist/core/types","reflect-metadata","@web-atoms/core/dist/core/AtomMap","@web-atoms/core/dist/Pack","@web-atoms/web-controls/dist/desktop-app/MobileDesktopApp","@web-atoms/web-controls/dist/mobile-app/MobileApp","@web-atoms/core/dist/core/AtomLoader","@web-atoms/core/dist/services/JsonService","@web-atoms/core/dist/core/StringHelper","@web-atoms/core/dist/di/RegisterSingleton","@web-atoms/core/dist/di/Register","@web-atoms/core/dist/di/ServiceCollection","@web-atoms/core/dist/di/TypeKey","@web-atoms/date-time/dist/DateTime","@web-atoms/date-time/dist/TimeSpan","@web-atoms/core/dist/services/ReferenceService","@web-atoms/core/dist/di/DISingleton","@web-atoms/core/dist/core/AtomUri","@web-atoms/core/dist/web/core/AtomUI","@web-atoms/core/dist/core/Command","@web-atoms/core/dist/core/EventScope","@web-atoms/core/dist/core/Route","@web-atoms/core/dist/core/InheritedProperty","@web-atoms/core/dist/core/AtomBinder","@web-atoms/core/dist/core/sleep","@web-atoms/core/dist/services/NavigationService","@web-atoms/core/dist/core/AtomComponent","@web-atoms/core/dist/App","@web-atoms/core/dist/core/AtomDispatcher","@web-atoms/core/dist/di/ServiceProvider","@web-atoms/core/dist/core/TransientDisposable","@web-atoms/core/dist/di/Inject","@web-atoms/core/dist/services/BusyIndicatorService","@web-atoms/core/dist/core/AtomBridge","@web-atoms/core/dist/core/AtomDisposableList","@web-atoms/core/dist/core/AtomWatcher","@web-atoms/core/dist/core/PropertyMap","@web-atoms/core/dist/core/FormattedString","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/WebImage","@web-atoms/core/dist/web/styles/AtomStyle","@web-atoms/core/dist/web/styles/AtomStyleSheet","@web-atoms/core/dist/web/services/PopupService","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/services/PopupWindow","@web-atoms/web-controls/dist/PageNavigator","@web-atoms/web-controls/dist/desktop-app/DesktopApp","@social-mail/social-mail-client/dist/web/commands/AppCommands","@social-mail/social-mail-client/dist/web/page/home/HomePage","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxListPage","@web-atoms/web-controls/dist/basic/AtomRepeater","@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/core/WatchProperty","@web-atoms/web-controls/dist/basic/InlinePopup","@web-atoms/web-controls/dist/basic/styles/inline-popup-style","@web-atoms/web-controls/dist/basic/MergeNode","@web-atoms/web-controls/dist/basic/ItemPath","@web-atoms/web-controls/dist/basic/styles/ui-display-none-style","@web-atoms/web-controls/dist/basic/styles/popup-style","@web-atoms/web-controls/dist/basic/styles/suggestion-popup","@web-atoms/web-controls/dist/basic/styles/repeater-style","@social-mail/social-mail-client/dist/common/controls/repeater/InfiniteRepeater","@social-mail/social-mail-client/dist/common/pages/mailboxes/services/MailboxService","@web-atoms/core/dist/di/DITransient","@social-mail/social-mail-client/dist/services/EntityService","@web-atoms/entity/dist/services/BaseEntityService","@web-atoms/entity/dist/models/Cloner","@web-atoms/entity/dist/models/cloneSource","@web-atoms/entity/dist/models/IEntityModel","@web-atoms/entity/dist/services/HttpSession","@web-atoms/core/dist/services/http/JsonError","@web-atoms/entity/dist/services/mergeProperties","@web-atoms/entity/dist/services/Query","@web-atoms/entity/dist/services/StringHelper","@web-atoms/entity/dist/services/resolve","@social-mail/social-mail-client/dist/services/BusyProgress","@social-mail/social-mail-client/dist/model/model","@social-mail/social-mail-client/dist/common/Sql","@web-atoms/core/dist/view-model/Action","@social-mail/social-mail-client/dist/common/pages/mailboxes/MailboxEditorPage","@web-atoms/web-controls/dist/basic/Form","@social-mail/social-mail-client/dist/common/controls/form/RequiredFormField","@web-atoms/web-controls/dist/basic/FormField","@web-atoms/web-controls/dist/basic/styles/form-field-style","@web-atoms/web-controls/dist/basic/PasswordBox","@web-atoms/web-controls/dist/basic/styles/password-box-style","@web-atoms/web-controls/dist/basic/ComboBox","@social-mail/social-mail-client/dist/common/NumberFormats","@social-mail/social-mail-client/dist/web/page/mails/MailsPage","@web-atoms/web-controls/dist/basic/DropDown","@web-atoms/web-controls/dist/basic/styles/drop-down-style","@social-mail/social-mail-client/dist/web/page/mails/service/MailService","@web-atoms/web-controls/dist/mobile-app/MasterDetailPage","@social-mail/social-mail-client/dist/web/page/mails/ConversationPage","@social-mail/social-mail-client/dist/web/page/mails/service/ConversationService","@social-mail/social-mail-client/dist/web/page/mails/ComposeMailPage","@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar","@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor","@web-atoms/data-styles/data-styles","@web-atoms/web-controls/dist/html-editor/commands/AddImage","@web-atoms/web-controls/dist/html-editor/commands/CommandButton","@web-atoms/web-controls/dist/html-editor/commands/HtmlCommands","@web-atoms/web-controls/dist/html-editor/commands/Toolbar","@web-atoms/web-controls/dist/html-editor/commands/Bold","@web-atoms/web-controls/dist/html-editor/commands/Command","@web-atoms/web-controls/dist/html-editor/commands/Italic","@web-atoms/web-controls/dist/html-editor/commands/Underline","@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough","@web-atoms/web-controls/dist/html-editor/commands/Align","@web-atoms/web-controls/dist/basic/PopupButton","@web-atoms/web-controls/dist/basic/styles/popup-button-style","@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule","@web-atoms/web-controls/dist/html-editor/commands/Separator","@web-atoms/web-controls/dist/html-editor/commands/Headings","@web-atoms/web-controls/dist/html-editor/commands/ChangeColor","@web-atoms/web-controls/dist/html-editor/commands/ChangeFont","@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize","@web-atoms/web-controls/dist/html-editor/commands/NumberedList","@web-atoms/web-controls/dist/html-editor/commands/UnorderedList","@web-atoms/web-controls/dist/html-editor/commands/IndentLess","@web-atoms/web-controls/dist/html-editor/commands/IndentMore","@web-atoms/web-controls/dist/html-editor/commands/AttachFile","@web-atoms/web-controls/dist/basic/UploadEvent","@web-atoms/web-controls/dist/html-editor/commands/AddLink","@web-atoms/core/dist/web/controls/AtomToggleButtonBar","@web-atoms/core/dist/web/styles/AtomToggleButtonBarStyle","@web-atoms/core/dist/web/styles/AtomListBoxStyle","@web-atoms/core/dist/web/controls/AtomListBox","@web-atoms/core/dist/web/controls/AtomItemsControl","@web-atoms/core/dist/core/AtomEnumerator","@web-atoms/core/dist/core/AtomList","@web-atoms/web-controls/dist/html-editor/commands/Unlink","@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat","@web-atoms/web-controls/dist/html-editor/commands/Source","@social-mail/social-mail-client/dist/services/files/LocalFileService","@web-atoms/web-controls/dist/basic/AtomChips","@web-atoms/web-controls/dist/basic/Chip","@web-atoms/web-controls/dist/basic/styles/chip-style","@web-atoms/web-controls/dist/basic/styles/chips-style","@web-atoms/web-controls/dist/basic/styles/item-suggestion-style","@social-mail/social-mail-client/dist/style/GlobalStyle","@social-mail/social-mail-client/dist/style/OverrideAppStyle","@social-mail/social-mail-client/dist/services/UserService","@social-mail/social-mail-client/dist/common/SocialMailApp","@social-mail/social-mail-client/dist/common/pages/user/LoginPage","@social-mail/social-mail-client/dist/common/controls/password/PasswordStrength","@social-mail/social-mail-client/dist/common/validators/Validators","@social-mail/social-mail-client/dist/web/drawer/AppDrawer","@social-mail/social-mail-client/dist/common/controls/menu/MenuItem","@social-mail/social-mail-client/dist/common/controls/ModuleInfo","@web-atoms/core/dist/web/WebApp","@web-atoms/core/dist/core/AtomOnce","@web-atoms/core/dist/web/services/WebBusyIndicatorService","@web-atoms/core/dist/web/styles/StyleBuilder","@web-atoms/core/dist/web/services/WindowService","@web-atoms/core/dist/Atom","@web-atoms/core/dist/core/FormattedError","@web-atoms/core/dist/view-model/AtomWindowViewModel","@web-atoms/core/dist/view-model/AtomViewModel","@web-atoms/core/dist/view-model/baseTypes","@web-atoms/core/dist/web/controls/AtomAlertWindow","@web-atoms/core/dist/web/styles/AtomAlertWindowStyle","@web-atoms/core/dist/web/styles/AtomWindowStyle","@web-atoms/core/src/web/images/close-button-hover.svg","@web-atoms/core/dist/web/controls/AtomWindow","@web-atoms/core/dist/web/controls/AtomTemplate","@web-atoms/core/dist/web/controls/AtomNotification","@web-atoms/core/dist/web/styles/AtomNotificationStyle","@web-atoms/core/dist/web/styles/AtomPopupStyle","@web-atoms/core/dist/web/services/NotificationPopup","@web-atoms/core/dist/web/styles/AtomTheme"]);
 
 System.register([], function (_export, _context) {
   "use strict";
@@ -17639,6 +17639,18 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
     execute: function () {
       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;
@@ -17759,12 +17771,26 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
           this.bindEvent(this.editor, "blur", () => this.saveSelection(), void 0, true);
           this.bindEvent(this.editor, "input", e => this.onContentInput(e));
           this.bindEvent(this.editor, "keydown", e => this.updateQueryCommand());
-          this.bindEvent(this.editor, "click", e => this.updateQueryCommand());
+          this.bindEvent(this.editor, "click", e => this.updateQueryCommand(e));
           this.bindEvent(this.editor, "paste", e => this.onPasteEvent(e));
           this.bindEvent(this.editor, "cut", () => this.onContentInput());
           this.bindEvent(this.editor, "drop", e => this.onDrop(e));
         }
-        updateQueryCommand() {
+        updateQueryCommand(e) {
+          if ((e === null || e === void 0 ? void 0 : 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>";
+                }
+              }
+            }
+          }
           this.version++;
         }
         onDrop(e) {
@@ -17786,6 +17812,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/di
         }
         onPasteEvent(e) {
           if (!e.clipboardData.types.find(x => x === "text/html")) {
+            this.onContentInput();
             return;
           }
           const d = e.clipboardData.getData("text/plain");
@@ -18789,65 +18816,6 @@ System.register(["tslib", "@web-atoms/core/dist/App", "@web-atoms/core/dist/core
 
     AmdLoader.instance.setup("@web-atoms/web-controls/dist/basic/UploadEvent");
 
-System.register(["tslib", "@web-atoms/core/dist/core/XNode", "../../basic/UploadEvent", "@web-atoms/core/dist/web/controls/AtomControl"], function (_export, _context) {
-  "use strict";
-
-  var __awaiter, XNode, UploadEvent, AtomControl, onAttachImage;
-  function AttachImage({
-    accept = "image/*",
-    maxSize = 1024 * 1024 * 5,
-    authorize = true,
-    capture = null,
-    ariaLabel = "upload"
-  }) {
-    return XNode.create("button", Object.assign({
-      title: "Insert Image",
-      class: "command"
-    }, UploadEvent.AttachUploadAction({
-      accept,
-      forceType: true,
-      maxSize,
-      authorize,
-      capture,
-      multiple: false,
-      ariaLabel,
-      "event-files-available": onAttachImage
-    })), XNode.create("i", {
-      class: "ri-image-add-fill"
-    }));
-  }
-  _export("default", AttachImage);
-  return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_basicUploadEvent) {
-      UploadEvent = _basicUploadEvent.default;
-    }, function (_webAtomsCoreDistWebControlsAtomControl) {
-      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
-    }],
-    execute: function () {
-      onAttachImage = ce => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const c = AtomControl.from(ce.target);
-        if (!((_b = (_a = ce.detail) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.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);
-      });
-    }
-  };
-});
-//# sourceMappingURL=AttachImage.js.map
-
-    AmdLoader.instance.setup("@web-atoms/web-controls/dist/html-editor/commands/AttachImage");
-
 System.register(["@web-atoms/core/dist/core/XNode", "../../basic/UploadEvent"], function (_export, _context) {
   "use strict";
 
@@ -20317,149 +20285,442 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
 
     AmdLoader.instance.setup("@web-atoms/web-controls/dist/html-editor/commands/Source");
 
-System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor", "@web-atoms/web-controls/dist/html-editor/commands/Toolbar", "@web-atoms/web-controls/dist/html-editor/commands/Bold", "@web-atoms/web-controls/dist/html-editor/commands/Italic", "@web-atoms/web-controls/dist/html-editor/commands/Underline", "@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough", "@web-atoms/web-controls/dist/html-editor/commands/Align", "@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule", "@web-atoms/web-controls/dist/html-editor/commands/Separator", "@web-atoms/web-controls/dist/html-editor/commands/Headings", "@web-atoms/web-controls/dist/html-editor/commands/ChangeColor", "@web-atoms/web-controls/dist/html-editor/commands/ChangeFont", "@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize", "@web-atoms/web-controls/dist/html-editor/commands/NumberedList", "@web-atoms/web-controls/dist/html-editor/commands/UnorderedList", "@web-atoms/web-controls/dist/html-editor/commands/IndentLess", "@web-atoms/web-controls/dist/html-editor/commands/IndentMore", "@web-atoms/web-controls/dist/html-editor/commands/AttachImage", "@web-atoms/web-controls/dist/html-editor/commands/AttachFile", "@web-atoms/web-controls/dist/html-editor/commands/AddLink", "@web-atoms/web-controls/dist/html-editor/commands/Unlink", "@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat", "@web-atoms/web-controls/dist/html-editor/commands/Source"], function (_export, _context) {
-  "use strict";
-
-  var XNode, InlineHtmlEditor, Toolbar, Bold, Italic, Underline, StrikeThrough, Align, HorizontalRule, Separator, Headings, ChangeColor, ChangeFont, ChangeFontSize, NumberedList, UnorderedList, IndentLess, IndentMore, AttachImage, AttachFile, AddLink, Unlink, RemoveFormat, Source, link;
-  function InlineHtmlEditorWithToolbar(a) {
-    const toolbar = () => XNode.create("div", null, XNode.create(Toolbar, null, XNode.create(Bold, null), XNode.create(Italic, null), XNode.create(Underline, null), XNode.create(StrikeThrough, null), XNode.create(Align, null), XNode.create(Separator, null), XNode.create(Headings, null), XNode.create(ChangeColor, null), XNode.create(HorizontalRule, null), XNode.create(Separator, null), XNode.create(ChangeFont, null), XNode.create(ChangeFontSize, null), XNode.create(Separator, null), XNode.create(NumberedList, null), XNode.create(UnorderedList, null), XNode.create(IndentLess, null), XNode.create(IndentMore, null), XNode.create(Separator, null)), XNode.create(Toolbar, null, XNode.create(AttachImage, null), XNode.create(AttachFile, null), XNode.create(Separator, null), XNode.create(AddLink, null), XNode.create(Unlink, null), XNode.create(RemoveFormat, null), XNode.create(Separator, null), XNode.create(Source, null)));
-    return XNode.create(InlineHtmlEditor, Object.assign({}, a, {
-      toolbar: toolbar
-    }));
-  }
-  _export("default", InlineHtmlEditorWithToolbar);
-  return {
-    setters: [function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorInlineHtmlEditor) {
-      InlineHtmlEditor = _webAtomsWebControlsDistHtmlEditorInlineHtmlEditor.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsToolbar) {
-      Toolbar = _webAtomsWebControlsDistHtmlEditorCommandsToolbar.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsBold) {
-      Bold = _webAtomsWebControlsDistHtmlEditorCommandsBold.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsItalic) {
-      Italic = _webAtomsWebControlsDistHtmlEditorCommandsItalic.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnderline) {
-      Underline = _webAtomsWebControlsDistHtmlEditorCommandsUnderline.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsStrikeThrough) {
-      StrikeThrough = _webAtomsWebControlsDistHtmlEditorCommandsStrikeThrough.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAlign) {
-      Align = _webAtomsWebControlsDistHtmlEditorCommandsAlign.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsHorizontalRule) {
-      HorizontalRule = _webAtomsWebControlsDistHtmlEditorCommandsHorizontalRule.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsSeparator) {
-      Separator = _webAtomsWebControlsDistHtmlEditorCommandsSeparator.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsHeadings) {
-      Headings = _webAtomsWebControlsDistHtmlEditorCommandsHeadings.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeColor) {
-      ChangeColor = _webAtomsWebControlsDistHtmlEditorCommandsChangeColor.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeFont) {
-      ChangeFont = _webAtomsWebControlsDistHtmlEditorCommandsChangeFont.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeFontSize) {
-      ChangeFontSize = _webAtomsWebControlsDistHtmlEditorCommandsChangeFontSize.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsNumberedList) {
-      NumberedList = _webAtomsWebControlsDistHtmlEditorCommandsNumberedList.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnorderedList) {
-      UnorderedList = _webAtomsWebControlsDistHtmlEditorCommandsUnorderedList.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsIndentLess) {
-      IndentLess = _webAtomsWebControlsDistHtmlEditorCommandsIndentLess.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsIndentMore) {
-      IndentMore = _webAtomsWebControlsDistHtmlEditorCommandsIndentMore.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAttachImage) {
-      AttachImage = _webAtomsWebControlsDistHtmlEditorCommandsAttachImage.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAttachFile) {
-      AttachFile = _webAtomsWebControlsDistHtmlEditorCommandsAttachFile.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAddLink) {
-      AddLink = _webAtomsWebControlsDistHtmlEditorCommandsAddLink.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnlink) {
-      Unlink = _webAtomsWebControlsDistHtmlEditorCommandsUnlink.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsRemoveFormat) {
-      RemoveFormat = _webAtomsWebControlsDistHtmlEditorCommandsRemoveFormat.default;
-    }, function (_webAtomsWebControlsDistHtmlEditorCommandsSource) {
-      Source = _webAtomsWebControlsDistHtmlEditorCommandsSource.default;
-    }],
-    execute: function () {
-      link = document.createElement("link");
-      link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
-      link.rel = "preload";
-      link.as = "style";
-      link.onload = () => {
-        link.onload = null;
-        link.rel = "stylesheet";
-      };
-      document.head.appendChild(link);
-    }
-  };
-});
-//# sourceMappingURL=InlineHtmlEditorWithToolbar.js.map
-
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar");
-
-System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/App", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/services/PopupWindow", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/web/services/PopupService"], function (_export, _context) {
   "use strict";
 
-  var styled;
+  var __awaiter, __decorate, __metadata, App, CancelToken, DISingleton, Inject, styled, PopupWindow, InjectProperty, XNode, AtomRepeater, Bind, PopupService, FileUploadWindow, acceptDocumentAndMedia, LocalFileService;
   return {
-    setters: [function (_webAtomsCoreDistStyleStyled) {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistApp) {
+      App = _webAtomsCoreDistApp.App;
+    }, function (_webAtomsCoreDistCoreTypes) {
+      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
+    }, function (_webAtomsCoreDistDiDISingleton) {
+      DISingleton = _webAtomsCoreDistDiDISingleton.default;
+    }, function (_webAtomsCoreDistDiInject) {
+      Inject = _webAtomsCoreDistDiInject.Inject;
+    }, function (_webAtomsCoreDistStyleStyled) {
       styled = _webAtomsCoreDistStyleStyled.default;
+    }, function (_webAtomsCoreDistWebServicesPopupWindow) {
+      PopupWindow = _webAtomsCoreDistWebServicesPopupWindow.default;
+    }, function (_webAtomsCoreDistCoreInjectProperty) {
+      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
+      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
     }],
     execute: function () {
+      _export("acceptDocumentAndMedia", acceptDocumentAndMedia = ".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, video/*, application/pdf, .pdf, .txt, audio/*, image/*, .csv, text/csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain, text/html");
       styled.css`
-        padding: 2px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 9999px;
-        display: grid;
-        align-items: center;
-        grid-template-rows: auto 1fr;
+        display: inline-grid;
+        grid-template-rows: auto auto;
         grid-template-columns: auto 1fr auto;
 
-        & > [data-content] {
-            grid-row-start: 2;
-            grid-column-start: 2;
+        & > [data-element=preview] {
+            grid-row: 1 / span 2;
+            grid-column: 1;
         }
 
-        & > .icon {
-            grid-column-start: 1;
-            grid-row-start: 1;
-            grid-row-end: span 2;
-            padding: 2px;
-            padding-right: 4px;
-            align-self: center;
+        & > [data-element=file-name] {
+            grid-row: 1;
+            grid-column: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
 
-        & > .delete {
-            grid-column-start: 3;
-            grid-row-start: 1;
-            grid-row-end: span 2;
-            align-self: center;
-            font-size: small;
-            background-color: transparent;
-            border-radius: 4px;
-            padding: 2px;
-            padding-left: 4px;
-            color: gray;
-            &:hover {
-                background-color: lightgray;
-                color: red; 
-            }
+        & > [data-element=progress] {
+            grid-row: 2;
+            grid-column: 2 / span 2;
+            width: 100%;
         }
 
-        & > .header {
-            font-size: x-small;
-            grid-row-start: 1;
-            grid-column-start: 2;
-            text-align: center;
+        & > [data-element=delete] {
+            grid-row: 1;
+            grid-column: 3;
         }
-
-        & > .label {
-            grid-row-start: 2;
-            grid-column-start: 2;
+    `.installGlobal("[data-attachment-file]");
+      LocalFileService = class LocalFileService {
+        constructor() {
+          document.body.addEventListener("uploadRequested", ce => {
+            const {
+              target,
+              detail: {
+                files,
+                extra,
+                uploadEvent
+              }
+            } = ce;
+            ce.preventDefault();
+            this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+              const detail = yield FileUploadWindow.showModal({
+                parameters: {
+                  files,
+                  extra
+                }
+              });
+              target.dispatchEvent(new CustomEvent(uploadEvent, {
+                detail,
+                bubbles: true
+              }));
+            }));
+          });
         }
-
-        & > .delete-strike {
-            grid-row: 1 / span 2;
-            grid-column: 1 / span 2;
+        uploadWithProgress(files) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const detail = yield FileUploadWindow.showModal({
+              parameters: {
+                files,
+                extra: ""
+              }
+            });
+            return detail.files;
+          });
+        }
+        upload(files) {
+          return __awaiter(this, void 0, void 0, function* () {
+            return files.map(file => {
+              const uploadFile = {
+                name: file.name
+              };
+              uploadFile.promise = new Promise((resolve, reject) => {
+                const body = new FormData();
+                body.append(file.name, file, file.name);
+                const xhr = new XMLHttpRequest();
+                const onError = () => {
+                  reject(new Error(xhr.responseText || "Error"));
+                };
+                xhr.upload.addEventListener("progress", event => {
+                  if (event.lengthComputable) {
+                    uploadFile.progress = event.loaded / event.total;
+                  }
+                });
+                xhr.upload.addEventListener("timeout", onError);
+                xhr.upload.addEventListener("error", onError);
+                xhr.upload.addEventListener("abort", onError);
+                xhr.addEventListener("timeout", onError);
+                xhr.addEventListener("abort", onError);
+                xhr.addEventListener("error", onError);
+                xhr.upload.addEventListener("progress", event => {
+                  if (event.lengthComputable) {
+                    uploadFile.progress = event.loaded / event.total;
+                  }
+                });
+                xhr.addEventListener("load", () => {
+                  if (xhr.status <= 300) {
+                    const r = Object.assign(Object.assign({}, JSON.parse(xhr.responseText)), {
+                      file
+                    });
+                    resolve(r);
+                  }
+                });
+                xhr.open("POST", "/api/upload", true);
+                xhr.send(body);
+              });
+              return uploadFile;
+            });
+          });
+        }
+      };
+      __decorate([Inject, __metadata("design:type", App)], LocalFileService.prototype, "app", void 0);
+      LocalFileService = __decorate([DISingleton(), __metadata("design:paramtypes", [])], LocalFileService);
+      _export("default", LocalFileService);
+      FileUploadWindow = class FileUploadWindow extends PopupWindow {
+        constructor() {
+          super(...arguments);
+          this.parameters = {};
+        }
+        init() {
+          return __awaiter(this, void 0, void 0, function* () {
+            this.title = "Uploading...";
+            this.closeWarning = "Are you sure you want to cancel the upload?";
+            this.bindEvent(window, "backButton", e => __awaiter(this, void 0, void 0, function* () {
+              var _a;
+              e.preventDefault();
+              (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+              e.stopPropagation();
+              yield this.requestCancel();
+            }), null, {
+              capture: true
+            });
+            this.files = yield this.localFileService.upload(this.parameters.files);
+            this.render(XNode.create("div", null, XNode.create(AtomRepeater, {
+              items: this.files,
+              itemRenderer: file => XNode.create("div", {
+                "data-attachment-file": "file"
+              }, XNode.create("div", {
+                "data-element": "file-name",
+                text: file.name
+              }), XNode.create("progress", {
+                min: 0,
+                max: 100,
+                value: Bind.source(file, x => x.source.progress)
+              }))
+            })));
+            try {
+              const ct = new CancelToken();
+              this.registerDisposable({
+                dispose: () => {
+                  ct.cancel();
+                }
+              });
+              const tasks = this.files.map(x => x.promise);
+              const files = yield Promise.all(tasks);
+              const extra = this.parameters.extra;
+              this.close({
+                files,
+                extra
+              });
+            } catch (error) {
+              if (CancelToken.isCancelled(error)) {
+                this.cancel(error);
+                return;
+              }
+              yield PopupService.alert({
+                message: error
+              });
+              this.cancel(error);
+            }
+          });
+        }
+      };
+      __decorate([InjectProperty, __metadata("design:type", LocalFileService)], FileUploadWindow.prototype, "localFileService", void 0);
+    }
+  };
+});
+//# sourceMappingURL=LocalFileService.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/services/files/LocalFileService");
+
+System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/html-editor/InlineHtmlEditor", "@web-atoms/web-controls/dist/html-editor/commands/Toolbar", "@web-atoms/web-controls/dist/html-editor/commands/Bold", "@web-atoms/web-controls/dist/html-editor/commands/Italic", "@web-atoms/web-controls/dist/html-editor/commands/Underline", "@web-atoms/web-controls/dist/html-editor/commands/StrikeThrough", "@web-atoms/web-controls/dist/html-editor/commands/Align", "@web-atoms/web-controls/dist/html-editor/commands/HorizontalRule", "@web-atoms/web-controls/dist/html-editor/commands/Separator", "@web-atoms/web-controls/dist/html-editor/commands/Headings", "@web-atoms/web-controls/dist/html-editor/commands/ChangeColor", "@web-atoms/web-controls/dist/html-editor/commands/ChangeFont", "@web-atoms/web-controls/dist/html-editor/commands/ChangeFontSize", "@web-atoms/web-controls/dist/html-editor/commands/NumberedList", "@web-atoms/web-controls/dist/html-editor/commands/UnorderedList", "@web-atoms/web-controls/dist/html-editor/commands/IndentLess", "@web-atoms/web-controls/dist/html-editor/commands/IndentMore", "@web-atoms/web-controls/dist/html-editor/commands/AttachFile", "@web-atoms/web-controls/dist/html-editor/commands/AddLink", "@web-atoms/web-controls/dist/html-editor/commands/Unlink", "@web-atoms/web-controls/dist/html-editor/commands/RemoveFormat", "@web-atoms/web-controls/dist/html-editor/commands/Source", "@web-atoms/web-controls/dist/basic/UploadEvent", "../../../services/files/LocalFileService", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/core/InjectProperty"], function (_export, _context) {
+  "use strict";
+
+  var __awaiter, __decorate, __metadata, XNode, InlineHtmlEditor, Toolbar, Bold, Italic, Underline, StrikeThrough, Align, HorizontalRule, Separator, Headings, ChangeColor, ChangeFont, ChangeFontSize, NumberedList, UnorderedList, IndentLess, IndentMore, AttachFile, AddLink, Unlink, RemoveFormat, Source, UploadEvent, LocalFileService, AtomControl, InjectProperty, MailHtmlEditor, link, onAttachImage;
+  function AttachImage({
+    accept = "image/*",
+    maxSize = 1024 * 1024 * 5,
+    authorize = true,
+    capture = null,
+    ariaLabel = "upload"
+  }) {
+    return XNode.create("button", Object.assign({
+      title: "Insert Image",
+      class: "command"
+    }, UploadEvent.AttachUploadAction({
+      accept,
+      forceType: true,
+      maxSize,
+      authorize,
+      capture,
+      multiple: false,
+      ariaLabel,
+      "event-files-available": onAttachImage
+    })), XNode.create("i", {
+      class: "ri-image-add-fill"
+    }));
+  }
+  function InlineHtmlEditorWithToolbar(a) {
+    const toolbar = () => XNode.create("div", null, XNode.create(Toolbar, null, XNode.create(Bold, null), XNode.create(Italic, null), XNode.create(Underline, null), XNode.create(StrikeThrough, null), XNode.create(Align, null), XNode.create(Separator, null), XNode.create(Headings, null), XNode.create(ChangeColor, null), XNode.create(HorizontalRule, null), XNode.create(Separator, null), XNode.create(ChangeFont, null), XNode.create(ChangeFontSize, null), XNode.create(Separator, null), XNode.create(NumberedList, null), XNode.create(UnorderedList, null), XNode.create(IndentLess, null), XNode.create(IndentMore, null), XNode.create(Separator, null)), XNode.create(Toolbar, null, XNode.create(AttachImage, null), XNode.create(AttachFile, null), XNode.create(Separator, null), XNode.create(AddLink, null), XNode.create(Unlink, null), XNode.create(RemoveFormat, null), XNode.create(Separator, null), XNode.create(Source, null)));
+    return XNode.create(MailHtmlEditor, Object.assign({}, a, {
+      toolbar: toolbar
+    }));
+  }
+  _export({
+    MailHtmlEditor: void 0,
+    default: InlineHtmlEditorWithToolbar
+  });
+  return {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorInlineHtmlEditor) {
+      InlineHtmlEditor = _webAtomsWebControlsDistHtmlEditorInlineHtmlEditor.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsToolbar) {
+      Toolbar = _webAtomsWebControlsDistHtmlEditorCommandsToolbar.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsBold) {
+      Bold = _webAtomsWebControlsDistHtmlEditorCommandsBold.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsItalic) {
+      Italic = _webAtomsWebControlsDistHtmlEditorCommandsItalic.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnderline) {
+      Underline = _webAtomsWebControlsDistHtmlEditorCommandsUnderline.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsStrikeThrough) {
+      StrikeThrough = _webAtomsWebControlsDistHtmlEditorCommandsStrikeThrough.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAlign) {
+      Align = _webAtomsWebControlsDistHtmlEditorCommandsAlign.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsHorizontalRule) {
+      HorizontalRule = _webAtomsWebControlsDistHtmlEditorCommandsHorizontalRule.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsSeparator) {
+      Separator = _webAtomsWebControlsDistHtmlEditorCommandsSeparator.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsHeadings) {
+      Headings = _webAtomsWebControlsDistHtmlEditorCommandsHeadings.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeColor) {
+      ChangeColor = _webAtomsWebControlsDistHtmlEditorCommandsChangeColor.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeFont) {
+      ChangeFont = _webAtomsWebControlsDistHtmlEditorCommandsChangeFont.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsChangeFontSize) {
+      ChangeFontSize = _webAtomsWebControlsDistHtmlEditorCommandsChangeFontSize.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsNumberedList) {
+      NumberedList = _webAtomsWebControlsDistHtmlEditorCommandsNumberedList.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnorderedList) {
+      UnorderedList = _webAtomsWebControlsDistHtmlEditorCommandsUnorderedList.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsIndentLess) {
+      IndentLess = _webAtomsWebControlsDistHtmlEditorCommandsIndentLess.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsIndentMore) {
+      IndentMore = _webAtomsWebControlsDistHtmlEditorCommandsIndentMore.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAttachFile) {
+      AttachFile = _webAtomsWebControlsDistHtmlEditorCommandsAttachFile.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsAddLink) {
+      AddLink = _webAtomsWebControlsDistHtmlEditorCommandsAddLink.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsUnlink) {
+      Unlink = _webAtomsWebControlsDistHtmlEditorCommandsUnlink.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsRemoveFormat) {
+      RemoveFormat = _webAtomsWebControlsDistHtmlEditorCommandsRemoveFormat.default;
+    }, function (_webAtomsWebControlsDistHtmlEditorCommandsSource) {
+      Source = _webAtomsWebControlsDistHtmlEditorCommandsSource.default;
+    }, function (_webAtomsWebControlsDistBasicUploadEvent) {
+      UploadEvent = _webAtomsWebControlsDistBasicUploadEvent.default;
+    }, function (_servicesFilesLocalFileService) {
+      LocalFileService = _servicesFilesLocalFileService.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistCoreInjectProperty) {
+      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
+    }],
+    execute: function () {
+      link = document.createElement("link");
+      link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
+      link.rel = "preload";
+      link.as = "style";
+      link.onload = () => {
+        link.onload = null;
+        link.rel = "stylesheet";
+      };
+      document.head.appendChild(link);
+      onAttachImage = ce => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const c = AtomControl.from(ce.target);
+        if (!((_b = (_a = ce.detail) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.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>`);
+      });
+      _export("MailHtmlEditor", MailHtmlEditor = class MailHtmlEditor extends InlineHtmlEditor {
+        onPasteEvent(e) {
+          if (e.clipboardData.files.length) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
+              const files = yield 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);
+        }
+        preCreate() {
+          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")}`);
+            }
+          };
+        }
+      });
+      __decorate([InjectProperty, __metadata("design:type", LocalFileService)], MailHtmlEditor.prototype, "localFileService", void 0);
+    }
+  };
+});
+//# sourceMappingURL=InlineHtmlEditorWithToolbar.js.map
+
+    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/controls/html/InlineHtmlEditorWithToolbar");
+
+System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
+  "use strict";
+
+  var styled;
+  return {
+    setters: [function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
+    }],
+    execute: function () {
+      styled.css`
+        padding: 2px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-radius: 9999px;
+        display: grid;
+        align-items: center;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr auto;
+
+        & > [data-content] {
+            grid-row-start: 2;
+            grid-column-start: 2;
+        }
+
+        & > .icon {
+            grid-column-start: 1;
+            grid-row-start: 1;
+            grid-row-end: span 2;
+            padding: 2px;
+            padding-right: 4px;
+            align-self: center;
+        }
+
+        & > .delete {
+            grid-column-start: 3;
+            grid-row-start: 1;
+            grid-row-end: span 2;
+            align-self: center;
+            font-size: small;
+            background-color: transparent;
+            border-radius: 4px;
+            padding: 2px;
+            padding-left: 4px;
+            color: gray;
+            &:hover {
+                background-color: lightgray;
+                color: red; 
+            }
+        }
+
+        & > .header {
+            font-size: x-small;
+            grid-row-start: 1;
+            grid-column-start: 2;
+            text-align: center;
+        }
+
+        & > .label {
+            grid-row-start: 2;
+            grid-column-start: 2;
+        }
+
+        & > .delete-strike {
+            grid-row: 1 / span 2;
+            grid-column: 1 / span 2;
             height: 2px;
             background-color: red;
             align-self: center;
@@ -21063,7 +21324,7 @@ System.register(["tslib", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "
             this.model = (_a = this.parameters.model) !== null && _a !== void 0 ? _a : Email.create({
               subject: (_b = this.parameters.subject) !== null && _b !== void 0 ? _b : "",
               textBody: "",
-              htmlBody: `<div contentEditable="true">Type message here... </div>`,
+              htmlBody: `<div contentEditable="true"><p><br/><br/><br/><br/><br/></p></div>`,
               recipients: [],
               attachments: []
             });
@@ -21242,7 +21503,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               "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({
@@ -21838,210 +22099,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/drawer/AppDrawer");
 
-System.register(["tslib", "@web-atoms/core/dist/App", "@web-atoms/core/dist/core/types", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "@web-atoms/core/dist/style/styled", "@web-atoms/core/dist/web/services/PopupWindow", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/AtomRepeater", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/web/services/PopupService"], function (_export, _context) {
-  "use strict";
-
-  var __awaiter, __decorate, __metadata, App, CancelToken, DISingleton, Inject, styled, PopupWindow, InjectProperty, XNode, AtomRepeater, Bind, PopupService, FileUploadWindow, acceptDocumentAndMedia, LocalFileService;
-  return {
-    setters: [function (_tslib) {
-      __awaiter = _tslib.__awaiter;
-      __decorate = _tslib.__decorate;
-      __metadata = _tslib.__metadata;
-    }, function (_webAtomsCoreDistApp) {
-      App = _webAtomsCoreDistApp.App;
-    }, function (_webAtomsCoreDistCoreTypes) {
-      CancelToken = _webAtomsCoreDistCoreTypes.CancelToken;
-    }, function (_webAtomsCoreDistDiDISingleton) {
-      DISingleton = _webAtomsCoreDistDiDISingleton.default;
-    }, function (_webAtomsCoreDistDiInject) {
-      Inject = _webAtomsCoreDistDiInject.Inject;
-    }, function (_webAtomsCoreDistStyleStyled) {
-      styled = _webAtomsCoreDistStyleStyled.default;
-    }, function (_webAtomsCoreDistWebServicesPopupWindow) {
-      PopupWindow = _webAtomsCoreDistWebServicesPopupWindow.default;
-    }, function (_webAtomsCoreDistCoreInjectProperty) {
-      InjectProperty = _webAtomsCoreDistCoreInjectProperty.default;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsWebControlsDistBasicAtomRepeater) {
-      AtomRepeater = _webAtomsWebControlsDistBasicAtomRepeater.default;
-    }, function (_webAtomsCoreDistCoreBind) {
-      Bind = _webAtomsCoreDistCoreBind.default;
-    }, function (_webAtomsCoreDistWebServicesPopupService) {
-      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
-    }],
-    execute: function () {
-      _export("acceptDocumentAndMedia", acceptDocumentAndMedia = ".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, video/*, application/pdf, .pdf, .txt, audio/*, image/*, .csv, text/csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain, text/html");
-      styled.css`
-        display: inline-grid;
-        grid-template-rows: auto auto;
-        grid-template-columns: auto 1fr auto;
-
-        & > [data-element=preview] {
-            grid-row: 1 / span 2;
-            grid-column: 1;
-        }
-
-        & > [data-element=file-name] {
-            grid-row: 1;
-            grid-column: 2;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        & > [data-element=progress] {
-            grid-row: 2;
-            grid-column: 2 / span 2;
-            width: 100%;
-        }
-
-        & > [data-element=delete] {
-            grid-row: 1;
-            grid-column: 3;
-        }
-    `.installGlobal("[data-attachment-file]");
-      LocalFileService = class LocalFileService {
-        constructor() {
-          document.body.addEventListener("uploadRequested", ce => {
-            const {
-              target,
-              detail: {
-                files,
-                extra,
-                uploadEvent
-              }
-            } = ce;
-            ce.preventDefault();
-            this.app.runAsync(() => __awaiter(this, void 0, void 0, function* () {
-              const detail = yield FileUploadWindow.showModal({
-                parameters: {
-                  files,
-                  extra
-                }
-              });
-              target.dispatchEvent(new CustomEvent(uploadEvent, {
-                detail,
-                bubbles: true
-              }));
-            }));
-          });
-        }
-        upload(files) {
-          return __awaiter(this, void 0, void 0, function* () {
-            return files.map(file => {
-              const uploadFile = {
-                name: file.name
-              };
-              uploadFile.promise = new Promise((resolve, reject) => {
-                const body = new FormData();
-                body.append(file.name, file, file.name);
-                const xhr = new XMLHttpRequest();
-                const onError = () => {
-                  reject(new Error(xhr.responseText || "Error"));
-                };
-                xhr.upload.addEventListener("progress", event => {
-                  if (event.lengthComputable) {
-                    uploadFile.progress = event.loaded / event.total;
-                  }
-                });
-                xhr.upload.addEventListener("timeout", onError);
-                xhr.upload.addEventListener("error", onError);
-                xhr.upload.addEventListener("abort", onError);
-                xhr.addEventListener("timeout", onError);
-                xhr.addEventListener("abort", onError);
-                xhr.addEventListener("error", onError);
-                xhr.upload.addEventListener("progress", event => {
-                  if (event.lengthComputable) {
-                    uploadFile.progress = event.loaded / event.total;
-                  }
-                });
-                xhr.addEventListener("load", () => {
-                  if (xhr.status <= 300) {
-                    const r = Object.assign(Object.assign({}, JSON.parse(xhr.responseText)), {
-                      file
-                    });
-                    resolve(r);
-                  }
-                });
-                xhr.open("POST", "/api/upload", true);
-                xhr.send(body);
-              });
-              return uploadFile;
-            });
-          });
-        }
-      };
-      __decorate([Inject, __metadata("design:type", App)], LocalFileService.prototype, "app", void 0);
-      LocalFileService = __decorate([DISingleton(), __metadata("design:paramtypes", [])], LocalFileService);
-      _export("default", LocalFileService);
-      FileUploadWindow = class FileUploadWindow extends PopupWindow {
-        constructor() {
-          super(...arguments);
-          this.parameters = {};
-        }
-        init() {
-          return __awaiter(this, void 0, void 0, function* () {
-            this.title = "Uploading...";
-            this.closeWarning = "Are you sure you want to cancel the upload?";
-            this.bindEvent(window, "backButton", e => __awaiter(this, void 0, void 0, function* () {
-              var _a;
-              e.preventDefault();
-              (_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
-              e.stopPropagation();
-              yield this.requestCancel();
-            }), null, {
-              capture: true
-            });
-            this.files = yield this.localFileService.upload(this.parameters.files);
-            this.render(XNode.create("div", null, XNode.create(AtomRepeater, {
-              items: this.files,
-              itemRenderer: file => XNode.create("div", {
-                "data-attachment-file": "file"
-              }, XNode.create("div", {
-                "data-element": "file-name",
-                text: file.name
-              }), XNode.create("progress", {
-                min: 0,
-                max: 100,
-                value: Bind.source(file, x => x.source.progress)
-              }))
-            })));
-            try {
-              const ct = new CancelToken();
-              this.registerDisposable({
-                dispose: () => {
-                  ct.cancel();
-                }
-              });
-              const tasks = this.files.map(x => x.promise);
-              const files = yield Promise.all(tasks);
-              const extra = this.parameters.extra;
-              this.close({
-                files,
-                extra
-              });
-            } catch (error) {
-              if (CancelToken.isCancelled(error)) {
-                this.cancel(error);
-                return;
-              }
-              yield PopupService.alert({
-                message: error
-              });
-              this.cancel(error);
-            }
-          });
-        }
-      };
-      __decorate([InjectProperty, __metadata("design:type", LocalFileService)], FileUploadWindow.prototype, "localFileService", void 0);
-    }
-  };
-});
-//# sourceMappingURL=LocalFileService.js.map
-
-    AmdLoader.instance.setup("@social-mail/social-mail-client/dist/services/files/LocalFileService");
-
 System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context) {
   "use strict";