JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Summernote + Monaco Editor Test</title>

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">

    <style>
        body {
            max-width: 1000px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: Arial, sans-serif;
        }

        .note-editing-area {
            position: relative;
        }

        #monaco-host {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: none;
        }
    </style>
</head>
<body>

    <h2>Summernote + Monaco Editor</h2>

    <div id="summernote">
        <h3>Hello Summernote</h3>
        <p>這是一段故意沒有排版好的 HTML。</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>

    <script>
        var monacoEditor = null;
        var monacoReady = false;

        $(function () {
            $('#summernote').summernote({
                height: 400,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['fullscreen', 'codeview']]
                ],
                callbacks: {
                    onInit: function () {
                        loadMonaco();
                    },

                    onCodeviewToggled: function () {
                        var $noteEditor =
                            $('#summernote').next('.note-editor');

                        var isCodeView =
       ...