Regression: Room not scrolling to bottom (#20516)

app/markdown/lib/parser/marked/marked.js

@@ -103,7 +103,6 @@ export const marked = (message, {
 		smartLists,
 		smartypants,
 		renderer,
-		sanitize: true,
 		highlight,
 	});
 

app/ui/client/views/app/room.js

@@ -766,7 +766,7 @@ Meteor.startup(() => {
 			}
 		};
 
-		this.sendToBottomIfNecessaryDebounced = () => {};
+		this.sendToBottomIfNecessaryDebounced = _.debounce(this.sendToBottomIfNecessary, 10);
 	}); // Update message to re-render DOM
 
 	Template.roomOld.onDestroyed(function() {
@@ -820,7 +820,6 @@ Meteor.startup(() => {
 			template.atBottom = template.isAtBottom(100);
 		};
 
-		template.sendToBottomIfNecessaryDebounced = _.debounce(template.sendToBottomIfNecessary, 150);
 
 		if (window.MutationObserver) {
 			template.observer = new MutationObserver(() => template.sendToBottomIfNecessaryDebounced());

client/components/Message/Attachments/index.tsx

@@ -3,6 +3,7 @@ import React, { FC, memo } from 'react';
 import { QuoteAttachment, QuoteAttachmentProps } from './QuoteAttachment';
 import { FileAttachmentProps, isFileAttachment, FileAttachment } from './Files';
 import { DefaultAttachment, DefaultAttachmentProps } from './DefaultAttachment';
+import { useBlockRendered } from '../hooks/useBlockRendered';
 
 export type FileProp = {
 	_id: string;
@@ -28,6 +29,9 @@ const Item: FC<{attachment: AttachmentProps; file?: FileProp }> = memo(({ attach
 	return <DefaultAttachment {...attachment as any}/>;
 });
 
-const Attachments: FC<{ attachments: Array<AttachmentProps>; file?: FileProp}> = ({ attachments = null, file }): any => attachments && attachments.map((attachment, index) => <Item key={index} file={file} attachment={attachment} />);
+const Attachments: FC<{ attachments: Array<AttachmentProps>; file?: FileProp}> = ({ attachments = null, file }): any => {
+	const { className, ref } = useBlockRendered();
+	return <><div className={className} ref={ref as any} />{attachments && attachments.map((attachment, index) => <Item key={index} file={file} attachment={attachment} />)}</>;
+};
 
 export default Attachments;

client/components/Message/Metrics/Broadcast.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { Reply, Content } from '..';
+import { useBlockRendered } from '../hooks/useBlockRendered';
 
 
 type BroadcastOptions = {
@@ -12,7 +13,10 @@ type BroadcastOptions = {
 
 const BroadcastMetric: FC<BroadcastOptions> = ({ username, mid, replyBroadcast }) => {
 	const t = useTranslation();
+	const { className, ref } = useBlockRendered();
+
 	return <Content>
+		<div className={className} ref={ref as any} />
 		<Reply data-username={username} data-mid={mid} onClick={replyBroadcast}>{t('Reply')}</Reply>
 	</Content>;
 };

client/components/Message/Metrics/Discussion.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import Metrics, { Reply, Content } from '..';
+import { useBlockRendered } from '../hooks/useBlockRendered';
 
 
 type DicussionOptions = {
@@ -16,7 +17,10 @@ type DicussionOptions = {
 const DiscussionMetric: FC<DicussionOptions> = ({ lm, count, rid, drid, openDiscussion }) => {
 	const t = useTranslation();
 	const format = useTimeAgo();
+	const { className, ref } = useBlockRendered();
+
 	return <Content>
+		<div className={className} ref={ref as any} />
 		<Reply data-rid={rid} data-drid={drid} onClick={openDiscussion}>{count ? t('message_counter', { counter: count, count }) : t('Reply')}</Reply>
 		<Metrics>
 			<Metrics.Item title={lm?.toLocaleString()}>

client/components/Message/Metrics/Thread.tsx

@@ -6,6 +6,7 @@ import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import * as NotificationStatus from '../NotificationStatus';
 import { followStyle, anchor } from '../helpers/followSyle';
 import Metrics, { Reply, Content } from '..';
+import { useBlockRendered } from '../hooks/useBlockRendered';
 
 
 type ThreadReplyOptions = {
@@ -24,6 +25,8 @@ type ThreadReplyOptions = {
 const ThreadMetric: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid, counter, participants, following, lm, openThread }) => {
 	const t = useTranslation();
 
+	const { className, ref } = useBlockRendered();
+
 	const followMessage = useEndpoint('POST', 'chat.followMessage');
 	const unfollowMessage = useEndpoint('POST', 'chat.unfollowMessage');
 	const format = useTimeAgo();
@@ -31,6 +34,7 @@ const ThreadMetric: FC<ThreadReplyOptions> = ({ unread, mention, all, rid, mid,
 	const handleFollow = useCallback(() => (following ? unfollowMessage({ mid }) : followMessage({ mid })), [followMessage, following, mid, unfollowMessage]);
 
 	return <Content className={followStyle}>
+		<div className={className} ref={ref as any} />
 		<Reply data-rid={rid} data-mid={mid} onClick={openThread}>{t('Reply')}</Reply>
 		<Metrics>
 			<Metrics.Item title={t('Replies')}>

client/components/Message/hooks/useBlockRendered.js

@@ -0,0 +1,9 @@
+import { useRef, useEffect } from 'react';
+
+export const useBlockRendered = () => {
+	const ref = useRef();
+	useEffect(() => {
+		ref.current.dispatchEvent(new Event('rendered'));
+	}, []);
+	return { className: 'js-block-wrapper', ref };
+};