@@ -119,98 +66,15 @@ module.exports = PostComposer = React.createClass({
this.props.onSubmit(this.state.text);
},
- autofocus: function () {
- if (this.state.editing) {
- this.refs.editable.autofocus()
- }
- },
-
- onChange: function(text, setPlaceholder) {
- // in order to render the updated html,
- // you need to pass it as a prop to contentEditable.
- // This gives you increased flexibility.
- if (setPlaceholder) {
- this.setState({
- placeholder: true,
- html: '',
- totalLength: 0,
- text: ''
- })
- } else {
-
- var copy = text.slice(0, this.state.maxLength)
-
- var parsedContent = PostContentHelper.parseContent(copy);
-
- //console.log(copy,parsedContent);
-
- var output = "";
-
- parsedContent.map(function(item,index){
- //console.log(item.raw)
- switch(item.type) {
- case "mention":
- output+=(''+item.raw+'');
- break;
- case "hashtag":
- output+=(''+item.raw+'');
- break;
- case "url":
- output+=(''+item.raw+'');
- break;
- case "email":
- output+=(''+item.raw+'');
- break;
- default:
- output+=(item.raw);
- }
- });
-
- var rules = [
- {regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
- replacement: '[$1]($2)'}, // hyperlink
- {regex: /(\s?)(\*)(.*?)(\*)(\s?)/g,
- replacement: '$1*$3*$5'}, // emphasis
- {regex: /(\s?)(\~)(.*?)(\~)(\s?)/g,
- replacement: '$1~$3~$5'}, // emphasis
- {regex: /(\s?)(\-)(.*?)(\-)(\s?)/g,
- replacement: '$1-$3-$5'}, // emphasis
- {regex: /(\s?)(\_)(.*?)(\_)(\s?)/g,
- replacement: '$1_$3_$5'}, // emphasis
- ]
-
- rules.forEach(function (rule) {
- output = output.replace(rule.regex, rule.replacement);
- });
-
- console.log(text.slice(0, this.state.maxLength),output)
-
- // text overflow
- if (text.length > this.state.maxLength) {
- var overflow = '' +
- text.slice(this.state.maxLength) +
- ''
- output = output + overflow
- }
-
- this.setState({
- placeholder: false,
- html: output,
- totalLength: text.length,
- text: copy
- })
- }
+ handleChange: function(e) {
+
+ var newText = e.target.value;
+
+ this.setState({
+ totalLength: newText.length,
+ text: newText
+ });
},
- enableEditing: function(){
- var editing = !this.state.editing
- // set your contenteditable field into editing mode.
- this.setState({ editing: editing });
- if (editing) {
- this.refs.editable.autofocus()
- this.refs.editable.setCursorToEnd()
- }
- }
-
});
\ No newline at end of file
diff --git a/jsx/common/PostComposer_WYSIWYG_Broken.js b/jsx/common/PostComposer_WYSIWYG_Broken.js
new file mode 100644
index 0000000..361a37d
--- /dev/null
+++ b/jsx/common/PostComposer_WYSIWYG_Broken.js
@@ -0,0 +1,216 @@
+var React = require('react');
+var ContentEditable = require('react-wysiwyg');
+var PostContentHelper = require('../common/PostContentHelper.js');
+var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');
+
+
+var ReactBootstrap = require('react-bootstrap')
+ , Button = ReactBootstrap.Button
+ , DropdownButton = ReactBootstrap.DropdownButton
+ , MenuItem = ReactBootstrap.MenuItem
+ , ButtonGroup = ReactBootstrap.ButtonGroup
+ , OverlayTrigger = ReactBootstrap.OverlayTrigger
+ , Popover = ReactBootstrap.Popover
+ , Glyphicon = ReactBootstrap.Glyphicon
+ , Grid = ReactBootstrap.Grid
+ , Col = ReactBootstrap.Col
+ , Row = ReactBootstrap.Row
+
+var escape = document.createElement('textarea')
+
+function escapeHTML(html) {
+ escape.textContent = html;
+ return escape.innerHTML;
+}
+
+module.exports = PostComposer = React.createClass({
+ mixins:[SafeStateChangeMixin],
+ getInitialState: function(){
+ var editing = false
+ var defaultValue = ''
+
+ return {
+ html: defaultValue,
+ editing: true,
+ placeholder: true,
+ maxLength: 140,
+ totalLength: defaultValue.length,
+ queryMention: false,
+ text: defaultValue
+ }
+
+ },
+
+ componentDidMount: function () {
+ // Gives the window a callback to call before the next repaint.
+ window.requestAnimationFrame(this.checkCursor)
+ },
+
+ checkCursor: function (timestamp) {
+ var self = this
+ var selection = window.getSelection()
+
+
+ if (this.state.editing && selection.focusNode) {
+
+ var node = selection
+ .getRangeAt(0)
+ .commonAncestorContainer
+ .parentNode
+
+ if (node.className === 'show-dropdown') {
+ // you could use the node to determine its position,
+ // and show the dropdown inline, too.
+ this.setStateSafe({ queryMention : node.textContent })
+ } else if (this.state.queryMention) {
+ this.setStateSafe({ queryMention: false })
+ }
+
+ } else if (this.state.queryMention) {
+ this.setStateSafe({ queryMention: false })
+ }
+
+ window.requestAnimationFrame(self.checkCursor)
+ },
+
+ render: function(){
+
+ var isValid = (this.state.maxLength >= this.state.totalLength)
+ && (this.state.totalLength > 0)
+
+ return (
+
+
{this.state.error}
+
+
+
+
+
+
+
+
+
+
+
+
+ Show autocomplete? {this.state.queryMention ? 'Yes ' + this.state.queryMention : 'No'}
+
*/
+ },
+
+ handleSubmit: function(){
+ this.props.onSubmit(this.state.text);
+ },
+
+ autofocus: function () {
+ if (this.state.editing) {
+ this.refs.editable.autofocus()
+ }
+ },
+
+ onChange: function(text, setPlaceholder) {
+ // in order to render the updated html,
+ // you need to pass it as a prop to contentEditable.
+ // This gives you increased flexibility.
+ if (setPlaceholder) {
+ this.setState({
+ placeholder: true,
+ html: '',
+ totalLength: 0,
+ text: ''
+ })
+ } else {
+
+ var copy = text.slice(0, this.state.maxLength)
+
+ var parsedContent = PostContentHelper.parseContent(copy);
+
+ //console.log(copy,parsedContent);
+
+ var output = "";
+
+ parsedContent.map(function(item,index){
+ //console.log(item.raw)
+ switch(item.type) {
+ case "mention":
+ output+=(''+item.raw+'');
+ break;
+ case "hashtag":
+ output+=(''+item.raw+'');
+ break;
+ case "url":
+ output+=(''+item.raw+'');
+ break;
+ case "email":
+ output+=(''+item.raw+'');
+ break;
+ default:
+ output+=(item.raw);
+ }
+ });
+
+ var rules = [
+ {regex: /\[([^\[]+)\]\(([^\)]+)\)/g,
+ replacement: '[$1]($2)'}, // hyperlink
+ {regex: /(\s?)(\*)(.*?)(\*)(\s?)/g,
+ replacement: '$1*$3*$5'}, // emphasis
+ {regex: /(\s?)(\~)(.*?)(\~)(\s?)/g,
+ replacement: '$1~$3~$5'}, // emphasis
+ {regex: /(\s?)(\-)(.*?)(\-)(\s?)/g,
+ replacement: '$1-$3-$5'}, // emphasis
+ {regex: /(\s?)(\_)(.*?)(\_)(\s?)/g,
+ replacement: '$1_$3_$5'}, // emphasis
+ ]
+
+ rules.forEach(function (rule) {
+ output = output.replace(rule.regex, rule.replacement);
+ });
+
+ console.log(text.slice(0, this.state.maxLength),output)
+
+ // text overflow
+ if (text.length > this.state.maxLength) {
+ var overflow = '' +
+ text.slice(this.state.maxLength) +
+ ''
+ output = output + overflow
+ }
+
+ this.setState({
+ placeholder: false,
+ html: output,
+ totalLength: text.length,
+ text: copy
+ })
+ }
+
+ },
+
+ enableEditing: function(){
+ var editing = !this.state.editing
+ // set your contenteditable field into editing mode.
+ this.setState({ editing: editing });
+ if (editing) {
+ this.refs.editable.autofocus()
+ this.refs.editable.setCursorToEnd()
+ }
+ }
+
+});
\ No newline at end of file
diff --git a/tests/PostContentTest.js b/tests/PostContentTest.js
index db72363..5c6849f 100644
--- a/tests/PostContentTest.js
+++ b/tests/PostContentTest.js
@@ -1,4 +1,4 @@
var PostContentHelper = require("../build-buffer/common/PostContentHelper.js");
-console.log(PostContentHelper.parseContent("asd http://