@social-mail/social-mail-client 1.2.33 → 1.2.35

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);
+//         }));
+
+//     }
+// }