feat(editor): add modal prompts for file/folder creation, improve Monaco editor reactivity and add TypeScript IntelliSense support

ts_web/elements/00group-editor/dees-editor-monaco/dees-editor-monaco.ts

@@ -29,13 +29,17 @@ export class DeesEditorMonaco extends DeesElement {
 
   // INSTANCE
   public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
-  public language = 'typescript';
 
   @property({
     type: String
   })
   accessor content = "function hello() {\n\talert('Hello world!');\n}";
 
+  @property({
+    type: String
+  })
+  accessor language = 'typescript';
+
   @property({
     type: Object
   })
@@ -47,6 +51,7 @@ export class DeesEditorMonaco extends DeesElement {
   accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
   private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+  private isUpdatingFromExternal: boolean = false;
 
   constructor() {
     super();
@@ -138,11 +143,47 @@ export class DeesEditorMonaco extends DeesElement {
     // editor is setup let do the rest
     const editor = await this.editorDeferred.promise;
     editor.onDidChangeModelContent(async eventArg => {
-      this.contentSubject.next(editor.getValue());
+      // Don't emit events when we're programmatically updating the content
+      if (this.isUpdatingFromExternal) return;
+
+      const value = editor.getValue();
+      this.contentSubject.next(value);
+      this.dispatchEvent(new CustomEvent('content-change', {
+        detail: value,
+        bubbles: true,
+        composed: true,
+      }));
     });
     this.contentSubject.next(editor.getValue());
   }
 
+  public async updated(changedProperties: Map<string, any>): Promise<void> {
+    super.updated(changedProperties);
+
+    // Handle content changes
+    if (changedProperties.has('content')) {
+      const editor = await this.editorDeferred.promise;
+      const currentValue = editor.getValue();
+      if (currentValue !== this.content) {
+        this.isUpdatingFromExternal = true;
+        editor.setValue(this.content);
+        this.isUpdatingFromExternal = false;
+      }
+    }
+
+    // Handle language changes
+    if (changedProperties.has('language')) {
+      const editor = await this.editorDeferred.promise;
+      const model = editor.getModel();
+      if (model) {
+        const monacoInstance = (window as any).monaco;
+        if (monacoInstance) {
+          monacoInstance.editor.setModelLanguage(model, this.language);
+        }
+      }
+    }
+  }
+
   public async disconnectedCallback(): Promise<void> {
     await super.disconnectedCallback();
     if (this.monacoThemeSubscription) {