@uiw/react-codemirror/cjs/useCodeMirror.js

CodeMirror component for React.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCodeMirror = useCodeMirror;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _basicSetup = require("@codemirror/basic-setup");

var _state = require("@codemirror/state");

var _commands = require("@codemirror/commands");

var _view = require("@codemirror/view");

var _themeOneDark = require("@codemirror/theme-one-dark");

var _light = require("./theme/light");

function useCodeMirror(props) {
  var value = props.value,
      selection = props.selection,
      onChange = props.onChange,
      onUpdate = props.onUpdate,
      _props$extensions = props.extensions,
      extensions = _props$extensions === void 0 ? [] : _props$extensions,
      autoFocus = props.autoFocus,
      _props$theme = props.theme,
      theme = _props$theme === void 0 ? 'light' : _props$theme,
      _props$height = props.height,
      height = _props$height === void 0 ? '' : _props$height,
      _props$minHeight = props.minHeight,
      minHeight = _props$minHeight === void 0 ? '' : _props$minHeight,
      _props$maxHeight = props.maxHeight,
      maxHeight = _props$maxHeight === void 0 ? '' : _props$maxHeight,
      _props$placeholder = props.placeholder,
      placeholderStr = _props$placeholder === void 0 ? '' : _props$placeholder,
      _props$width = props.width,
      width = _props$width === void 0 ? '' : _props$width,
      _props$minWidth = props.minWidth,
      minWidth = _props$minWidth === void 0 ? '' : _props$minWidth,
      _props$maxWidth = props.maxWidth,
      maxWidth = _props$maxWidth === void 0 ? '' : _props$maxWidth,
      _props$editable = props.editable,
      editable = _props$editable === void 0 ? true : _props$editable,
      _props$indentWithTab = props.indentWithTab,
      defaultIndentWithTab = _props$indentWithTab === void 0 ? true : _props$indentWithTab,
      _props$basicSetup = props.basicSetup,
      defaultBasicSetup = _props$basicSetup === void 0 ? true : _props$basicSetup,
      root = props.root;

  var _useState = (0, _react.useState)(props.container),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      container = _useState2[0],
      setContainer = _useState2[1];

  var _useState3 = (0, _react.useState)(),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      view = _useState4[0],
      setView = _useState4[1];

  var _useState5 = (0, _react.useState)(),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      state = _useState6[0],
      setState = _useState6[1];

  var defaultThemeOption = _view.EditorView.theme({
    '&': {
      height: height,
      minHeight: minHeight,
      maxHeight: maxHeight,
      width: width,
      minWidth: minWidth,
      maxWidth: maxWidth
    }
  });

  var updateListener = _view.EditorView.updateListener.of(function (vu) {
    if (vu.docChanged && typeof onChange === 'function') {
      var doc = vu.state.doc;

      var _value = doc.toString();

      onChange(_value, vu);
    }
  });

  var getExtensions = [updateListener, defaultThemeOption];

  if (defaultIndentWithTab) {
    getExtensions.unshift(_view.keymap.of([_commands.indentWithTab]));
  }

  if (defaultBasicSetup) {
    getExtensions.unshift(_basicSetup.basicSetup);
  }

  if (placeholderStr) {
    getExtensions.unshift((0, _view.placeholder)(placeholderStr));
  }

  switch (theme) {
    case 'light':
      getExtensions.push(_light.defaultLightThemeOption);
      break;

    case 'dark':
      getExtensions.push(_themeOneDark.oneDark);
      break;

    default:
      getExtensions.push(theme);
      break;
  }

  if (editable === false) {
    getExtensions.push(_view.EditorView.editable.of(false));
  }

  if (onUpdate && typeof onUpdate === 'function') {
    getExtensions.push(_view.EditorView.updateListener.of(onUpdate));
  }

  getExtensions = getExtensions.concat(extensions);
  (0, _react.useEffect)(function () {
    if (container && !state) {
      var stateCurrent = _state.EditorState.create({
        doc: value,
        selection: selection,
        extensions: getExtensions
      });

      setState(stateCurrent);

      if (!view) {
        var viewCurrent = new _view.EditorView({
          state: stateCurrent,
          parent: container,
          root: root
        });
        setView(viewCurrent);
      }
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [container, state]);
  (0, _react.useEffect)(function () {
    return function () {
      if (view) {
        view.destroy();
        setView(undefined);
      }
    };
  }, [view]);
  (0, _react.useEffect)(function () {
    if (autoFocus && view) {
      view.focus();
    }
  }, [autoFocus, view]);
  (0, _react.useEffect)(function () {
    var currentValue = view ? view.state.doc.toString() : '';

    if (view && value !== currentValue) {
      view.dispatch({
        changes: {
          from: 0,
          to: currentValue.length,
          insert: value || ''
        }
      });
    }
  }, [value, view]);
  (0, _react.useEffect)(function () {
    if (view) {
      view.dispatch({
        effects: _state.StateEffect.reconfigure.of(getExtensions)
      });
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [theme, extensions, height, minHeight, maxHeight, width, placeholderStr, minWidth, maxWidth, editable, defaultIndentWithTab, defaultBasicSetup]);
  return {
    state: state,
    setState: setState,
    view: view,
    setView: setView,
    container: container,
    setContainer: setContainer
  };
}
//# sourceMappingURL=useCodeMirror.js.map