test-repo/website/playground/panels.jsx

import { catppuccinLatte, catppuccinMocha } from "@catppuccin/codemirror";
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
import {
  defaultKeymap,
  history,
  historyKeymap,
  indentWithTab,
} from "@codemirror/commands";
import {
  bracketMatching,
  foldable,
  foldEffect,
  foldGutter as foldGutterExt,
  foldKeymap,
} from "@codemirror/language";
import {
  Compartment,
  EditorState,
  StateEffect,
  StateField,
} from "@codemirror/state";
import {
  Decoration,
  EditorView,
  keymap,
  lineNumbers as lineNumbersExt,
} from "@codemirror/view";
import { onMounted, onUnmounted, useTemplateRef, watch } from "vue";
import { useTheme } from "./composables/use-theme.js";
import { getLanguageExtension } from "./panel/language.js";

function setup(props, { emit }) {
  const editorRef = useTemplateRef("editorRef");

  let _codeMirror = null;
  let _cached = "";
  const _overlay = StateEffect.define();

  const overlayField = StateField.define({
    create() {
      return Decoration.none;
    },
    update(decorations, tr) {
      for (const effect of tr.effects) {
        if (effect.is(_overlay)) {
          let { start, end } = effect.value;
          if (start !== undefined && end !== undefined) {
            if (end < start) {
              [start, end] = [end, start];
            }
            const { length } = _codeMirror.state.doc;
            start = Math.min(Math.max(start, 0), length);
            end = Math.min(Math.max(end, 0), length);
            if (start !== end) {
              return Decoration.set([overlayMark.range(start, end)]);
            }
          }
          return Decoration.none;
        }
      }
      return decorations.map(tr.changes);
    },
    provide: (f) => EditorView.decorations.from(f),
  });

  const overlayMark = Decoration.mark({
    class: "cm-overlay-highlight",
  });

  const languageExt = new Compartment();
  const rulerTheme = new Compartment();
  const foldGutterCompartment = new Compartment();

  const { theme } = useTheme();
  const editorTheme = new Compartment();

  const onChange = (value) => {
    emit("change", value);
  };

  const createRulerTheme = (printWidth, color) => {
    if (!printWidth) {
      return EditorView.theme({});
    }

    return EditorView.theme({
      ".cm-content::before": {
        content: '""',
        position: "absolute",
        top: "0",
        bottom: "0",
        left: `${printWidth}ch`,
        width: "1px",
        backgroundColor: color || "var(--color-gray-300)",
        pointerEvents: "none",
        zIndex: "1",
        marginLeft: "6px",
      },
    });
  };

  const componentDidMount = async () => {
    const options = { ...props };
    for (const property of [
      "ruler",
      "rulerColor",
      "value",
      "selection",
      "onChange",
    ]) {
      delete options[property];
    }

    for (const [key, value] of Object.entries(options)) {
      if (value === undefined) {
        delete options[key];
      }
    }

    const lang = await getLanguageExtension(props.mode);

    const state = EditorState.create({
      doc: props.value || "",
      extensions: [
        props.lineNumbers ? lineNumbersExt() : undefined,
        foldGutterCompartment.of(
          props.foldGutter
            ? foldGutterExt({
                openText: "▾",
                closedText: "▸",
              })
            : [],
        ),
        props.autoCloseBrackets ? closeBrackets() : undefined,
        props.matchBrackets ? bracketMatching() : undefined,

        languageExt.of(lang),
        editorTheme.of(
          theme.value === "dark" ? catppuccinMocha : catppuccinLatte,
        ),
        overlayField,
        history(),
        keymap.of([
          ...defaultKeymap,
          ...closeBracketsKeymap,
          ...historyKeymap,
          ...foldKeymap,
          indentWithTab,
          { key: "Ctrl-l", run: () => false },
          ...(props.extraKeys
            ? Object.entries(props.extraKeys).map(([key, cmd]) => ({
                key,
                run: cmd,
              }))
            : []),
        ]),

        EditorState.tabSize.of(props.tabSize ?? 4),
        EditorState.readOnly.of(props.readOnly ?? false),

        rulerTheme.of(createRulerTheme(props.ruler, props.rulerColor)),

        EditorView.updateListener.of((update) => {
          if (update.docChanged) {
            const value = update.state.doc.toString();
            if (value !== _cached) {
              handleChange(value);
            }
          }

          if (update.selectionSet) {
            const selection = update.state.selection.main;
            handleSelectionChange(selection);
          }
        }),
      ].filter(Boolean),
    });

    _codeMirror = new EditorView({
      state,
      parent: editorRef.value,
    });

    updateSelection();
    updateOverlay();
  };

  const componentWillUnmount = () => {
    _codeMirror?.destroy();
  };

  const updateValue = (value) => {
    if (_cached === value) {
      return;
    }
    _cached = value;
    _codeMirror.dispatch({
      changes: {
        from: 0,
        to: _codeMirror.state.doc.length,
        insert: value,
      },
    });

    if (!(props.autoFold instanceof RegExp)) {
      return;
    }

    const lines = value.split("\n");
    const effects = [];

    for (let i = lines.length - 1; i >= 0; i--) {
      if (props.autoFold.test(lines[i])) {
        const lineNumber = i + 1;
        const range = foldable(
          _codeMirror.state,
          _codeMirror.state.doc.line(lineNumber).from,
          _codeMirror.state.doc.line(lineNumber).to,
        );

        if (range) {
          effects.push(foldEffect.of(range));
        }
      }
    }

    if (effects.length > 0) {
      _codeMirror.dispatch({ effects });
    }
  };

  const updateSelection = () => {
    if (!props.selection || !_codeMirror) {
      return;
    }

    const { doc } = _codeMirror.state;
    const anchor = Math.max(props.selection.anchor ?? 0, 0);
    const head = Math.min(props.selection.head ?? anchor, doc.length);

    const currentSelection = _codeMirror.state.selection.main;
    if (currentSelection.anchor !== anchor || currentSelection.head !== head) {
      _codeMirror.dispatch({
        selection: { anchor, head },
      });
    }
  };

  const updateOverlay = () => {
    if (!_codeMirror) {
      return;
    }

    _codeMirror.dispatch({
      effects: _overlay.of({
        start: props.overlayStart,
        end: props.overlayEnd,
      }),
    });
  };

  const handleChange = (value) => {
    _cached = value;
    onChange(value);
    updateOverlay();
  };

  const handleSelectionChange = (selection) => {
    if (!props.onSelectionChange || !selection) {
      return;
    }

    props.onSelectionChange({
      anchor: selection.anchor,
      head: selection.head,
    });
  };

  const render = () => (
    <div class="editor input">
      <div ref="editorRef" style={{ position: "absolute", inset: 0 }} />
    </div>
  );

  onMounted(componentDidMount);
  onUnmounted(componentWillUnmount);

  watch(
    () => props.value,
    (value) => {
      if (!_codeMirror) {
        return;
      }

      if (value !== _cached) {
        updateValue(value);
      }
    },
  );

  watch(
    () => props.mode,
    async (mode) => {
      if (!_codeMirror) {
        return;
      }

      _codeMirror.dispatch({
        effects: languageExt.reconfigure(await getLanguageExtension(mode)),
      });
    },
  );

  watch(
    () => props.ruler,
    (ruler) => {
      if (!_codeMirror) {
        return;
      }

      _codeMirror.dispatch({
        effects: rulerTheme.reconfigure(
          createRulerTheme(ruler, props.rulerColor),
        ),
      });
    },
  );

  watch(
    () => props.rulerColor,
    (rulerColor) => {
      if (!_codeMirror) {
        return;
      }

      _codeMirror.dispatch({
        effects: rulerTheme.reconfigure(
          createRulerTheme(props.ruler, rulerColor),
        ),
      });
    },
  );

  watch(
    () => props.selection,
    () => {
      if (!_codeMirror) {
        return;
      }

      updateSelection();
    },
    { deep: true },
  );

  watch(
    () => [props.overlayStart, props.overlayEnd],
    () => {
      if (!_codeMirror) {
        return;
      }

      updateOverlay();
    },
  );

  watch(
    () => props.foldGutter,
    (foldGutter) => {
      if (!_codeMirror) {
        return;
      }

      _codeMirror.dispatch({
        effects: foldGutterCompartment.reconfigure(
          foldGutter ? foldGutterExt() : [],
        ),
      });
    },
  );

  watch(theme, (newTheme) => {
    _codeMirror.dispatch({
      effects: editorTheme.reconfigure(
        newTheme === "dark" ? catppuccinMocha : catppuccinLatte,
      ),
    });
  });

  return render;
}

