fix: Enter inserts newline in edit mode #912
Conversation
WalkthroughImplements dynamic, auto-resizing edit textarea in MessageItemUser.vue with computed max height, window-resize handling, and refs for textarea. Adjusts keyboard shortcuts to save on Ctrl/Cmd+Enter and cancel on Esc. Initializes and updates sizing on edit start, input, text changes, and window resize; cleans up listeners on unmount. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant MessageItemUser as Component
participant DOM as Textarea & Window
User->>MessageItemUser: Click "Edit"
activate MessageItemUser
MessageItemUser->>DOM: computeEditMaxHeight()
MessageItemUser->>DOM: autoResize(textarea)
MessageItemUser-->>User: Edit mode shown
User->>DOM: Input typing
DOM-->>MessageItemUser: input event
MessageItemUser->>DOM: autoResize(textarea)
User->>MessageItemUser: Ctrl/Cmd+Enter
MessageItemUser-->>User: Save and exit edit
User->>MessageItemUser: Esc
MessageItemUser-->>User: Cancel and exit edit
DOM->>MessageItemUser: window resize
MessageItemUser->>DOM: computeEditMaxHeight() + autoResize()
deactivate MessageItemUser
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/renderer/src/components/message/MessageItemUser.vue (7)
36-47: Avoid fixed inline width; it becomes stale on resize and conflicts with w-fullPinning width to originalContentWidth + 20px can overflow after window resizes and fights Tailwind’s w-full. Prefer responsive width only; keep maxHeight logic.
Apply:
- class="text-sm bg-[#EFF6FF] dark:bg-muted rounded-lg p-2 border flex flex-col gap-1.5 resize-none overflow-y-auto overscroll-contain min-w-[40vw] w-full" + class="text-sm bg-[#EFF6FF] dark:bg-muted rounded-lg p-2 border flex flex-col gap-1.5 resize-none overflow-y-auto overscroll-contain min-w-[40vw] w-full box-border" :style="{ - width: originalContentWidth + 20 + 'px', maxHeight: editMaxHeight ? editMaxHeight + 'px' : undefined }"Also, please verify no parent-level key handlers still react to Enter. If they do, stop propagation on plain Enter/Shift+Enter for the textarea.
153-158: Preserve paragraph boundaries when merging text blocksJoining with '' can collapse paragraphs. Use a newline to keep intent.
Apply:
- editedText.value = textBlocks.map((block) => block.content).join('') + editedText.value = textBlocks.map((block) => block.content).join('\n')Please verify this matches how MessageContent renders multi-block text.
204-218: autoResize is solid; consider rAF to reduce layout thrashMinor polish: schedule height calc in requestAnimationFrame to avoid sync reflow on fast input.
Apply:
-const autoResize = () => { - const el = editTextarea.value - if (!el) return - el.style.height = 'auto' - const computed = window.getComputedStyle(el) - const maxH = parseFloat(computed.maxHeight || '') - const scrollH = el.scrollHeight - const target = Number.isFinite(maxH) && maxH > 0 ? Math.min(scrollH, maxH) : scrollH - el.style.height = target + 'px' - if (scrollH > target) { - el.style.overflowY = 'auto' - } else { - el.style.overflowY = 'hidden' - } -} +const autoResize = () => { + const el = editTextarea.value + if (!el) return + requestAnimationFrame(() => { + el.style.height = 'auto' + const computed = window.getComputedStyle(el) + const maxH = parseFloat(computed.maxHeight || '') + const scrollH = el.scrollHeight + const target = Number.isFinite(maxH) && maxH > 0 ? Math.min(scrollH, maxH) : scrollH + el.style.height = target + 'px' + el.style.overflowY = scrollH > target ? 'auto' : 'hidden' + }) +}
224-228: Decouple from global selector if possibleQuerying .message-list-container couples layout across components. Prefer measuring the textarea’s scroll parent (e.g., el.closest()) or accept an optional container element/height via prop/inject.
230-235: Register resize listener on mount for SSR-safety and symmetryMove addEventListener into onMounted (you already remove it in onBeforeUnmount).
Apply:
onMounted(() => { if (originalContent.value) { // eslint-disable-next-line @typescript-eslint/no-explicit-any originalContentHeight.value = (originalContent.value as any).offsetHeight // eslint-disable-next-line @typescript-eslint/no-explicit-any originalContentWidth.value = (originalContent.value as any).offsetWidth } + window.addEventListener('resize', handleWindowResize) }) - window.addEventListener('resize', handleWindowResize) onBeforeUnmount(() => { window.removeEventListener('resize', handleWindowResize) })Also applies to: 237-240, 119-126
16-18: i18n: replace hardcoded 'user' fallback with a translation keyRenderer must use vue-i18n for user-visible strings.
Apply:
- :name="message.name ?? 'user'" + :name="message.name ?? t('common.user')"And in script:
+import { useI18n } from 'vue-i18n' ... +const { t } = useI18n()Please adjust the key path to match your i18n schema.
7-12: Comments should be in English per repo guidelinesTranslate Chinese comments to English for consistency.
Also applies to: 60-72
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/message/MessageItemUser.vue(6 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.Use Pinia for frontend state management (do not introduce alternative state libraries)
Files:
src/renderer/src/components/message/MessageItemUser.vue
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/message/MessageItemUser.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/{src,shell,floating}/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/components/**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature within src/renderer/src/
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/**
📄 CodeRabbit inference engine (AGENTS.md)
Put application code for the Vue app under src/renderer/src (components, stores, views, i18n, lib)
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/src/**/*.{vue,ts}
📄 CodeRabbit inference engine (AGENTS.md)
All user-facing strings in the renderer must use vue-i18n keys defined in src/renderer/src/i18n
Files:
src/renderer/src/components/message/MessageItemUser.vue
**/*.{js,jsx,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting: single quotes, no semicolons, max width 100
Files:
src/renderer/src/components/message/MessageItemUser.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Name Vue components in PascalCase (e.g., ChatInput.vue)
Files:
src/renderer/src/components/message/MessageItemUser.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (2)
src/renderer/src/components/message/MessageItemUser.vue (2)
114-116: Good: strongly typed refs for textarea and its constraintsThese additions are correct and align with strict TS.
134-135: Correct: initialize sizing when entering edit modeComputing max height and resizing on enter is appropriate.
close #905
Currently, both Enter and Shift+Enter create a new line, while Command+Enter or Ctrl+Enter saves and sends.
Summary by CodeRabbit