<script src="https://cdn.jsdelivr.net/npm/@shimoning/kana-capture@latest/dist/umd/index.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('#input')

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

    const timingRealtime = document.querySelector('#timing-realtime')
    const timingEnter = document.querySelector('#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>