Fix Imagine Monaco editor interactions inside Console wrapper (#2488)

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>

Author: ebenezerdon

.github/workflows/dockerize-profiles.yml

@@ -1,49 +1,49 @@
 name: Dockerize Profiles
 
 on:
-  push:
-    branches: [feat-profiles]
-  pull_request:
-    types: [opened, synchronize, reopened]
-    branches: [feat-profiles]
-  workflow_dispatch:
+    push:
+        branches: [feat-profiles]
+    pull_request:
+        types: [opened, synchronize, reopened]
+        branches: [feat-profiles]
+    workflow_dispatch:
 
 jobs:
-  dockerize-profiles:
-    runs-on: ubuntu-latest
-    
-    steps:
-      - name: Checkout the repo
-        uses: actions/checkout@v2
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-            username: ${{ vars.DOCKERHUB_USERNAME }}
-            password: ${{ secrets.DOCKERHUB_TOKEN }}
+    dockerize-profiles:
+        runs-on: ubuntu-latest
 
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-            images: appwrite/console-profiles
-            tags: |
-                type=ref,event=branch,prefix=branch-
-                type=ref,event=pr
-                type=sha,prefix=sha-
-                type=raw,value=gh-${{ github.run_id}}
-            flavor: |
-              latest=false
+        steps:
+            - name: Checkout the repo
+              uses: actions/checkout@v2
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v2
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v2
+            - name: Log in to Docker Hub
+              uses: docker/login-action@v3
+              with:
+                  username: ${{ vars.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Build and push Docker image
-        id: push
-        uses: docker/build-push-action@v6
-        with:
-            context: .
-            push: true
-            platforms: linux/amd64,linux/arm64
-            tags: ${{ steps.meta.outputs.tags }}
-            labels: ${{ steps.meta.outputs.labels }}
+            - name: Extract metadata (tags, labels) for Docker
+              id: meta
+              uses: docker/metadata-action@v5
+              with:
+                  images: appwrite/console-profiles
+                  tags: |
+                      type=ref,event=branch,prefix=branch-
+                      type=ref,event=pr
+                      type=sha,prefix=sha-
+                      type=raw,value=gh-${{ github.run_id}}
+                  flavor: |
+                      latest=false
+
+            - name: Build and push Docker image
+              id: push
+              uses: docker/build-push-action@v6
+              with:
+                  context: .
+                  push: true
+                  platforms: linux/amd64,linux/arm64
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}

src/lib/studio/monaco-style-manager.ts

@@ -0,0 +1,53 @@
+const MONACO_STYLE_ATTRIBUTE = 'data-appwrite-studio-monaco-style';
+
+let monacoStyleObserver: MutationObserver | null = null;
+
+function findMonacoEditorCssLink(): HTMLLinkElement | null {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+
+    const link = document.head?.querySelector<HTMLLinkElement>(
+        'link[rel="stylesheet"][href*="monaco-editor"][href*="editor.main.css"]'
+    );
+
+    return link ?? null;
+}
+
+function syncMonacoStyles(shadow: ShadowRoot) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    // Check if already synced
+    if (shadow.querySelector(`[${MONACO_STYLE_ATTRIBUTE}]`)) {
+        return;
+    }
+
+    const link = findMonacoEditorCssLink();
+    if (!link) {
+        return;
+    }
+
+    const clone = link.cloneNode(true) as HTMLLinkElement;
+    clone.setAttribute(MONACO_STYLE_ATTRIBUTE, 'true');
+    shadow.appendChild(clone);
+}
+
+export function ensureMonacoStyles(shadow: ShadowRoot) {
+    syncMonacoStyles(shadow);
+
+    if (
+        monacoStyleObserver ||
+        typeof MutationObserver === 'undefined' ||
+        typeof document === 'undefined'
+    ) {
+        return;
+    }
+
+    monacoStyleObserver = new MutationObserver(() => {
+        syncMonacoStyles(shadow);
+    });
+
+    monacoStyleObserver.observe(document.head, { childList: true });
+}

src/lib/studio/studio-widget.ts

@@ -3,6 +3,7 @@ import { app } from '$lib/stores/app';
 import { get } from 'svelte/store';
 import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
+import { ensureMonacoStyles } from './monaco-style-manager';
 import DEV_CSS_URL from '@imagine.dev/web-components/imagine-web-components.css?url';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
@@ -83,6 +84,7 @@ function injectStyles(node: HTMLElement, attempt = 0) {
             }
 
             if (shadow.querySelector<HTMLLinkElement>(`link[${STYLE_ATTRIBUTE}]`)) {
+                ensureMonacoStyles(shadow);
                 return;
             }
 
@@ -91,6 +93,7 @@ function injectStyles(node: HTMLElement, attempt = 0) {
             link.href = DEV_OVERRIDE_WEB_COMPONENTS ? DEV_CSS_URL : CDN_CSS_URL;
             link.setAttribute(STYLE_ATTRIBUTE, 'true');
             shadow.prepend(link);
+            ensureMonacoStyles(shadow);
         })
         .catch(() => {
             /* no-op */