refactor file structure

2025-12-13 17:56:25 +00:00 · 2015-12-25 05:41:10 +09:00
parent 152e4129b2
commit 325ae00eeb
53 changed files with 10 additions and 386 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import modes from 'boost/vars/modes'
+import _ from 'lodash'
+var ace = window.ace
+
+module.exports = React.createClass({
+  propTypes: {
+    code: React.PropTypes.string,
+    mode: React.PropTypes.string,
+    className: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    readOnly: React.PropTypes.bool
+  },
+  getDefaultProps: function () {
+    return {
+      readOnly: false
+    }
+  },
+  componentWillReceiveProps: function (nextProps) {
+    if (nextProps.readOnly !== this.props.readOnly) {
+      this.editor.setReadOnly(!!nextProps.readOnly)
+    }
+  },
+  componentDidMount: function () {
+    var el = ReactDOM.findDOMNode(this.refs.target)
+    var editor = this.editor = ace.edit(el)
+    editor.$blockScrolling = Infinity
+    editor.setValue(this.props.code)
+    editor.renderer.setShowGutter(true)
+    editor.setTheme('ace/theme/xcode')
+    editor.clearSelection()
+    editor.moveCursorTo(0, 0)
+    editor.commands.addCommand({
+      name: 'Emacs cursor up',
+      bindKey: {mac: 'Ctrl-P'},
+      exec: function (editor) {
+        editor.navigateUp(1)
+        if (editor.getCursorPosition().row < editor.getFirstVisibleRow()) editor.scrollToLine(editor.getCursorPosition().row, false, false)
+      },
+      readOnly: true
+    })
+
+    editor.setReadOnly(!!this.props.readOnly)
+
+    var session = editor.getSession()
+    let mode = _.findWhere(modes, {name: this.props.mode})
+    let syntaxMode = mode != null
+      ? mode.mode
+      : 'text'
+    session.setMode('ace/mode/' + syntaxMode)
+
+    session.setUseSoftTabs(true)
+    session.setOption('useWorker', false)
+    session.setUseWrapMode(true)
+
+    session.on('change', function (e) {
+      if (this.props.onChange != null) {
+        var value = editor.getValue()
+        this.props.onChange(e, value)
+      }
+    }.bind(this))
+  },
+  componentDidUpdate: function (prevProps) {
+    if (this.editor.getValue() !== this.props.code) {
+      this.editor.setValue(this.props.code)
+      this.editor.clearSelection()
+    }
+    if (prevProps.mode !== this.props.mode) {
+      var session = this.editor.getSession()
+      let mode = _.findWhere(modes, {name: this.props.mode})
+      let syntaxMode = mode != null
+        ? mode.mode
+        : 'text'
+      session.setMode('ace/mode/' + syntaxMode)
+    }
+  },
+  getFirstVisibleRow: function () {
+    return this.editor.getFirstVisibleRow()
+  },
+  getCursorPosition: function () {
+    return this.editor.getCursorPosition()
+  },
+  moveCursorTo: function (row, col) {
+    this.editor.moveCursorTo(row, col)
+  },
+  scrollToLine: function (num) {
+    this.editor.scrollToLine(num, false, false)
+  },
+  render: function () {
+    return (
+      <div ref='target' className={this.props.className == null ? 'CodeEditor' : 'CodeEditor ' + this.props.className}></div>
+    )
+  }
+})