[COMMS-909] First headline not rendered correctly when opening a document

[judithroth]

The problem only applies to a headline that is created in the very first line in a new document (and this line not heavily edited before or after). It always occurred with a headline in a div with data-id="initialBlockId". The data-id can be removed by BlockNote when editing, so it seemed like this bug was only triggered sometimes, while in fact it was very deterministic.

Details to the actual bug (which needs to be adressed in BlockNote) are here: TypeCellOS/BlockNote#3013

Ticket

https://community.openproject.org/wp/COMMS-909

What are you trying to accomplish?

Workaround a bug that would wrongly render the first headline as paragraph in certain circumstances, until the first user interaction, which then would "expand" the headline to its actual size (see screencast attached to the work package: https://community.openproject.org/api/v3/attachments/922948/content )

What approach did you choose and why?

Since the bug is deeply in BlockNote / yjs collaboration, it's out of scope to apply a real fix inside OpenProject. Rather, the symptom is fixed by forcing a refresh of the affected block after document load (instead of waiting for the first user interaction, which would then also trigger the refresh).

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[github-actions]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/COMMS-909
• Work package version: not set
• Core version: 17.9.0

Please make sure that:

• The work package version OR your pull request target branch is correct

[Copilot]

Pull request overview

This PR addresses a BlockNote/Yjs collaboration bootstrap race where the very first heading block in a persisted document can initially render at paragraph size until the next user interaction. It introduces a client-side refresh on load and adds a feature spec to prevent regressions.

Changes:

• Add a useLayoutEffect workaround to force-refresh the initial block when its id is initialBlockId.
• Add a Selenium feature spec that reproduces the “first heading renders as paragraph until click” issue and asserts correct rendering after reload.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
modules/documents/spec/features/block_note_editor_spec.rb	Adds a feature spec verifying the first heading renders at full size immediately after reload (COMMS-909).
frontend/src/react/components/OpBlockNoteEditor.tsx	Forces a one-time initial block refresh on mount to trigger correct heading rendering.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Warning

Flaky specs

• rspec ./spec/features/workflows/edit_spec.rb[1:5:6]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #24946, linked for reference only):

- `rspec ./spec/features/workflows/edit_spec.rb[1:5:6]`

Treat this as a standalone task, unrelated to PR #24946. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #24946 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @judithroth to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @judithroth, and request a review from @judithroth.
On every commit, set @judithroth as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.