My CodeMirror snippets

Most are done during crafting Agda REPL.

1. A (not published) UTF-8 offset table for rapidly 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.

2. A draggable gutter extension to allow selecting lines by dragging on the line gutter. Does not interfere with other clickable gutter elements.

   Demo. Discussion thread.

3. A leading-whitespace folding service 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 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 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 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 on indented-wrapped line appearence ported from CM5.

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.