Permalink
Browse files

minor improvements

- use <p> for unstyled blocks
- fix return key bug
- editor placeholder
  • Loading branch information...
aviraldg committed May 28, 2016
1 parent 001011d commit fe76eb9f737b60f153329cd5476be1e64c2ee652
Showing with 31 additions and 40 deletions.
  1. +6 −8 src/RichText.js
  2. +25 −32 src/components/views/rooms/MessageComposerInput.js
@@ -1,6 +1,10 @@
import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
const ReactDOM = require('react-dom');
const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
element: 'p' // draft uses <div> by default which we don't really like
});
const styles = {
BOLD: 'strong',
CODE: 'code',
@@ -11,24 +15,18 @@ const styles = {
export function contentStateToHTML(contentState:ContentState): String {
const elem = contentState.getBlockMap().map((block) => {
const elem = DefaultDraftBlockRenderMap.get(block.getType()).element;
const elem = BLOCK_RENDER_MAP.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}>
`);
return (`<${elem}>${content.join('')}</${elem}>`);
}).join('');
return elem;
}
@@ -28,7 +28,6 @@ marked.setOptions({
});
import {Editor, EditorState, RichUtils} from 'draft-js';
import {stateToHTML} from 'draft-js-export-html';
var MatrixClientPeg = require("../../../MatrixClientPeg");
var SlashCommands = require("../../../SlashCommands");
@@ -39,29 +38,16 @@ var sdk = require('../../../index');
var dis = require("../../../dispatcher");
var KeyCode = require("../../../KeyCode");
import {contentStateToHTML} from '../../../RichText';
import {contentStateToHTML, HTMLtoContentState} from '../../../RichText';
var TYPING_USER_TIMEOUT = 10000;
var TYPING_SERVER_TIMEOUT = 30000;
var MARKDOWN_ENABLED = true;
function mdownToHtml(mdown) {
var html = marked(mdown) || "";
html = html.trim();
// strip start and end <p> tags else you get 'orrible spacing
if (html.indexOf("<p>") === 0) {
html = html.substring("<p>".length);
}
if (html.lastIndexOf("</p>") === (html.length - "</p>".length)) {
html = html.substring(0, html.length - "</p>".length);
}
return html;
}
/*
* The textInput part of the MessageComposer
*/
module.exports = class extends React.Component {
export default class MessageComposerInput extends React.Component {
constructor(props, context) {
super(props, context);
this.onAction = this.onAction.bind(this);
@@ -75,7 +61,6 @@ module.exports = class extends React.Component {
componentWillMount() {
this.oldScrollHeight = 0;
this.markdownEnabled = MARKDOWN_ENABLED;
var self = this;
this.sentHistory = {
// The list of typed messages. Index 0 is more recent
data: [],
@@ -150,34 +135,36 @@ module.exports = class extends React.Component {
return true;
},
saveLastTextEntry: function() {
saveLastTextEntry: () => {
// 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!
console.error('fixme');
// window.sessionStorage.setItem("input_" + this.roomId, text);
const contentHTML = contentStateToHTML(this.state.editorState.getCurrentContent());
window.sessionStorage.setItem("input_" + this.roomId, contentHTML);
},
setLastTextEntry: function() {
setLastTextEntry: () => {
console.error('fixme');
// var text = window.sessionStorage.getItem("input_" + this.roomId);
// if (text) {
// this.element.value = text;
// self.resizeInput();
// }
const contentHTML = window.sessionStorage.getItem("input_" + this.roomId);
if (contentHTML) {
const content = HTMLtoContentState(contentHTML);
this.state.editorState = EditorState.createWithContent(content);
self.resizeInput();
}
}
};
}
componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
this.sentHistory.init(
this.refs.textarea,
this.refs.editor,
this.props.room.roomId
);
this.resizeInput();
if (this.props.tabComplete) {
this.props.tabComplete.setTextArea(this.refs.textarea);
this.props.tabComplete.setTextArea(this.refs.editor);
}
}
@@ -456,7 +443,7 @@ module.exports = class extends React.Component {
const contentState = this.state.editorState.getCurrentContent();
if(!contentState.hasText())
return false;
return true;
const contentText = contentState.getPlainText(),
contentHTML = contentStateToHTML(contentState);
@@ -471,9 +458,16 @@ module.exports = class extends React.Component {
}
render() {
const containerStyle = {
overflow: 'auto'
};
return (
<div className="mx_MessageComposer_input" onClick={ this.onInputClick } style={{overflow: 'auto'}}>
<div className="mx_MessageComposer_input"
onClick={ this.onInputClick }
style={containerStyle}>
<Editor ref="editor"
placeholder="Type a message…"
editorState={this.state.editorState}
onChange={(state) => this.onChange(state)}
handleKeyCommand={(command) => this.handleKeyCommand(command)}
@@ -483,7 +477,7 @@ module.exports = class extends React.Component {
}
};
module.exports.propTypes = {
MessageComposerInput.propTypes = {
tabComplete: React.PropTypes.any,
// a callback which is called when the height of the composer is
@@ -495,5 +489,4 @@ module.exports.propTypes = {
};
// the height we limit the composer to
module.exports.MAX_HEIGHT = 100;
MessageComposerInput.MAX_HEIGHT = 100;

0 comments on commit fe76eb9

Please sign in to comment.