HtmlField-Monaco.Edit.cshtml

@model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
@using OrchardCore.ContentFields
@using OrchardCore.Mvc.Utilities
@using OrchardCore.Localization.Data
@inject IDataLocalizer D
@{
    var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
    var monacoSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldMonacoEditorSettings>();
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
    string localizedFieldName = D[Model.PartFieldDefinition.DisplayName(), DataLocalizationContext.ContentField(Model.PartFieldDefinition.PartDefinition.Name)];
}

<div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
    <label asp-for="Html" class="@Orchard.GetLabelClasses()">@localizedFieldName</label>
    <div class="@Orchard.GetEndClasses()">
        @await DisplayAsync(await New.ShortcodeModal())
        <div id="@Html.IdFor(x => x.Html)_editor" asp-for="Text" style="min-height: 400px;" class="form-control" dir="@culture.GetLanguageDirection()"></div>
        <textarea asp-for="Html" hidden>@Html.Raw(Model.Html)</textarea>
        @if (!string.IsNullOrEmpty(settings.Hint))
        {
            <span class="hint">@settings.Hint</span>
        }
    </div>
</div>

<script asp-name="monaco" at="Foot"></script>
<script at="Foot" depends-on="monaco">
    function onDocumentReady(fn) {
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", fn);
        } else {
            fn();
        }
    }

    onDocumentReady(function () {
        const divEditor = document.getElementById('@Html.IdFor(x => x.Html)_editor');
        if (!divEditor) {
            return;
        }
        require(['vs/editor/editor.main'], function () {
            var settings = @Html.Raw(string.IsNullOrWhiteSpace(monacoSettings.Options) ? "{}" : monacoSettings.Options);
            if (settings.automaticLayout == undefined) {
                settings.automaticLayout = true;
            }
            settings.language = 'html';

            var html = document.documentElement;
            const mutationObserver = new MutationObserver(setTheme);
            mutationObserver.observe(html, { attributes: true });

            function setTheme() {
                var theme = html.dataset.bsTheme;
                if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                    monaco.editor.setTheme('vs-dark')
                } else {
                    monaco.editor.setTheme('vs')
                }
            }

            setTheme();

            var editor = monaco.editor.create(divEditor, settings);
            var textArea = document.getElementById('@Html.IdFor(x => x.Html)');

            editor.getModel().onDidChangeContent((event) => {
                textArea.value = editor.getValue();
                $(document).trigger('contentpreview:render');
            });

            const shortcodesAction = {
                id: "shortcodes",
                label: "Add Shortcode",
                run: function (editor) {
                    shortcodesApp.init(function (value) {
                        if (value) {
                            var selection = editor.getSelection();
                            var text = value;
                            var op = { range: selection, text: text, forceMoveMarkers: true };
                            editor.executeEdits("shortcodes", [op]);
                        }
                        editor.focus();
                    })
                },
                contextMenuGroupId: 'orchardcore',
                contextMenuOrder: 0,
                keybindings: [
                    monaco.KeyMod.Alt | monaco.KeyCode.KEY_S,
                ]
            }
            editor.addAction(shortcodesAction);

            editor.getModel().setValue(textArea.value);

            window.addEventListener("submit", function () {
                textArea.value = editor.getValue();
            });
        });
    });
</script>