feat: integrate CodeMirror editor for Paste Schema mode #3940
Conversation
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
- Replace native textarea with CodeMirror editor in PasteSessionFormPresenter - Add useSchemaEditor hook with syntax highlighting support for SQL (PostgreSQL) - Implement custom editor theme matching existing design system - Support for multiple schema formats (SQL, schema.rb, Prisma, TBLS) - Maintain existing functionality: value binding, validation, disabled state - Update Storybook stories to showcase CodeMirror integration - Add proper CSS styling for editor wrapper with hover and focus states Resolves #5972 Co-Authored-By: [email protected] <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Finished running flow.
|
|
Updates to Preview Branch (devin/1761729885-codemirror-paste-schema-editor) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
Contributor
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Note Free review on us!CodeRabbit is offering free reviews until Thu Nov 06 2025 to showcase some of the refinements we've made. Comment |
Check changeset necessityStatus: NOT REQUIRED Reason:
Changeset (copy & paste):<!-- No changeset required: only @liam-hq/app (ignored) changed --> |
- Use ref for onChange callback to avoid editor recreation - Remove value and onChange from create/destroy effect dependencies - Add 'use client' directive to PasteSessionFormPresenter - Wrap handleSchemaEditorChange in useCallback for stable identity - Add biome-ignore comment for intentional dependency exclusion This fixes the browser error caused by infinite re-render loop when the editor was being destroyed and recreated on every keystroke. Co-Authored-By: [email protected] <[email protected]>
Resolved conflicts in PasteSessionFormPresenter.module.css: - Kept CodeMirror editor styles (.schemaEditorWrapper) - Removed old textarea styles (.schemaTextarea) - Updated disabled state styling for editor wrapper Co-Authored-By: [email protected] <[email protected]>
Resolved conflicts in PasteSessionFormPresenter.module.css: - Replaced formatSelectorWrapper/formatSelect with formatDropdown - Removed old schemaTextarea placeholder styles Co-Authored-By: [email protected] <[email protected]>
- Add max-height: 600px to constrain editor height - Add overflow: auto and resize: vertical for scrolling and manual resizing - Remove white focus border by setting focus-within to base border color - Add global CSS rules for CodeMirror internal classes - Remove outline from .cm-editor.cm-focused to eliminate focus ring These changes address user feedback: 1. Prevent text from displaying at full length (now constrained by max-height) 2. Allow manual resizing like the original textarea 3. Remove white border that appears on focus Co-Authored-By: [email protected] <[email protected]>
…editor The white focus outline was coming from the browser's default [contenteditable]:focus rule, not from .cm-editor.cm-focused. Added CSS rule to override the contenteditable focus outline within the schema editor wrapper. Co-Authored-By: [email protected] <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Issue
Why is this change needed?
This change improves the schema input UX in Paste Schema mode by replacing the native textarea with a CodeMirror editor that provides syntax highlighting. This makes it easier for users to paste and edit schemas by providing visual feedback about the schema structure.
What changed?
PasteSessionFormPresenteruseSchemaEditorhook to manage CodeMirror lifecycle, initialization, and updateseditorTheme.ts) that matches the existing design system with SQL syntax highlightingImplementation notes
Current language support
@codemirror/lang-sqlEditor lifecycle
The editor uses two useEffect hooks:
valuein its dependency array, which means the editor will be completely recreated on every value change. This ensures the editor stays in sync but may affect performance and cursor position.Human review checklist
Critical items to verify:
isPendingis trueNice to have:
Session: https://app.devin.ai/sessions/71f18788a3764820b71d56d129f91793
Requested by: @MH4GF ([email protected])