Generate a custom nested layout by tinymce editor button

I create a new button in TinyMCE editor. And i want that new button of TinyMCE editor will show this below structure as dummy content while I press that button.

<div class="table-of-contents-container">
    <section class="table-of-contents">
        <h2>Topic</h2>
        <ul class="items">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Controls</a>
                <ul>
                    <li><a href="#">Core Custom Controls</a></li>
                </ul>
            </li>
            <li><a href="#">Sections</a></li>
            <li><a href="#">Panels</a></li>
            <li><a href="#">Custom Controls, Sections, and Panels</a>
                <ul>
                    <li><a href="#">Customizer UI Standards</a></li>
                </ul>
            </li>
            <li><a href="#">Custom Setting Types</a>
            </li>
        </ul>
    </section><!-- .table-of-contents -->
</div>

In .js file how i join this whole html tag’s, class and id and output it. My wordPress version is 5.5.1. Please help me.

Go to Source
Author: Zahid Hossain