Problem to show file content when using more than one file and custom layout

tinchox5 commented 1 year ago

Hi there! I'm using a custom layout based on this example https://github.com/google/playground-elements#custom-layouts.

Since I need to use more than one file I added playground-tab-bar component, which is rendered ok. The problem arise when I want to select another file: the new content is not rendered/updated into playground-file-editor.

Here is my code.

<playground-project id="project1"  >   
<script type="sample/html" filename="index.html">
<!doctype html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section  class="o-container one ">
<ul  class="o-orbit">
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
    <li class="o-orbiter"></li>
</ul>
</section>
</body>
</script>
<script type="sample/css" filename="styles.css">
.o-orbiter {
border: 7px solid mediumaquamarine;
}
.o-container {
border: 0.2px solid gray;
}
.one {
border: 2px solid;
padding: 20px; 
}
</script>
</playground-project>
<div class="example">
    <playground-tab-bar project="project1"></playground-tab-bar>
    <playground-file-editor  project="project1"></playground-file-editor>
    <playground-preview project="project1"> </playground-preview>
</div>

And css style:

.example {
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  border-radius: 10px;
}
.example > playground-file-editor {
  height: 300px;
}
.example > playground-preview {
  height: max-content;
  border-top: 1px solid #ccc;
  --playground-preview-toolbar-background: #eaeaea;
}

clukhei commented 6 months ago

Hi @tinchox5 , I have the same issue as well, but looking at the source code for <playground-ide> , it seems like the docs missed out on documenting the editor attribute for <playground-tab-bar>

See source code https://github.com/google/playground-elements/blob/2712837d118a35e038cac04b20734962593fd70f/src/playground-ide.ts#L310

<playground-tab-bar project="project1" editor="editor"></playground-tab-bar>
<playground-file-editor project="project1" filename="index.ts" id="editor"> </playground-file-editor>

it works well for me after i made that change

tinchox5 commented 6 months ago

Thanks, I'll look into it.

On Mon, 6 May 2024 at 16:17 LuKhei @.***> wrote:

Hi @tinchox5 https://github.com/tinchox5 , I have the same issue as well, but looking at the source code for , it seems like the docs missed out on documenting the editor attribute for
See source code https://github.com/google/playground-elements/blob/2712837d118a35e038cac04b20734962593fd70f/src/playground-ide.ts#L310 it works well for me after i made that change — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you were mentioned.Message ID: ***@***.***>

google / playground-elements

Problem to show file content when using more than one file and custom layout #384