Skip to content

Add header/footer toolbar with page number button#111

Merged
hackerwins merged 1 commit into
mainfrom
feature/header-footer-toolbar
Apr 9, 2026
Merged

Add header/footer toolbar with page number button#111
hackerwins merged 1 commit into
mainfrom
feature/header-footer-toolbar

Conversation

@hackerwins

@hackerwins hackerwins commented Apr 9, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Collaborator

Summary

  • Show a simplified toolbar when editing header/footer regions (bold, italic, underline, colors, alignment)
  • Add dedicated "Page number" insert button with # icon
  • Add onEditContextChange callback to EditorAPI for reactive toolbar switching
  • Display "Header" / "Footer" label in toolbar to indicate current editing context

Test plan

  • Double-click header margin area → toolbar switches to header toolbar
  • Click "Page number" button → # placeholder inserted, renders as page number
  • Bold/Italic/Underline/Color/Alignment buttons work in header/footer
  • Click body or press Escape → toolbar reverts to full body toolbar
  • Verify on second page header as well

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Added edit context detection that tracks when you switch between editing body, header, or footer sections.
    • Toolbar now displays context-specific formatting options based on the current editing section.
    • Added page number insertion capability for header and footer editing.

@hackerwins @claude
Add header/footer-specific toolbar with page number button
de212f1 
Show a simplified toolbar when editing header/footer regions instead
of the full body toolbar. The header/footer toolbar includes basic
formatting (bold, italic, underline, colors, alignment) and a
dedicated "Page number" insert button. An onEditContextChange callback
on EditorAPI drives the toolbar switch reactively.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@github-actions

github-actions Bot commented Apr 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Verification: verify:self

Result: ✅ PASS in 113.8s

Lane Status Duration
sheets:build ✅ pass 13.3s
docs:build ✅ pass 6.8s
verify:fast ✅ pass 57.0s
frontend:build ✅ pass 15.5s
verify:frontend:chunks ✅ pass 0.3s
backend:build ✅ pass 4.5s
cli:build ✅ pass 1.8s
verify:entropy ✅ pass 14.5s

Verification: verify:integration

Result: ✅ PASS

@hackerwins
hackerwins merged commit e44ee15 into main Apr 9, 2026
3 checks passed
@hackerwins
hackerwins deleted the feature/header-footer-toolbar branch April 9, 2026 10:24
@coderabbitai

coderabbitai Bot commented Apr 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 42505e84-59a0-4abe-924e-7b2319009ee6

📥 Commits

Reviewing files that changed from the base of the PR and between 11c7fd8 and de212f1.

📒 Files selected for processing (4)
  • packages/docs/src/view/editor.ts
  • packages/docs/src/view/text-editor.ts
  • packages/frontend/src/app/docs/docs-detail.tsx
  • packages/frontend/src/app/docs/docs-formatting-toolbar.tsx
📝 Walkthrough

Walkthrough

This PR introduces an edit context tracking system for the document editor. When users switch between editing body, header, or footer sections, a callback mechanism notifies the frontend React component to update state and conditionally render a specialized toolbar UI for headers and footers.

Changes

Cohort / File(s) Summary
Editor Core API
packages/docs/src/view/editor.ts, packages/docs/src/view/text-editor.ts		 Added onEditContextChange() callback registration mechanism. TextEditor now tracks edit context changes and invokes registered callbacks when context differs from previous value. EditorAPI delegates to optional TextEditor instance.
Frontend State Integration
packages/frontend/src/app/docs/docs-detail.tsx		 Added editContext React state initialized to 'body'. UseEffect registers editor callback to update state when editing context changes. Passes context prop to toolbar.
Context-Aware Toolbar
packages/frontend/src/app/docs/docs-formatting-toolbar.tsx		 Extended to accept optional editContext prop. Added conditional rendering: header/footer contexts display specialized toolbar with context label, font-style toggles, color pickers, alignment controls, and page-number insertion button.

Sequence Diagram

sequenceDiagram
    participant User
    participant TextEditor
    participant EditorAPI
    participant DocsLayout as React Component
    participant Toolbar

    User->>TextEditor: Click in header/footer section
    TextEditor->>TextEditor: setEditContext('header'|'footer'|'body')
    alt Context changed
        TextEditor->>TextEditor: Invoke editContextChangeCallback
    end
    TextEditor->>EditorAPI: Callback notification via delegation
    EditorAPI->>DocsLayout: onEditContextChange callback fires
    DocsLayout->>DocsLayout: setEditContext(newContext)
    DocsLayout->>Toolbar: Re-render with editContext prop
    Toolbar->>Toolbar: Conditional render: show header/footer UI or body UI
    Toolbar->>User: Display context-appropriate toolbar
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • PR #84: Directly modifies packages/docs/src/view/editor.ts and EditorAPI delegation patterns, sharing the same code-level integration points for optional TextEditor behavior.

Poem

🐰 A rabbit hopped through headers tall,
Then footers deep, and body's call,
With context tracked at every click,
The toolbar shifts—a rabbit's trick!
Now page-numbers hop just right, ✨
In every section, oh what delight!

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/header-footer-toolbar

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.

@hackerwins hackerwins mentioned this pull request Apr 11, 2026
Merged
4 tasks
This was referenced Apr 12, 2026
Merged
Merged
This was referenced May 29, 2026
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hackerwins