feat: migrate input to Quill rich-text editor with syntax highlighting - #53
Merged
Conversation
- Replace textarea with ReactQuill via next/dynamic (ssr: false) - Syntax highlighting: headings green/bold, comments gray/italic, expense names in amber, variable names in cyan - Scroll sync between Quill container and output textarea - Custom CSS overrides for transparent background, ruled lines, no toolbar - Auto-commenting syncs back into Quill editor - removed auto-height effect (Quill handles its own height)
react-quill v2 onChange provides UnprivilegedEditor as 4th arg which lacks formatText(). Use ref.getEditor() instead.
ref spread bypass didn't work for class component (no forwardRef). Use
.querySelector('.ql-editor') + .closest('.ql-container') to find the
root element that has __quill set by Quill's constructor.
Change overflow:hidden to overflow-y:auto on output textarea so user can see all lines when they don't fit in the viewport. Scroll sync still works as a helper, but no longer required.
- .ql-editor: overflow:hidden + height:auto (grows with content, no internal scroll)
- .ql-container: overflow-y:auto (scrolls when editor content overflows)
- p { margin:0 } in .ql-editor to prevent extra spacing from user-agent styles
- Scroll listener on .ql-container for sync with output textarea
- Revert output textarea to overflow:hidden (scroll sync handles it)
- defaultValue="" (empty) to avoid clipbard.convert which collapses \n - handleQuillChange ignores source='api' to prevent feedback loop - sync useEffect calls editor.setText() which treats input as plain text preserving newlines correctly
- Attach scroll listener in useEffect on mount (not just on user input) - Clean up scroll listener on unmount to prevent memory leaks - 6 new unit tests: empty/whitespace lines, blank line preservation through auto-commenting, trailing blank lines
- .ql-editor padding: 8px 16px (left 16px to space text from red line, right 16px for breathing room) - Calendar gutter: w-4 mr-2 (16px + 8px gap instead of 12px + 2px) - Output textarea: matching padding 8px 16px for visual alignment
- Remove [22→22] debug prefix from output - Remove unnecessary console.log in new-features.tsx and getCurrencyConversion.ts - Update /about page with accurate feature list and usage guide - Update /new-features page subtitle - Update README with current tech stack and features
…request form to Firebase
- Wrap // and # in {String.fromCharCode(39)}//{String.fromCharCode(39)} to satisfy react/jsx-no-comment-textnodes
- Add setIndex to useEffect deps in useTypewriter
- Feature request form now pushes to Firebase Realtime Database under featureRequests/{pushId}
- Show thank-you message after submission
|
Visit the preview URL for this PR (updated for commit a7e9190): https://instant-calc--pr53-feat-react-quill-hig-pmulzw3p.web.app (expires Mon, 03 Aug 2026 00:47:38 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 6bc8ccb070bbb04b63e3a5957eef152c83a6b443 |
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.
What this PR does
Replaces the plain
<textarea>input with a Quill rich-text editor so calculations can be colour-coded while staying editable.Key changes
defaultValue=""+editor.setText()— avoids Quillsclipboard.convert()which collapsed\ninto whitespace; newlines are now preserved on load.ql-containerscrolls in lockstep with the output textarea; auto-height on output so both panels grow together//prefixes and the editor updates viasetTextSpacing
8px 16px(breathing room after the red line and on the right)w-4 mr-2(more separation from the output panel)Housekeeping
[22→22]debug prefix from outputconsole.logcalls