From 72bb5b42af5681aa060f2fe4c4b805f36ac1e466 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Thu, 26 Oct 2023 16:21:55 +1100 Subject: [PATCH] Fix-timeline-loading (#1506) * fix timeline jump to search item after markAsRead * improve pagination logic * add jumbo emoji support in msg rendering --- src/app/organisms/room/RoomTimeline.tsx | 17 +++++++++++++++-- src/app/utils/regex.ts | 3 +++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/app/organisms/room/RoomTimeline.tsx b/src/app/organisms/room/RoomTimeline.tsx index 742971d..2d38245 100644 --- a/src/app/organisms/room/RoomTimeline.tsx +++ b/src/app/organisms/room/RoomTimeline.tsx @@ -137,6 +137,13 @@ import initMatrix from '../../../client/initMatrix'; import { useKeyDown } from '../../hooks/useKeyDown'; import cons from '../../../client/state/cons'; import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange'; +import { EMOJI_PATTERN, VARIATION_SELECTOR_PATTERN } from '../../utils/regex'; + +// Thumbs up emoji found to have Variation Selector 16 at the end +// so included variation selector pattern in regex +const JUMBO_EMOJI_REG = new RegExp( + `^(((${EMOJI_PATTERN})|(:.+?:))(${VARIATION_SELECTOR_PATTERN}|\\s)*){1,10}$` +); const TimelineFloat = as<'div', css.TimelineFloatVariants>( ({ position, className, ...props }, ref) => ( @@ -334,6 +341,7 @@ const useTimelinePagination = ( return async (backwards: boolean) => { if (fetching) return; + const targetTimeline = timelineRef.current; const { linkedTimelines: lTimelines } = timelineRef.current; const timelinesEventsCount = lTimelines.map(timelineToEventsCount); @@ -373,6 +381,7 @@ const useTimelinePagination = ( } fetching = false; + if (targetTimeline !== timelineRef.current) return; if (alive()) { recalibratePagination(lTimelines, timelinesEventsCount, backwards); } @@ -582,7 +591,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli focusItem.current = { index: evtAbsIndex, scrollTo: true, - highlight: evtId !== unreadInfo?.readUptoEventId, + highlight: evtId !== readUptoEventIdRef.current, }; setTimeline({ linkedTimelines: lTimelines, @@ -592,7 +601,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli }, }); }, - [unreadInfo, alive] + [alive] ), useCallback(() => { if (!alive()) return; @@ -990,12 +999,16 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent(); if (typeof body !== 'string') return null; + const jumboEmoji = JUMBO_EMOJI_REG.test(body); + return ( diff --git a/src/app/utils/regex.ts b/src/app/utils/regex.ts index 73da664..3b0e981 100644 --- a/src/app/utils/regex.ts +++ b/src/app/utils/regex.ts @@ -1,4 +1,7 @@ export const URL_NEG_LB = '(?