ace: ace in bootstrap 5 nav-tabs doesn't show up and disappears

[pazooki]

Describe the bug

In a dynamically built tabs AND accordion (bootstrap 5.2) I am facing two problems:

1. one or two accordion shows just blank on a div for Ace editor (note; the size is occupied but it's white blank and click on it doesn't do anything.
2. when I close an accordion or go to another page and come back the editor disappears.

I have tried resizing but have not been able to nail the issue. I'm using Firefox and linux fedora 36.

Expected Behavior

to preserve the editors when tab or accordion is closed temporarily

Current Behavior

1. one or two accordion shows just blank on a div for Ace editor (note; the size is occupied but it's white blank and click on it doesn't do anything.
2. when I close an accordion or go to another page and come back the editor disappears.
   ** Note: for the second situation only it happens to tabs that I view, so if I go back and click on one that I didn't view; that still shows Ace editor with no problem

https://imgur.com/a/0rZgnbT

Reproduction Steps

create the editor inside multiple nav-tabs or accordion then close them and go back to open them.
Live Demo: https://getlivewebsite.com/webstudio/
** Note: 1- login with google 2- create a webapp 3- go to Develop 4- try to open and edit files

Possible Solution

No response

Additional Information/Context

CSS:

====

.ace_editor {
    width: 100%;
    height: 500px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Javascript

export class Editor {
    constructor(State) {
        this.State = State;
        this.State.Root.Memory.IDE = new Object();
    }

    async get_or_create(editor_id, mode) {
        if (mode === 'js'){
            mode = 'javascript';
        }
        
        if (this.State.Root.Memory.IDE[editor_id] === undefined) {
            this.State.Root.Memory.IDE[editor_id] = ace.edit(editor_id);
            this.State.Root.Memory.IDE[editor_id].setTheme("ace/theme/twilight");
            this.State.Root.Memory.IDE[editor_id].session.setMode("ace/mode/" + mode);
        }

        return this.State.Root.Memory.IDE[editor_id];
    }
}

Ace Version

1.5.0

[andrewnester]

Moving this to discussions because it seems like a configuration issue rather than bug in Ace

[nightwing]

Does it reappear when you resize the window?
If yes, then most likely the issue happens because you are not calling editor.resize() after changing the size of the container.

as a simple workaround you can do

var observer = new ResizeObserver(function(e) {
    editor.resize()
});
observer.observe(editor.container);

[pazooki]

I rewrote the code with many changes that I don't know which one fixed it; I wish I could update you here with solution...