Add folding support to code blocks

[schultek]

This adds support for defining folding ranges in any code block.

Folding ranges can be defined by specifying foldable on the code block and using [* and *] lines in the code, and will be transformed to collapsible sections with a toggle marker and indicator line. Folding ranges can be nested. By default folding ranges are open, but can be set to initially closed using [* -.

When using line numbers, the folding range markers and lines will be shifted to the right of the line numbers.

• Code block with line numbers and collapsed folding ranges:

- Code block with line numbers and expanded folding ranges: - Code block without line numbers and partly collapsed folding ranges:

[gemini-code-assist]

Summary of Changes

Hello @schultek, 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 presentation of code blocks by introducing a new folding mechanism. Users can now define collapsible sections within their code snippets, making complex or lengthy examples easier to navigate and digest. The implementation includes both frontend styling for a clear visual experience and backend processing to interpret folding markers and generate the appropriate interactive HTML structure.

Highlights

• Code Block Folding: Introduces a new feature to define collapsible folding ranges within code blocks using a foldable attribute and special [*, *] markers. Folding ranges can be nested and set to be initially open or closed.
• Visual Styling: Adds comprehensive CSS to render folding ranges with interactive toggle markers (carets), vertical indicator lines, and visual cues (opacity change) for collapsed sections, ensuring a clear user experience.
• Backend Processing: Implements Dart logic to parse the [*, [* -, and *] folding markers from code block content, extract their metadata (start, end, level, open state), and dynamically construct the HTML structure using native <details> and <summary> elements.
• Markdown Integration: Demonstrates the new functionality by applying folding ranges to an example Markdown file, showcasing how to define nested and initially closed sections within a Dart code block.

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. ↩

[schultek]

This is only for demoing this feature and should be reverted before merge.

[gemini-code-assist]

Code Review

This pull request introduces an excellent feature for adding foldable sections to code blocks. The implementation is generally well-structured, using <details> elements for semantic HTML and a stack-based approach for parsing nested folds. However, I've identified a few critical and high-severity issues that will prevent the feature from working as intended. The CSS for indentation relies on an unsupported attr() function, which will break the visual layout. Additionally, there are a couple of off-by-one errors in the Dart logic for calculating folding ranges and constructing the components, which will result in incorrect folding behavior. My review includes specific suggestions to address these problems.

[flutter-website-bot]

Visit the preview URL for this PR (updated for commit 3a26dcc):

https://flutter-docs-prod--pr12680-feat-folding-code-block-dx916ymi.web.app

[parlough]

Overall looks great to me, thanks!

Also gives me some ideas of how to best extract the code block logic.

[parlough]

Looks good to me, thanks @schultek!

Feel free to land this after removing the example usages from widgets.md. Consider adding one to the generated fwe.md page though.