feeles-ide/lib/Cards/ReadmeCard/Readme.js

The hackable and serializable IDE to make learning material

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _styles = require("@material-ui/core/styles");

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

var _typestyle = require("typestyle");

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _colorManipulator = require("@material-ui/core/styles/colorManipulator");

var _OpenInNew = _interopRequireDefault(require("@material-ui/icons/OpenInNew"));

var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));

var _CodeMirrorComponent = _interopRequireDefault(require("../../utils/CodeMirrorComponent"));

var _MDReactComponent = _interopRequireDefault(require("../../jsx/MDReactComponent"));

var _dec, _class, _class2, _temp;

var cn = {
  blockquote: (0, _typestyle.style)({
    marginLeft: '1rem',
    paddingLeft: '1rem',
    borderLeftWidth: 5,
    borderLeftStyle: 'solid'
  }),
  img: (0, _typestyle.style)({
    maxWidth: '100%'
  }),
  table: (0, _typestyle.style)({
    margin: '1rem 0',
    borderLeftWidth: 1,
    borderLeftStyle: 'solid',
    borderSpacing: 0
  }),
  containedButton: (0, _typestyle.style)({
    margin: 4
  })
};

var getCn = function getCn(props) {
  return {
    root: (0, _typestyle.style)({
      boxSizing: 'border-box',
      overflow: 'scroll',
      borderColor: props.theme.palette.divider
    }),
    th: (0, _typestyle.style)({
      padding: props.theme.spacing.unit,
      borderTopWidth: 1,
      borderTopStyle: 'solid',
      borderRightWidth: 1,
      borderRightStyle: 'solid',
      borderBottomWidth: 1,
      borderBottomStyle: 'solid'
    }),
    td: (0, _typestyle.style)({
      padding: props.theme.spacing.unit,
      borderRightWidth: 1,
      borderRightStyle: 'solid',
      borderBottomWidth: 1,
      borderBottomStyle: 'solid'
    }),
    code: (0, _typestyle.style)({
      backgroundColor: (0, _colorManipulator.emphasize)(props.theme.palette.background.paper, 0.07),
      padding: '.2em',
      borderRadius: 2
    })
  };
};

var mdComponents = [{
  // 外部リンク
  validate: function validate(tag, props) {
    return tag === 'a' && isValidURL(props.href);
  },
  render: function render(tag, props, children) {
    return _react.default.createElement(_Button.default, {
      variant: "contained",
      color: "primary",
      key: props.key,
      href: props.href,
      target: "_blank",
      className: cn.containedButton
    }, _react.default.createElement("span", null, children), _react.default.createElement(_OpenInNew.default, null));
  }
}, {
  // Feeles 内リンク
  validate: function validate(tag) {
    return tag === 'a';
  },
  render: function render(tag, props, children, component) {
    var onClick = function onClick() {
      component.props.setLocation(decodeURIComponent(props.href));
    };

    return _react.default.createElement(_Button.default, {
      variant: "contained",
      color: "primary",
      key: props.key,
      className: cn.containedButton,
      onClick: onClick
    }, _react.default.createElement("span", {
      className: cn.containedButtonLabel
    }, children));
  }
}, {
  // 外部リンク画像
  validate: function validate(tag, props) {
    return tag === 'img' && isValidURL(props.src);
  },
  render: function render(tag, props) {
    return _react.default.createElement("img", (0, _extends2.default)({}, props, {
      className: cn.img
    }));
  }
}, {
  // Feeles 内画像
  validate: function validate(tag) {
    return tag === 'img';
  },
  render: function render(tag, props, children, component) {
    var file = component.props.findFile(decodeURIComponent(props.src));

    if (!file) {
      return _react.default.createElement("span", props, props.alt);
    }

    if (file.is('blob')) {
      return _react.default.createElement("img", (0, _extends2.default)({}, props, {
        className: cn.img,
        src: file.blobURL
      }));
    } // Edit file


    var onClick = function onClick() {
      component.props.globalEvent.emit('message.editor', {
        data: {
          value: file.name
        }
      });
    };

    return _react.default.createElement(_Button.default, {
      variant: "contained",
      color: "primary",
      key: props.key,
      className: cn.containedButton,
      onClick: onClick
    }, _react.default.createElement(_Edit.default, null), _react.default.createElement("span", {
      className: cn.containedButtonLabel
    }, props.alt));
  }
}, {
  // インタプリタ
  validate: function validate(tag) {
    return tag === 'pre';
  },
  render: function render(tag, props, children) {
    var code = children[0].props.children[0] || '';
    var containerStyle = {
      position: 'relative',
      height: Math.min(20, code.split('\n').length) + 'rem',
      paddingBottom: 8
    };
    return _react.default.createElement("div", {
      key: props.key + code,
      style: containerStyle
    }, _react.default.createElement(_CodeMirrorComponent.default, {
      id: "Readme",
      value: code,
      mode: "javascript",
      keyMap: "sublime",
      readOnly: true
    }));
  }
}, {
  // 引用
  validate: function validate(tag) {
    return tag === 'blockquote';
  },
  render: function render(tag, props, children) {
    return _react.default.createElement(_Typography.default, {
      className: cn.blockquote,
      color: "textSecondary"
    }, children);
  }
}];
var Readme = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(Readme, _PureComponent);

  function Readme() {
    (0, _classCallCheck2.default)(this, Readme);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Readme).apply(this, arguments));
  }

  (0, _createClass2.default)(Readme, [{
    key: "render",
    value: function render() {
      var _this = this;

      var dcn = getCn(this.props);

      var onIterate = function onIterate(tag, props, children) {
        for (var _i = 0; _i < mdComponents.length; _i++) {
          var _mdComponents$_i = mdComponents[_i],
              validate = _mdComponents$_i.validate,
              render = _mdComponents$_i.render;

          if (validate(tag, props)) {
            return render(tag, props, children, _this);
          }
        }

        if (tag in cn) {
          props = (0, _objectSpread2.default)({}, props, {
            className: cn[tag]
          });
        }

        if (tag in dcn) {
          props = (0, _objectSpread2.default)({}, props, {
            className: dcn[tag]
          });
        }

        if (children.length < 1) {
          children = null;
        }

        if (tag === 'p') {
          tag = 'div';
          props = (0, _objectSpread2.default)({}, props, {
            style: (0, _objectSpread2.default)({}, props.style, {
              margin: '14px 0'
            })
          });
        }

        return _react.default.createElement(tag, props, children);
      };

      return _react.default.createElement(_MDReactComponent.default, {
        text: this.props.file.text,
        className: dcn.root,
        onIterate: onIterate
      });
    }
  }]);
  return Readme;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  file: _propTypes.default.object.isRequired,
  findFile: _propTypes.default.func.isRequired,
  getConfig: _propTypes.default.func.isRequired,
  localization: _propTypes.default.object.isRequired,
  completes: _propTypes.default.array.isRequired,
  setLocation: _propTypes.default.func.isRequired,
  globalEvent: _propTypes.default.object.isRequired
}), _temp)) || _class);
exports.default = Readme;

function isValidURL(url) {
  try {
    new URL(url);
    return true;
  } catch (e) {
    return false;
  }
}