Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'fix/text-widget-auto-html' into 'release'

Browse Source 
Automatically render html, links, and email links in text widget

See merge request theappsmith/internal-tools-client!228
This commit is contained in:
Hetu Nandu 2020-01-08 13:08:30 +00:00
commit aabc01d5e4
4 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/package.json
View File

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

26
app/client/src/components/designSystems/blueprint/TextComponent.tsx
View File

@ -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>
);
}
}

2
app/client/src/widgets/TextWidget.tsx
View File

@ -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;

17
app/client/yarn.lock
View File

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