feat: code cleanup & emoji replacement in composer

Author: aviraldg

src/RichText.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
     Editor,
+    EditorState,
     Modifier,
     ContentState,
     ContentBlock,
@@ -9,12 +10,13 @@ import {
     DefaultDraftInlineStyle,
     CompositeDecorator,
     SelectionState,
+    Entity,
 } from 'draft-js';
 import * as sdk from  './index';
 import * as emojione from 'emojione';
 
 const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
-    element: 'span'
+    element: 'span',
     /*
      draft uses <div> by default which we don't really like, so we're using <span>
      this is probably not a good idea since <span> is not a block level element but
@@ -65,7 +67,7 @@ export function contentStateToHTML(contentState: ContentState): string {
         let result = `<${elem}>${content.join('')}</${elem}>`;
 
         // dirty hack because we don't want block level tags by default, but breaks
-        if(elem === 'span')
+        if (elem === 'span')
             result += '<br />';
         return result;
     }).join('');
@@ -75,6 +77,48 @@ export function HTMLtoContentState(html: string): ContentState {
     return ContentState.createFromBlockArray(convertFromHTML(html));
 }
 
+function unicodeToEmojiUri(str) {
+    let replaceWith, unicode, alt;
+    if ((!emojione.unicodeAlt) || (emojione.sprites)) {
+        // if we are using the shortname as the alt tag then we need a reversed array to map unicode code point to shortnames
+        let mappedUnicode = emojione.mapUnicodeToShort();
+    }
+
+    str = str.replace(emojione.regUnicode, function(unicodeChar) {
+        if ( (typeof unicodeChar === 'undefined') || (unicodeChar === '') || (!(unicodeChar in emojione.jsEscapeMap)) ) {
+            // if the unicodeChar doesnt exist just return the entire match
+            return unicodeChar;
+        } else {
+            // get the unicode codepoint from the actual char
+            unicode = emojione.jsEscapeMap[unicodeChar];
+            return emojione.imagePathSVG+unicode+'.svg'+emojione.cacheBustParam;
+        }
+    });
+
+    return str;
+}
+
+// Unused for now, due to https://github.com/facebook/draft-js/issues/414
+let emojiDecorator = {
+    strategy: (contentBlock, callback) => {
+        findWithRegex(EMOJI_REGEX, contentBlock, callback);
+    },
+    component: (props) => {
+        let uri = unicodeToEmojiUri(props.children[0].props.text);
+        let shortname = emojione.toShort(props.children[0].props.text);
+        let style = {
+            display: 'inline-block',
+            width: '1em',
+            maxHeight: '1em',
+            background: `url(${uri})`,
+            backgroundSize: 'contain',
+            backgroundPosition: 'center center',
+            overflow: 'hidden',
+        };
+        return (<span title={shortname} style={style}><span style={{color: 'transparent'}}>{props.children}</span></span>);
+    },
+};
+
 /**
  * Returns a composite decorator which has access to provided scope.
  */
@@ -90,7 +134,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
             // unused until we make these decorators immutable (autocomplete needed)
             let name = member ? member.name : null;
             let avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
-            return <span className="mx_UserPill">{avatar} {props.children}</span>;
+            return <span className="mx_UserPill">{avatar}{props.children}</span>;
         }
     };
 
@@ -103,17 +147,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
         }
     };
 
-    // Unused for now, due to https://github.com/facebook/draft-js/issues/414
-    let emojiDecorator = {
-        strategy: (contentBlock, callback) => {
-            findWithRegex(EMOJI_REGEX, contentBlock, callback);
-        },
-        component: (props) => {
-            return <span dangerouslySetInnerHTML={{__html: ' ' + emojione.unicodeToImage(props.children[0].props.text)}}/>
-        }
-    };
-
-    return [usernameDecorator, roomDecorator];
+    return [usernameDecorator, roomDecorator, emojiDecorator];
 }
 
 export function getScopedMDDecorators(scope: any): CompositeDecorator {
@@ -139,6 +173,7 @@ export function getScopedMDDecorators(scope: any): CompositeDecorator {
             </a>
         )
     });
