fix: fix cursor jumping and IME focus loss#171
fix: fix cursor jumping and IME focus loss#171SonyLeo wants to merge 7 commits intoopentiny:developfrom
Conversation
WalkthroughThe changes focus on refining the TemplateEditor component's internal data handling, placeholder logic, and input processing. Type definitions are updated to allow optional IDs for user items, and the EditorRange interface is extended with element references. The logic for determining empty templates is broadened, and several event handling and history management improvements are introduced. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TemplateEditor
participant HistoryManager
participant DOM
User->>TemplateEditor: Input or edit content
TemplateEditor->>TemplateEditor: Process input (update placeholders, IDs)
TemplateEditor->>HistoryManager: Commit history after data update
TemplateEditor->>DOM: Adjust caret (selectionchange event)
TemplateEditor->>User: Emit updated template data
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (1)packages/components/src/sender/components/TemplateEditor.vue (2)Learnt from: gene9831 Learnt from: gene9831 🔇 Additional comments (9)
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
…nt in template editor
…ing of empty text adjacent to templates
gene9831
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/src/sender/components/TemplateEditor.vue (1)
194-221: Good safeguard against infinite update loops.The internal update detection logic prevents infinite loops when the model is updated from within the component. Recording the selection range before updates ensures proper cursor restoration.
Consider addressing the TODO comment about finding better ways to detect internal updates - perhaps using a flag or versioning system could be more efficient than JSON comparison.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/components/src/sender/components/TemplateEditor.vue(17 hunks)packages/components/src/sender/index.type.ts(1 hunks)packages/components/src/sender/index.vue(1 hunks)packages/components/src/sender/types/editor.type.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
packages/components/src/sender/index.vue (1)
Learnt from: gene9831
PR: #123
File: packages/components/src/bubble/message/Message.vue:22-40
Timestamp: 2025-06-25T07:04:18.791Z
Learning: In the Message component (packages/components/src/bubble/message/Message.vue), the renderer resolution is intentionally not reactive to type changes - the component is designed to work with a fixed type that doesn't change after initialization.
🧬 Code Graph Analysis (1)
packages/components/src/sender/index.type.ts (1)
packages/components/src/sender/types/editor.type.ts (2)
TextItem(7-9)TemplateItem(11-15)
🔇 Additional comments (10)
packages/components/src/sender/types/editor.type.ts (1)
29-36: LGTM! Good addition for precise DOM element tracking.Adding optional
startElandendElproperties to theEditorRangeinterface provides direct element references that support the improved cursor positioning logic in the TemplateEditor component.packages/components/src/sender/index.vue (1)
278-281: Good improvement to empty template detection logic.The refactored logic using
isEmptyTextNodehelper andevery()method properly handles cases where multiple placeholder text nodes exist, not just the single node case. This aligns well with the broader placeholder management strategy.packages/components/src/sender/index.type.ts (1)
127-131: Good type refinement for flexible ID handling.Making the
idproperty optional rather than completely omitted allows for better ID preservation and assignment logic in the TemplateEditor component. This supports consistent data transformations between user and internal representations.packages/components/src/sender/components/TemplateEditor.vue (7)
38-42: Good unification of placeholder constants.Using a single
ZERO_WIDTH_CHARconstant with semantic aliases (PLACEHOLDER,PREFIX,SUFFIX) improves code maintainability and readability.
56-72: Improved ID management in transformation functions.The changes properly handle optional IDs by preserving existing ones or generating new ones, which is more robust than the previous index-based approach.
76-107: Well-structured placeholder management logic.The rewritten
setOriginalDatafunction systematically handles placeholder nodes to prevent templates from being at the start or end of the data, while cleaning up placeholder characters from text nodes with actual content.
320-327: Proper history tracking added.Good addition of
history.commitcalls after data updates to ensure undo/redo functionality works correctly.
465-522: Improved template deletion and placeholder management.The logic properly handles:
- Renaming
toDeletedtotoDeletedTemplatefor clarity- Filtering out empty templates and text nodes
- Ensuring templates don't end up at the start or end by converting adjacent empty text nodes to placeholders
This systematic approach prevents the cursor jumping issues mentioned in the PR objectives.
763-784: Proper IME composition handling.The changes correctly handle IME composition by:
- Recording selection range for proper cursor restoration
- Processing composition input through the standard
processInputflow- Force re-rendering when composition events cause untracked DOM changes
This addresses the IME focus loss issues mentioned in the PR objectives.
847-849: Critical fix for undo/redo synchronization.Adding
model.value = transformInternalToUser(originalData.value)ensures the parent component is properly notified of data changes during undo/redo operations, fixing the synchronization issue mentioned in the PR objectives.
3 participants
修复输入块光标问题
场景：编辑块右侧无内容时
【已处理】1. 右侧输入英文时，光标位置不正确
【已处理】2. 右侧输入中文时，按下空格按键确认选择后，编辑器失焦
【已处理】3. 右侧输入中文，
中文输入法下，输入第二个字符时，光标移动至前一个编辑块，空格确认时，文字出现在前面的编辑块中；
另外修复了undo redo操作后数据未同步的问题
Summary by CodeRabbit
New Features
Bug Fixes
Improvements