base tabler

liquid/includes/ui/wysiwyg.html

@@ -0,0 +1,44 @@
+{% removeemptylines %}
+{% assign id = include.id | default: 'mytextarea' %}
+<form method="post">
+	<textarea id="hugerte-{{ id }}">Hello, <b>Tabler</b>!</textarea>
+</form>
+
+{% capture script %}
+{% removeemptylines %}
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    let options = {
+      selector: '#hugerte-{{ id }}',
+      height: 300,
+      menubar: false,
+      statusbar: false,
+      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; }'
+    }
+
+    // check current theme is light or dark 
+    const theme = document.documentElement.getAttribute('data-bs-theme');
+    if (theme === 'dark') {
+      options.skin = 'oxide-dark';
+      options.content_css = 'dark';
+    }
+
+    hugeRTE.init(options);
+  })
+</script>
+{% endremoveemptylines %}
+{% endcapture -%}
+
+{%- capture_script %}
+{{ script }}
+{% endcapture_script %}
+{% endremoveemptylines %}