<script type="module">
  import * as KanaCapture from 'https://cdn.jsdelivr.net/npm/@shimoning/kana-capture@latest/dist/esm/index.js';
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('input')

    const outputZenkakuKatakana = document.getElementById('output-zenkaku-katakana')
    const outputHankakuKatakana = document.getElementById('output-hankaku-katakana')

    const timingRealtime = document.getElementById('timing-realtime')
    const timingEnter = document.getElementById('timing-enter')

    KanaCapture.setupObserver(
      input,
      [
        '#output-hiragana',
        { element: outputZenkakuKatakana, type: KanaCapture.KanaType.ZenkakuKatakana },
        { element: outputHankakuKatakana, type: KanaCapture.KanaType.HankakuKatakana },
      ],
      {
        observeInterval: 30,
        debug: false,
        realtime: timingRealtime,
        enter: timingEnter,
        clearOnInputEmpty: true,
        capturablePatterns: [
          KanaCapture.CapturableCharacterType.HIRAGANA,
          KanaCapture.CapturableCharacterType.KUTOUTEN,
          KanaCapture.CapturableCharacterType.CHOUON,
          KanaCapture.CapturableCharacterType.KAGIKAKKO,
          KanaCapture.CapturableCharacterType.ZENKAKU_SPACE,

          // 全角英数字記号
          // KanaCapture.CapturableCharacterType.ZENKAKU_ALPHABET,
          // KanaCapture.CapturableCharacterType.ZENKAKU_NUMBER,
          // KanaCapture.CapturableCharacterType.ZENKAKU_1BYTE_SYMBOL,

          // 半角英数字記号 + 半角スペース
          // KanaCapture.CapturableCharacterType.HANKAKU_SPACE,
          // KanaCapture.CapturableCharacterType.HANKAKU_ALPHABET,
          // KanaCapture.CapturableCharacterType.HANKAKU_NUMBER,
          // KanaCapture.CapturableCharacterType.HANKAKU_1BYTE_SYMBOL,
        ],
      },
    )
  })
</script>