From 55e1202c0951f41be97e38992140456a43e4e634 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 13 Jul 2017 13:26:13 +0100
Subject: [PATCH] Decorate pasted links so that they look like links

By default, draftjs will represent pasted `<a>` tags as `LINK` entities, but it doesn't do any default decoration of these links. Add a decorator to do so.

Most of this was taken from https://github.com/facebook/draft-js/blob/v0.8.1/examples/link/link.html (note the version, v0.8.1).
---
 .../views/rooms/MessageComposerInput.js       | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index cf6dfbb6b7..8ba5289eb4 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -16,9 +16,9 @@ limitations under the License.
 import React from 'react';
 import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
 
-import {Editor, EditorState, RichUtils, CompositeDecorator,
-    convertFromRaw, convertToRaw, Modifier, EditorChangeType,
-    getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState} from 'draft-js';
+import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
+    getDefaultKeyBinding, KeyBindingUtil, ContentState, ContentBlock, SelectionState,
+    Entity} from 'draft-js';
 
 import classNames from 'classnames';
 import escape from 'lodash/escape';
@@ -144,15 +144,37 @@ export default class MessageComposerInput extends React.Component {
         this.client = MatrixClientPeg.get();
     }
 
+    findLinkEntities(contentBlock, callback) {
+        contentBlock.findEntityRanges(
+            (character) => {
+                const entityKey = character.getEntity();
+                return (
+                    entityKey !== null &&
+                    Entity.get(entityKey).getType() === 'LINK'
+                );
+            }, callback,
+        );
+    }
     /*
      * "Does the right thing" to create an EditorState, based on:
      * - whether we've got rich text mode enabled
      * - contentState was passed in
      */
     createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
-        let decorators = richText ? RichText.getScopedRTDecorators(this.props) :
-                RichText.getScopedMDDecorators(this.props),
-            compositeDecorator = new CompositeDecorator(decorators);
+        const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
+                RichText.getScopedMDDecorators(this.props);
+        decorators.push({
+          strategy: this.findLinkEntities.bind(this),
+          component: (props) => {
+                const {url} = Entity.get(props.entityKey).getData();
+                return (
+                  <a href={url}>
+                    {props.children}
+                  </a>
+                );
+            },
+        });
+        const compositeDecorator = new CompositeDecorator(decorators);
 
         let editorState = null;
         if (contentState) {