From 5b9befb319d3ba3ed53ff74644d20d7de5e0e4ea Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Fri, 15 May 2026 09:31:48 +0000
Subject: [PATCH] fix: configure mermaid via provideMarkdown to resolve
 ngx-markdown warning

Replace manual window.mermaid setup in ngAfterViewInit with proper
mermaidOptions config in provideMarkdown at the app level, which is
what ngx-markdown requires when using the mermaid attribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../edit-database-schema.component.ts            | 16 ++--------------
 frontend/src/main.ts                             |  9 ++++++++-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts b/frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts
index befb1310c..56ec6c60e 100644
--- a/frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts
+++ b/frontend/src/app/components/edit-database-schema/edit-database-schema.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, signal, inject, computed } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, signal, inject, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -32,7 +32,7 @@ interface ChatMessage {
 		RouterModule,
 	],
 })
-export class EditDatabaseSchemaComponent implements OnInit, AfterViewInit {
+export class EditDatabaseSchemaComponent implements OnInit {
 	@Input() connectionID: string;
 	@Input() showClose: boolean = false;
 	@Output() schemaApplied = new EventEmitter<void>();
@@ -60,18 +60,6 @@ export class EditDatabaseSchemaComponent implements OnInit, AfterViewInit {
 		return null;
 	});
 
-	async ngAfterViewInit() {
-		const mermaid = await import('mermaid');
-		const mermaidAPI = (mermaid.default ?? mermaid) as { initialize: (config: Record<string, unknown>) => void };
-		const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		mermaidAPI.initialize({
-			startOnLoad: false,
-			theme: isDark ? 'dark' : 'default',
-		});
-		//@ts-expect-error dynamic load of mermaid
-		window.mermaid = mermaidAPI;
-	}
-
 	ngOnInit(): void {
 		if (!this.connectionID) {
 			const id = this._route.snapshot.paramMap.get('connection-id');
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index bd2363977..a4ef81e1e 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -125,7 +125,14 @@ bootstrapApplication(AppComponent, {
 		NotificationsService,
 		TablesService,
 		CookieService,
-		provideMarkdown(),
+		provideMarkdown({
+			mermaidOptions: {
+				useValue: {
+					startOnLoad: false,
+					theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
+				},
+			},
+		}),
 		Title,
 		{
 			provide: HTTP_INTERCEPTORS,