From d47194e61d1f6833bdf7f91c324b0fbf3a5e03fb Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 11:17:18 +0100 Subject: [PATCH 1/5] Migrate SearchResultTile to TypeScript --- src/components/views/rooms/EventTile.tsx | 2 +- ...archResultTile.js => SearchResultTile.tsx} | 36 +++++++++---------- 2 files changed, 17 insertions(+), 21 deletions(-) rename src/components/views/rooms/{SearchResultTile.js => SearchResultTile.tsx} (76%) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 277f3ccb7c..baaaa16b57 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -267,7 +267,7 @@ interface IProps { showReactions?: boolean; // which layout to use - layout: Layout; + layout?: Layout; // whether or not to show flair at all enableFlair?: boolean; diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.tsx similarity index 76% rename from src/components/views/rooms/SearchResultTile.js rename to src/components/views/rooms/SearchResultTile.tsx index 3581a26351..766abaff69 100644 --- a/src/components/views/rooms/SearchResultTile.js +++ b/src/components/views/rooms/SearchResultTile.tsx @@ -16,31 +16,27 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; -import * as sdk from '../../../index'; -import { haveTileForEvent } from "./EventTile"; +import EventTile, { haveTileForEvent } from "./EventTile"; +import DateSeparator from '../messages/DateSeparator'; import SettingsStore from "../../../settings/SettingsStore"; import { UIFeature } from "../../../settings/UIFeature"; +import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +interface IProps { + // a matrix-js-sdk SearchResult containing the details of this result + searchResult: any; + // a list of strings to be highlighted in the results + searchHighlights?: string[]; + // href for the highlights in this result + resultLink?: string; + onHeightChanged?: () => void; + permalinkCreator?: RoomPermalinkCreator; +} + @replaceableComponent("views.rooms.SearchResultTile") -export default class SearchResultTile extends React.Component { - static propTypes = { - // a matrix-js-sdk SearchResult containing the details of this result - searchResult: PropTypes.object.isRequired, - - // a list of strings to be highlighted in the results - searchHighlights: PropTypes.array, - - // href for the highlights in this result - resultLink: PropTypes.string, - - onHeightChanged: PropTypes.func, - }; - - render() { - const DateSeparator = sdk.getComponent('messages.DateSeparator'); - const EventTile = sdk.getComponent('rooms.EventTile'); +export default class SearchResultTile extends React.Component { + public render() { const result = this.props.searchResult; const mxEv = result.context.getEvent(); const eventId = mxEv.getId(); From 6f62233634b0913da5384c42153ad83768e86bb2 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 11:18:07 +0100 Subject: [PATCH 2/5] Prevent browser to crash when unclosed HTML tag is sent to sanitizeHtml --- src/HtmlUtils.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index c80b50c566..59ec8811aa 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -37,6 +37,7 @@ import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks" import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji"; import ReplyThread from "./components/views/elements/ReplyThread"; import { mediaFromMxc } from "./customisations/Media"; +import { highlight } from 'highlight.js'; linkifyMatrix(linkify); @@ -403,9 +404,11 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts try { if (highlights && highlights.length > 0) { const highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink); - const safeHighlights = highlights.map(function(highlight) { - return sanitizeHtml(highlight, sanitizeParams); - }); + const safeHighlights = highlights + // sanitizeHtml can hang if an unclosed HTML tag is thrown at it + // A search for ` !highlight.includes("<")) + .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams)); // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure. sanitizeParams.textFilter = function(safeText) { return highlighter.applyHighlights(safeText, safeHighlights).join(''); From ede87129b2512146be554fff69dd994359f6f969 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 11:45:29 +0100 Subject: [PATCH 3/5] Add a layout fallback for EventTile --- src/components/views/rooms/EventTile.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index baaaa16b57..0c4d2f6fa9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -267,7 +267,7 @@ interface IProps { showReactions?: boolean; // which layout to use - layout?: Layout; + layout: Layout; // whether or not to show flair at all enableFlair?: boolean; @@ -321,6 +321,7 @@ export default class EventTile extends React.Component { static defaultProps = { // no-op function because onHeightChanged is optional yet some sub-components assume its existence onHeightChanged: function() {}, + layout: Layout.Group, }; static contextType = MatrixClientContext; From 04db8333e3059b6ddc89f5e34d9e402461bf4c0b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 12:13:43 +0100 Subject: [PATCH 4/5] Fix typing and unused import --- src/HtmlUtils.tsx | 1 - src/components/views/rooms/SearchResultTile.tsx | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 59ec8811aa..4a1ad2f074 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -37,7 +37,6 @@ import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks" import { SHORTCODE_TO_EMOJI, getEmojiFromUnicode } from "./emoji"; import ReplyThread from "./components/views/elements/ReplyThread"; import { mediaFromMxc } from "./customisations/Media"; -import { highlight } from 'highlight.js'; linkifyMatrix(linkify); diff --git a/src/components/views/rooms/SearchResultTile.tsx b/src/components/views/rooms/SearchResultTile.tsx index 766abaff69..980e8835f8 100644 --- a/src/components/views/rooms/SearchResultTile.tsx +++ b/src/components/views/rooms/SearchResultTile.tsx @@ -16,6 +16,7 @@ limitations under the License. */ import React from 'react'; +import { SearchResult } from "matrix-js-sdk/src/models/search-result"; import EventTile, { haveTileForEvent } from "./EventTile"; import DateSeparator from '../messages/DateSeparator'; import SettingsStore from "../../../settings/SettingsStore"; @@ -25,7 +26,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { // a matrix-js-sdk SearchResult containing the details of this result - searchResult: any; + searchResult: SearchResult; // a list of strings to be highlighted in the results searchHighlights?: string[]; // href for the highlights in this result From 9c93b9002f32dbb219b103ef7efb0544b639aaa5 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 12:23:36 +0100 Subject: [PATCH 5/5] Add extra context for filtering out '>' for sanitizeHtml --- src/HtmlUtils.tsx | 3 +++ src/components/views/rooms/EventTile.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 4a1ad2f074..91245c943e 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -406,6 +406,9 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts const safeHighlights = highlights // sanitizeHtml can hang if an unclosed HTML tag is thrown at it // A search for ` !highlight.includes("<")) .map((highlight: string): string => sanitizeHtml(highlight, sanitizeParams)); // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure. diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 0c4d2f6fa9..cebb631708 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -267,7 +267,7 @@ interface IProps { showReactions?: boolean; // which layout to use - layout: Layout; + layout?: Layout; // whether or not to show flair at all enableFlair?: boolean;