From fe76eb9f737b60f153329cd5476be1e64c2ee652 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Sat, 28 May 2016 11:58:22 +0530 Subject: [PATCH] minor improvements - use

for unstyled blocks - fix return key bug - editor placeholder --- src/RichText.js | 14 ++--- .../views/rooms/MessageComposerInput.js | 57 ++++++++----------- 2 files changed, 31 insertions(+), 40 deletions(-) diff --git a/src/RichText.js b/src/RichText.js index 8cec5fb565..005465fc15 100644 --- a/src/RichText.js +++ b/src/RichText.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

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 => ``).reverse().join(''); content.push(`${open}${block.getText().substring(s, e)}${close}`); }); - return (` - <${elem}> - ${content.join('')} - - `); + return (`<${elem}>${content.join('')}`); }).join(''); - return elem; } diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 66506b3fe4..d7a3670f6b 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -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

tags else you get 'orrible spacing - if (html.indexOf("

") === 0) { - html = html.substring("

".length); - } - if (html.lastIndexOf("

") === (html.length - "

".length)) { - html = html.substring(0, html.length - "

".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,21 +135,23 @@ 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(); + } } }; } @@ -172,12 +159,12 @@ module.exports = class extends React.Component { 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 ( -
+
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;