rodemirror/dist/index.js

React component for CodeMirror 6

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};

// react-import.js
import React from "react";

// src/index.tsx
import { EditorState, StateEffect } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { forwardRef, useEffect as useEffect2, useMemo, useRef as useRef2, useState } from "react";

// src/merge-refs.ts
import React2 from "react";
function setRefs(ref, value) {
  if (typeof ref === "function") {
    ref(value);
  } else if (ref) {
    ;
    ref.current = value;
  }
}
function useMergeRefs(forwardedRef, localRef) {
  return React2.useCallback((value) => {
    setRefs(forwardedRef, value);
    setRefs(localRef, value);
  }, [forwardedRef, localRef]);
}

// src/use-first-render.ts
import { useEffect, useRef } from "react";
var useFirstRender = () => {
  const firstRender = useRef(true);
  useEffect(() => {
    firstRender.current = false;
  }, []);
  return firstRender.current;
};

// src/index.tsx
var CodeMirror = forwardRef(({
  value,
  selection,
  onEditorViewChange,
  onEditorStateChange,
  onUpdate,
  extensions: passedExtensions = [],
  elementProps
}, ref) => {
  const innerRef = useRef2(null);
  const mergedRef = useMergeRefs(ref, innerRef);
  const [editorView, setEditorView] = useState(null);
  const updateExtension = useMemo(() => onUpdate ? EditorView.updateListener.of(onUpdate) : void 0, []);
  const extensions = useMemo(() => updateExtension ? [updateExtension, ...passedExtensions] : passedExtensions, [updateExtension, passedExtensions]);
  const isFirstRender = useFirstRender();
  useEffect2(() => {
    const state = EditorState.create({
      doc: value,
      selection,
      extensions
    });
    if (onEditorStateChange)
      onEditorStateChange(state);
    const view = new EditorView({
      parent: innerRef.current,
      state
    });
    setEditorView(view);
    if (onEditorViewChange)
      onEditorViewChange(view);
    return () => view.destroy();
  }, [innerRef]);
  useEffect2(() => {
    if (isFirstRender || !editorView)
      return;
    editorView.dispatch({
      effects: StateEffect.reconfigure.of(extensions)
    });
  }, [passedExtensions]);
  useEffect2(() => {
    if (isFirstRender || !editorView)
      return;
    const transaction = editorView.state.update({
      selection
    });
    editorView.dispatch(transaction);
  }, [selection, editorView]);
  useEffect2(() => {
    if (isFirstRender || !editorView)
      return;
    const transaction = editorView.state.update({
      changes: {
        from: 0,
        to: editorView.state.doc.length,
        insert: value
      },
      selection: editorView.state.selection
    });
    editorView.dispatch(transaction);
  }, [value, editorView]);
  return /* @__PURE__ */ React.createElement("div", __spreadValues({
    ref: mergedRef
  }, elementProps));
});
CodeMirror.displayName = "CodeMirror";
var src_default = CodeMirror;
export {
  src_default as default
};