Add hostToolbarControl message for programmatic toolbar control via postMessage

[Copilot]

Enables external applications to control toolbar UI elements via postMessage without coupling to the render request message.

Changes

New Message Type

Added HostToolbarControlMessage with commands:

• showSource: boolean - Toggle source textarea visibility
• showDownloadDialog: boolean - Trigger download popup programmatically
• setFilename: string - Override download filename
• showOrHideButtons: { tweak?: boolean; download?: boolean; restart?: boolean } - Control button visibility with a single object

Implementation

• packages/common/src/messages.ts: Defined HostToolbarControlMessage interface
• packages/toolbar/src/toolbar.tsx: Added control methods (setSourceVisibility(), showDownloadDialog(), showOrHideButtons())
• packages/host/src/post-receive.ts: Handler for hostToolbarControl messages
• packages/host-test/src/index.ts: Usage example

Usage

// Render content
iframe.contentWindow.postMessage({
  type: 'hostRenderRequest',
  title: 'Document',
  markdown: '# Content'
}, '*');

// Control toolbar independently
iframe.contentWindow.postMessage({
  type: 'hostToolbarControl',
  showSource: true,
  setFilename: 'custom-name',
  showOrHideButtons: {
    tweak: true,      // Show view source button
    download: true,   // Show download button
    restart: false    // Hide start over button
  },
  showDownloadDialog: true
}, '*');

Screenshots

Show source programmatically:

Trigger download dialog:

Hide all buttons:

Show all buttons:

Original prompt

We want a feature to be able to control various aspects of the host when using postmessage.

One idea is in message type hostRenderRequest : add an option for showSource which would tell the toolbar to have the textarea be visible. This is the primary feature request.

But another idea is to perhaps add a more generalizable message packet to control the toolbar.

Let me know which idea is preferable. For the latter, tell me what commands it might contain

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[danmarshall]

@copilot instead of a collection of methods for every button, lets have a single showOrHideButtons and then pass an object where keys are button names and boolean.

[Copilot]

@copilot instead of a collection of methods for every button, lets have a single showOrHideButtons and then pass an object where keys are button names and boolean.

Refactored to use a single showOrHideButtons(buttons) method that accepts an object with button names as keys (tweak, download, restart). This makes the API more concise and easier to use when controlling multiple buttons. Commit: 2489d9e

Example:

toolbar.showOrHideButtons({
  tweak: true,
  download: true,
  restart: false
});

[danmarshall]

@copilot let's rename tweak to source