31:T507,function highlightNext($text, dir = Direction.Forward, depth = 0) { const { selectionStart, selectionEnd } = $text const text = $text.value const matcher = new JsonMatcher() let m getM: switch (dir) { case Direction.Forward: { const idx = Math.max(selectionStart, selectionEnd) for (const x of matcher[Symbol.matchAll](text)) { if (x.index >= idx) { m = x break getM } } break } case Direction.Backward: { const idx = Math.min(selectionStart, selectionEnd) for (const x of matcher[Symbol.matchAll](text)) { if (x.index + x[0].length <= idx) { m = x // don't break `getM` as we want the _last_ one here } } } break } if (m) { $text.setSelectionRange(m.index, m.index + m[0].length) const content = m.groups return true } else if (depth === 0) { const all = [...document.querySelectorAll(`${SELECTOR} textarea`)] const $next = all[all.indexOf($text) + dir] if ($next) { $next.focus() $next.setSelectionRange(...dir === Direction.Backward ? [$next.value.length, $next.value.length] : [0, 0] ) highlightNext($next, dir, depth + 1) return true } } }32:Tea1,function $makeText(defaultValue) { const el = htl.html`

{
    const $text = e.currentTarget
    const text = $text.value
    const { selectionStart, selectionEnd } = $text

const matcher = new JsonMatcher()

if (selectionStart === selectionEnd) {
      for (const x of matcher[Symbol.matchAll](text)) {
        if (selectionStart >= x.index && selectionStart <= x.index + x[0].length) {
          $text.setSelectionRange(x.index, x.index + x[0].length)
          break
        }
      }
    }
  }} style="width: 100%; font-family: sans-serif;">${defaultValue}`

const parent = htl.html`<span class="${CLASS_NAME}" style="display: inline-flex; width: 100%">${el}<button onclick=${revert}><div style="transform: rotate(180deg)">↪️</div></button>`

el.addEventListener(matchMedia('(pointer:coarse)').matches ? 'beforeinput' : 'keydown', handler)  
  
  function handler(e) {
    const $text = e.currentTarget
    const text = $text.value
    const { selectionStart, selectionEnd } = $text

let key = e.key ?? e.data
    if (e.type === 'beforeinput' && (
      // fires before `beforeinput::insertLineBreak`...
      (e.inputType === 'insertText' && e.data === '') // ...on mobile chrome, wechat browser
        // || e.inputType === 'deleteContentBackward' // ...on mobile firefox (⚠️ needs more thought, no support for now)
    )) {
      key = 'Enter'
    }

if (e.type === 'beforeinput' && e.inputType === 'insertLineBreak') {
      // On mobile browsers, `beforeinput::insertLineBreak` events actually fire _after_ input so we can't use them.
      // We use the empty `beforeinput::insertText` with `data=''` instead, which _does_ fire before input.
      e.preventDefault()
      return
    }

if ((key === 'Enter' || key === 'Delete') && e.ctrlKey) {
      const { replaced, moved } = acceptAllDefaults($text, key === 'Enter' ? 1 : 0)
      if (replaced) {
        parent.classList.add('dirty')        
      }

if (moved) {
        e.preventDefault()
        return
      }
    }
    
    if (selectionStart !== selectionEnd) {
      let content
      try {
        content = JSON.parse(text.slice(Math.min(selectionStart, selectionEnd), Math.max(selectionStart, selectionEnd)))
      } catch {}
  
      if (content) {
        function insertOption(n) {
          const result = content[n]
          if (result != null) {
            document.execCommand('insertText', false, result)
            highlightNext($text)
            
            return true
          }
        }
  
        if (/^\d+$/.test(key)) {
          if (insertOption(Number(key))) {
            e.preventDefault()
            return
          }
          const result = content[key]
          if (result != null) {
            e.preventDefault()
            document.execCommand('insertText', false, result)
            highlightNext($text)

return
          }
        } else if (key === 'Enter') {
          if (insertOption(1)) {
            e.preventDefault()
            return
          }
        } else if (key === 'Delete') {
          if (insertOption(0)) {
            e.preventDefault()
            return
          }
        }
      }
    }
  
    switch (key) {
      case ' ':
      case 'Tab': {
        if (highlightNext($text, e.shiftKey ? Direction.Backward : Direction.Forward)) {
          e.preventDefault()
          return
        }
        break
      }
    }
  }

function revert() {
    el.value = defaultValue
    parent.classList.remove('dirty')
  }

for (const eventName of [/* 'change', */ 'input']) {
    el.addEventListener(eventName, () => {
      parent.classList[el.value === defaultValue ? 'remove' : 'add']('dirty')
    })
  }
  
  return parent
}33:[]
2f:{"title":"Iterate textarea selections","cells":[{"id":0,"value":"# Iterate textarea selections","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$$makeText(`Hello, { \"1\": \"one\", \"2\": \"two\", \"3\": \"world\", \"0\": \"???\" }! You can select the first option by { \"1\": \"default\", \"2\": \"two\", \"3\": \"three\" }. Sometimes there is { \"1\": \"only\" } one { \"1\": \"xyz\", \"2\": \"option\" }.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"$$makeText(`No replacements here!`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"$$makeText(`{ \"1\": \"This\", \"2\": \"that\" } time we can just accept { \"1\": \"everything\", \"2\": \"nothing\" } at once by pressing Ctrl+Enter.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"Direction = ({\n  Forward: 1,\n  Backward: -1,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"$$log = htl.html`<pre style=\"white-space:pre-wrap; max-width: 100%;\">`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"log = !matchMedia('(pointer:coarse)').matches\n  ? globalThis.console.log\n  : (...a) => {\n    $log.textContent = JSON.stringify(a, null, 4)\n  }","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"<style>\n  ${SELECTOR}:not(.dirty) button {\n    display: none;\n  }\n  \n  ${SELECTOR} button {\n    opacity: 0.7;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n  ${SELECTOR} button:hover {\n    opacity: 1;\n  }\n  \n</style>","pinned":true,"hidden":false,"mode":"html"},{"id":52,"value":"class JsonMatcher extends Irregex {\n  getMatch(str) {\n    let i = 0\n    let startCursor = this.lastIndex - 1\n    while (true) {\n      ++startCursor\n\n      const start = str.indexOf('{', startCursor)\n      if (start === -1) return null\n      let endCursor = start\n      while (true) {\n        ++endCursor\n\n        const end = str.indexOf('}', endCursor)\n\n        if (end === -1) break\n\n        try {\n          const substr = str.slice(start, end + 1)\n          return Object.assign([substr], {\n            index: start,\n            groups: JSON.parse(substr),\n            input: str,\n          })\n        } catch {\n          endCursor = end\n        }\n      }\n    }\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n  let i = 0\n\n  let out = []\n  \n  for (const m of new JsonMatcher()[Symbol.matchAll](\n    `Hello, { \"1\": \"one\", \"2\": \"two\", \"3\": { \"nested\": \"world\" } }! You can select the first option by { \"1\": \"default\", \"2\": \"two\", \"3\": \"three\" }.`\n  )) {\n    if (i++ > 20) break\n    out.push({ m })\n  }\n\n  return out\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"Irregex = {\n  const { Irregex } = await import('https://exports.deno.dev/s/https://raw.githubusercontent.com/lionel-rowe/irregex/main/mod.ts')\n  return Irregex\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"CLASS_NAME = `select-text-${crypto.randomUUID()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"SELECTOR = `.${CLASS_NAME}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"function acceptAllDefaults($text, val) {\n  const matcher = new JsonMatcher()\n  const newVal = $text.value.replaceAll(matcher, (m, ...a) => {\n    const groups = a.find((x) => typeof x === 'object')\n    return groups[val] ?? m\n  })\n\n  let replaced = false\n  if ($text.value !== newVal) {\n    $text.value = newVal\n    replaced = true\n  }\n  highlightNext($text)\n\n  return { replaced, moved: true }\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>