Conversation
WalkthroughTooltip imports in editor components were switched from @plane/propel/tooltip to @plane/ui, and the editor package removed @plane/propel from dependencies. No functional or public API changes in the components. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes editor tooltip imports by migrating from @plane/propel/tooltip to @plane/ui across multiple editor components and removing the propel dependency.
- Updated tooltip imports in 4 editor components (image toolbar and code block)
- Removed
@plane/propeldependency from package.json
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx | Updated Tooltip import from propel to ui package |
| packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx | Updated Tooltip import from propel to ui package |
| packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx | Updated Tooltip import from propel to ui package |
| packages/editor/src/core/extensions/code/code-block-node-view.tsx | Updated Tooltip import from propel to ui package |
| packages/editor/package.json | Removed @plane/propel dependency |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx (1)
16-16: Harden window.open against tabnabbingOpen the new tab without exposing
window.opener.- onClick={() => window.open(src, "_blank")} + onClick={() => { + const w = window.open(src, "_blank", "noopener,noreferrer"); + if (w) w.opener = null; + }}(Optional) If
srccan be user-influenced, validate allowed protocols (http:,https:,blob:,data:) before opening.
🧹 Nitpick comments (4)
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx (2)
35-42: Add ARIA for the alignment menu triggerExpose state to assistive tech and link the trigger to the menu.
- <button + <button type="button" className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors" - onClick={() => setIsDropdownOpen((prev) => !prev)} + onClick={() => setIsDropdownOpen((prev) => !prev)} + aria-haspopup="menu" + aria-expanded={isDropdownOpen} + aria-controls="image-align-menu" + aria-label="Align image" >
45-60: Add roles and selection state for options; provide non-tooltip fallback on touchImprove a11y for the menu and options; ensure discoverability when tooltips are disabled.
- {isDropdownOpen && ( - <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded"> + {isDropdownOpen && ( + <div + id="image-align-menu" + role="menu" + className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded" + > {IMAGE_ALIGNMENT_OPTIONS.map((option) => ( - <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}> + <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}> <button type="button" className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors" + role="menuitemradio" + aria-checked={option.value === activeAlignment} + aria-label={option.label} + title={isTouchDevice ? option.label : undefined} onClick={() => { handleChange(option.value); setIsDropdownOpen(false); }} > <option.icon className="size-3" /> </button> </Tooltip> ))} </div> )}packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx (1)
43-54: Minor a11y: indicate dialog intent on the triggerAdvertise that this opens a modal/dialog, and reflect state.
- <button + <button type="button" onClick={(e) => { e.preventDefault(); e.stopPropagation(); setIsFullScreenEnabled(true); }} className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors" aria-label="View image in full screen" + aria-haspopup="dialog" + aria-expanded={isFullScreenEnabled} + aria-controls="image-fullscreen-modal" >Also ensure
ImageFullScreenModalrenders withrole="dialog"andaria-modal="true", focuses an element on open, and restores focus on close.packages/editor/src/core/extensions/code/code-block-node-view.tsx (1)
40-56: Add accessible name and cleanup timer for copy button
- Provide an aria-label so the icon-only control is announced.
- Clear the timeout on unmount to avoid lingering timers.
- <button + <button type="button" className={cn( "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-custom-background-80 border border-custom-border-200 transition duration-150 ease-in-out backdrop-blur-sm", { "bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied, } )} onClick={copyToClipboard} + aria-label={copied ? "Copied" : "Copy code"} >Outside this hunk, add a cleanup for the timer:
// add near other hooks const timeoutRef = useRef<number | null>(null); useEffect(() => () => { if (timeoutRef.current) window.clearTimeout(timeoutRef.current); }, []); // in copyToClipboard, replace setTimeout with: timeoutRef.current = window.setTimeout(() => setCopied(false), 1000);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
packages/editor/package.json(0 hunks)packages/editor/src/core/extensions/code/code-block-node-view.tsx(1 hunks)packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx(1 hunks)packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx(1 hunks)packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- packages/editor/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx (2)
14-21: LGTM: accessible controlGood: explicit aria-label on the icon-only button and clear tooltip copy.
3-3: Confirm Tooltip API parity
Verify that@plane/uiexportsTooltipwith the sametooltipContentanddisabledprops as the previous@plane/propel/tooltipimplementation to avoid any silent UI regressions.packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx (1)
5-5: Tooltip supportsdisabledandtooltipContent
TheTooltipcomponent’s props include bothdisabledandtooltipContentas defined inITooltipProps, so no changes are needed.packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx (1)
4-4: Validate Tooltip API compatibility
Confirm that props passed to<Tooltip>inpackages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsxmatch the current@plane/uiAPI.packages/editor/src/core/extensions/code/code-block-node-view.tsx (1)
10-10: tooltipContent prop is correct Confirmed thatITooltipPropsin@plane/uidefines atooltipContentprop. No changes needed.
Summary by CodeRabbit