@social-mail/social-mail-client 1.2.32 → 1.2.34

package/dist/web/page/mails/mini-compose/Insert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Insert.d.ts","sourceRoot":"","sources":["../../../../../src/web/page/mails/mini-compose/Insert.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAiD,EAAC;;CAAA,OA0DlF"}
+{"version":3,"file":"Insert.d.ts","sourceRoot":"","sources":["../../../../../src/web/page/mails/mini-compose/Insert.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAiD,EAAC;;CAAA,OAkElF"}

package/dist/web/page/mails/mini-compose/Insert.js

@@ -1,7 +1,7 @@
-System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/basic/PopupButton", "@web-atoms/web-controls/dist/basic/UploadEvent"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-controls/dist/PageNavigator", "@web-atoms/web-controls/dist/basic/PopupButton", "@web-atoms/web-controls/dist/basic/UploadEvent", "../../../../code-editor/CodeSnippetPage"], function (_export, _context) {
   "use strict";
 
-  var Bind, XNode, PopupButton, MenuItem, UploadEvent;
+  var __awaiter, Bind, XNode, PageNavigator, PopupButton, MenuItem, UploadEvent, CodeSnippetPage;
   function Insert({
     alignment = "above"
   }) {
@@ -19,6 +19,13 @@ System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XN
       icon: "ri-list-ordered",
       label: "Numbered List",
       "event-click": Bind.event(editor => editor.executeCommand("insertOrderedList"))
+    }), XNode.create(MenuItem, {
+      icon: "ri-list-ordered",
+      label: "Insert Code",
+      "event-click": Bind.event(editor => __awaiter(this, void 0, void 0, function* () {
+        const code = yield PageNavigator.pushPageForResult(CodeSnippetPage);
+        editor.executeCommand("insertHTML", void 0, `<pre style="margin: 5px; border: solid 1px lightgray; padding: 10px; border-radius: 10px;" contentEditable="true" spellcheck="false">${code}</pre><br/><p contentEditable="true"></p>`);
+      }))
     }), XNode.create(MenuItem, Object.assign({}, UploadEvent.AttachUploadAction({
       accept: "image/*",
       multiple: true,
@@ -55,15 +62,21 @@ System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/XN
   }
   _export("default", Insert);
   return {
-    setters: [function (_webAtomsCoreDistCoreBind) {
+    setters: [function (_tslib) {
+      __awaiter = _tslib.__awaiter;
+    }, function (_webAtomsCoreDistCoreBind) {
       Bind = _webAtomsCoreDistCoreBind.default;
     }, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsWebControlsDistPageNavigator) {
+      PageNavigator = _webAtomsWebControlsDistPageNavigator.default;
     }, function (_webAtomsWebControlsDistBasicPopupButton) {
       PopupButton = _webAtomsWebControlsDistBasicPopupButton.default;
       MenuItem = _webAtomsWebControlsDistBasicPopupButton.MenuItem;
     }, function (_webAtomsWebControlsDistBasicUploadEvent) {
       UploadEvent = _webAtomsWebControlsDistBasicUploadEvent.default;
+    }, function (_codeEditorCodeSnippetPage) {
+      CodeSnippetPage = _codeEditorCodeSnippetPage.default;
     }],
     execute: function () {}
   };

package/dist/web/page/mails/mini-compose/Insert.js.map

@@ -1 +1 @@
-{"version":3,"names":["Insert","alignment","XNode","create","PopupButton","class","icon","title","MenuItem","label","Bind","event","editor","executeCommand","Object","assign","UploadEvent","AttachUploadAction","accept","multiple","extra","capture","_export","setters","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","_webAtomsWebControlsDistBasicPopupButton","_webAtomsWebControlsDistBasicUploadEvent","execute"],"sources":["../../../../../src/web/page/mails/mini-compose/Insert.tsx"],"sourcesContent":[null],"mappings":";;;;EAOc,SAAUA,MAAMA,CAAC;IAAEC,SAAS,GAAG;EAAqC,CAAC;IAC/E,OAAOC,KAAA,CAAAC,MAAA,CAACC,WAAW;MACfC,KAAK,EAAC,SAAS;MAAA,eACH,gBAAgB;MAC5BC,IAAI,EAAC,aAAa;MAClBC,KAAK,EAAC,kBAAkB;MACxBN,SAAS,EAAEA;IAAS,GAChBC,KAAA,CAAAC,MAAA,CAACK,QAAQ;MACLF,IAAI,EAAC,mBAAmB;MACxBG,KAAK,EAAC,MAAM;MAAA,eACCC,IAAI,CAACC,KAAK,CAAEC,MAAW,IAAKA,MAAM,CAACC,cAAc,CAAC,qBAAqB,CAAC;IAAC,EACpF,EACNX,KAAA,CAAAC,MAAA,CAACK,QAAQ;MACLF,IAAI,EAAC,iBAAiB;MACtBG,KAAK,EAAC,eAAe;MAAA,eACRC,IAAI,CAACC,KAAK,CAAEC,MAAW,IAAKA,MAAM,CAACC,cAAc,CAAC,mBAAmB,CAAC;IAAC,EAClF,EACNX,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAM,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBC,QAAQ,EAAE,IAAI;MACdC,KAAK,EAAE;KACV,CAAC;MAAA,oBACe,aAAa;MAC9Bd,IAAI,EAAC,cAAc;MACnBG,KAAK,EAAC;IAAY,GAChB,EACNP,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAM,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBG,OAAO,EAAE,MAAM;MACfD,KAAK,EAAE;KACV,CAAC;MAAA,oBACe,YAAY;MAC7Bd,IAAI,EAAC,4BAA4B;MACjCG,KAAK,EAAC;IAAY,GAChB,EACNP,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAM,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAE;KACV,CAAC;MAAA,oBACe,YAAY;MAC7Bd,IAAI,EAAC,mBAAmB;MACxBG,KAAK,EAAC;IAAW,GACf,EACNP,KAAA,CAAAC,MAAA,CAACK,QAAQ,EAAAM,MAAA,CAAAC,MAAA,KACCC,WAAW,CAACC,kBAAkB,CAAC;MACjCC,MAAM,EAAE,SAAS;MACjBG,OAAO,EAAE,MAAM;MACfD,KAAK,EAAE;KACV,CAAC;MAAA,oBACe,cAAc;MAC/Bd,IAAI,EAAC,0BAA0B;MAC/BG,KAAK,EAAC;IAAc,GAClB,CACI;EACtB;EAACa,OAAA,YA1DuBtB,MAAM;EAAA;IAAAuB,OAAA,aAAAC,yBAAA;MAPvBd,IAAI,GAAAc,yBAAA,CAAAC,OAAA;IAAA,aAAAC,0BAAA;MACJxB,KAAK,GAAAwB,0BAAA,CAAAD,OAAA;IAAA,aAAAE,wCAAA;MAELvB,WAAW,GAAAuB,wCAAA,CAAAF,OAAA;MAAIjB,QAAQ,GAAAmB,wCAAA,CAARnB,QAAQ;IAAA,aAAAoB,wCAAA;MACvBZ,WAAW,GAAAY,wCAAA,CAAAH,OAAA;IAAA;IAAAI,OAAA,WAAAA,CAAA;EAAA;AAAA"}
+{"version":3,"names":["Insert","alignment","XNode","create","PopupButton","class","icon","title","MenuItem","label","Bind","event","editor","executeCommand","__awaiter","code","PageNavigator","pushPageForResult","CodeSnippetPage","Object","assign","UploadEvent","AttachUploadAction","accept","multiple","extra","capture","_export","setters","_tslib","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","_webAtomsWebControlsDistPageNavigator","_webAtomsWebControlsDistBasicPopupButton","_webAtomsWebControlsDistBasicUploadEvent","_codeEditorCodeSnippetPage","execute"],"sources":["../../../../../src/web/page/mails/mini-compose/Insert.tsx"],"sourcesContent":[null],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.32",
+  "version": "1.2.34",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/code-editor/CodeEditorPage.tsx

@@ -1,13 +1,14 @@
 import { ContentPage, PopupWindowPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import { IAppFile } from "../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import MonacoEditor from "./MonaoEditor";
 import { SaveIconTextButton } from "../common/controls/buttons/IconButton";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
 import { Inject } from "@web-atoms/core/dist/di/Inject";
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import CloudFileService from "../web/page/files/service/CloudFileService";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import MonacoService from "./MonacoService";
 
 export default class CodeEditorPage extends ContentPage<IAppFile> {
 
@@ -16,6 +17,8 @@ export default class CodeEditorPage extends ContentPage<IAppFile> {
     @InjectProperty
     private cloudFileService: CloudFileService;
 
+    private monacoService: MonacoService;
+
     private content: string;
     private file: IAppFile;
 
@@ -23,13 +26,7 @@ export default class CodeEditorPage extends ContentPage<IAppFile> {
         this.title = this.parameters.name;
 
         this.renderer = <div data-display="grid" data-align-items="stretch" data-justify-items="stretch">
-            <MonacoEditor
-                file={this.parameters}
-                event-file-changed={({ detail: { content, originalContent, file }}) => {
-                    this.file = file;
-                    this.modified = content !== originalContent;
-                    this.content = content;
-                }}
+            <iframe
                 />
         </div>;
 
@@ -40,6 +37,15 @@ export default class CodeEditorPage extends ContentPage<IAppFile> {
                 data-click-event="save-file"
                 text="Save"/>
         </div>;
+
+        const file = this.parameters;
+        const iframe = this.element.querySelector("iframe");
+
+        this.monacoService = await MonacoService.createEditor(this, iframe);
+
+        const code = await FetchBuilder.get(file.downloadUrl).responseAsText();
+
+        this.monacoService.setCodeModel(this, code, `http://a/${file.name}`);
     }
 
     @Action({ onEvent: "save-file", close: true})

package/src/code-editor/CodeSnippetPage.tsx

@@ -0,0 +1,78 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { PopupWindowPage, isMobileView } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
+import { ICodeSnippetModel } from "./ICodeSnippet";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { SaveIconTextButton } from "../common/controls/buttons/IconButton";
+import Action from "@web-atoms/core/dist/view-model/Action";
+import MonacoService from "./MonacoService";
+import Select from "@web-atoms/web-controls/dist/basic/Select";
+
+export default class CodeSnippetPage extends PopupWindowPage<{ code?: string, languageId?: string }, string> {
+
+    public langaugeId: string = "html";
+
+    public code: string = "";
+
+    public monacoService: MonacoService;
+
+    private textModel: monaco.editor.ITextModel;
+
+    public async init() {
+
+        this.code = this.parameters?.code ?? "";
+        this.langaugeId = this.parameters?.languageId ?? "html";
+
+        this.title = "Insert Code Snippet";
+
+        if (!isMobileView) {
+            this.element.style.minWidth = "70vw";
+            this.element.style.minHeight = "60vh";
+        }
+
+        this.renderer = <div data-display="grid" data-align-items="stretch" data-justify-items="stretch">
+                <iframe
+                    />
+        </div>;
+
+        this.footerRenderer = () => <div data-layout="command-row">
+            <SaveIconTextButton
+                data-click-event="save-code"
+                />
+        </div>;
+
+        const iframe = this.element.querySelector("iframe");
+        this.monacoService = await MonacoService.createEditor(this, iframe);
+
+        this.headerRenderer = () => <div data-layout="header-row">
+            <Select
+                items={this.monacoService.getLanguages()}
+                value={Bind.twoWaysImmediate(() => this.langaugeId)}
+                event-input={() => setTimeout(() => this.createModel())}
+                />
+        </div>;
+
+        this.createModel();
+    }
+
+    @Action({ onEvent: "save-code", close: true })
+    async save() {
+        this.code = this.textModel.getValue();
+        const colorizedText = await this.monacoService.monaco.editor.colorize(this.code, this.textModel.getLanguageId(), {});
+        const colorized = await this.colorize(colorizedText);
+        return colorized;
+    }
+
+    @Action({ onEvent: "code-changed"})
+    codeChanged({ code }) {
+        this.code = code;
+    }
+
+    private createModel() {
+        const lang = this.monacoService.languages.find((x) => x.id === this.langaugeId) ?? this.monacoService.languages[0];
+        this.textModel = this.monacoService.setCodeModel(this, this.code, `http://a/file${lang.extensions?.[0] ?? ".txt"}`);
+    }
+
+    private async colorize(code) {
+        // this will be overriden...
+    }
+}

package/src/code-editor/ICodeSnippet.ts

@@ -0,0 +1,5 @@
+export interface ICodeSnippetModel {
+    code?: string;
+    fileName?: string;
+    dependencies?: string[];
+}

package/src/code-editor/MonacoService.ts

@@ -0,0 +1,112 @@
+import { UMD } from "@web-atoms/core/dist/core/types";
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+const monacoPath = UMD.resolvePath("@social-mail/social-mail-client/content/modules/monaco/monaco.html");
+
+const codeModelChangedDisposable = Symbol("codeModelChangedDisposable");
+
+export default class MonacoService {
+
+    static async createEditor(ctrl: AtomControl, iframe: HTMLIFrameElement) {
+        const ms = new MonacoService();
+        const srcdoc = await FetchBuilder.get(monacoPath).responseAsText();
+        const { monaco, editor} = await new Promise<any>((resolve, reject) => {
+            (iframe as any).parentEditor = {
+                resolve,
+                reject,
+                codeEditor: ctrl
+            };
+            iframe.srcdoc = srcdoc;
+        });
+        ctrl.registerDisposable({
+            dispose: () => {
+                ms.monaco = null;
+                ms.editor = null;
+            }
+        });
+        ms.monaco = monaco;
+        ms.editor = editor;
+        ms.languages = monaco.languages.getLanguages();
+        return ms;
+    }
+
+    monaco: typeof monaco;
+    editor: monaco.editor.IStandaloneCodeEditor;
+    languages: monaco.languages.ILanguageExtensionPoint[];
+
+    clearModels() {
+        for(const model of this.monaco.editor.getModels()) {
+            model.dispose();
+        }
+    }
+
+    getLanguages() {
+        return this.languages.map((x) => ({
+            label: x.aliases?.[0] ?? x.id,
+            value: x.id,
+            ext: x.extensions?.[0],
+            extensions: x.extensions
+        }));
+    }
+
+    createModel({
+        code,
+        url = "http://a/file.html"
+    }: { code: string, url: string }) {
+        const { monaco } = this;
+        const uri = monaco.Uri.parse(url);
+        const model = monaco.editor.getModel(uri);
+        if (model) {
+            model.setValue(code);
+            return model;
+        }
+        return monaco.editor.createModel(
+            code,
+            void 0,
+            uri
+        );
+    }
+
+    setCodeModel(ctrl: AtomControl, code: string, url: string, clear = false) {
+        const { monaco, editor } = this;
+        const uri = monaco.Uri.parse(url);
+        let model = monaco.editor.getModel(uri);
+        if (model) {
+            model.setValue(code);
+            editor.setModel(model);
+            return;
+        }
+        ctrl[codeModelChangedDisposable]?.dispose();
+        if (clear) {
+            this.clearModels();
+        }
+        model = monaco.editor.createModel(
+            code,
+            void 0,
+            uri
+        );
+        editor.setModel(model);
+        let id = 0;
+        ctrl[codeModelChangedDisposable] = ctrl.registerDisposable(model.onDidChangeContent(() => {
+            if (id) {
+                clearTimeout(id);
+            }
+            id = setTimeout(() => {
+                const newCode = model.getValue();
+                const ce = new CustomEvent("codeChanged", {
+                    bubbles: true,
+                    detail: {
+                        code: newCode,
+                        originalCode: code
+                    }
+                });
+                ctrl.element.dispatchEvent(ce);
+                (ctrl as any)?.onCodeChanged?.(newCode, code);
+            } , 500);
+        }));
+        return model;
+    }
+
+}

package/src/code-editor/MonaoEditor.tsx

@@ -1,112 +1,89 @@
-import { UMD } from "@web-atoms/core/dist/core/types";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { IAppFile } from "../model/model";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
-
-const monacoPath = UMD.resolvePath("@social-mail/social-mail-client/content/modules/monaco/monaco.html");
-
-export default class MonacoEditor extends AtomControl {
-
-    public "event-file-changed": CustomEvent<{ file: IAppFile, content: string }>;
-
-    public element: HTMLIFrameElement;
-
-    @BindableProperty
-    public file: IAppFile;
-
-    private codeModelDisposable: any;
-
-    private monaco: any;
-    private editor: any;
-    private container: any;
-
-    constructor(app, e = document.createElement("iframe")) {
-        super(app, e);
-        this.element.style.border = "none";
-        this.runAfterInit(() => this.app.runAsync(() => this.init()));
-    }
-
-    onPropertyChanged(name: string): void {
-        super.onPropertyChanged(name);
-        switch(name) {
-            case "file":
-                this.app.runAsync(() => this.loadFile());
-                break;
-        }
-    }
-
-    init() {
-        const monaco = (async () => {
-            const srcdoc = await FetchBuilder.get(monacoPath).responseAsText();
-            return this.monaco = await new Promise<any>((resolve, reject) => {
-                (this.element as any).parentEditor = {
-                    resolve,
-                    reject,
-                    onresize: () => this.editor?.layout(),
-                    codeEditor: this
-                };
-                this.element.srcdoc = srcdoc;
-            });
-        })();
-        const value = Promise.resolve(monaco);
-        Object.defineProperty(this, "init", { value: () => value});
-        return this.monaco = monaco;
-    }
-
-    createEditor() {
-        const editor = (async () => {
-            return this.editor = await this.monaco.editor.create(this.container);
-        })();
-        const value = Promise.resolve(editor);
-        Object.defineProperty(this, "createEditor", { value: () => value});
-        return editor;
-    }
-
-    async loadFile() {
-
-        await this.init();
-
-        this.codeModelDisposable?.dispose();
-
-        const editor = await this.createEditor();
-
-        const { file, monaco } = this;
-
-        const originalContent = await FetchBuilder.get(file.downloadUrl).responseAsText();
-
-        const  name = file.name;
-        let language = "html";
-        if (/\.(ts|tsx)$/i.test(name)) {
-            language = "typescript";
-        } else if (/\.(js|jsx)$/i.test(name)) {
-            language = "javascript";
-        } else if (/\.(json)$/i.test(name)) {
-            language = "json";
-        } else if (/\.(css)$/i.test(name)) {
-            language = "css";
-        }
-        const uri = monaco.Uri.parse(`http://a/${file.path}-${file.name}`);
-        const m = monaco.editor.getModel(uri);
-
-        const model = monaco.editor.createModel(
-            originalContent,
-            language,
-            uri);
-        editor.setModel(model);
-
-        let id = 0;
-
-        this.codeModelDisposable = this.registerDisposable(model.onDidChangeContent(() => {
-            if (id) {
-                clearTimeout(id);
-            }
-            id = setTimeout(() => {
-                const content = model.getValue();
-                this.element.dispatchEvent(new CustomEvent("fileChanged", {
-                    detail: { file: this.file,  content, originalContent }
-                }));
-            }, 500);
-        }));
-    }
-}
+// import { UMD } from "@web-atoms/core/dist/core/types";
+// import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+// import { IAppFile } from "../model/model";
+// import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+// import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+// import { ICodeSnippetModel } from "./ICodeSnippet";
+// import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+// import MonacoService from "./MonacoService";
+
+// const monacoPath = UMD.resolvePath("@social-mail/social-mail-client/content/modules/monaco/monaco.html");
+
+// export default class MonacoEditor extends AtomControl {
+
+//     public "event-file-changed": CustomEvent<{ file: IAppFile, content: string }>;
+
+//     public element: HTMLIFrameElement;
+
+//     @BindableProperty
+//     public code: string;
+
+//     @BindableProperty
+//     public fileUri: string = "https://a/sample.html";
+
+//     @InjectProperty
+//     private monacoService: MonacoService;
+
+//     private codeModelDisposable: any;
+
+//     private monaco: typeof monaco;
+
+//     private editor: monaco.editor.IStandaloneCodeEditor;
+
+//     constructor(app, e = document.createElement("iframe")) {
+//         super(app, e);
+//         this.element.style.border = "none";
+//         this.runAfterInit(() => this.app.runAsync(() => this.init()));
+//     }
+
+//     onPropertyChanged(name: string): void {
+//         super.onPropertyChanged(name);
+//         switch(name) {
+//             case "code":
+//                 this.app.runAsync(() => this.loadFile());
+//                 break;
+//         }
+//     }
+
+//     init() {
+//         const result = this.monacoService.createEditor(this, this.element)
+//             .then(({ monaco, editor }) => {
+//                 this.monaco = monaco;
+//                 this.editor = editor;
+//             });
+//         Object.defineProperty(this, "init", { value: () => result });
+//         return result;
+//     }
+
+
+//     async loadFile() {
+
+//         await this.init();
+
+//         if (!this.code) {
+//             return;
+//         }
+
+//         const { monaco, editor, code } = this;
+//         const model = this.monacoService.createModel({ code, url: this.fileUri });
+//         editor.setModel(model);
+
+//         this.codeModelDisposable?.dispose();
+
+//         let id = 0;
+
+//         this.codeModelDisposable = this.registerDisposable(model.onDidChangeContent(() => {
+//             if (id) {
+//                 clearTimeout(id);
+//             }
+//             id = setTimeout(() => {
+//                 const content = model.getValue();
+//                 this.code = content;
+//                 this.element.dispatchEvent(new CustomEvent("codeChanged", {
+//                     detail: { code: content, originalContent: code }
+//                 }));
+//             }, 500);
+//         }));
+
+//     }
+// }

package/src/common/controls/file-preview/FilePreview.tsx

@@ -5,6 +5,7 @@ import { formatNumber, toFileSize } from "../../NumberFormats";
 import FileTypes from "../../../services/FileTypes";
 import AppCommands from "../../../web/commands/AppCommands";
 import Command from "@web-atoms/core/dist/core/Command";
+import audioIcon from "@social-mail/social-mail-client/content/icons/audio.svg";
 
     styled.css `
         border: solid 2px lightgray;
@@ -62,9 +63,13 @@ export default function FilePreview(a: IAppFile) {
     const size = a.fileSize && toFileSize(a.fileSize);
 
     const { appFileID, name, fileContentID } = a;
-    const src = `/api/files/webp(300)/${appFileID}/${fileContentID}/${name}/${name}.300.webp`;
+    let src = `/api/files/webp(300)/${appFileID}/${fileContentID}/${name}/${name}.300.webp`;
     const p = { appFileID, name, fileContentID };
 
+    if (/^audio\//i.test(a.contentType)) {
+        src = audioIcon;
+    }
+
     const command = AppCommands.getPreviewCommand(a);
     if (command) {
         return <a