feeles-ide/lib/Cards/ShotCard/Editor.js

The hackable and serializable IDE to make learning material

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { JSHINT } from 'jshint';

import CodeMirror from 'codemirror';
import 'codemirror/mode/meta';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/css/css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/html-hint';
import 'codemirror/addon/hint/css-hint';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/dialog/dialog';
import 'codemirror/addon/search/search';
import 'codemirror/addon/search/searchcursor';
// import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/keymap/sublime';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/dialog/dialog.css';
// import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/fold/foldgutter.css';

import glslMode from 'glsl-editor/glsl';
glslMode(CodeMirror);
CodeMirror.modeInfo.push({
  name: 'glsl',
  mime: 'text/x-glsl',
  mode: 'glsl'
});

import './codemirror-hint-extension';

import CodeMirrorComponent from '../../utils/CodeMirrorComponent';

var Editor = function (_PureComponent) {
  _inherits(Editor, _PureComponent);

  function Editor() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Editor);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Editor.__proto__ || _Object$getPrototypeOf(Editor)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      jshintrc: null
    }, _this.handleCodemirror = function (ref) {
      if (!ref) return;
      var cm = ref.getCodeMirror();
      if (cm) {
        _this.showHint(cm);
        _this.props.codemirrorRef(cm);
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Editor, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      if (this.props.file === nextProps.file) {
        return false;
      }
      return true;
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var jshintrc = this.props.findFile('.jshintrc');
      if (jshintrc) {
        // .jshintrc があれば JSHint でチェック
        window.JSHINT = JSHINT;
        try {
          this.setState({
            jshintrc: JSON.parse(jshintrc.text)
          });
        } catch (e) {
          // continue regardless of error
        }
      }
    }
  }, {
    key: 'showHint',
    value: function showHint(cm) {
      var _this2 = this;

      if (!this.props.showHint) {
        return;
      }
      var getFiles = this.props.getFiles;


      cm.on('change', function (_cm, change) {
        if (change.origin === 'setValue' || change.origin === 'complete') return;
        var cursor = cm.getCursor();
        cm.scrollIntoView(cursor);
        cm.showHint({
          completeSingle: false,
          files: getFiles(),
          snippets: _this2.props.snippets
        });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          file = _props.file,
          lineNumbers = _props.lineNumbers;


      var meta = CodeMirror.findModeByMIME(file.type);
      var mode = meta && meta.mode;

      return React.createElement(CodeMirrorComponent, {
        id: file.key,
        value: file.text,
        mode: mode,
        lineNumbers: lineNumbers,
        keyMap: 'sublime',
        extraKeys: this.props.extraKeys,
        ref: this.handleCodemirror
      });
    }
  }]);

  return Editor;
}(PureComponent);

Editor.propTypes = {
  file: PropTypes.object.isRequired,
  getFiles: PropTypes.func.isRequired,
  getConfig: PropTypes.func.isRequired,
  codemirrorRef: PropTypes.func.isRequired,
  snippets: PropTypes.array.isRequired,
  showHint: PropTypes.bool.isRequired,
  extraKeys: PropTypes.object.isRequired,
  lineNumbers: PropTypes.bool.isRequired,
  findFile: PropTypes.func.isRequired
};
Editor.defaultProps = {
  getFiles: function getFiles() {
    return [];
  },
  codemirrorRef: function codemirrorRef() {},
  snippets: [],
  showHint: true,
  extraKeys: {},
  lineNumbers: true
};
export default Editor;