You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
45 lines
1.1 KiB
9 years ago
|
var React = require('react');
|
||
|
|
var ContentEditable = require('../common/ContentEditable.js');
|
||
|
|
|
||
|
|
module.exports = TwistComposer = React.createClass({ displayName: "TwistComposer",
|
||
|
|
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
html: 'default text',
|
||
|
|
placeholder: true,
|
||
|
|
editing: true
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
return React.createElement("div", null, React.createElement(ContentEditable, {
|
||
|
|
tagName: "textarea",
|
||
|
|
onChange: this.onChange,
|
||
|
|
html: this.state.html,
|
||
|
|
preventStyling: true,
|
||
|
|
noLinebreaks: true,
|
||
|
|
placeholder: this.state.placeholder,
|
||
|
|
placeholderText: "Your Name",
|
||
|
|
editing: this.state.editing }), React.createElement("button", { onClick: this.enableEditing }, "Enable Editing"));
|
||
|
|
},
|
||
|
|
|
||
|
|
onChange: function (textContent, setPlaceholder) {
|
||
|
|
if (setPlaceholder) {
|
||
|
|
this.setState({
|
||
|
|
placeholder: true,
|
||
|
|
html: ''
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.setState({
|
||
|
|
placeholder: false,
|
||
|
|
html: textContent
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
enableEditing: function () {
|
||
|
|
// set your contenteditable field into editing mode.
|
||
|
|
this.setState({ editing: true });
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|