fix: mutation observer on mounting toolbar button

[Arukuen]

fixes #30

Summary by CodeRabbit

• Bug Fixes
  • Improved the reliability of the Add Interaction toolbar button so it stays available in the editor.
  • The button now reappears more consistently when the toolbar is refreshed or unmounted, reducing missed or duplicate button placements.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d244cc10-a1ec-4427-86e1-19bef18c76fe

📥 Commits

Reviewing files that changed from the base of the PR and between d235f5f and e974e4e.

📒 Files selected for processing (1)

• src/editor/plugins/top-toolbar-button/index.js

---

📝 Walkthrough

Walkthrough

The Add Interaction top toolbar button's remount mechanism is changed from a WordPress data-store subscribe callback with setTimeout polling to a debounced MutationObserver watching document.body, which checks and reinserts the button into the editor header toolbar only when needed.

Changes

Toolbar Button Mounting

Layer / File(s)	Summary
Replace subscribe-based reattachment with debounced MutationObserver src/editor/plugins/top-toolbar-button/index.js	Removes the subscribe import and its setTimeout-triggered reattachment loop; adds ensureButtonMounted() to locate the toolbar and insert buttonDiv if missing, and scheduleEnsureButtonMounted() to debounce calls triggered by a MutationObserver on document.body, with an immediate initial mount check.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DOM as document.body
  participant Observer as MutationObserver
  participant Scheduler as scheduleEnsureButtonMounted
  participant Mount as ensureButtonMounted

  Mount->>Mount: initial mount attempt on startup
  DOM->>Observer: subtree child mutation
  Observer->>Scheduler: notify mutation
  Scheduler->>Scheduler: clearTimeout / setTimeout(100)
  Scheduler->>Mount: invoke after debounce
  Mount->>DOM: query .edit-post-header-toolbar
  Mount->>DOM: insert buttonDiv if not present

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the main change: switching the toolbar button mounting to a MutationObserver approach.
Linked Issues check	✅ Passed	The PR matches issue #30 by replacing the global subscription with a debounced MutationObserver-based mounting flow.
Out of Scope Changes check	✅ Passed	The changes stay focused on the toolbar button mounting logic in a single file and do not introduce unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 fix/30-top-toolbar-mounting

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🤖 Pull request artifacts

file	commit
pr32-interactions-32-merge.zip	e974e4e