gistfile1.js

<script type="text/jsx">

    var Modal = ReactBootstrap.Modal;
    var ModalTrigger = ReactBootstrap.ModalTrigger;
    var OverlayMixin = ReactBootstrap.OverlayMixin;
    var Button = ReactBootstrap.Button;

    var RefinableContent = React.createClass({
        render: function () {

            var content = this.props.content;

            if (!this.state.refineTextModalVisible) {
                return  (
                    <div className="refinable-content">
                        <p onMouseUp={this.onMouseUp}>{content}</p>
                    </div>
                )
            }

            if (this.state.refineTextModalVisible) {
                return (
                    <div>
                        <div className="refinable-content">
                            <p onMouseUp={this.onMouseUp}>{content}</p>
                        </div>
                        <Modal bsStyle="primary" title="Refine text" onRequestHide={this.handleToggleRefineTextModal}>
                            <div className="modal-body">
                                <blockquote>
                                    <p>{this.state.selectedText}</p>
                                </blockquote>
                                <textarea ref="refinedComment" className="form-control" placeholder="Type your comment"></textarea>
                            </div>
                            <div className="modal-footer">
                                <Button onClick={this.handleToggleRefineTextModal}>Close</Button>
                                <Button bsStyle="primary" onClick={this.handleAddRefinement}>Save</Button>
                            </div>
                        </Modal>
                    </div>
                );
            }
        },
        onMouseUp: function (e) {
            // only left mouse button
            if (e.button !== 0) return;
            var selectedText = this.getSelectedText();
            if (selectedText.length > 0) {
                this.setState({
                    selectedText: selectedText
                });
                this.handleToggleRefineTextModal();
            }
        },
        getSelectedText: function() {

            var selectedText = '';

            if (window.getSelection){
                selectedText = window.getSelection();
            } else if(document.getSelection){
                selectedText = document.getSelection();
            }else if(document.selection){
                selectedText = document.selection.createRange().text;
            }
            return selectedText.toString();
        },

        getInitialState: function () {
            return {
                refineTextModalVisible: false,
                selectedText: ''
            };
        },

        handleToggleRefineTextModal: function () {
            this.setState({
                refineTextModalVisible: !this.state.refineTextModalVisible
            });
        },

        handleAddRefinement: function() {

            var comment = this.refs.refinedComment.getDOMNode().value;
            alert(comment);
        }
    });