s-cork

import { RangeSetBuilder } from "@codemirror/state";
import { Extension } from "@codemirror/state";
import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from "@codemirror/view";

export function indentationGuides(): Extension {
    return [ViewPlugin.fromClass(IndentationGuides, { decorations: (v) => v.decorations }), indentationTheme];
}

// markers can be used at positions on a line over a range
const indentationMark = Decoration.mark({ class: "cm-indentation-guide" });

s-cork

import React, { useEffect, useMemo, useCallback, useLayoutEffect, useState } from "react";
import { EditorView } from "@codemirror/view";
import { EditorState, Compartment, EditorStateConfig, StateEffect, Extension } from "@codemirror/state";
import { indentUnit } from "@codemirror/language";

/** creates an editor view from an initial state - destroys the view on cleanup */
export function useEditorView(initState: (() => EditorStateConfig) | EditorStateConfig = {}): EditorView {
    const view = useMemo(
        () => new EditorView({ state: EditorState.create(typeof initState === "function" ? initState() : initState) }),
        []

s-cork

http://g.recordit.co/CWfjWxrBqz.gif