Add: panZoom control option to support chart zoom functionality (#253)

Author: zhdzb

.changeset/mermaid-panzoom-controls.md

@@ -0,0 +1,11 @@
+---
+"streamdown": patch
+---
+
+Add PanZoom controls configurability for Mermaid diagrams.
+
+- Support `controls.mermaid.panZoom` (boolean) to toggle zoom controls globally
+- Support `mermaid.config.panZoom` (boolean or `{ showControls?: boolean }`) per-instance
+- Keep defaults enabled; `false` explicitly hides the zoom controls
+
+This is a non-breaking enhancement that aligns with existing control predicates.

apps/website/content/docs/configuration.mdx

@@ -143,7 +143,8 @@ The `controls` prop can be configured granularly:
  mermaid: {
  download: true, // Show mermaid download button
  copy: true, // Show mermaid copy button
- fullscreen: true // Show mermaid fullscreen button
+ fullscreen: true, // Show mermaid fullscreen button
+ panZoom: true // Show mermaid pan/zoom controls
  }
  }}
 >

packages/streamdown/__tests__/show-controls.test.tsx

@@ -192,6 +192,50 @@ ${markdownWithCode}
  expect(codeButtons?.length).toBeGreaterThan(0);
  });
  });
+
+ it("should hide mermaid pan-zoom controls when panZoom is false", async () => {
+ const markdownWithMermaid = `
+\`\`\`mermaid
+graph TD
+ A-->B
+\`\`\`
+`;
+
+ const { container } = render(
+ <Streamdown controls={{ mermaid: { panZoom: false } }}>
+ {markdownWithMermaid}
+ </Streamdown>
+ );
+
+ await waitFor(() => {
+ const zoomInButton = container.querySelector('button[title="Zoom in"]');
+ expect(zoomInButton).toBeFalsy();
+ });
+ });
+
+ it("should show mermaid pan-zoom controls by default", async () => {
+ const utils = await import("../lib/mermaid/utils");
+ vi.spyOn(utils, "initializeMermaid").mockResolvedValue({
+ render: vi.fn().mockResolvedValue({ svg: "<svg></svg>" }),
+ } as any);
+ const markdownWithMermaid = `
+\`\`\`mermaid
+graph TD
+ A-->B
+\`\`\`
+`;
+
+ const { container } = render(
+ <Streamdown controls={{ mermaid: {} }}>
+ {markdownWithMermaid}
+ </Streamdown>
+ );
+
+ await waitFor(() => {
+ const zoomInButton = container.querySelector('button[title="Zoom in"]');
+ expect(zoomInButton).toBeTruthy();
+ });
+ });
  });
 
  describe("with custom components", () => {

packages/streamdown/index.tsx

@@ -41,6 +41,7 @@ export type ControlsConfig =
  download?: boolean;
  copy?: boolean;
  fullscreen?: boolean;
+ panZoom?: boolean;
  };
  };
 

packages/streamdown/lib/components.tsx

@@ -102,9 +102,9 @@ const shouldShowMermaidControl = (
  code?: boolean;
  mermaid?:
  | boolean
- | { download?: boolean; copy?: boolean; fullscreen?: boolean };
+ | { download?: boolean; copy?: boolean; fullscreen?: boolean; panZoom?: boolean };
  },
- controlType: "download" | "copy" | "fullscreen"
+ controlType: "download" | "copy" | "fullscreen" | "panZoom"
 ): boolean => {
  if (typeof config === "boolean") {
  return config;
@@ -640,10 +640,8 @@ const CodeComponent = ({
  const showMermaidControls = shouldShowControls(controlsConfig, "mermaid");
  const showDownload = shouldShowMermaidControl(controlsConfig, "download");
  const showCopy = shouldShowMermaidControl(controlsConfig, "copy");
- const showFullscreen = shouldShowMermaidControl(
- controlsConfig,
- "fullscreen"
- );
+ const showFullscreen = shouldShowMermaidControl(controlsConfig, "fullscreen");
+ const showPanZoomControls = shouldShowMermaidControl(controlsConfig, "panZoom");
 
  return (
  <Suspense fallback={<CodeBlockSkeleton />}>
@@ -672,7 +670,11 @@ const CodeComponent = ({
  )}
  </div>
  )}
- <Mermaid chart={code} config={mermaidContext?.config} />
+ <Mermaid
+ chart={code}
+ config={mermaidContext?.config}
+ showControls={showPanZoomControls}
+ />
  </div>
  </Suspense>
  );

packages/streamdown/lib/mermaid/fullscreen-button.tsx

@@ -38,7 +38,20 @@ export const MermaidFullscreenButton = ({
  ...props
 }: MermaidFullscreenButtonProps) => {
  const [isFullscreen, setIsFullscreen] = useState(false);
- const { isAnimating } = useContext(StreamdownContext);
+ const { isAnimating, controls: controlsConfig } = useContext(StreamdownContext);
+ const showPanZoomControls = (() => {
+ if (typeof controlsConfig === "boolean") {
+ return controlsConfig;
+ }
+ const mermaidCtl = controlsConfig.mermaid;
+ if (mermaidCtl === false) {
+ return false;
+ }
+ if (mermaidCtl === true || mermaidCtl === undefined) {
+ return true;
+ }
+ return (mermaidCtl as any).panZoom !== false;
+ })();
 
  const handleToggle = () => {
  setIsFullscreen(!isFullscreen);
@@ -121,6 +134,7 @@ export const MermaidFullscreenButton = ({
  className="h-full w-full [&>div]:h-full [&>div]:overflow-hidden [&_svg]:h-auto [&_svg]:w-auto"
  config={config}
  fullscreen={true}
+ showControls={showPanZoomControls}
  />
  </div>
  </div>

packages/streamdown/lib/mermaid/index.tsx

@@ -10,13 +10,15 @@ type MermaidProps = {
  className?: string;
  config?: MermaidConfig;
  fullscreen?: boolean;
+ showControls?: boolean;
 };
 
 export const Mermaid = ({
  chart,
  className,
  config,
  fullscreen = false,
+ showControls = true,
 }: MermaidProps) => {
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
@@ -122,7 +124,7 @@ export const Mermaid = ({
  fullscreen={fullscreen}
  maxZoom={3}
  minZoom={0.5}
- showControls={true}
+ showControls={showControls}
  zoomStep={0.1}
  >
  <div