Upgrade text editor to TipTap #506
Merged
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
Contributor
Author
|
This is extremely old, throwing it up as a diff to play with later |
- Add global keyboard shortcut (Cmd+Shift+C) to toggle compose mode - Install TipTap dependencies (@tiptap/react, @tiptap/pm, @tiptap/starter-kit) - Create TiptapEditor component wrapper that maintains plain text compatibility - Integrate TipTap editor conditionally in ResponseInput when compose mode is active - Add toast notifications when toggling compose mode on/off - Maintain existing reply submission functionality (Cmd+Enter) - Add CodeBlockLowlight extension for syntax highlighting - Add MarkdownSyntaxHighlight extension to preserve markdown syntax visibility - Apply visual styling (bold, italic, strike, code) while preserving syntax - Style markdown syntax characters with muted colors and reduced opacity - Add terminal color variables for syntax highlighting theme This is an experimental feature to explore rich text editing capabilities while maintaining backward compatibility with the existing plain text system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Corrected lowlight v3 API usage from highlight(content, {language}) to highlight(language, text)
- Updated parsing logic to handle lowlight v3's tree structure instead of HTML
- Fixed CSS to display syntax highlight spans inline instead of as blocks
- Code blocks now properly highlight JavaScript and other registered languages
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added HTML attributes to prevent OS/browser-level text transformations: - spellcheck: false - Disables spell checking - autocorrect: off - Prevents auto-correction including smart quotes - autocapitalize: off - Disables auto-capitalization This ensures quotes remain as standard straight quotes for code/markdown editing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixed character splitting issue in code block syntax highlighting by: - Correcting position calculation for code block content - Building non-overlapping decoration segments before applying - Properly accumulating CSS classes through the lowlight tree - Ensuring decorations are freshly created on each plugin call The fix properly traverses the lowlight v3 tree structure and applies decorations only at text leaf nodes with all accumulated parent classes, preventing overlapping decorations that caused character splitting. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Process each line of multi-line code blocks independently to maintain correct position mapping when ProseMirror splits content into separate paragraph nodes. This prevents character splitting and DOM corruption that occurred when decorations spanned across paragraph boundaries. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
0734c9b to
246588b
Compare
- Rename TiptapEditor to ResponseEditor for clarity - Store editor instance in zustand global store - Change content persistence from plain text to JSON format - Remove prop drilling in favor of global editor access - Simplify editor lifecycle management through store methods
- Extract auto-accept toggle logic into reusable handler - Extend TipTap KeyboardShortcuts to handle Shift+Tab when editor is focused - Pass toggle handler through ResponseInput to ResponseEditor - Fix TypeScript issues with ResponseInput ref types - Update fork message handling to use global editor state - Remove unused window.editor debug code and unused variables
… in TipTap editor - Extract dangerous skip permissions toggle logic into reusable handler - Move useHotkeysContext before handler definitions to fix hook ordering - Extend TipTap KeyboardShortcuts to handle Alt-y when editor is focused - Pass toggle handler through ResponseInput to ResponseEditor - Update fork message handling to use global editor state
Contributor
There was a problem hiding this comment.
Caution
Changes requested ❌
Reviewed everything up to 6b56fcc in 2 minutes and 33 seconds. Click for details.
- Reviewed
1914lines of code in11files - Skipped
0files when reviewing. - Skipped posting
7draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. humanlayer-wui/src/styles/tiptap-editor.css:13
- Draft comment:
Consider unifying CSS variable names for color and background. The editor uses '--background' and '--foreground' (e.g., line 13) while later sections (e.g., pre block at line 159) use '--terminal-background' and '--terminal-foreground'. Using a consistent naming scheme simplifies theming. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% The different variable naming appears intentional as it serves different purposes - general UI vs terminal/code styling. The terminal-prefixed variables are used consistently throughout the syntax highlighting section. Having separate variable sets allows for independent theming of the editor vs code blocks. The comment assumes these should be unified but doesn't consider they may be intentionally separate. I could be wrong about the intention - maybe this is actually an oversight. Without seeing the theme definition file, I can't be 100% certain these are meant to be separate. Even with that uncertainty, the consistent usage patterns strongly suggest this is an intentional separation between general UI and terminal/code theming. The comment should be deleted as it appears to misunderstand the intentional separation between general UI theming and terminal/code block theming variables.
2. humanlayer-wui/src/styles/tiptap-editor.css:57
- Draft comment:
Consider grouping related markdown syntax rules (bold, italic, strike, code, headings, lists) to improve maintainability and readability. - Reason this comment was not posted:
Confidence changes required:50%<= threshold50%None
3. humanlayer-wui/bun.lock:976
- Draft comment:
Typographical error: The dependency key "devlop" appears to be a typo. It should likely be "develop". - Reason this comment was not posted:
Comment looked like it was already resolved.
4. humanlayer-wui/bun.lock:1024
- Draft comment:
Typo detected: In the dependency list for 'micromark', the key "devlop" appears to be a misspelling. It likely should be "develop". - Reason this comment was not posted:
Comment was on unchanged code.
5. humanlayer-wui/src/components/internal/SessionDetail/components/ResponseEditor.tsx:536
- Draft comment:
Typographical error: The log message on this line reads 'TiptapEditor.useEffect() - destroying editor', which is inconsistent with the component name 'ResponseEditor'. Consider updating it for clarity. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% While the comment is technically correct about the inconsistency, the PR review rules state not to make comments that are purely informative or unimportant. Log messages are primarily for debugging purposes and this inconsistency doesn't affect functionality. The rules emphasize focusing on code changes that require action, and log message wording is a very minor issue. The inconsistent naming could potentially cause confusion during debugging since the log refers to a different component name. It's a small but real issue. While debugging clarity is important, this is still a very minor issue that doesn't impact functionality. The rules specifically say not to make comments that are obvious or unimportant. The comment should be deleted as it addresses a minor logging inconsistency that doesn't require immediate action and falls under the category of unimportant comments that the rules say to avoid.
6. humanlayer-wui/src/components/internal/SessionDetail/components/ResponseInput.tsx:181
- Draft comment:
It looks like the commented-out Textarea block is not properly closed. The opening comment with{/*is never terminated (e.g. with*/}) which might lead to a syntax issue or unintended rendering. Please review and either fully remove the commented code or add the proper closing comment token. - Reason this comment was not posted:
Comment looked like it was already resolved.
7. humanlayer-wui/src/components/internal/SessionDetail/components/ResponseInput.tsx:193
- Draft comment:
It looks like there's a stray closing comment marker (*/) at the end of this line. If it's not intentional, please remove it to avoid confusion. - Reason this comment was not posted:
Comment looked like it was already resolved.
Workflow ID: wflow_xahEHsqojSMATrnD
You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.
| } | ||
|
|
||
| .tiptap-editor:focus { | ||
| /* border-color: var(--ring); */ |
Contributor
There was a problem hiding this comment.
The focus style for .tiptap-editor is commented out. For improved accessibility, ensure a visible focus outline is enabled.
Suggested change
| /* border-color: var(--ring); */ | |
| border-color: var(--ring); |
…itor is focused - Replace shadow-based focus indicators with cleaner border-left approach - Add --terminal-accent-dim variable to all themes (rgba with 0.3 opacity) - Dim focus indicators when ResponseEditor has focus to reduce distraction - No layout shifts: always has 2px left border, just changes color 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Enables Fork View modal to be opened via Cmd+Y even when the response editor has focus. Previously, TipTap was capturing keyboard events and preventing the global hotkey from working. - Extract handleToggleForkView as reusable callback in SessionDetail - Pass onToggleForkView handler through ResponseInput to ResponseEditor - Add Mod-y keyboard shortcut to TipTap's KeyboardShortcuts extension
ParmsiN9699
approved these changes
Aug 29, 2025
|
|
||
| "@tauri-apps/plugin-notification": ["@tauri-apps/plugin-notification@2.3.0", "", { "dependencies": { "@tauri-apps/api": "^2.6.0" } }, "sha512-QDwXo9VzAlH97c0veuf19TZI6cRBPfJDl2O6hNEDvI66j60lOO9z+PL6MJrj8A6Y+t55r7mGhe3rQWLmOre2HA=="], | ||
|
|
||
| "@tauri-apps/plugin-opener": ["@tauri-apps/plugin-opener@2.3.0", "", { "dependencies": { "@tauri-apps/api": "^2.0.0" } }, "sha512-yAbauwp8BCHIhhA48NN8rEf6OtfZBPCgTOCa10gmtoVCpmic5Bq+1Ba7C+NZOjogedkSiV7hAotjYnnbUVmYrw=="], |
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
What problem(s) was I solving?
Replaced the basic HTML textarea response editor with TipTap, a modern rich-text editor built on ProseMirror. The previous textarea lacked syntax highlighting and had limited keyboard shortcut support, making it difficult to write and review markdown-formatted responses effectively.
Related to improving the overall editing experience in the HumanLayer WUI for AI agent interactions.
What user-facing changes did I ship?
Enhanced Text Editor
Visual Improvements
How I implemented it
Core Migration (TipTap Integration)
@tiptap/react,@tiptap/starter-kit,@tiptap/pm,@tiptap/extension-code-block-lowlight)ResponseEditor.tsxcomponent (579 lines) with custom ProseMirror extensionsState Management Refactoring
AppStore.ts)setResponseEditor()andremoveResponseEditor()functionsComponent Updates
TextareainResponseInput.tsxwith new TipTap editorSessionDetail.tsxto use global editor referencesuseSessionActions.tshook to extract text from TipTap editortiptap-editor.css, 267 lines)Keyboard Shortcut Preservation
How to verify it
make check testpasses (Note: pre-existing test failure in claudecode-go unrelated to this PR)Manual Testing
Markdown Syntax Highlighting:
**bold**,*italic*,~~strikethrough~~,# heading,- list itemCode Block Testing:
Keyboard Shortcuts:
Focus Management:
State Persistence:
Description for the changelog
Upgraded response editor from textarea to TipTap rich-text editor with real-time markdown syntax highlighting, code block syntax highlighting for 15+ languages, preserved all keyboard shortcuts, and improved visual feedback through terminal-themed styling.