+    markdownDecorators.push(emojiDecorator);
 
     return markdownDecorators;
 }
@@ -193,7 +228,7 @@ export function modifyText(contentState: ContentState, rangeToReplace: Selection
 export function selectionStateToTextOffsets(selectionState: SelectionState,
                                             contentBlocks: Array<ContentBlock>): {start: number, end: number} {
     let offset = 0, start = 0, end = 0;
-    for(let block of contentBlocks) {
+    for (let block of contentBlocks) {
         if (selectionState.getStartKey() === block.getKey()) {
             start = offset + selectionState.getStartOffset();
         }
@@ -240,3 +275,50 @@ export function textOffsetsToSelectionState({start, end}: {start: number, end: n
 
     return selectionState;
 }
+
+// modified version of https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js
+export function attachImmutableEntitiesToEmoji(editorState: EditorState): EditorState {
+    const contentState = editorState.getCurrentContent();
+    const blocks = contentState.getBlockMap();
+    let newContentState = contentState;
+
+    blocks.forEach((block) => {
+        const plainText = block.getText();
+
+        const addEntityToEmoji = (start, end) => {
+            const existingEntityKey = block.getEntityAt(start);
+            if (existingEntityKey) {
+                // avoid manipulation in case the emoji already has an entity
+                const entity = Entity.get(existingEntityKey);
+                if (entity && entity.get('type') === 'emoji') {
+                    return;
+                }
+            }
+
+            const selection = SelectionState.createEmpty(block.getKey())
+                .set('anchorOffset', start)
+                .set('focusOffset', end);
+            const emojiText = plainText.substring(start, end);
+            const entityKey = Entity.create('emoji', 'IMMUTABLE', { emojiUnicode: emojiText });
+            newContentState = Modifier.replaceText(
+                newContentState,
+                selection,
+                emojiText,
+                null,
+                entityKey,
+            );
+        };
+
+        findWithRegex(EMOJI_REGEX, block, addEntityToEmoji);
+    });
+
+    if (!newContentState.equals(contentState)) {
+        return EditorState.push(
+            editorState,
+            newContentState,
+            'convert-to-immutable-emojis',
+        );
+    }
+
+    return editorState;
+}

src/components/views/rooms/MessageComposerInput.js

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-
-var marked = require("marked");
+import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
+import marked from 'marked';
 marked.setOptions({
     renderer: new marked.Renderer(),
     gfm: true,
@@ -24,7 +24,7 @@ marked.setOptions({
     pedantic: false,
     sanitize: true,
     smartLists: true,
-    smartypants: false
+    smartypants: false,
 });
 
 import {Editor, EditorState, RichUtils, CompositeDecorator,
@@ -33,14 +33,14 @@ import {Editor, EditorState, RichUtils, CompositeDecorator,
 
 import {stateToMarkdown} from 'draft-js-export-markdown';
 
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var SlashCommands = require("../../../SlashCommands");
-var Modal = require("../../../Modal");
-var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
-var sdk = require('../../../index');
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
+import SlashCommands from '../../../SlashCommands';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
 
-var dis = require("../../../dispatcher");
-var KeyCode = require("../../../KeyCode");
+import dis from '../../../dispatcher';
+import KeyCode from '../../../KeyCode';
 
 import * as RichText from '../../../RichText';
 
@@ -49,8 +49,8 @@ const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
 const KEY_M = 77;
 
 // FIXME Breaks markdown with multiple paragraphs, since it only strips first and last <p>
-function mdownToHtml(mdown) {
-    var html = marked(mdown) || "";
+function mdownToHtml(mdown: string): string {
+    let html = marked(mdown) || "";
     html = html.trim();
     // strip start and end <p> tags else you get 'orrible spacing
     if (html.indexOf("<p>") === 0) {
@@ -66,6 +66,17 @@ function mdownToHtml(mdown) {
  * The textInput part of the MessageComposer
  */
 export default class MessageComposerInput extends React.Component {
+    static getKeyBinding(e: SyntheticKeyboardEvent): string {
+        // C-m => Toggles between rich text and markdown modes
+        if (e.keyCode === KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
+            return 'toggle-mode';
+        }
+
+        return getDefaultKeyBinding(e);
+    }
+
+    client: MatrixClient;
+
     constructor(props, context) {
         super(props, context);
         this.onAction = this.onAction.bind(this);
@@ -79,7 +90,7 @@ export default class MessageComposerInput extends React.Component {
         this.onConfirmAutocompletion = this.onConfirmAutocompletion.bind(this);
 
         let isRichtextEnabled = window.localStorage.getItem('mx_editor_rte_enabled');
-        if(isRichtextEnabled == null) {
+        if (isRichtextEnabled == null) {
             isRichtextEnabled = 'true';
         }
         isRichtextEnabled = isRichtextEnabled === 'true';
@@ -95,15 +106,6 @@ export default class MessageComposerInput extends React.Component {
         this.client = MatrixClientPeg.get();
     }
 
-    static getKeyBinding(e: SyntheticKeyboardEvent): string {
-        // C-m => Toggles between rich text and markdown modes
-        if (e.keyCode === KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
-            return 'toggle-mode';
-        }
-
-        return getDefaultKeyBinding(e);
-    }
-
     /**
      * "Does the right thing" to create an EditorState, based on:
      * - whether we've got rich text mode enabled
@@ -347,15 +349,16 @@ export default class MessageComposerInput extends React.Component {
     }
 
     setEditorState(editorState: EditorState) {
+        editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
         this.setState({editorState});
 
-        if(editorState.getCurrentContent().hasText()) {
-            this.onTypingActivity()
+        if (editorState.getCurrentContent().hasText()) {
+            this.onTypingActivity();
         } else {
             this.onFinishedTyping();
         }
 
-        if(this.props.onContentChanged) {
+        if (this.props.onContentChanged) {
             this.props.onContentChanged(editorState.getCurrentContent().getPlainText(),
                 RichText.selectionStateToTextOffsets(editorState.getSelection(),
                     editorState.getCurrentContent().getBlocksAsArray()));
@@ -380,26 +383,26 @@ export default class MessageComposerInput extends React.Component {
     }
 
     handleKeyCommand(command: string): boolean {
-        if(command === 'toggle-mode') {
+        if (command === 'toggle-mode') {
             this.enableRichtext(!this.state.isRichtextEnabled);
             return true;
         }
 
         let newState: ?EditorState = null;
 
         // Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
-        if(!this.state.isRichtextEnabled) {
+        if (!this.state.isRichtextEnabled) {
             let contentState = this.state.editorState.getCurrentContent(),
                 selection = this.state.editorState.getSelection();
 
             let modifyFn = {
                 bold: text => `**${text}**`,
                 italic: text => `*${text}*`,
                 underline: text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
-                code: text => `\`${text}\``
+                code: text => `\`${text}\``,
             }[command];
 
-            if(modifyFn) {
+            if (modifyFn) {
                 newState = EditorState.push(
                     this.state.editorState,
                     RichText.modifyText(contentState, selection, modifyFn),
@@ -408,7 +411,7 @@ export default class MessageComposerInput extends React.Component {
             }
         }
 
-        if(newState == null)
+        if (newState == null)
             newState = RichUtils.handleKeyCommand(this.state.editorState, command);
 
         if (newState != null) {
@@ -533,9 +536,11 @@ export default class MessageComposerInput extends React.Component {
             content
         );
 
-        this.setState({
-            editorState: EditorState.push(this.state.editorState, contentState, 'insert-characters'),
-        });
+        let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
+
+        editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
+
+        this.setEditorState(editorState);
 
         // for some reason, doing this right away does not update the editor :(
         setTimeout(() => this.refs.editor.focus(), 50);