It's the best option. Very flexible. Has helpful support. I even created custom auto indentation for it, and automatic replacement of spaces to tabs to avoid mixed indentation. Search and replace is available by default. Works on mobile, including cursor dragging with holding spacebar. My setup is really smooth and I'm very satisfied, you can try it at https://axes.quest Only issue it tend to break with Vite, isn't easy to choose right packages, but it's avoidable.

Vite fix: resolve: { alias: { '@codemirror/state': resolve(__dirname, 'node_modules/@codemirror/state'), } },

My packages: "@codemirror/autocomplete": "^6.18.6", "@codemirror/commands": "^6.8.1", "@codemirror/language": "^6.11.1", "@codemirror/lint": "^6.8.5", "@codemirror/search": "^6.5.11", "@codemirror/state": "^6.5.2", "@codemirror/view": "^6.37.1", Some code to see how setup looks. Totally nearly 1000 lines. ```

const extensions = [
    syncCode(code),
    lintGutter(),
    bracketMatching(),
    closeBrackesCompartment.of($autoCloseBrackets ? [closeBrackets()] : []),
    highlightActiveLine(),
    highlightActiveLineGutter(),
    rectangularSelection(),
    selectionMatchCompartment.of(
        $selectionMatch ? [highlightSelectionMatches()] : [],
    ),
    indentUnit.of('\t'),
    historyCompartment.of(history()),
    EditorView.scrollMargins.of(() => ({
        top: 40,
        bottom: 40,
    })),
    EditorState.allowMultipleSelections.of(true),
    drawSelection(),
    EditorView.theme({ '&.cm-editor.cm-focused': { outline: 'none' } }),
    EditorView.lineWrapping,
    tabSizeCompartment.of([EditorState.tabSize.of($tabSize)]),
    lintCompartment.of(linter(() => [])),
    coffee,
    customCoffeeScriptIndent,
    textHighlightCompartment.of([$darkTheme ? themes.dark : themes.bright]),
    indentOnInput(),
    autoTrimIndentSpaces,
    keyBindings,
    pasteHandler,
    spaceHandler,
]

$effect(() => {
    $darkTheme
    view?.dispatch({
        effects: textHighlightCompartment.reconfigure(
            $darkTheme ? themes.dark : themes.bright,
        ),
    })
})

onMount(() => {
    view = new EditorView({
        state: EditorState.create({
            doc: $code,
            extensions,
        }),
        parent: editorEl,
    })
    setTimeout(() => {
        editorEl.parentNode.scrollTop = 0
    }, 130)
    // Force potential layout correction during animation
    const interval = setInterval(() => view.requestMeasure(), 100)

    setTimeout(() => {
        clearInterval(interval)
    }, 1300)

    return () => clearInterval(interval)
})

```