{% assign id = include.id | default: 'mytextarea' %}

<form method="post">
	<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
</form>

{% capture_script %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    let options = {
      selector: '#hugerte-{{ id }}',
      height: 300,
      menubar: false,
      statusbar: false,
		license_key: 'gpl',
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
        'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat',
      content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
    }

    if (localStorage.getItem("tablerTheme") === 'dark') {
      options.skin = 'oxide-dark';
      options.content_css = 'dark';
    }

    hugeRTE.init(options);
  })
</script>
{% endcapture_script %}