docs: Add Prettier on AI Actions problem analysis & solution report by 2witstudios · Pull Request #371 · 2witstudios/PageSpace

2witstudios · 2026-02-04T04:25:22Z

Summary

This PR resolves issues with Prettier formatting in AI action workflows. The previous client-side Prettier formatting caused data loss (trailing spaces), visual disruption, and race conditions between user editing and AI operations. This has been replaced with a minimal addLineBreaksForAI() utility.

Key Changes

Core Solution: `addLineBreaksForAI()` Utility

Created /apps/web/src/lib/editor/line-breaks.ts - a minimal line-break inserter that:

ONLY adds newlines between block HTML tags
NEVER removes trailing spaces or any content
Preserves all user data during AI editing

What This Fixes

Trailing spaces preserved - User stops mid-thought, space stays
No visual disruption - No reformatting at 2500ms intervals
AI line editing reliable - Consistent line numbers for replace_lines

Files Changed

File	Changes
`lib/editor/line-breaks.ts`	NEW - Core utility with 22 tests
`lib/ai/tools/page-read-tools.ts`	Now uses `addLineBreaksForAI()`
`lib/ai/tools/page-write-tools.ts`	Now uses `addLineBreaksForAI()`
`app/api/mcp/documents/route.ts`	Replaced Prettier with `addLineBreaksForAI()`
`components/editors/RichEditor.tsx`	Removed debounced formatting (-35 lines)
`components/.../DocumentView.tsx`	Removed `handleFormatChange` (-8 lines)
`hooks/useDocument.ts`	Removed `updateContentSilently` (-12 lines)
`lib/editor/prettier.ts`	DELETED
`docs/.../prettier-on-ai-actions-report.md`	Updated as complete

Test Results

82 tests passing (22 new + 60 existing page tools tests)

Documentation

Full problem analysis and solution report available in docs/3.0-guides-and-tools/prettier-on-ai-actions-report.md

Summary by CodeRabbit

New Features
- Added a lightweight line-break formatter to improve AI-assisted editing workflows.
Improvements
- Formatting now inserts consistent line breaks and is applied where AI reads/writes content.
- Formatting changes immediately mark content as modified; silent background updates removed.
- Removed client-side debounced auto-format; edits update immediately.
Tests
- Added comprehensive tests covering line-break formatting and edge cases.

