tinymce-docs-4x/_includes/template/bodycontents.html

{% include template/menu.html css="body > *" %}

<style>
    .modern-main {
        width: 1140px;
        margin: 0 auto;
        display: flex;
    }

    .modern-navigation {
        padding: 0;
        position: relative;
        width: 250px;
        top: 0;
        overflow-y: auto;
        z-index: 1;
    }

    .modern-navigation-extra {
        padding: 0 0 26px 0;
    }

    .modern-navigation-extra > div:first-child {
        margin: 0 0 16px;
    }

    .modern-navigation-extra a {
        font-size: 14px;
        font-weight: 900;
    }

    .modern-navigation-extra a svg {
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: text-top;
        margin: 0.5px 8px 0 0;
    }

    .modern-navigation-extra a.back-home {
        color: #1976D2;
    }

    .modern-navigation-extra a.back-home:hover path {
        fill: rgb(145, 180, 225);
    }

    .modern-navigation-extra a.back-home:hover {
        color: rgb(145, 180, 225);
    }

    @media screen and (max-width: 1126px) {
        .modern-navigation-extra {
            padding: 20px 0;
        }
    }

    .modern-main-container {
        width: auto;
        flex-grow: 1;
        padding-top: 16px;
    }

    main .modern-heading {
        margin-left: 0;
    }

    main .modern-content {
        margin-left: 0;
    }

    .modern-versions {
        margin-bottom: 30px;
    }

    .modern-versions .dropdown {
        width: 225px;
        height: 42px;
    }

    .modern-versions .dropdown .dropdown-arrow {
        width: 42px;
        height: 42px;
        border: none;
        background-color: transparent;
    }

    @media screen and (max-width: 1126px) {
        .modern-main {
            flex-direction: column;
            width: auto;
        }

        .modern-versions {
            display: none;
        }

        .modern-navigation {
            width: 100%;
        }
    }

    aside>ul.aside-navlist-override {
        margin: 0 !important;
    }

    @media screen and (max-width: 1126px) {
        aside div#optimize-bottom,
        aside div#optimize-top {
            display: none;
            visibility: hidden;
        }
    }

    aside div#optimize-top {
        margin: 32px 0 24px 0;
    }

    aside div#optimize-bottom {
        margin: 0 0 348px 0;
    }
</style>

<div class="modern-main {{ page.type }} {{ page.class }}">
    <aside class="side-nav modern-navigation">
        <div class="modern-versions">
            <div class="dropdown">
                TinyMCE v4
                <div class="dropdown-arrow"></div>
                <div class="dropdown-options">
                    <a class="link-gelato" href="/docs/tinymce/6/">TinyMCE v6</a>
                    <a class="link-gelato" href="/docs/">TinyMCE v5</a>
                    <a class="link-gelato" href="/docs-4x/">TinyMCE v4</a>
                    <a class="link-gelato" href="/docs-3x/">TinyMCE v3</a>
                </div>
            </div>
        </div>

        <div id="side-nav-controller">Expand Menu</div>

        <div class="modern-navigation-extra">
            <div>
                <a href="/get-tiny/" data-marketing="docs-nav-get-tiny">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path fill="#3F3F3F" fill-rule="evenodd" d="M8 12c-.3 0-.5-.1-.7-.3L1.6 6 3 4.6l4 4V0h2v8.6l4-4L14.4 6l-5.7 5.7c-.2.2-.4.3-.7.3zm-7 2h14v2H1v-2z"/>
                    </svg>Get TinyMCE
                </a>
            </div>
            <div>
                <a class="back-home" href="/" data-marketing="docs-nav-back-home">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path fill="#1976D2" fill-rule="evenodd" d="M6.25 10.5L1 5.25 6.25 0l1.361 1.361-2.917 2.917h5.445C12.86 4.278 15 6.417 15 9.138 15 11.862 12.861 14 10.139 14H2.36v-1.944h7.778c1.653 0 2.917-1.264 2.917-2.917 0-1.653-1.264-2.917-2.917-2.917H4.694L7.611 9.14 6.25 10.5z"/>
                    </svg>Return to Website
                </a>
            </div>
        </div>

        {% assign nav = site.data.nav | array_concat:site.data.nav_api %}
        {% include nav.html links=nav preceding_address="/" %}
        <div id="optimize-top">
            <a href="/features/">
                <img
                    title="View TinyMCE’s full feature list"
                    width="224" height="320"
                    src="{{ site.baseurl }}/images/optimize/editor/standard/mce-features@1x.png"
                    srcset="{{ site.baseurl }}/images/optimize/editor/standard/mce-features@1x.png 1x, {{ site.baseurl }}/images/optimize/editor/standard/mce-features@2x.png 2x"
                />
            </a>
        </div>
        <div id="optimize-bottom">
            <a href="/auth/signup/">
                <img
                    title="Get a free rich text editor API key"
                    src="{{ site.baseurl }}/images/optimize/account/mini/primary.gif"
                    srcset="{{ site.baseurl }}/images/optimize/account/mini/primary.gif 1x, {{ site.baseurl }}/images/optimize/account/mini/primary@2x.gif 2x"
                />
            </a>
        </div>
    </aside>

    <main class="modern-main-container">
        <div class="heading modern-heading">
            <h1 class="light">{{ page.title }}</h1>
            <h2 class="light">{{ page.description }}</h2>
            {% if page.url contains '/api/' %}
            <!-- Disabled since there is no git link -->
            {% else %}
            <a class="contribute link-garlic"
               href="https://github.com/tinymce/tinymce-docs-4x/tree/main/{{ page.path }}">Contribute to this page<i></i></a>
            {% endif %}
            {% if page.controls %}
            {% assign controls = page.controls | split:',' %}
            <div class="badges">
                {% for control in controls %}<span class="badge-naan lg">+ {{ control }}</span> {% endfor %}
            </div>
            {% endif %}
        </div>

        <div class="content modern-content">
            {{ content }}
            {% include feedback.html %}
            <p class="let-us-know">
                Can't find what you're looking for?
                <a href="#" data-modal="let-us-know">
                    Let us know.
                </a>
            </p>
            {% include license.html %}
        </div>

        <div style="clear: both"></div>
    </main>

</div>

{% include_remote {{ site.origin }}/_docs/footer.html %}
<script src="{{ site.shared_baseurl }}{{ site.baseurl }}/scripts/common.min.js"></script>
<script src="{{ site.shared_baseurl }}{{ site.baseurl }}/scripts/docs.min.js"></script>

<script>
    {% include js/polyfill/promise-polyfill/polyfill.js %}
    {% include js/polyfill/whatwg-fetch/fetch.umd.js %}
    {% include js/my-account-button.js %}
    {% include js/notifications.js %}
    {% include js/store.js %}
</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
    docsearch({
        apiKey: 'd70977481e4a0b72eacaec1533b2d81b',
        indexName: 'tiny',
        inputSelector: '#searchInput',
        algoliaOptions: { 'facetFilters': ["tags:docs-4x"] },
        debug: true
    });
</script>