tabler/shared/ui/Wysiwyg.astro

---
import CaptureScript from '../components/CaptureScript.astro'
interface Props {
  id?: string
}

const { id = 'mytextarea' } = Astro.props
const selector = `#hugerte-${id}`
---

<form method="post">
  <textarea id={`hugerte-${id}`} set:html={'Hello, <b>Tabler</b>!'} />
</form>
<CaptureScript>
  <!-- BEGIN WYSIWYG -->
  <script is:inline define:vars={{ selector }}>
    function initWysiwyg() {
      const options = {
        selector,
        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)
    }

    document.readyState !== 'loading' ? initWysiwyg() : document.addEventListener('DOMContentLoaded', initWysiwyg, { once: true })
  </script>
  <!-- END WYSIWYG -->
</CaptureScript>