@uiw/react-textarea-code-editor/cjs/Editor.js

A simple code editor with syntax highlighting.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {};
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("./utils");
var _shortcuts = _interopRequireDefault(require("./shortcuts"));
var styles = _interopRequireWildcard(require("./styles"));
var _jsxRuntime = require("react/jsx-runtime");
var _SelectionText = require("./SelectionText");
Object.keys(_SelectionText).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _SelectionText[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _SelectionText[key];
    }
  });
});
var _excluded = ["prefixCls", "value", "padding", "minHeight", "placeholder", "language", "data-color-mode", "className", "style", "rehypePlugins", "onChange", "indentWidth"];
var _default = exports["default"] = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-tc-editor' : _props$prefixCls,
    _ = props.value,
    _props$padding = props.padding,
    padding = _props$padding === void 0 ? 10 : _props$padding,
    _props$minHeight = props.minHeight,
    minHeight = _props$minHeight === void 0 ? 16 : _props$minHeight,
    placeholder = props.placeholder,
    language = props.language,
    dataColorMode = props['data-color-mode'],
    className = props.className,
    style = props.style,
    rehypePlugins = props.rehypePlugins,
    onChange = props.onChange,
    _props$indentWidth = props.indentWidth,
    indentWidth = _props$indentWidth === void 0 ? 2 : _props$indentWidth,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var _useState = (0, _react.useState)(props.value || ''),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  (0, _react.useEffect)(function () {
    return setValue(props.value || '');
  }, [props.value]);
  var textRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return textRef.current;
  }, [textRef]);
  var contentStyle = {
    paddingTop: padding,
    paddingRight: padding,
    paddingBottom: padding,
    paddingLeft: padding
  };
  var htmlStr = (0, _react.useMemo)(function () {
    return (0, _utils.processHtml)("<pre aria-hidden=true><code ".concat(language && value ? "class=\"language-".concat(language, "\"") : '', " >").concat((0, _utils.htmlEncode)(String(value || '')), "</code><br /></pre>"), rehypePlugins);
  }, [value, language, rehypePlugins]);
  var preView = (0, _react.useMemo)(function () {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, styles.editor), contentStyle), {}, {
        minHeight: minHeight
      }),
      className: "".concat(prefixCls, "-preview ").concat(language ? "language-".concat(language) : ''),
      dangerouslySetInnerHTML: {
        __html: htmlStr
      }
    });
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [prefixCls, language, htmlStr]);
  var change = function change(evn) {
    setValue(evn.target.value);
    onChange && onChange(evn);
  };
  var keyDown = function keyDown(evn) {
    if (other.readOnly) return;
    if (!other.onKeyDown || other.onKeyDown(evn) !== false) {
      (0, _shortcuts["default"])(evn, indentWidth);
    }
  };
  var textareaProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    autoComplete: 'off',
    autoCorrect: 'off',
    spellCheck: 'false',
    autoCapitalize: 'off'
  }, other), {}, {
    placeholder: placeholder,
    onKeyDown: keyDown,
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, styles.editor), styles.textarea), contentStyle), {}, {
      minHeight: minHeight
    }, placeholder && !value ? {
      WebkitTextFillColor: 'inherit'
    } : {}),
    onChange: change,
    className: "".concat(prefixCls, "-text"),
    value: value
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, styles.container), style),
    className: "".concat(prefixCls, " ").concat(className || ''),
    "data-color-mode": dataColorMode,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, textareaProps), {}, {
      ref: textRef
    })), preView]
  });
});