@compositor/kit/dist/LiveEditor.js

Components for development environments, style guides, and demos

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _grayMatter = require('gray-matter');

var _grayMatter2 = _interopRequireDefault(_grayMatter);

var _styledComponents = require('styled-components');

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _reactLive = require('react-live');

var _Catch = require('./Catch');

var _Catch2 = _interopRequireDefault(_Catch);

var _ui = require('./ui');

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

var Editor = (0, _nanoStyle2.default)(_reactLive.LiveEditor)({
  fontFamily: 'Menlo, monospace',
  fontSize: '14px',
  padding: '8px',
  backgroundColor: '#f6f6f6',
  outline: 'none'
});

var KitEditor = function (_Component) {
  (0, _inherits3.default)(KitEditor, _Component);

  function KitEditor() {
    (0, _classCallCheck3.default)(this, KitEditor);
    return (0, _possibleConstructorReturn3.default)(this, (KitEditor.__proto__ || (0, _getPrototypeOf2.default)(KitEditor)).apply(this, arguments));
  }

  (0, _createClass3.default)(KitEditor, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          code = _props.code,
          scope = _props.scope,
          _props$theme = _props.theme,
          theme = _props$theme === undefined ? {} : _props$theme;

      var _matter = (0, _grayMatter2.default)(code),
          content = _matter.content,
          _matter$data = _matter.data,
          data = _matter$data === undefined ? {} : _matter$data;

      return _react2.default.createElement(
        _Catch2.default,
        null,
        _react2.default.createElement(
          _reactLive.LiveProvider,
          {
            mountStylesheet: false,
            scope: (0, _extends3.default)({
              ThemeProvider: _styledComponents.ThemeProvider,
              theme: theme
            }, scope),
            code: content,
            transformCode: function transformCode(code) {
              return '\n            <ThemeProvider theme={theme}>\n              <div>' + code + '</div>\n            </ThemeProvider>\n          ';
            }
          },
          _react2.default.createElement(
            _ui.Box,
            null,
            _react2.default.createElement(_reactLive.LivePreview, null),
            _react2.default.createElement(
              _ui.Box,
              { mt: 2 },
              _react2.default.createElement(Editor, null)
            ),
            _react2.default.createElement(
              _ui.Box,
              { w: 1 },
              _react2.default.createElement(_reactLive.LiveError, {
                style: {
                  backgroundColor: 'red',
                  color: 'white',
                  padding: '.5rem',
                  height: 'auto'
                }
              })
            )
          )
        )
      );
    }
  }]);
  return KitEditor;
}(_react.Component);

KitEditor.propTypes = {
  code: _propTypes2.default.string.isRequired,
  scope: _propTypes2.default.object,
  theme: _propTypes2.default.object
};
exports.default = KitEditor;