test.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
	<li class="nav-item" role="presentation">
		<button class="nav-link active" id="doc1-tab" data-bs-toggle="tab" data-bs-target="#doc1" type="button" role="tab" aria-controls="doc1" aria-selected="true">Document 1</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="doc2-tab" data-bs-toggle="tab" data-bs-target="#doc2" type="button" role="tab" aria-controls="doc2" aria-selected="false">Document 2</button>
	</li>
	<li class="nav-item" role="presentation">
		<button class="nav-link" id="doc3-tab" data-bs-toggle="tab" data-bs-target="#doc3" type="button" role="tab" aria-controls="doc3" aria-selected="false">Document 3</button>
	</li>
</ul>

<div class="tab-content" id="myTabContent">
	<div style="height: 800px" class="tab-pane fade show active" id="doc1" role="tabpanel" aria-labelledby="doc1-tab">
		
		<!-- Document Editor DIV - this DIV will be moved within DOM -->
		<div style="height: 100%" id="tx-editor">
		
			<tx-document-editor
				width="1000px"
				height="500px"
				webSocketURL="wss://backend.textcontrol.com?access-token=mytoken">
			</tx-document-editor>

		</div>
		<!-- *** Document Editor DIV *** -->

	</div>
	<div style="height: 800px" class="tab-pane fade" id="doc2" role="tabpanel" aria-labelledby="doc2-tab"></div>
	<div style="height: 800px" class="tab-pane fade" id="doc3" role="tabpanel" aria-labelledby="doc3-tab"></div>
</div>