const CodeMirrorPanel = {
  name: "CodeMirrorPanel",
  props: {
    value: { type: String, required: true },
    selection: { type: Object, default: undefined },
    onSelectionChange: { type: Function, default: undefined },
    ruler: { type: Number, default: undefined },
    rulerColor: { type: String, default: undefined },
    overlayStart: { type: Number, default: undefined },
    overlayEnd: { type: Number, default: undefined },
    mode: { type: String, required: true },
    foldGutter: { type: Boolean, default: undefined },
    autoFold: { type: RegExp, default: undefined },
    codeSample: { type: String, default: undefined },
    lineNumbers: { type: Boolean, default: undefined },
    keyMap: { type: String, default: undefined },
    autoCloseBrackets: { type: Boolean, default: undefined },
    matchBrackets: { type: Boolean, default: undefined },
    showCursorWhenSelecting: { type: Boolean, default: undefined },
    tabSize: { type: Number, default: undefined },
    readOnly: { type: Boolean, default: undefined },
    extraKeys: { type: Object, default: undefined },
  },
  emits: ["change"],
  setup,
};

export function InputPanel(props) {
  return (
    <CodeMirrorPanel
      lineNumbers={true}
      keyMap="sublime"
      autoCloseBrackets={true}
      matchBrackets={true}
      showCursorWhenSelecting={true}
      tabSize={4}
      rulerColor="color-mix(in oklab, currentColor 10%, transparent)"
      {...props}
    />
  );
}

export function OutputPanel(props) {
  return (
    <CodeMirrorPanel
      readOnly={true}
      lineNumbers={true}
      rulerColor="currentColor"
      {...props}
    />
  );
}

export function DebugPanel({ mode, value, autoFold }) {
  return (
    <CodeMirrorPanel
      readOnly={true}
      lineNumbers={false}
      foldGutter={true}
      autoFold={autoFold}
      mode={mode}
      value={value}
    />
  );
}