sanity-plugin-json-input/lib/PreviewJSON.js

Ace editor for objects in sanity

"use strict";

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

var _get2 = _interopRequireDefault(require("lodash/get"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactAce = _interopRequireDefault(require("react-ace"));

var _PreviewJSON = _interopRequireDefault(require("./PreviewJSON.css"));

require("brace/mode/batchfile");

require("brace/mode/css");

require("brace/mode/html");

require("brace/mode/javascript");

require("brace/mode/json");

require("brace/mode/jsx");

require("brace/mode/markdown");

require("brace/mode/php");

require("brace/mode/sass");

require("brace/mode/scss");

require("brace/mode/python");

require("brace/mode/sh");

require("brace/mode/text");

require("brace/theme/github");

require("brace/theme/monokai");

require("brace/theme/terminal");

require("brace/theme/tomorrow");

var _config = require("./config");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class PreviewJSON extends _react.PureComponent {
  constructor() {
    super(...arguments);

    _defineProperty(this, "ace", _react.default.createRef());
  }

  componentDidMount() {
    // Avoid cursor and focus tracking by Ace
    var ace = this.ace && this.ace.current;

    if (ace) {
      ace.editor.renderer.$cursorLayer.element.style.opacity = 0;
      ace.editor.textInput.getElement().disabled = true;
    }
  }

  render() {
    var _this$props = this.props,
        value = _this$props.value,
        type = _this$props.type;
    var fixedLanguage = (0, _get2.default)(type, 'options.language');
    return _react.default.createElement("div", {
      className: _PreviewJSON.default.root
    }, _react.default.createElement("div", {
      className: _PreviewJSON.default.aceWrapper
    }, _react.default.createElement(_reactAce.default, {
      ref: this.ace,
      mode: value && value.language || fixedLanguage || 'text',
      theme: "monokai",
      width: "100%",
      height: null,
      maxLines: 200,
      readOnly: true,
      wrapEnabled: true,
      showPrintMargin: false,
      highlightActiveLine: false,
      cursorStart: -1,
      value: value && value.code || '',
      onLoad: this.handleEditorLoad,
      tabSize: 2,
      showGutter: false,
      setOptions: _config.ACE_SET_OPTIONS,
      editorProps: _config.ACE_EDITOR_PROPS
    })));
  }

}

exports.default = PreviewJSON;

_defineProperty(PreviewJSON, "propTypes", {
  type: _propTypes.default.object,
  value: _propTypes.default.object
});