feat: resolve the issue of the image toolbar border exceeding the limit after clicking on the image

[wuyiping0628]

…it after clicking on the image

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where custom image overlays could extend beyond their parent container boundaries, improving layout stability and preventing unwanted visual overflow.

[coderabbitai]

Walkthrough

The BlotFormatter.repositionOverlay method in the custom image editor module is modified to clamp the overlay element's width and height to the parent container's dimensions using Math.min(), preventing potential overflow while maintaining identical control flow.

Changes

Cohort / File(s)	Summary
Overlay Dimension Clamping packages/fluent-editor/src/modules/custom-image/blot-formatter.ts	Modified repositionOverlay to constrain overlay width and height to parent element bounds using Math.min(specRect.width, parentRect.width) and Math.min(specRect.height, parentRect.height) respectively.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A tiny tweak, so small and neat,
The overlay now fits so sweet,
No overflow shall come to pass,
Clamped with grace—oh what a class!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title clearly describes the main change: fixing an image toolbar border overflow issue by clamping overlay dimensions to parent constraints in the BlotFormatter component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch wyp/image-0313

📝 Coding Plan

• Generate coding plan for human review comments

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/fluent-editor/src/modules/custom-image/blot-formatter.ts`:
- Around line 133-134: The current clamp uses parentRect.width/height which can
overflow when the overlay is offset; change the clamps on those two lines to use
the remaining space from the overlay's current position: compute remainingWidth
= parentRect.width - (specRect.left - parentRect.left) and remainingHeight =
parentRect.height - (specRect.top - parentRect.top), then use
Math.min(specRect.width, Math.max(0, remainingWidth)) for width and
Math.min(specRect.height, Math.max(0, remainingHeight)) for height (reference
specRect and parentRect in blot-formatter.ts).

🪄 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: 76c3b102-84a4-4297-9189-c58876c315ba

📥 Commits

Reviewing files that changed from the base of the PR and between 270a8cd and f74b798.

📒 Files selected for processing (1)

• packages/fluent-editor/src/modules/custom-image/blot-formatter.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Clamp against remaining space after offset, not full parent size.

On Line 133 and Line 134, Math.min(..., parentRect.width/height) can still overflow when the overlay starts away from the parent’s left/top edge. Clamp using the remaining space from current position.

💡 Proposed fix

   Object.assign(this.overlay.style, {
     display: 'block',
-    left: `${specRect.left - parentRect.left - 1 + parent.scrollLeft}px`,
-    top: `${specRect.top - parentRect.top + parent.scrollTop}px`,
-    width: `${Math.min(specRect.width, parentRect.width)}px`,
-    height: `${Math.min(specRect.height, parentRect.height)}px`,
+    left: `${Math.max(specRect.left - parentRect.left - 1, 0) + parent.scrollLeft}px`,
+    top: `${Math.max(specRect.top - parentRect.top, 0) + parent.scrollTop}px`,
+    width: `${Math.max(
+      0,
+      Math.min(
+        specRect.width,
+        parentRect.width - Math.max(specRect.left - parentRect.left - 1, 0),
+      ),
+    )}px`,
+    height: `${Math.max(
+      0,
+      Math.min(
+        specRect.height,
+        parentRect.height - Math.max(specRect.top - parentRect.top, 0),
+      ),
+    )}px`,
   })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/fluent-editor/src/modules/custom-image/blot-formatter.ts` around
lines 133 - 134, The current clamp uses parentRect.width/height which can
overflow when the overlay is offset; change the clamps on those two lines to use
the remaining space from the overlay's current position: compute remainingWidth
= parentRect.width - (specRect.left - parentRect.left) and remainingHeight =
parentRect.height - (specRect.top - parentRect.top), then use
Math.min(specRect.width, Math.max(0, remainingWidth)) for width and
Math.min(specRect.height, Math.max(0, remainingHeight)) for height (reference
specRect and parentRect in blot-formatter.ts).