fix(dees-editor-bare): make Monaco editor follow domtools theme and clean up theme subscription on disconnect

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-12-30 - 3.12.2 - fix(dees-editor-bare)
+make Monaco editor follow domtools theme and clean up theme subscription on disconnect
+
+- Set initial Monaco theme from domtools.themeManager.goBrightBoolean instead of hardcoded 'vs-dark'
+- Subscribe to domtools.themeManager.themeObservable to update editor theme dynamically
+- Add monacoThemeSubscription property and unsubscribe in disconnectedCallback to avoid memory leaks
+
 ## 2025-12-30 - 3.12.1 - fix(modal)
 fix modal editor layout to prevent overlap by adding relative positioning and reducing height
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.12.1',
+  version: '3.12.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -46,6 +46,8 @@ export class DeesEditorBare extends DeesElement {
   })
   accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
+  private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -102,15 +104,27 @@ export class DeesEditorBare extends DeesElement {
       paths: { vs: `${monacoCdnBase}/min/vs` },
     });
     (window as any).require(['vs/editor/editor.main'], async () => {
+      // Get current theme from domtools
+      const domtoolsInstance = await this.domtoolsPromise;
+      const isBright = domtoolsInstance.themeManager.goBrightBoolean;
+      const initialTheme = isBright ? 'vs' : 'vs-dark';
+
       const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
         value: this.content,
         language: this.language,
-        theme: 'vs-dark',
+        theme: initialTheme,
         useShadowDOM: true,
         fontSize: 16,
         automaticLayout: true,
         wordWrap: this.wordWrap
       });
+
+      // Subscribe to theme changes
+      this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe((goBright: boolean) => {
+        const newTheme = goBright ? 'vs' : 'vs-dark';
+        editor.updateOptions({ theme: newTheme });
+      });
+
       this.editorDeferred.resolve(editor);
     });
     const css = await (
@@ -128,4 +142,12 @@ export class DeesEditorBare extends DeesElement {
     });
     this.contentSubject.next(editor.getValue());
   }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    if (this.monacoThemeSubscription) {
+      this.monacoThemeSubscription.unsubscribe();
+      this.monacoThemeSubscription = null;
+    }
+  }
 }