Skip to content

Commit

Permalink
Initial version of rich text editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@aviraldg
aviraldg committed May 27, 2016
1 parent 07cc9bf commit 001011d
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 76 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Expand Up @@ -23,6 +23,8 @@
},
"dependencies": {
"classnames": "^2.1.2",
"draft-js": "^0.7.0",
"draft-js-export-html": "^0.2.2",
"favico.js": "^0.3.10",
"filesize": "^3.1.2",
"flux": "^2.0.3",
Expand Down
37 changes: 37 additions & 0 deletions src/RichText.js
View file
@@ -0,0 +1,37 @@
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
const ReactDOM = require('react-dom');

const styles = {
BOLD: 'strong',
CODE: 'code',
ITALIC: 'em',
STRIKETHROUGH: 's',
UNDERLINE: 'u'
};

export function contentStateToHTML(contentState:ContentState): String {
const elem = contentState.getBlockMap().map((block) => {
const elem = DefaultDraftBlockRenderMap.get(block.getType()).element;
const content = [];
block.findStyleRanges(() => true, (s, e) => {
console.log(block.getInlineStyleAt(s));
const tags = block.getInlineStyleAt(s).map(style => styles[style]);
const open = tags.map(tag => `<${tag}>`).join('');
const close = tags.map(tag => `</${tag}>`).reverse().join('');
content.push(`${open}${block.getText().substring(s, e)}${close}`);
});

return (`
<${elem}>
${content.join('')}
</${elem}>
`);
}).join('');


return elem;
}

export function HTMLtoContentState(html:String): ContentState {
return ContentState.createFromBlockArray(convertFromHTML(html));
}
203 changes: 127 additions & 76 deletions src/components/views/rooms/MessageComposerInput.js
View file
Expand Up @@ -27,6 +27,9 @@ marked.setOptions({
smartypants: false
});

import {Editor, EditorState, RichUtils} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';

var MatrixClientPeg = require("../../../MatrixClientPeg");
var SlashCommands = require("../../../SlashCommands");
var Modal = require("../../../Modal");
Expand All @@ -36,6 +39,8 @@ var sdk = require('../../../index');
var dis = require("../../../dispatcher");
var KeyCode = require("../../../KeyCode");

import {contentStateToHTML} from '../../../RichText';

var TYPING_USER_TIMEOUT = 10000;
var TYPING_SERVER_TIMEOUT = 30000;
var MARKDOWN_ENABLED = true;
Expand All @@ -56,26 +61,18 @@ function mdownToHtml(mdown) {
/*
* The textInput part of the MessageComposer
*/
module.exports = React.createClass({
displayName: 'MessageComposerInput',

statics: {
// the height we limit the composer to
MAX_HEIGHT: 100,
},

propTypes: {
tabComplete: React.PropTypes.any,

// a callback which is called when the height of the composer is
// changed due to a change in content.
onResize: React.PropTypes.func,

// js-sdk Room object
room: React.PropTypes.object.isRequired,
},
module.exports = class extends React.Component {
constructor(props, context) {
super(props, context);
this.onAction = this.onAction.bind(this);
this.onInputClick = this.onInputClick.bind(this);

this.state = {
editorState: EditorState.createEmpty()
};
}

componentWillMount: function() {
componentWillMount() {
this.oldScrollHeight = 0;
this.markdownEnabled = MARKDOWN_ENABLED;
var self = this;
Expand Down Expand Up @@ -157,21 +154,22 @@ module.exports = React.createClass({
// save the currently entered text in order to restore it later.
// NB: This isn't 'originalText' because we want to restore
// sent history items too!
var text = this.element.value;
window.sessionStorage.setItem("input_" + this.roomId, text);
console.error('fixme');
// window.sessionStorage.setItem("input_" + this.roomId, text);
},

setLastTextEntry: function() {
var text = window.sessionStorage.getItem("input_" + this.roomId);
if (text) {
this.element.value = text;
self.resizeInput();
}
console.error('fixme');
// var text = window.sessionStorage.getItem("input_" + this.roomId);
// if (text) {
// this.element.value = text;
// self.resizeInput();
// }
}
};
},
}

componentDidMount: function() {
componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
this.sentHistory.init(
this.refs.textarea,
Expand All @@ -181,18 +179,19 @@ module.exports = React.createClass({
if (this.props.tabComplete) {
this.props.tabComplete.setTextArea(this.refs.textarea);
}
},
}

componentWillUnmount: function() {
componentWillUnmount() {
dis.unregister(this.dispatcherRef);
this.sentHistory.saveLastTextEntry();
},
}

onAction: function(payload) {
var textarea = this.refs.textarea;
onAction(payload) {
var editor = this.refs.editor;
switch (payload.action) {
case 'focus_composer':
textarea.focus();
console.error('fixme');
editor.focus();
break;
case 'insert_displayname':
if (textarea.value.length) {
Expand All @@ -214,9 +213,9 @@ module.exports = React.createClass({
}
break;
}
},
}

onKeyDown: function (ev) {
onKeyDown(ev) {
if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
var input = this.refs.textarea.value;
if (input.length === 0) {
Expand Down Expand Up @@ -252,33 +251,34 @@ module.exports = React.createClass({
self.onFinishedTyping();
}
}, 10); // XXX: what is this 10ms setTimeout doing? Looks hacky :(
},
}

resizeInput: function() {
resizeInput() {
console.error('fixme');
// scrollHeight is at least equal to clientHeight, so we have to
// temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
var newHeight = Math.min(this.refs.textarea.scrollHeight,
this.constructor.MAX_HEIGHT);
this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
this.oldScrollHeight = this.refs.textarea.scrollHeight;

if (this.props.onResize) {
// kick gemini-scrollbar to re-layout
this.props.onResize();
}
},
// this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
// var newHeight = Math.min(this.refs.textarea.scrollHeight,
// this.constructor.MAX_HEIGHT);
// this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
// this.oldScrollHeight = this.refs.textarea.scrollHeight;
//
// if (this.props.onResize) {
// // kick gemini-scrollbar to re-layout
// this.props.onResize();
// }
}

onKeyUp: function(ev) {
onKeyUp(ev) {
if (this.refs.textarea.scrollHeight !== this.oldScrollHeight ||
ev.keyCode === KeyCode.DELETE ||
ev.keyCode === KeyCode.BACKSPACE)
{
this.resizeInput();
}
},
}

onEnter: function(ev) {
onEnter(ev) {
var contentText = this.refs.textarea.value;

// bodge for now to set markdown state on/off. We probably want a separate
Expand Down Expand Up @@ -365,42 +365,42 @@ module.exports = React.createClass({
this.refs.textarea.value = '';
this.resizeInput();
ev.preventDefault();
},
}

onTypingActivity: function() {
onTypingActivity() {
this.isTyping = true;
if (!this.userTypingTimer) {
this.sendTyping(true);
}
this.startUserTypingTimer();
this.startServerTypingTimer();
},
}

onFinishedTyping: function() {
onFinishedTyping() {
this.isTyping = false;
this.sendTyping(false);
this.stopUserTypingTimer();
this.stopServerTypingTimer();
},
}

startUserTypingTimer: function() {
startUserTypingTimer() {
this.stopUserTypingTimer();
var self = this;
this.userTypingTimer = setTimeout(function() {
self.isTyping = false;
self.sendTyping(self.isTyping);
self.userTypingTimer = null;
}, TYPING_USER_TIMEOUT);
},
}

stopUserTypingTimer: function() {
stopUserTypingTimer() {
if (this.userTypingTimer) {
clearTimeout(this.userTypingTimer);
this.userTypingTimer = null;
}
},
}

startServerTypingTimer: function() {
startServerTypingTimer() {
if (!this.serverTypingTimer) {
var self = this;
this.serverTypingTimer = setTimeout(function() {
Expand All @@ -410,39 +410,90 @@ module.exports = React.createClass({
}
}, TYPING_SERVER_TIMEOUT / 2);
}
},
}

stopServerTypingTimer: function() {
stopServerTypingTimer() {
if (this.serverTypingTimer) {
clearTimeout(this.servrTypingTimer);
this.serverTypingTimer = null;
}
},
}

sendTyping: function(isTyping) {
sendTyping(isTyping) {
MatrixClientPeg.get().sendTyping(
this.props.room.roomId,
this.isTyping, TYPING_SERVER_TIMEOUT
).done();
},
}

refreshTyping: function() {
refreshTyping() {
if (this.typingTimeout) {
clearTimeout(this.typingTimeout);
this.typingTimeout = null;
}
},
}

onInputClick(ev) {
this.refs.editor.focus();
}

onChange(editorState) {
this.setState({editorState});
}

handleKeyCommand(command) {
const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}

handleReturn(ev) {
if(ev.shiftKey)
return false;

onInputClick: function(ev) {
this.refs.textarea.focus();
},
const contentState = this.state.editorState.getCurrentContent();
if(!contentState.hasText())
return false;

render: function() {
const contentText = contentState.getPlainText(),
contentHTML = contentStateToHTML(contentState);

MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);

this.setState({
editorState: EditorState.createEmpty()
});

return true;
}

render() {
return (
<div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
<textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
<div className="mx_MessageComposer_input" onClick={ this.onInputClick } style={{overflow: 'auto'}}>
<Editor ref="editor"
editorState={this.state.editorState}
onChange={(state) => this.onChange(state)}
handleKeyCommand={(command) => this.handleKeyCommand(command)}
handleReturn={ev => this.handleReturn(ev)} />
</div>
);
}
});
};

module.exports.propTypes = {
tabComplete: React.PropTypes.any,

// a callback which is called when the height of the composer is
// changed due to a change in content.
onResize: React.PropTypes.func,

// js-sdk Room object
room: React.PropTypes.object.isRequired
};

// the height we limit the composer to
module.exports.MAX_HEIGHT = 100;

0 comments on commit 001011d

Please sign in to comment.