Add Extexify UI Pane

addExtexifyPane.js

function addExtexifyPane() {
    const editor = document.getElementById("editor")

    const extexifyPane = document.createElement("div");
    extexifyPane.classList.add("extexify-pane")
    editor.appendChild(extexifyPane)

    const backdrop = document.createElement("div");
    backdrop.classList.add("extexify-backdrop")
    editor.appendChild(backdrop)

    extexifyPane.innerHTML = `
        <div style = "padding: 11px; padding-top: 5px;">Draw a symbol below</div>

        <div>
            <canvas id = "extexify-canvas"></canvas>
        </div>

        <div style="font-size: 80%;">Click to Copy</div>


        <div class="predictions">
            <span class="prediction-wrapper">
                <span class="prediction">
                    <span class="totex"> </span>
                    <span class="actual"></span>
                </span>
            </span>
            <span class="prediction-wrapper">
                <span class="prediction">
                    <span class="totex"> </span>
                    <span class="actual"></span>
                </span>
            </span>
            <span class="prediction-wrapper">
                <span class="prediction">
                    <span class="totex"> </span>
                    <span class="actual"></span>
                </span>
            </span>
            <span class="prediction-wrapper">
                <span class="prediction">
                    <span class="totex"> </span>
                    <span class="actual"></span>
                </span>
            </span>
            <span class="prediction-wrapper">
                <span class="prediction">
                    <span class="totex"> </span>
                    <span class="actual"></span>
                </span>
            </span>
        <div>
    `
}