textarea.twig

{##
 # {% set variables = { "id": someVar, "name": someVar, "placeholder": someVar, "value": someVar } %}
 # {% include "_base/textarea.twig" with variables %}
 #
 # https://twig.symfony.com/doc/3.x/tags/include.html
 #}

{% if required is defined %}
	{% set required = "required" %}
{% else %}
	{% set required = "" %}
{% endif %}

<textarea id="{{ id }}" name="{{ name }}" placeholder="{{ placeholder }}" class="easyMDE">{{ value|raw }}</textarea>

<script>
	(() => {
        "use strict";

        const easyMDE = new EasyMDE({
            // https://github.com/Ionaru/easy-markdown-editor#configuration
            element: document.getElementById("{{ id }}"),

            autoDownloadFontAwesome: false,
            forceSync: true,
            inputStyle: "contenteditable",
            maxHeight: "20rem",
            nativeSpellcheck: true,
            renderingConfig: {
                codeSyntaxHighlighting: true,
            },

            /*
            toolbar: [
                // https://github.com/Ionaru/easy-markdown-editor#toolbar-icons
                "bold", "italic", "strikethrough", "heading",
                "|", "code", "quote", "unordered-list", "ordered-list", "clean-block",
                "|", "link", "image", "table",
                "|", "preview", "side-by-side", "fullscreen",
                "|", "guide",
                {
                    name: "plain",
                    action: function customFunction(editor) {
                        easyMDE.toTextArea();
                    },
                    className: "fa fa-power-off",
                    title: "Plain Text Editor",
                },
            ],
            */

            shortcuts: {
                // https://github.com/Ionaru/easy-markdown-editor#keyboard-shortcuts
                "toggleStrikethrough": "Cmd-Alt-S",
                "drawTable": "Cmd-Alt-T",
            },
        });

        // update easymde on textarea change
        $("#{{ id }}").on("change", (event) => {
            easyMDE.value(
                $(event.target).val()
            );
        });

        // update textarea on easymde change
        easyMDE.codemirror.on("change", () => {
            $("#{{ id }}").val(
                easyMDE.value()
            );
        });

        // put the easymde in the global scope
        window.{{ id }} = easyMDE;
    })();
</script>