react-code-view/cjs/CodeEditor.js

Code view for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _CopyCodeButton = _interopRequireDefault(require("./CopyCodeButton"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["code", "editorConfig", "copyButtonAs", "copyButtonProps", "onChange", "onInitialized"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var defaultEditorConfig = {
  mode: 'jsx',
  tabSize: 2,
  theme: 'default'
};
function importCodeMirror() {
  return _importCodeMirror.apply(this, arguments);
}
function _importCodeMirror() {
  _importCodeMirror = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var CodeMirror;
    return _regenerator["default"].wrap(function (_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _context.next = 1;
          return Promise.resolve().then(function () {
            return _interopRequireWildcard(require('codemirror'));
          }).then(function (module) {
            return typeof module === 'function' ? module : module["default"];
          });
        case 1:
          CodeMirror = _context.sent;
          _context.next = 2;
          return Promise.all([Promise.resolve().then(function () {
            return _interopRequireWildcard(require('codemirror/mode/javascript/javascript'));
          }), Promise.resolve().then(function () {
            return _interopRequireWildcard(require('codemirror/mode/jsx/jsx'));
          }), Promise.resolve().then(function () {
            return _interopRequireWildcard(require('codemirror/addon/runmode/runmode'));
          })]);
        case 2:
          return _context.abrupt("return", CodeMirror);
        case 3:
        case "end":
          return _context.stop();
      }
    }, _callee);
  }));
  return _importCodeMirror.apply(this, arguments);
}
var CodeEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var code = props.code,
    editorConfig = props.editorConfig,
    copyButtonAs = props.copyButtonAs,
    copyButtonProps = props.copyButtonProps,
    onChange = props.onChange,
    onInitialized = props.onInitialized,
    rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var textareaRef = (0, _react.useRef)(null);
  var editor = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(false),
    initialized = _useState[0],
    setInitialized = _useState[1];
  var handleChange = (0, _react.useCallback)(function () {
    var _editor$current;
    onChange === null || onChange === void 0 ? void 0 : onChange((_editor$current = editor.current) === null || _editor$current === void 0 ? void 0 : _editor$current.getValue());
  }, [onChange]);
  (0, _react.useEffect)(function () {
    importCodeMirror().then(function (CodeMirror) {
      if (!CodeMirror || !textareaRef.current) {
        return;
      }
      setInitialized(true);
      if (!editor.current) {
        editor.current = CodeMirror.fromTextArea(textareaRef.current, (0, _extends2["default"])({}, defaultEditorConfig, editorConfig));
        editor.current.on('change', handleChange);
        onInitialized === null || onInitialized === void 0 ? void 0 : onInitialized(editor.current);
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  (0, _react.useEffect)(function () {
    if (code) {
      var _editor$current2;
      (_editor$current2 = editor.current) === null || _editor$current2 === void 0 ? void 0 : _editor$current2.setValue(code);
    }
  }, [code]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2["default"])({
    ref: ref
  }, rest, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyCodeButton["default"], (0, _extends2["default"])({
      as: copyButtonAs,
      code: code === null || code === void 0 ? void 0 : code.trim()
    }, copyButtonProps)), !initialized && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "rcv-editor-loader",
      children: "Editor initializing ..."
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
      ref: textareaRef,
      defaultValue: code === null || code === void 0 ? void 0 : code.trim()
    })]
  }));
});
var _default = exports["default"] = CodeEditor;