Skip to content

feat: code block with built-in syntax highlighting - #12

Merged
divyanshub024 merged 4 commits into
mainfrom
dv/code-block
Aug 20, 2026
Merged

feat: code block with built-in syntax highlighting#12
divyanshub024 merged 4 commits into
mainfrom
dv/code-block

Conversation

@divyanshub024

@divyanshub024 divyanshub024 commented Aug 17, 2026

Copy link
Copy Markdown
Member

Summary

Roadmap row 21. Adds FlowCodeBlock and a FlowCodePart message part, with copy intent threaded through FlowMessage and FlowThread (onCodeCopy, copiedCodePart, codeCopyTooltip).

Highlighting is built in and synchronous: each language is an ordered regex rule table compiled into one alternation and colored in a single pass. No assets, no init call. Ships dart, json, javascript/typescript, python, bash, yaml, html, css, sql, plain. Hosts add languages with FlowCodeLanguage.register; caseSensitive: false compiles a table like SQL's case-insensitively.

Also in this PR:

  • FlowSyntaxColors theme tokens (eight roles, light and dark presets) on FlowTheme.syntax.
  • Bundled Geist Mono (3 weights, SIL OFL) behind new code and codeInline typography roles. withFontFamily() no longer touches the mono roles; withCodeFontFamily() swaps them.

Notes for review:

  • Why not the syntax_highlight package: its super_clipboard chain adds a native Rust plugin, an Android minSdk 23 floor, and a build-time binary download to every consumer, and its asset grammars force an async init. dependencies: in pubspec.yaml is unchanged.
  • While a message streams, a trailing code part renders each delivery whole (no per-character reveal) and hides the copy affordance.
  • Unterminated strings mid-stream stay plain until the closing quote arrives. Deliberate.
  • Syntax palette and block metrics are placeholders until the Figma file has a frame for this component.
  • Shares CHANGELOG, roadmap rows, and flow_message.dart lines with feat: error state with retry #13. Whichever merges second resolves trivial conflicts.

Screenshots

Before After
Fenced code rendered as literal backticks in plain text Highlighted block with header label and copy affordance (see the playground's Code Block stage: 8 variants)

How this was verified

Playground Code Block stage on Chrome (web), both themes. All 8 variant pills render (Dart, JSON, YAML, HTML, CSS, SQL colored; Plain uncolored; Streaming grows without restart flicker). Copy click passed the full source through navigator.clipboard.writeText and flashed the check state. Long lines scroll inside the block, not the page. Thread stage shows a code part in an assistant turn with the text reveal above it. Docs site builds clean.

Checklist

  • flutter analyze lib and flutter analyze in example/ and playground/ are clean
  • dart format . applied
  • Exercised in the playground — with a stage demo added or updated if this is a new component or variant
  • No new entries under dependencies: in pubspec.yaml (Flutter SDK and flutter.dev packages only)
  • Nothing model-facing — no prompts, schemas, or provider/network calls
  • New public API is exported from lib/flow_ui.dart and documented in docs/ and the README table
  • CHANGELOG.md updated for user-facing changes, with breaking changes called out
  • PR title follows conventional commits (feat:, fix:, refactor:, docs:, chore:)

Note

Medium Risk
New public message/theme API and a regex highlighter that runs in build on streamed source. withFontFamily() behavior change for mono roles can surprise hosts who already swapped the whole type scale.

Overview
Ships fenced code as a first-class message part: FlowCodeBlock plus FlowCodePart, rendered by FlowMessage/FlowThread with copy intent on onCodeCopy (host owns the clipboard). Unknown languages render plain; streaming trailing code re-highlights whole and hides copy.

Highlighting is a synchronous regex engine (no extra deps): ordered rule tables compiled to one alternation. Built-ins cover Dart, JSON, JS/TS, Python, shell, YAML, HTML, CSS, SQL, and plain; hosts extend via FlowCodeLanguage.register.

Theme adds FlowSyntaxColors (eight token roles, light/dark) and Geist Mono behind new code / codeInline roles. withFontFamily() no longer retargets the mono face — use withCodeFontFamily().

Reviewed by Cursor Bugbot for commit d25b7e8. Bugbot is set up for automated code reviews on this repo. Configure here.

Own regex highlighter rather than a dependency on syntax_highlight: its
super_clipboard chain would put a native plugin and an Android minSdk 23
floor into every consumer, and its asset-loaded grammars force an async
setup call. One alternated regex per language, colored in a single
synchronous pass; languages are host-extensible via
FlowCodeLanguage.register.

Syntax palette values and block metrics are picked to sit with the
shipped themes pending the design file's code-block frame.
Comment thread lib/src/utils/flow_syntax_highlighter.dart
FlowCodeLanguage gains caseSensitive (default true), compiled into the
table's regex — SQL keywords come in either case, and Dart regexes have
no inline (?i).

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 34b69ce. Configure here.

Comment thread lib/src/utils/flow_syntax_highlighter.dart Outdated
Comment thread lib/src/utils/flow_syntax_highlighter.dart Outdated
@divyanshub024 divyanshub024 mentioned this pull request Aug 18, 2026
8 tasks
rahulbisht25
rahulbisht25 previously approved these changes Aug 20, 2026
@divyanshub024
divyanshub024 merged commit cfdce97 into main Aug 20, 2026
5 checks passed
@divyanshub024
divyanshub024 deleted the dv/code-block branch August 20, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants