From a0052922dd4a5d716e2ab26cc6e11bcc884af69a Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Wed, 8 Jan 2020 18:00:16 +0530
Subject: [PATCH] safe html and link support

---
 app/client/package.json                       |  2 ++
 .../designSystems/blueprint/TextComponent.tsx | 26 +++++++------------
 app/client/src/widgets/TextWidget.tsx         |  2 --
 app/client/yarn.lock                          | 17 ++++++++++++
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index 3535b73cda..576f836d80 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -44,6 +44,8 @@
     "fuse.js": "^3.4.5",
     "history": "^4.10.1",
     "husky": "^3.0.5",
+    "interweave": "^12.1.1",
+    "interweave-autolink": "^4.0.1",
     "jsonpath-plus": "^1.0.0",
     "lint-staged": "^9.2.5",
     "localforage": "^1.7.3",
diff --git a/app/client/src/components/designSystems/blueprint/TextComponent.tsx b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
index d7c86469e6..19667d37b4 100644
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@@ -3,6 +3,8 @@ import { Text, Classes } from "@blueprintjs/core";
 import styled from "styled-components";
 import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
 import { TextStyle } from "widgets/TextWidget";
+import Interweave from "interweave";
+import { UrlMatcher, EmailMatcher } from "interweave-autolink";
 
 type TextStyleProps = {
   accent: "primary" | "secondary" | "error";
@@ -15,7 +17,6 @@ export interface TextComponentProps extends ComponentProps {
   ellipsize?: boolean;
   textStyle?: TextStyle;
   isLoading: boolean;
-  allowHtml: boolean;
 }
 
 class TextComponent extends React.Component<TextComponentProps> {
@@ -38,22 +39,15 @@ class TextComponent extends React.Component<TextComponentProps> {
   }
 
   render() {
-    const { allowHtml, textStyle, text, ellipsize } = this.props;
-    if (allowHtml && text) {
-      const markup = { __html: text };
-      return (
-        <div
-          dangerouslySetInnerHTML={markup}
-          className={this.getTextClass(textStyle)}
+    const { textStyle, text, ellipsize } = this.props;
+    return (
+      <Text className={this.getTextClass(textStyle)} ellipsize={ellipsize}>
+        <Interweave
+          content={text}
+          matchers={[new UrlMatcher("url"), new EmailMatcher("email")]}
         />
-      );
-    } else {
-      return (
-        <Text className={this.getTextClass(textStyle)} ellipsize={ellipsize}>
-          {text}
-        </Text>
-      );
-    }
+      </Text>
+    );
   }
 }
 
diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx
index 6a64bc9f45..af333d0567 100644
--- a/app/client/src/widgets/TextWidget.tsx
+++ b/app/client/src/widgets/TextWidget.tsx
@@ -19,7 +19,6 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         textStyle={this.props.textStyle}
-        allowHtml={this.props.allowHtml}
         text={this.props.text}
         isLoading={this.props.isLoading}
       />
@@ -37,7 +36,6 @@ export interface TextWidgetProps extends WidgetProps {
   text?: string;
   textStyle: TextStyle;
   isLoading: boolean;
-  allowHtml: boolean;
 }
 
 export default TextWidget;
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index f5a215344e..6f5e2b09d5 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -8034,6 +8034,23 @@ interpret@^1.0.0, interpret@^1.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
+interweave-autolink@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/interweave-autolink/-/interweave-autolink-4.0.1.tgz#b2751736f85ee429fc3bb6b9b0a5c73c73783374"
+  integrity sha512-wdsAi8O4DBojZj685zLVOd5VJ5Yy+nbS2XdmjPknjBx3h8Suuw67ptjUHJ+DPvBJziYA+GwaPED7giM4gtgIAg==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.7.2"
+
+interweave@^12.1.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/interweave/-/interweave-12.1.1.tgz#b5d919ec7e9ba067fbcdc041e2167ae999b56a40"
+  integrity sha512-PSW9/wYsJ1A5SyvJajxeOWM8UO0ctvXBiD6zV02+W5JdXr6xUh/efaQtL5+g9VBKSNClBu/SmeTu5h4eSGnGqA==
+  dependencies:
+    "@types/react" "*"
+    escape-html "^1.0.3"
+    prop-types "^15.7.2"
+
 invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"