feat: Add copy-to-clipboard fix prompt to Mermaid error notice

[harley]

Summary

• add a "Copy fix prompt" action to Mermaid error notices so users can quickly ask ChatGPT for corrections
• generate a context-aware prompt including the parse error and original Mermaid source
• implement clipboard helpers with graceful fallback and expose the prompt for manual copy

Testing

• pnpm build

---

https://chatgpt.com/codex/tasks/task_b_68d6dada1980832b8978aa84ebc4b833

[gemini-code-assist]

Summary of Changes

Hello @harley, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience when encountering Mermaid diagram rendering errors by providing an immediate, context-aware 'Copy fix prompt' action. This feature allows users to efficiently leverage AI tools like ChatGPT to correct their Mermaid syntax, thereby streamlining the debugging and correction process. The implementation includes robust clipboard handling and a clear display of the generated prompt for manual intervention if automated copying fails.

Highlights

• Mermaid Error Fix Prompt: Introduced a 'Copy fix prompt' button on Mermaid error notices, allowing users to quickly generate a prompt for AI tools to correct their diagram syntax.
• Context-Aware Prompt Generation: The generated prompt for AI (e.g., ChatGPT) is context-aware, including the specific parse error message and the original Mermaid source code for better correction suggestions.
• Robust Clipboard Functionality: Implemented clipboard helpers with graceful fallback mechanisms, ensuring the prompt can be copied even if the modern navigator.clipboard API is unavailable, and providing a visible prompt for manual copying.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a helpful "Copy fix prompt" feature for Mermaid error notices, which is a great user experience enhancement. The implementation is solid, including a robust copy-to-clipboard helper with a fallback. My review includes a few suggestions to improve maintainability and robustness, such as handling a potential race condition with setTimeout and extracting hardcoded values into constants.

[gemini-code-assist]

The callback for this setTimeout could execute after the promptButton has been removed from the DOM (e.g., if the user navigates away or settings change). This can lead to unnecessary work. To make this more robust, you should check if the button is still connected to the DOM before attempting to modify it.

    setTimeout(() => {
      if (!promptButton.isConnected) return
      promptButton.disabled = false
      promptButton.textContent = defaultLabel
    }, 2000)

[gemini-code-assist]

This long font family string is hardcoded. To improve maintainability and ensure consistency, consider extracting it into a constant, for example MONOSPACE_FONT_FAMILY, at a higher scope and reusing it where needed.

[gemini-code-assist]

The timeout duration 2000 is a magic number. Consider defining it as a named constant (e.g., BUTTON_RESET_DELAY_MS) at a higher scope for better readability and maintainability.