Add viewer controller for mermaid (zoom, drag) (#36557)

Fix #25803

Now the rendered mermaid chart can be dragged or zoomed.

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

web_src/js/utils/dom.ts

@@ -352,6 +352,22 @@ export function isPlainClick(e: MouseEvent) {
   return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
 }
 
+let cssRootVariablesTextCache: string = '';
+export function getCssRootVariablesText(): string {
+  if (cssRootVariablesTextCache) return cssRootVariablesTextCache;
+  const style = getComputedStyle(document.documentElement);
+  let text = ':root {\n';
+  for (let i = 0; i < style.length; i++) {
+    const name = style.item(i);
+    if (name.startsWith('--')) {
+      text += ` ${name}: ${style.getPropertyValue(name)};\n`;
+    }
+  }
+  text += '}\n';
+  cssRootVariablesTextCache = text;
+  return text;
+}
+
 let elemIdCounter = 0;
 export function generateElemId(prefix: string = ''): string {
   return `${prefix}${elemIdCounter++}`;