fix: prevent prematurely triggered IME comment creation

[LinEvil]

Description

When using IME for multi-language input (e.g., typing Chinese followed by English), pressing Enter during composition incorrectly submitted the comment. This happened because the Enter key event did not properly check for native composition state.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Pressing Enter during IME composition prematurely submitted the comment:

Expected Behavior (After Fix):

Test Scenarios

• Verified that comments using Chinese/Japanese IME are not prematurely submitted
• Confirmed that normal English input workflow remains unaffected

References

#7084
#7022
#7496
#5485

---

Note

Fixes premature comment submission when using IME by making Enter-to-submit respect composition state.

• Adds !e.nativeEvent.isComposing check to Enter key handlers in comment-create.tsx and comments/card/edit-form.tsx
• Ensures comments aren't submitted during active text composition while preserving normal Enter behavior

^{Written by Cursor Bugbot for commit a5ac382. This will update automatically on new commits. Configure here.}

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where pressing Enter during text input composition (IME) could prematurely submit comments. Submission now waits for composition to complete, improving typing and submission behavior in comment creation and edit inputs for languages using input method editors.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Adds IME composition checks to Enter-key handlers in comment input components to prevent form submission while an input method editor (IME) is composing.

Changes

Cohort / File(s)	Summary
Comment creation input apps/web/core/components/comments/comment-create.tsx	Require !e.nativeEvent.isComposing in the Enter key onKeyDown condition to avoid submit during IME composition.
Comment edit form input apps/web/core/components/comments/card/edit-form.tsx	Same change: add !e.nativeEvent.isComposing to Enter key onKeyDown check to prevent IME-triggered submissions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: preventing premature comment creation when using IME input composition.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description comprehensively covers all required template sections with clear details about the IME composition bug, type of change classification, before/after screenshots, specific test scenarios, and related issue references.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/core/components/comments/card/edit-form.tsx (1)

74-91: The EnterKeyExtension also needs IME composition filtering.

The onKeyDown handler on line 75 correctly checks !e.nativeEvent.isComposing, but the EnterKeyExtension (used by onEnterKeyPress on line 88) does not perform this check. Since EnterKeyExtension doesn't pass the event object to the callback, it cannot be checked at the callback level. The extension itself must be updated to filter composition events before invoking onEnterKeyPress, similar to the DOM-level handler. Without this fix, IME composition could still trigger comment submission through the TipTap keyboard shortcut handler.

🧹 Nitpick comments (1)

apps/web/core/components/comments/card/edit-form.tsx (1)

75-75: Consider extracting the Enter key condition for readability.

The Enter key condition has grown to six checks. For improved maintainability, consider extracting this logic:

🔎 Optional refactor suggestion

+ const shouldSubmitOnEnter = (e: React.KeyboardEvent, isEmpty: boolean): boolean => {
+   return (
+     e.key === "Enter" &&
+     !e.shiftKey &&
+     !e.ctrlKey &&
+     !e.metaKey &&
+     !e.nativeEvent.isComposing &&
+     !isEmpty
+   );
+ };

  <div
    onKeyDown={(e) => {
-     if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.nativeEvent.isComposing && !isEmpty) handleSubmit(onEnter)(e);
+     if (shouldSubmitOnEnter(e, isEmpty)) handleSubmit(onEnter)(e);
    }}
  >

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 438f498 and a5ac382.

📒 Files selected for processing (1)

• apps/web/core/components/comments/card/edit-form.tsx

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/core/components/comments/card/edit-form.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

• apps/web/core/components/comments/card/edit-form.tsx

**/*.{js,jsx,ts,tsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with Tailwind plugin for code formatting, run pnpm fix:format

Files:

• apps/web/core/components/comments/card/edit-form.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately

Files:

• apps/web/core/components/comments/card/edit-form.tsx

[LinEvil]

Hi @vamsikrishnamathala @prateekshourya29 , could you please help review this PR?