safe html and link support

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",

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,23 +39,16 @@ class TextComponent extends React.Component<TextComponentProps> {
   }
 
   render() {
-    const { allowHtml, textStyle, text, ellipsize } = this.props;
+    const { textStyle, text, ellipsize } = this.props;
-    if (allowHtml && text) {
-      const markup = { __html: text };
-      return (
-        <div
-          dangerouslySetInnerHTML={markup}
-          className={this.getTextClass(textStyle)}
-        />
-      );
-    } else {
     return (
       <Text className={this.getTextClass(textStyle)} ellipsize={ellipsize}>
-          {text}
+        <Interweave
+          content={text}
+          matchers={[new UrlMatcher("url"), new EmailMatcher("email")]}
+        />
       </Text>
     );
   }
 }
-}
 
 export default TextComponent;

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;

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"