How to open 3 or more tabs in a Theia IDE in a HTML file programmatically?

maxloo · 17 March 2023 17:41

This is my code:

smucclaw/sandbox/blob/default/maxloo/mti/test2.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      iframe {
        transform: scale(0.75);
        transform-origin: 0 0;
        width: 1000px;
        height: 800px;
      }
    </style>
  </head>
  <body>
    <div>
      <iframe id="theia" src="http://localhost:8080"></iframe>
    </div>
    <script>
      window.onload = function() {
        const theiaFrame = document.getElementById('theia').contentWindow;

This file has been truncated. show original

I’m trying to open 3 or more tabs in a Theia IDE in a HTML file programmatically, but I’ve not succeeded. GPT3.5 helped with the code. I’ve even created a directory for this file to enable multi-root workspaces:

github.com

smucclaw/sandbox/blob/default/maxloo/mti/.theia/settings.json

{
  "mergeConfigurations": {
    "markdown.preview": {
      "browser": "chrome"
    }
  },
  "workspace": {
    "folders": [
      {
        "name": "Project A",
        "uri": "/root/src/sandbox/maxloo/mti/FTA/1. Goods/ANZSCEP/trade-in-goods.md"
      },
      {
        "name": "Project B",
        "uri": "/root/src/sandbox/maxloo/mti/FTA/1. Goods/ANZSCEP/Chapter 2 - Trade in Goods-html.html"
      },
      {
        "name": "Project C",
        "uri": "/root/src/sandbox/maxloo/mti/FTA/1. Goods/CSFTA/chap4.html"
      }

This file has been truncated. show original

However, I could not get the Theia IDE to open 3 tabs programmatically. This is what I see after opening the test2.html file:

Any suggestions?

The reason why I’m opening Theia in an iframe, is because I hope to create a diff program in the HTML file, that can compare the files opened in the Theia IDE.

vince-fugnitto · 20 March 2023 12:15

@maxloo thank you for the discussion, I’m not 100% sure what you’re trying to achieve or if chatgpt is the best solution code-wise but if you want to open a multi-root workspace you should try opening test.theia-workspace or test.code-workspace files. I do not believe adding the roots directly in the application’s settings.json is supported.