Repository navigation
fix: format action now reformats Mermaid source and diagram - #132
Conversation
|
🚅 Deployed to the livemaid-pr-132 environment in livemaid
|
|
Warning Review limit reached
Next review available in: 41 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe editor now delegates Mermaid formatting to a shared utility. The utility preserves front matter, normalizes whitespace, formats supported structures, and reports status. The editor applies changes through Monaco and displays feedback. Project guidance and TypeScript configuration were also updated. ChangesMermaid formatting flow
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant EditorCodePanel
participant formatMermaidSource
participant Monaco
participant ParentState
participant Toasts
EditorCodePanel->>formatMermaidSource: Pass Mermaid source
formatMermaidSource-->>EditorCodePanel: Return formatted source and status
EditorCodePanel->>Monaco: Apply undoable edit
EditorCodePanel->>ParentState: Update source state
EditorCodePanel->>Toasts: Show formatting result
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
peter6055
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
src/lib/mermaid-format.ts (2)
129-143: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSimplify the depth computation; two branches are dead or redundant.
- Line 130:
stripped.startsWith("%%{")is unreachable. Lines 115-118 already handle directives andcontinue.- Lines 138-142: the
endbranch and the fallback branch compute the same expression,base + braceDepth + endBlockDepth.♻️ Proposed simplification
- let depth: number; - if (isDecl || stripped.startsWith("%%{")) { - depth = 0; - } else { - const base = seenDiagramDecl ? 1 : 0; - if (BLOCK_SAME.has(firstWord)) { - depth = base + braceDepth + Math.max(0, endBlockDepth - 1); - } else if (stripped === "}") { - depth = base + braceDepth; - } else if (firstWord === "end") { - depth = base + braceDepth + endBlockDepth; - } else { - depth = base + braceDepth + endBlockDepth; - } - } + let depth: number; + if (isDecl) { + depth = 0; + } else { + const base = seenDiagramDecl ? 1 : 0; + if (BLOCK_SAME.has(firstWord)) { + depth = base + braceDepth + Math.max(0, endBlockDepth - 1); + } else if (stripped === "}") { + depth = base + braceDepth; + } else { + depth = base + braceDepth + endBlockDepth; + } + }🤖 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 `@src/lib/mermaid-format.ts` around lines 129 - 143, In the depth computation around the directive handling and BLOCK_SAME checks, remove the unreachable stripped.startsWith("%%{") condition from the declaration branch, since directives already continue earlier. Merge the firstWord === "end" branch with the identical fallback expression while preserving the existing BLOCK_SAME and closing-brace cases.
176-183: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winThe
skipped-indent-sensitivestatus forces the editor to duplicate the apply path.statusencodes only "structure was skipped" and not "content changed", so the caller must re-derive the change withresult.formatted !== codeand repeat the whole Monaco edit sequence in a second branch.
src/lib/mermaid-format.ts#L176-L183: return"changed"or"unchanged"in the indent-sensitive branch as well, and report the skip through a separate boolean field onMermaidFormatResult.src/components/editor/EditorCodePanel.tsx#L103-L132: collapse the two identical Monaco edit blocks into one apply path driven bystatus === "changed", then show the skip toast from the new boolean field.🤖 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 `@src/lib/mermaid-format.ts` around lines 176 - 183, The indent-sensitive result in src/lib/mermaid-format.ts#L176-L183 must distinguish content changes from whether formatting was skipped: return status "changed" or "unchanged" and add a separate boolean skip field to MermaidFormatResult. In src/components/editor/EditorCodePanel.tsx#L103-L132, use status === "changed" for one shared Monaco apply path and display the skip toast based on the new boolean field.
🤖 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 `@src/components/editor/EditorCodePanel.tsx`:
- Around line 109-112: In both format edit blocks in the editor formatting flow,
add a trailing editor.pushUndoStop() immediately after executeEdits completes.
Keep the existing leading undo stop so each formatting operation remains one
undo unit and cannot merge with the next user keystroke.
In `@src/lib/mermaid-format.ts`:
- Around line 185-192: Preserve the input document’s trailing newline in the
formatting flow around collapseBlankLines and the formatted comparison. Detect
whether code ends with "\n", restore that newline after joining reformatted
lines, and compare the resulting formatted value so already-formatted
newline-terminated documents remain unchanged.
- Around line 16-27: Add "box" to the BLOCK_OPEN set in mermaid-format.ts so
sequence-diagram box...end groups increase and decrease block depth correctly.
- Around line 78-87: The declaration detection in isDiagramDeclaration must
recognize all supported Mermaid diagram types without losing body indentation,
including flowchart-elk, kanban, packet/packet-beta, radar/radar-beta,
treemap/treemap-beta, and zenuml. Prefer deriving the result from
determineDiagramType, or otherwise update the matching so the first non-header,
non-comment Mermaid line is treated as the declaration while preserving existing
exclusions.
In `@tsconfig.json`:
- Around line 38-39: Remove the two absolute, machine-specific
temporary-directory entries from the TypeScript configuration’s include list,
leaving the existing project-local Next.js generated type paths intact. Do not
replace them with another root-specific path; if temporary app types require
checking, configure them through that app’s own tsconfig.json.
---
Nitpick comments:
In `@src/lib/mermaid-format.ts`:
- Around line 129-143: In the depth computation around the directive handling
and BLOCK_SAME checks, remove the unreachable stripped.startsWith("%%{")
condition from the declaration branch, since directives already continue
earlier. Merge the firstWord === "end" branch with the identical fallback
expression while preserving the existing BLOCK_SAME and closing-brace cases.
- Around line 176-183: The indent-sensitive result in
src/lib/mermaid-format.ts#L176-L183 must distinguish content changes from
whether formatting was skipped: return status "changed" or "unchanged" and add a
separate boolean skip field to MermaidFormatResult. In
src/components/editor/EditorCodePanel.tsx#L103-L132, use status === "changed"
for one shared Monaco apply path and display the skip toast based on the new
boolean field.
🪄 Autofix
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: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9039622f-d790-4731-a86e-1b5f554686db
📒 Files selected for processing (4)
AGENTS.mdsrc/components/editor/EditorCodePanel.tsxsrc/lib/mermaid-format.tstsconfig.json
- Add box to BLOCK_OPEN so sequence diagram box...end groups indent correctly - Recognize all supported diagram declarations (flowchart-elk, kanban, packet, radar, treemap, zenuml, C4) so body indentation is not dropped - Simplify depth computation (drop unreachable directive branch, merge the identical end/fallback branches) - Refactor status model: report changed/unchanged plus a separate skippedIndentSensitive flag; collapse the duplicated Monaco apply path - Preserve the input document's trailing newline so already-formatted newline-terminated documents stay unchanged - Remove machine-specific temp-directory entries from tsconfig.json include - Add unit tests covering all of the above
|
Addressed all CodeRabbit review feedback in Review-body nitpicks
Pre-merge check: Out of Scope Changes
Verification (also noted in each resolved thread): |
This branch was successfully deployed
1 participant
Closes #131
Problem
The editor's Format toolbar action did not reformat Mermaid source or the rendered diagram, so clicking Format produced no visible result for nested or indent-sensitive diagrams.
Change
src/lib/mermaid-format.ts) with no new runtime dependency:end-blocks (subgraph, loop, alt, opt, par, critical, break, rect) and brace bodies (class, state, namespace, ER)EditorCodePanel.tsxthrough MonacoexecuteEdits(undoable, single undo step) and emit toasts: "Code formatted", "Already formatted", or a skip explanation.Verification
npm run prepushgreen: typecheck, lint, prettier check, 147 unit tests, production buildtmp/format-131/)Summary by CodeRabbit
New Features
Bug Fixes