[examples/iframe] Toolbar buttons do not apply to selected text inside iframe

[wudidewo12]

Description

In the Rendering in iframes example, selecting text inside the iframe editor and then clicking a toolbar button outside the iframe does not apply the formatting change locally. The live reference applies the toolbar action to the selected iframe text.

Recording

Screenshots attached below:

Local actual behavior:

Live reference expected behavior:

Video attached below:

[optional; screenshots should be enough unless the iframe selection and toolbar click sequence is unclear]

Sandbox

No standalone sandbox. Reproduced in the Slate examples site.

Local reproduction URL:

http://localhost:3100/examples/iframe

Reference URL:

https://www.slatejs.org/examples/iframe

Steps

To reproduce the behavior:

1. Go to http://localhost:3100/examples/iframe.
2. In the iframe editor, drag-select media queries in the second paragraph.
3. Click the B toolbar button above the iframe.
4. Repeat the same steps on https://www.slatejs.org/examples/iframe.

Expectation

The selected media queries text should toggle bold formatting. Since it starts bold, clicking B should remove the bold formatting, matching the live reference.

Actual behavior

On localhost, clicking B does not remove bold formatting from the selected media queries text inside the iframe. The live reference removes the bold formatting from the same selected text.

Environment

• Local URL: http://localhost:3100/examples/iframe
• Reference URL: https://www.slatejs.org/examples/iframe
• Local branch/commit: v2, ce2bd6c6
• Browser: Chrome
• OS: macOS
• Local app setup: Slate examples site served locally with bun serve

Impact

This breaks toolbar formatting for selections rendered inside an iframe. A user can select text in the iframe editor, but toolbar actions from the parent page may not apply to that selection locally.

[zbeyens]

🟢 95-100% confidence

Phase	🧪 Tests	🌐 Browser
Reproduced	✅ Issue screenshots/transcripts show parent toolbar buttons not affecting selected iframe text locally	✅ /examples/iframe flow identified
Verified	🟢 Iframe parent-toolbar formatting row is green on current v2 07d79634	✅ Parent toolbar applies formatting to selected iframe text

🌐 Browser Check

• Open http://localhost:3100/examples/iframe.
• Select text inside the iframe editor, such as media queries.
• Click a parent toolbar button, such as B.
• Confirm the selected iframe text updates formatting.

✅ Outcome

• Current v2 applies parent toolbar formatting to selected iframe text.
• The toolbar command crosses the iframe selection boundary in the verified route.

🏗️ Design

• Chosen owner: iframe selection target handling.
• Why not quick patch: the exact iframe browser row is already green on current code.
• Why not broader change: the issue is the parent toolbar to selected iframe text path, and that path is covered.

🧪 Verified

• cd /Users/zbeyens/git/slate-v2 && PLAYWRIGHT_RETRIES=0 PLAYWRIGHT_BASE_URL=http://localhost:3100 bun playwright playwright/integration/examples/plaintext.test.ts playwright/integration/examples/mentions.test.ts playwright/integration/examples/paste-html.test.ts playwright/integration/examples/iframe.test.ts --project=chromium --grep "keyboard undo restores caret after middle-line typing|keyboard undo restores partial selected text replacement|keyboard undo restores select-all replacement content|copies and pastes a selected mention without crashing|cuts a selected mention without crashing|pastes copied rendered Slate content as an internal fragment before HTML import|applies parent toolbar formatting to selected iframe text"
• cd /Users/zbeyens/git/slate-v2 && bun check