[lexical-playground] Fix bug: Insert an image inside another image's caption (#6109) #17
Conversation
![local-dev-korbit-ai-mentor[bot]](https://avatars.githubusercontent.com/in/318591?s=60&v=4){kind=small}
![[local-dev] Korbit - AI Mentor](https://avatars.githubusercontent.com/in/318591?s=40&u=4153787aed90096cc5d05c9c38a439007e524086&v=4){kind=avatar}
|
Clone of the PR facebook/lexical#6230 |
|
My review is in progress 📖 - I will have feedback for you in a few minutes! |
WalkthroughThe recent updates enhance the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ToolbarPlugin
participant ImageComponent
participant ImageNode
User->>ImageComponent: Add image with caption
ImageComponent->>ImageNode: Initialize with caption
ImageNode->>ImageNode: Check if caption is provided
alt No caption
ImageNode->>ImageNode: Create editor with empty nodes
end
ImageNode->>ToolbarPlugin: Update state for caption presence
ToolbarPlugin->>User: Display appropriate toolbar options
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
| this.__caption = | ||
| caption || | ||
| createEditor({ | ||
| nodes: [], | ||
| }); |
There was a problem hiding this comment.
The changes to the caption editor initialization might affect its functionality. You've added a 'nodes' parameter set to an empty array when creating the editor. Is this intentional? If so, could you explain the reasoning behind this change? If not, consider removing the 'nodes' parameter or initializing it with the appropriate node types for the caption editor.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
| export function $isEditorIsNestedEditor(editor: LexicalEditor): boolean { | ||
| return editor._parentEditor !== null; | ||
| } |
There was a problem hiding this comment.
The function $isEditorIsNestedEditor is correctly implemented, but its name is redundant and could be improved. Consider renaming it to $isNestedEditor for better readability and consistency with Lexical naming conventions. The function body itself is correct, checking if the editor has a parent editor.
Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.
|
/review |
PR Reviewer Guide 🔍(Review updated until commit 32bfe35)
|
github-actions
bot
added
Review effort [1-5]: 4
and removed
Review effort [1-5]: 3
labels
|
Persistent review updated to latest commit 32bfe35 |
codiumai-pr-agent-free
bot
added
Review effort [1-5]: 3
and removed
Review effort [1-5]: 4
labels
|
Persistent review updated to latest commit 32bfe35 |
|
@coderabbitai full review |
PR Code Suggestions ✨
|
Actions performedFull review triggered. |
![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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- packages/lexical-playground/src/nodes/ImageComponent.tsx (4 hunks)
- packages/lexical-playground/src/nodes/ImageNode.tsx (1 hunks)
- packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx (9 hunks)
- packages/lexical-utils/src/index.ts (1 hunks)
Additional comments not posted (2)
packages/lexical-playground/src/nodes/ImageComponent.tsx (1)
18-19: Enhancements to LexicalNestedComposer.The inclusion of additional node types such as
HashtagNode,LinkNode, andEmojiNodeenhances the semantic capabilities of the editor, allowing for richer content in image captions. This aligns well with the PR's objective to improve user interaction and content creation.Also applies to: 45-49, 66-68, 426-437
packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx (1)
549-549: Improved contextual toolbar functionality.The introduction of
isImageCaptionstate and the conditional rendering of toolbar elements enhance the toolbar's contextual awareness, ensuring that users have access to relevant options based on the editor's context. This improves the user experience by preventing unnecessary options from cluttering the interface when editing image captions.Also applies to: 554-564, 672-672, 686-691, 861-862, 973-985, 1064-1232
|
Zero comments from coderabbit |
Context:
Now users are able to insert an image/GIF/table etc, into another image's caption.
Solution:
This PR limits what the users can insert into the image caption and its nested editor. Excluding some controls from the toolbar if the selection is inside the nested editor that belongs to the image caption.
Closes #6109
Test plan
Before
before-image-caption.mov
After
image-caption.mov
Description by Korbit AI
Note
This feature is in early access. You can enable or disable it in the Korbit Console.
What change is being made?
Fix the bug that allows inserting an image inside another image's caption by updating the
ImageComponent,ImageNode, andToolbarPlugincomponents to handle nested editors correctly.Why are these changes being made?
This change addresses a bug where users could inadvertently insert images within the caption of another image, leading to unexpected behavior and layout issues. The solution involves adding necessary nodes to the caption editor and updating the toolbar to recognize when it is operating within a nested editor context, ensuring proper functionality and user experience.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation