Skip to content

Feature/sticky toolbar - #1511

Open
jvjvjv wants to merge 2 commits into
austintoddj:mainfrom
jvjvjv:feature/StickyToolbar
Open

jvjvjv wants to merge 2 commits into
austintoddj:mainfrom
jvjvjv:feature/StickyToolbar

Conversation

@jvjvjv

@jvjvjv jvjvjv commented Sep 11, 2026 •

Copy link
Copy Markdown

Re: #1510

Summary

This pull request enhances the post body editor by making the formatting toolbar sticky (pinned) at the top while scrolling, and adds comprehensive end-to-end tests to verify this behavior in both normal and focus modes. The main changes include UI updates for the sticky toolbar, new Playwright tests, and supporting test helpers.

Sticky toolbar implementation and styling:

  • Updated the EditorToolbar container in PostBodyEditor.tsx to use position: sticky, add a background, rounded corners, and z-index to ensure it stays pinned at the top of the editor during scrolling.
  • Slightly adjusted the main editor surface styling to remove redundant overflow handling, aligning with the new sticky toolbar behavior.

Automated end-to-end testing:

  • An AI agent created a new Playwright test suite (editor-toolbar.spec.ts), used to verify that the toolbar remains pinned while scrolling the post body, both in standard and focus modes.
  • AI also extended the test helpers in helpers/posts.ts to support filling the editor with enough content to enable scrolling, entering/exiting focus mode, and asserting that the toolbar remains pinned and interactive during scroll events.
  • A human reviewed the tests and ensured they all passed.

Test Results

Existing issues remain untouched.

jasonv@Holmium:~/Code/@austintoddj/canvas$ npm run typecheck; npm run lint

> typecheck
> node node_modules/typescript-7/bin/tsc --noEmit


> lint
> eslint .


/home/jasonv/Code/@austintoddj/canvas/resources/js/components/users/AuthorProfileFields.tsx
  106:58  warning  React Hook useMemo has an unnecessary dependency: 't'. Either exclude it or remove the dependency array  react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

jasonv@Holmium:~/Code/@austintoddj/canvas$ npm test

[tests themselves omitted]

 Test Files  55 passed (55)
      Tests  199 passed (199)
   Start at  12:42:48
   Duration  3.31s (transform 9.61s, setup 10.98s, import 19.63s, tests 3.82s, environment 14.46s)

No composer tests were run since this was a UI-specific change.

image

@jvjvjv

jvjvjv commented Sep 11, 2026

Copy link
Copy Markdown
Author

tests / Laravel 13 on PHP 8.4 failure appears unrelated to work performed
tests / PHP coverage failure appears unrelated to work performed

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant