Using Markdown WYSIWYG (or LiquidPart) in Settings Edit view

[neoscie]

I have customized the OCC GDPR module to enable CMS user to write cookie consent texts in different languages. To edit the text, I'd like to provide the Markdown Editor like they are using for Content Items. (If too complex, using the LiquidPart to edit the text will also do) I know its possible to use there it, because I've seen here how a LiquidPart was used as the editor for the whole settings object. But how do I integrate it in the Edit view if I have other more settings properties than just the body?

My GdprSettings.Edit.cshtml looks like this currently:

@model OrchardCoreContrib.Gdpr.ViewModels.GdprSettingsViewModel

<p class="alert alert-warning">@T["The current tenant will be reloaded when the settings are saved."]</p>

@{
    var prefix = ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix;
}

<div class="edit-item">
    <div class="edit-item-primary">
        <div class="edit-item-content">
            <ul class="nav nav-tabs flex-column flex-md-row" role="tablist">
                @for (var index = 0; index < Model.SupportedCultures.Count; index++)
                {
                    var culture = Model.SupportedCultures[index];
                    var tabName = $"tab-{culture}";
                    var active = index == 0 ? "active" : "";
                    <li class="nav-item pe-md-2">
                        <a aria-controls="@tabName" aria-selected="false" class="nav-item nav-link @active" data-bs-toggle="tab" href="#@tabName" role="tab">@culture</a>
                    </li>
                }
            </ul>
            <div class="accordion tab-content">
                @for (var index = 0; index < Model.SupportedCultures.Count; index++)
                {
                    var culture = Model.SupportedCultures[index];
                    var fieldNamePrefix = $"{prefix}.{nameof(Model.Settings)}[{culture}]";
                    var settings = Model.Settings[culture.Name];
                    var tabName = $"tab-{culture}";
                    var active = index == 0 ? "show active" : "";

                    <div class="tab-pane fade @active" id="@tabName">

                        <h5>@culture.DisplayName</h5>

                        <div class="mb-3 row">
                            <div class="col-12 col-md-9">
                                <label>@T["Title"]</label>
                                <input type="text" name="@($"{fieldNamePrefix}.{nameof(settings.Title)}")" value="@(settings.Title ?? "")" class="form-control" />
                                <span class="hint">@T["The title of the cookie consent modal"]</span>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <div class="col-12 col-md-9">
                                <label>@T["Body"]</label>
                                <textarea name="@($"{fieldNamePrefix}.{nameof(settings.Liquid)}")" class="form-control">@(settings.Liquid ?? "")</textarea>
                                <span class="hint">@T["The text of the cookie consent modal"]</span>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <div class="col-12 col-md-9">
                                <label>@T["Button Text: Accept All"]</label>
                                <input type="text" name="@($"{fieldNamePrefix}.{nameof(settings.AcceptAllButtonText)}")" value="@(settings.AcceptAllButtonText ?? "")"
                                       class="form-control" />
                                <span class="hint">@T["The button text for giving consent to tracking cookies"]</span>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <div class="col-12 col-md-9">
                                <label>@T["Button Text: Accept Only Essentials"]</label>
                                <input type="text" name="@($"{fieldNamePrefix}.{nameof(settings.AcceptOnlyEssentialsButtonText)}")"
                                       value="@(settings.AcceptOnlyEssentialsButtonText ?? "")" class="form-control" />
                                <span class="hint">@T["The button text to only accept necessary cookies"]</span>
                            </div>
                        </div>

                    </div>
                }
            </div>
        </div>
    </div>
</div>

Essentially, the question is, how can I provide the same components the users are used to from ContentItems (where I can just add a part or fields to the content definition) in the Settings?