Comprehensive analysis of the formatting issues caused by client-side Prettier running during user editing sessions. Documents: - Core problem: Prettier deletes trailing spaces (user data loss) - All impacted AI tools (read_page, replace_lines, MCP operations) - All impacted UI surfaces (RichEditor, DocumentView, stores) - Data flow diagrams (current vs proposed) - Solution: Replace Prettier with minimal line-break inserter - Implementation plan with 5 phases - Testing strategy and rollback plan https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Expands the report with: - Appendix B: Tests requiring updates (MCP security test, tool tests) - Appendix C: Documentation requiring updates (5 doc files) - Appendix D: RichEditor.tsx specific line removals - Appendix E: MCP documents route specific changes - New test scenarios for addLineBreaksForAI https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Confirms that tool call renderers (RichContentRenderer, RichDiffRenderer, ToolCallRenderer, CompactToolCallRenderer) require NO changes: - HTML rendering ignores extra newlines (whitespace collapsed) - Line-based diffs actually improve with consistent newlines - Line number stripping already handles prefixed content Reorganized appendices: A (renderers), B (code), C (tests), D (docs), E (RichEditor), F (MCP route) https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Replaces Prettier for AI tool usage. Key differences: - ONLY adds newlines between block tags - NEVER removes trailing spaces (preserves user's mid-thought content) - Deterministic and fast (regex-based, not full HTML parser) - Idempotent (safe to run multiple times) Includes comprehensive test suite (22 tests) covering: - Trailing/leading space preservation - Block-level tag handling (p, div, h1-h6, ul, ol, li, table, etc.) - Inline element preservation - Nested structures - Edge cases (null, undefined, empty, plain text) - Idempotency - Real-world TipTap content https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Formats content with line breaks before returning to AI, ensuring consistent line numbers for replace_lines operations. The formatting preserves all user content including trailing spaces. https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Formats content with line breaks before applying line replacement, ensuring consistent line numbers match what read_page returns. Preserves all user content including trailing spaces. https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

Remove client-side Prettier formatting that was causing data loss: - Trailing spaces deleted during editing - Visual disruption at 2500ms intervals - Race conditions between formatting and saving Solution: - New addLineBreaksForAI() utility that ONLY adds newlines, never removes content - Applied in AI tools (read_page, replace_lines) and MCP routes - Client-side formatting completely removed from RichEditor Changes: - Create lib/editor/line-breaks.ts with comprehensive tests - Update page-read-tools.ts and page-write-tools.ts to use addLineBreaksForAI - Replace formatHtml in MCP documents route with addLineBreaksForAI - Remove debouncedFormat, onFormatChange, updateContentSilently - Delete unused lib/editor/prettier.ts https://claude.ai/code/session_01V4nPAS89ocPuHtjevTdMFn

chatgpt-codex-connector · 2026-02-04T04:25:27Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

coderabbitai · 2026-02-04T04:25:51Z

📝 Walkthrough

Walkthrough

Replaces Prettier-based HTML formatting with a new addLineBreaksForAI utility used across AI tools and MCP route; removes client-side debounced formatting and silent content updates, simplifying editor update flows and adjusting hook/component return values.

Changes

Cohort / File(s)	Summary
Prettier Module Removed `apps/web/src/lib/editor/prettier.ts`	Deleted the Prettier-based `formatHtml` module and its helper export.
Line Breaks Utility & Tests `apps/web/src/lib/editor/line-breaks.ts`, `apps/web/src/lib/editor/__tests__/line-breaks.test.ts`	Added `addLineBreaksForAI(html: string)` and comprehensive tests covering block/inline handling, idempotency, edge cases, and real TipTap samples.
MCP Route Changes `apps/web/src/app/api/mcp/documents/route.ts`	Replaced `formatHtml` usage and Prettier import with `addLineBreaksForAI` for replace/insert/delete operations; removed duplicate formatter.
Editor & Formatting Removal `apps/web/src/components/editors/RichEditor.tsx`	Removed `onFormatChange` prop and all debounced formatting logic; `onUpdate` now updates content immediately.
Silent Update Removal `apps/web/src/hooks/useDocument.ts`, `apps/web/src/components/layout/middle-content/page-views/document/DocumentView.tsx`	Removed `updateContentSilently` and `handleFormatChange` paths; hook/component return shapes no longer include silent-update helpers.
AI Tools Integration `apps/web/src/lib/ai/tools/page-read-tools.ts`, `apps/web/src/lib/ai/tools/page-write-tools.ts`	Now call `addLineBreaksForAI()` before splitting content into lines for AI read/write flows.
Tests / Mocks Updated `apps/web/src/app/api/mcp/documents/__tests__/route.security.test.ts`	Removed mock of the Prettier module from the MCP route security tests.
Docs & Manifest `docs/3.0-guides-and-tools/prettier-on-ai-actions-report.md`, `apps/web/package.json`	Documented the Prettier → line-break utility migration; removed `prettier` (and `radix-ui`) from `apps/web/package.json`.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RichEditor
    participant DocumentView
    participant useDocument
    participant ContentStorage

    rect rgba(200, 100, 100, 0.5)
    Note over RichEditor,ContentStorage: OLD: Debounced Formatting Flow
    User->>RichEditor: Edit content
    RichEditor->>RichEditor: start debounce timer
    RichEditor->>DocumentView: onFormatChange (delayed)
    DocumentView->>useDocument: handleFormatChange
    useDocument->>ContentStorage: updateContentSilently (no dirty flag)
    end

    rect rgba(100, 150, 100, 0.5)
    Note over RichEditor,ContentStorage: NEW: Direct Update Flow
    User->>RichEditor: Edit content
    RichEditor->>DocumentView: onUpdate (immediate)
    DocumentView->>useDocument: onChange (direct)
    useDocument->>ContentStorage: update (marks dirty)
    end

sequenceDiagram
    participant AITools as AI Read/Write Tools
    participant PageContent as Page Content
    participant LineBreaks as addLineBreaksForAI
    participant AIProcessor as AI Processor
    participant MCP as MCP Route

    rect rgba(100, 150, 200, 0.5)
    Note over AITools,MCP: Content Processing with Line Breaks

    AITools->>PageContent: fetch page.content
    PageContent-->>AITools: raw HTML content
    AITools->>LineBreaks: addLineBreaksForAI(content)
    LineBreaks-->>AITools: formatted content (line breaks around blocks)
    AITools->>AIProcessor: split into lines & process

    MCP->>PageContent: fetch for document operation
    PageContent-->>MCP: raw HTML
    MCP->>LineBreaks: addLineBreaksForAI(newLines.join('\n'))
    LineBreaks-->>MCP: formatted content
    MCP->>AIProcessor: apply operation (replace/insert/delete)
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

feat(ai): render HTML content in AI stream instead of raw JSON #307: Modifies page-read-tools.ts and page-write-tools.ts (changes returned payloads); intersects with this PR's AI tools changes.
Refactor/replace path with title in tools #111: Alters AI page tools' input/output schema; touches the same read/write tooling updated here.

Poem

🐰 I hopped through tags and spaces bright,
I nudged the lines to clearer light,
No noisy Prettier in my trail,
Just gentle breaks to help AI sail,
A rabbit's tweak — simple and right!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title describes adding documentation about Prettier on AI Actions, but the actual changeset involves removing Prettier entirely and replacing it with addLineBreaksForAI.	Update the title to reflect the main change: something like 'Replace Prettier formatting with addLineBreaksForAI utility for AI actions' or 'Remove client-side Prettier and add minimal line-break utility for AI editing'.
Docstring Coverage	⚠️ Warning	Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
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

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch claude/prettier-on-ai-actions-Mcxb2

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

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

claude added 7 commits February 4, 2026 03:45

2witstudios added 3 commits February 3, 2026 22:46

[web] Preserve non-destructive AI line breaks

5f5144f

[web] Remove direct prettier dependency

be962cd

Merge branch 'master' into claude/prettier-on-ai-actions-Mcxb2

ee6c988

2witstudios merged commit 673ca1d into master Feb 4, 2026
3 checks passed

2witstudios deleted the claude/prettier-on-ai-actions-Mcxb2 branch February 6, 2026 01:27

coderabbitai Bot mentioned this pull request Feb 9, 2026

Add dual content mode: markdown and HTML for document pages #512

Merged

7 tasks

Navigation Menu

Repository navigation

docs: Add Prettier on AI Actions problem analysis & solution report - #371

docs: Add Prettier on AI Actions problem analysis & solution report#371
2witstudios merged 10 commits into
masterfrom
claude/prettier-on-ai-actions-Mcxb2

2witstudios commented Feb 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Feb 4, 2026

Uh oh!

coderabbitai Bot commented Feb 4, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

2witstudios commented Feb 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Changes

Core Solution: addLineBreaksForAI() Utility

What This Fixes

Files Changed

Test Results

Documentation

Summary by CodeRabbit

Uh oh!

chatgpt-codex-connector Bot commented Feb 4, 2026

Uh oh!

coderabbitai Bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

2witstudios commented Feb 4, 2026 •

edited by coderabbitai Bot

Loading

Core Solution: `addLineBreaksForAI()` Utility

coderabbitai Bot commented Feb 4, 2026 •

edited

Loading