feat(mobile): add code block rendering and copy button#803
Draft
wpfleger96 wants to merge 1 commit into
Draft
Conversation
…ence Desktop's code block support (PR #788) landed with a toolbar button but no equivalent rendering or composer UX on mobile. The sent messages used gpt_markdown's default CodeField with hard-coded Material styling that didn't match the design system. Adds _MessageCodeBlock (via gpt_markdown's codeBuilder callback) with rounded border, muted bg, GeistMono font, horizontal scroll, optional language label, and an always-visible copy-to-clipboard button. Also adds _expandFenceIfNeeded to auto-expand ```lang + Enter into a full fenced block template in the composer. A useRef isModifyingText guard prevents the controller listener from re-entering _expandFenceIfNeeded while applyCodeBlock or the expander itself is mutating the controller, which was causing a StackOverflow crash.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings mobile code block support to parity with desktop (PR #788). Rendered messages now display fenced code blocks with custom styling — rounded border, muted background,
GeistMonofont, horizontal scroll, optional language label — and an always-visible copy-to-clipboard button, replacinggpt_markdown's defaultCodeField.The composer already had the code block toolbar button from #788 but lacked auto-fence detection. Typing
```(with optional language tag) followed by Enter now auto-expands into a full fenced block template with the cursor positioned inside, matching the desktop Tiptap InputRule behavior._MessageCodeBlockwidget viagpt_markdown'scodeBuildercallback, styled to match desktop'sMarkdownCodeBlock(12px radius,outlineborder at 0.7 alpha,surfaceContainerHighestbg at 0.6 alpha)_expandFenceIfNeededhelper that detects a completed```fence line on newline and expands it, with a fence-count guard to avoid triggering inside existing blocksisModifyingTextre-entrancy guard (useRef<bool>) to prevent infinite recursion between the controller listener,applyCodeBlock, and_expandFenceIfNeeded