feat(core): floating image action panel in inspector#148
Merged
Conversation
Show a small floating toolbar below the inspector selection box when an image is selected, with quick-access Replace and Crop icons. Extract AssetPickerDialog into its own module and add an openReplace callback to the inspector context so the floating panel and the side panel share the same flow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds a reusable AssetPickerDialog (image selection/upload with slide/global scopes), a floating Replace/Crop action panel in the inspector overlay, provider-level openReplace/replaceTarget wiring that buffers edit ops on selection, and refactors the inspector panel to use the new dialog. ChangesImage Replace and Quick Actions
Sequence DiagramsequenceDiagram
participant User
participant ImageActionPanel
participant InspectorProvider
participant AssetPickerDialog
participant EditBuffer
User->>ImageActionPanel: click Replace
ImageActionPanel->>InspectorProvider: openReplace(anchor)
InspectorProvider->>InspectorProvider: set replaceTarget(anchor)
InspectorProvider->>AssetPickerDialog: render (slideId / scope)
User->>AssetPickerDialog: select or upload image
AssetPickerDialog->>InspectorProvider: onPick(asset, scope)
InspectorProvider->>EditBuffer: bufferOps(set-attr-asset, optional style ops)
InspectorProvider->>InspectorProvider: clear replaceTarget()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/inspector-image-quick-actions.md:
- Line 5: Update the changeset line that currently reads "Show a floating action
panel below the inspector selection box when an image is selected, with
quick-access Replace and Crop icons." to a present-tense descriptive sentence
(e.g., "Displays a floating action panel below the inspector selection box when
an image is selected, with quick-access Replace and Crop icons.") so the
one-line changeset uses present-tense description; edit the line containing the
original sentence to the new phrasing using the same wording scope.
In `@packages/core/src/app/components/inspector/inspect-overlay.tsx`:
- Around line 213-220: The ImageActionPanel is being mounted for any selected
element (rect && selectedAnchor) which leaves hidden but focusable buttons in
the DOM; change the render guard to mount ImageActionPanel only when the
selection is an image (e.g. add a check like selectedAnchor?.type === 'image' or
selectedAnchor?.kind === 'image' depending on the anchor shape used in your
code) so the component is not mounted for non-image selections; apply the same
conditional change to the other ImageActionPanel render sites in this file (the
block around lines 227-290) so invisible focusable controls are never present.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ac0641e2-5c4d-410d-bfae-1b28dc9dc8e2
📒 Files selected for processing (5)
.changeset/inspector-image-quick-actions.mdpackages/core/src/app/components/inspector/asset-picker-dialog.tsxpackages/core/src/app/components/inspector/inspect-overlay.tsxpackages/core/src/app/components/inspector/inspector-panel.tsxpackages/core/src/app/components/inspector/inspector-provider.tsx
| "@open-slide/core": minor | ||
| --- | ||
|
|
||
| Show a floating action panel below the inspector selection box when an image is selected, with quick-access Replace and Crop icons. |
There was a problem hiding this comment.
Use present-tense descriptive wording in the changeset line.
Line 5 reads like an imperative (“Show ...”) rather than a present-tense description. Please switch to descriptive present tense.
Suggested wording
-Show a floating action panel below the inspector selection box when an image is selected, with quick-access Replace and Crop icons.
+Displays a floating action panel below the inspector selection box for selected images with quick-access Replace and Crop icons.As per coding guidelines, "Changeset descriptions must be short and direct: one line, present-tense, describing what changed from a user's perspective. No paragraphs, no rationale, no 'this PR…'."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Show a floating action panel below the inspector selection box when an image is selected, with quick-access Replace and Crop icons. | |
| Displays a floating action panel below the inspector selection box for selected images with quick-access Replace and Crop icons. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.changeset/inspector-image-quick-actions.md at line 5, Update the changeset
line that currently reads "Show a floating action panel below the inspector
selection box when an image is selected, with quick-access Replace and Crop
icons." to a present-tense descriptive sentence (e.g., "Displays a floating
action panel below the inspector selection box when an image is selected, with
quick-access Replace and Crop icons.") so the one-line changeset uses
present-tense description; edit the line containing the original sentence to the
new phrasing using the same wording scope.
…quick-actions # Conflicts: # packages/core/src/app/components/inspector/inspect-overlay.tsx # packages/core/src/app/components/inspector/inspector-provider.tsx
Tag tooltip content with data-inspector-ui (Radix portals it outside the overlay) and clear hover when the pointer enters inspector UI, matching the existing click/dblclick early-returns. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/core/src/app/components/inspector/inspect-overlay.tsx (1)
232-241: 💤 Low valueConsider tightening
anchorprop type toHTMLImageElement.Since
ImageActionPanelis only rendered whenimageAnchor(anHTMLImageElement) exists (line 218), the prop type could beHTMLImageElementinstead ofHTMLElement. This would eliminate the cast on line 285.Proposed type tightening
function ImageActionPanel({ anchor, rect, visible, transition, }: { - anchor: HTMLElement; + anchor: HTMLImageElement; rect: RelRect; visible: boolean; transition: string; }) {And remove the cast:
- openCrop(anchor as HTMLImageElement); + openCrop(anchor);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/app/components/inspector/inspect-overlay.tsx` around lines 232 - 241, Tighten the ImageActionPanel prop type by changing the anchor parameter from HTMLElement to HTMLImageElement and remove the runtime cast where anchor is used (the cast referencing imageAnchor usage). Update the ImageActionPanel function signature and any call sites (e.g., where imageAnchor is passed) so the prop is typed as HTMLImageElement, ensuring TypeScript recognizes image-specific properties without casting.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/core/src/app/components/inspector/inspect-overlay.tsx`:
- Around line 232-241: Tighten the ImageActionPanel prop type by changing the
anchor parameter from HTMLElement to HTMLImageElement and remove the runtime
cast where anchor is used (the cast referencing imageAnchor usage). Update the
ImageActionPanel function signature and any call sites (e.g., where imageAnchor
is passed) so the prop is typed as HTMLImageElement, ensuring TypeScript
recognizes image-specific properties without casting.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4f6c2f67-def1-4727-8a63-540f6c195167
📒 Files selected for processing (3)
packages/core/src/app/components/inspector/inspect-overlay.tsxpackages/core/src/app/components/inspector/inspector-panel.tsxpackages/core/src/app/components/inspector/inspector-provider.tsx
Merged
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
<img>, with quick-access Replace and Crop icon buttons (tooltips on hover).AssetPickerDialoginto its own module (asset-picker-dialog.tsx) so it can be mounted as a singleton at the provider level — mirrors howImageCropDialogis already wired up.openReplace(anchor)to the inspector context. The floating toolbar and the side panel'sImageFieldnow share the same flow (and the sameobjectFit/objectPositiondefaults applied on first pick).Why
Replace and Crop are the two image actions users reach for most. Surfacing them inline next to the selection — instead of forcing a trip to the side panel — makes the inspector feel a lot more direct.
Notes for reviewers
InspectOverlay, uses the same morph transition as the selection box, and carriesdata-inspector-uiso clicks on it don't bubble back into the inspector's selection handler.ImageFieldlost its localuseState/AssetPickerDialog— it now callsopenReplace(anchor)from context. The asset-pick handling (path resolution, default object-fit/position) moved into the provider unchanged.t.inspector.replaceandt.inspector.crop.Test plan
pnpm typecheck,pnpm check,pnpm testall green.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes
Refactor