TextEditorGroupDisplay.razor

@using Luthetus.Common.RazorLib.Tabs.Displays
@using Luthetus.TextEditor.RazorLib.TextEditors.Displays

<div class="luth_te_text-editor-group @CssClassString"
     style="@CssStyleString"
	 id="@HtmlId">

    @{
        var textEditorGroup = TextEditorGroupStateWrap.Value.GroupList.FirstOrDefault(
            x => x.GroupKey == TextEditorGroupKey);
    }
    
    @if (textEditorGroup is not null)
    {
        <div class="luth_te_text-editor-group-tabs-list">
			
			<TabListDisplay @ref="_tabListDisplay"
							TabList="@GetTabList(textEditorGroup)"/>
        </div>
        <div class="luth_te_text-editor-group-active-view-model">
            @{
                var textEditorModel = TextEditorService.ViewModelApi.GetModelOrDefault(
                    textEditorGroup.ActiveViewModelKey);
        
                if (textEditorModel is null)
                {
                    <text>No editors are open currently</text>
                }
                else
                {
                	// Add a ShouldRenderBoundary here? (2024-08-04)
                	// If this group component re-renders, could it cause a double render
                	// due to the TextEditorViewModelDisplay re-rendering because:
                	// 	- It is a child of this component
                	//     - It is subscribed to the state change
                	//
                	// (2024-09-07)
                	// It turns out that this component specifically tells the TabListDisplay to invoke
                	// its StateHasChanged when the view model changes.
                    <TextEditorViewModelDisplay TextEditorViewModelKey="textEditorGroup.ActiveViewModelKey"
                                                ViewModelDisplayOptions="ViewModelDisplayOptions"/>
                }
            }
        </div>
    }
    else
    {
        <div>
            Group not found
        </div>
    }
</div>