Editor Tabs

You can interact with editor tabs by accessing the editorTabs property on the sandbox instance; which is also used internally for interactions between the explorer and editor tabs.

Opening Files

The main use case for that is opening files for editing after ensuring the files are mounted.

await container.mount(/* FileSystemTree or snapshot */)
await sandbox.bootstrap()

sandbox.editorTabs.open(
  // File path, will be used as a unique ID as well.
  './public/index.html',
  
  // Optional label to by display for the editor tab.
  // If not provided the file name will be extracted 
  // from the path and used as a label.
  'HOME PAGE',
  
  // Optional context. 
  // Currently only supports suppressClose to hide the close button,
  // prventing the user from closing the tab.
  {
    suppressClose: true,
  }
)

Opening a file that is already open simply re-focuses the relevant editor tab.

Opening a readonly file (matched by sandbox.explorer.readonly) shows a lock icon next to the tab label and prevents changing the file contents in the editor.

Closing Files

Editor tabs can also be programmatically closed by providing the file path.

sandbox.editorTabs.close('./public/index.html')

Additional Functionality

You can learn more about additional editorTabs functionality in the API Reference.

Some of that is also demonstrated in the example below.

Full example code