better textarea using lexical

[elianiva]

Related GitHub Issue

Closes: #4372

Roo Code Task Context (Optional)

Description

This is still a work in progress, I've described the goal in the original issue. I'm making a draft just for visibility. This isn't the final work since the main goal here is to prototype how it will look / function. I will clean up the code later when this feature gets a green flag to be integrated into Roo.

Test Procedure

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

These are temporary as I will keep updating them until I mark this PR as ready

Screen.Recording.2025-09-29.at.17.58.26.mov

Documentation Updates

Additional Notes

Get in Touch

@elianiva

[roomote]

Thank you for this PR implementing the Lexical-based textarea! This is a great start toward improving the UX for context mentions. However, there are several critical issues that need to be addressed before this can be merged:

Critical Issues (Must Fix):

1. Incomplete Migration - ChatRow.tsx still imports and uses the old ChatTextArea component for edit mode. This needs to be updated to use the new ChatLexicalTextArea.

2. Missing TypeScript Types - The build is failing with multiple TypeScript errors. While the Lexical dependencies are added to package.json, they may need to be installed with pnpm install.

3. Missing Core Functionality:

   • No send button or keyboard shortcut (Enter/Cmd+Enter) handling
   • Missing enhance prompt functionality
   • Missing mode switching via keyboard shortcuts
   • No integration with queued messages
   • Several props (onSend, onSelectImages, onHeightChange, onCancel, ref) are commented out but never implemented

Important Suggestions:

4. Global Function Pattern - Using window.__lexicalInsertMention for cross-component communication is fragile. Consider using React context or callback props.

5. Test Coverage - Only one test file exists for select-all functionality. Missing tests for mentions, context menu, image handling, etc.

6. Performance - The validMentions state updates on every input change could be optimized with debouncing.

Minor Improvements:

7. Code Organization - Consider extracting mention extraction and display name logic into utility functions.

8. Accessibility - Missing ARIA labels and keyboard navigation announcements for screen readers.

This is marked as a draft PR which is appropriate given the current state. The core Lexical integration looks promising, but significant work is needed to achieve feature parity with the existing textarea before this can be merged.

[roomote]

I found some issues that need attention. Inline comments call out concrete fixes with minimal diffs.

[roomote]

I found a new issue that isn’t covered by existing comments. Inline note explains the concrete failure scenario and a targeted approach to fix it.

[roomote]

I found some issues that need attention. Inline comments call out concrete fixes with minimal diffs.

[roomote]

I found some issues that need attention. Inline comments call out concrete fixes with minimal diffs.

[roomote]

I found some issues that need attention. Inline comments call out concrete fixes with minimal diffs.

[roomote]

I found some issues that need attention. Inline comments include targeted fixes with minimal diffs.

[roomote]

P2: When Enhance Prompt is clicked with empty input, only inputValue is updated, leaving the Lexical editor empty. This desynchronizes UI state from the editor and confuses subsequent actions (serialization, send). Write the description into the editor so the content is visible and consistent.

Suggested change

	setInputValue(t("chat:enhancePromptDescription"))
	} else {
	const msg = t("chat:enhancePromptDescription")
	setInputValue(msg)
	editorRef.current?.update(() => {
	const root = $getRoot()
	root.clear()
	const p = $createParagraphNode()
	p.append($createTextNode(msg))
	root.append(p)
	root.selectEnd()
	})
	}

[roomote]

I found some issues that need attention. Inline comments call out concrete fixes with minimal diffs.

[roomote]

[P1] End-of-editor detection compares anchor.offset with the entire document length. anchor.offset is relative to its text node, so this will rarely be true in multi-node content. Down-arrow history navigation may not exit at the true end. Suggest computing against the last text node instead.

Suggested change

	const isAtEnd = anchor.offset === text.length
	const anchor = selection.anchor
	const root = $getRoot()
	const last = root.getLastDescendant()
	const isAtBeginning = anchor.offset === 0
	const isAtEnd = $isTextNode(last) && anchor.key === last.getKey() && anchor.offset === last.getTextContentSize()
	return { isAtBeginning, isAtEnd }

[roomote]

[P1] Double-escaping file/folder paths. Values are escaped on insertion and escaped again when serializing, producing extra backslashes (e.g., @/My\\ File.ts). Keep the raw path in the node and escape only during serialization.

Suggested change

	insertValue = escapeSpaces(processedValue)
	insertValue = processedValue