# My CodeMirror snippets

Most are done during crafting Agda REPL.

1. A ***(not published)* UTF-8 offset table** for (hopefully) efficient mapping between UTF-8 positions and UTF-16 code units in the document.
> It is a semi-persistent data structure backed by CM's rope structure. [Introduction](https://observablehq.com/@qbane/duck-typing-codemirror-text-data-structure).
2. A [draggable gutter extension](https://gist.github.com/andy0130tw/628a483ef87284b5a0be3904fffe3861) to allow selecting lines by dragging on the line gutter. Does not interfere with other clickable gutter elements.
> [Demo](https://stackblitz.com/edit/codemirror-draggable-gutter). [Discussion thread](https://discuss.codemirror.net/t/is-there-a-setting-to-allow-selecting-line-s-by-clicking-line-numbers/3331/10).
3. A [leading-whitespace folding service](https://gist.github.com/andy0130tw/d5b18efc53bf3af1fddcc8db12198734) to allow ad-hoc folding by whitespace indentations.
> Similar to Vim's concept of folding. Useful when the language is indent-sensitive but you do not have a language service in hand.
4. An [Agda input method](https://gist.github.com/andy0130tw/fb11e01cc249a3bb37132f4da7f5c99c) built upon hacking the out-of-the-box autocompletion plugin.
> A hack to gather candidates of the same label and allows one to navigate it like a grid.
5. An [enhanced search panel](https://gist.github.com/andy0130tw/96172fb589709ce34f80c9618631441e) that replaces the search field with another CodeMirror instance.
> Allow one to bake syntax highlighting, autocompletions, etc. into the field.
6. A [single line setup](https://gist.github.com/andy0130tw/62d692ab52159f533584c78429d1bc5a) to make CM a drop-in replacement to regular text fields.
> A bullet-proof setup to ensure that the text can never contain newline characters.
7. *(Concept only)* A [proposal](https://discuss.codemirror.net/t/making-codemirror-6-respect-indent-for-wrapped-lines/2881/10) on indented-wrapped line appearence [ported from CM5](https://codemirror.net/5/demo/indentwrap.html).

## Deposit for really small pieces of code

Only highlight active lines if all selection is empty.

/** @import {Extension} from '@codemirror/state' */

/** @returns {Extension} */
const exts = () => {
  const cpmActiveLine = new Compartment
  /** @type { [Extension] } */
  const active = [highlightActiveLine()]
  
  return [
    cpmActiveLine.of(active),
    EditorState.transactionExtender.of(tr => {
      const allempty = tr.newSelection.ranges.every(x => x.empty)
      const enabled = cpmActiveLine.get(tr.state).length

      return allempty != enabled ? {
        effects: cpmActiveLine.reconfigure( allempty ? active : [] )
      } : null
    })
  ]
}

> Comment:
> * My original plan was to "stop highlighting that line if it contains a non-empty selection", but there was no easy way to instruct `highlightActiveLine` extension to do so.
> * I wanted to use a state field, but the `provide` requires a facet which does not make sense in my scenerio.