Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Host-integrated Mermaid download and fullscreen hooks

Abierto
  • ¿Algo no está bien?
#490 0 comentarios 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
65/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza localizando la Mermaid controls configuration y los handlers existentes de download y fullscreen. Rastrea sus payloads y su comportamiento predeterminado; después, añade los callbacks opcionales para que un resultado gestionado omita la acción predeterminada correspondiente, mientras que la ausencia de un callback conserve el comportamiento actual; verifica los payloads de los callbacks y los defaults sin cambios con las pruebas relevantes de Mermaid.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement
Problem Statement

When Streamdown is embedded inside a desktop webview or an iframe sidebar panel, the Mermaid download and fullscreen actions are confined to the web context:

  • Download is sandboxed to the browser/webview and cannot invoke host-native save dialogs or write files to user-selected locations.
  • Fullscreen is limited to the iframe/panel container, not a true host-level expanded view.

This blocks good UX for desktop integrations where the host application needs to handle these actions natively.

Proposed Solution

Add optional callback hooks to the Mermaid controls configuration:

  • onMermaidDownload(payload) — called before the default download. Receives the generated Blob, suggested filename, mimeType, chart source, and config. If the callback returns { handled: true }, the default browser download is skipped.
  • onMermaidFullscreen(payload) — called before the default fullscreen. Receives chart source and config. If the callback returns { handled: true }, the default fullscreen behavior is skipped.

If no callbacks are provided, existing behavior is unchanged.

Alternatives Considered
  • Custom renderer plugin: Using the existing customRenderer API to replace the entire Mermaid block. This is too heavy-handed — it requires reimplementing the full Mermaid UI just to intercept two actions.
Use Case
import { Streamdown } from "streamdown";

<Streamdown
  mermaid={{
    config: { theme: "dark" },
    onDownload: async ({ blob, filename, mimeType, chart, config }) => {
      // Forward blob to desktop host via postMessage / bridge API
      window.parent.postMessage(
        { type: "save-file", blob, filename, mimeType },
        "*"
      );
      return { handled: true }; // skip default browser download
    },
    onFullscreen: ({ chart, config }) => {
      // Ask host to open chart in a dedicated large window
      window.parent.postMessage(
        { type: "open-fullscreen", chart, config },
        "*"
      );
      return { handled: true }; // skip default in-panel fullscreen
    },
  }}
>
  {markdown}
</Streamdown>;
Priority

Important

Contribution
  • I am willing to help implement this feature
Additional Context

No response

Lenguaje dominante
TypeScript
Estrellas
5.7k
Forks
307
Merge medio
1 d 22 h
PR fusionados (30 d)
22

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de vercel/streamdown

Todos los issues de vercel/streamdown

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.