[NEW] New Message Parser (#21962)

app/emoji-emojione/client/emojione-sprites.css

@@ -33,3 +33,7 @@
 	width: 44px;
 	height: 44px;
 }
+.big > .emojione {
+	width: 44px;
+	height: 44px;
+}

app/lib/server/functions/sendMessage.js

@@ -1,4 +1,5 @@
 import { Match, check } from 'meteor/check';
+import { parser } from '@rocket.chat/message-parser';
 
 import { settings } from '../../../settings';
 import { callbacks } from '../../../callbacks';
@@ -215,6 +216,11 @@ export const sendMessage = function(user, message, room, upsert = false) {
 	parseUrlsInMessage(message);
 
 	message = callbacks.run('beforeSaveMessage', message, room);
+	try {
+		message.md = parser(message.msg);
+	} catch (e) {
+		console.log(e); // errors logged while the parser is at experimental stage
+	}
 	if (message) {
 		if (message._id && upsert) {
 			const { _id } = message;

app/lib/server/functions/updateMessage.js

@@ -1,4 +1,5 @@
 import { Meteor } from 'meteor/meteor';
+import { parser } from '@rocket.chat/message-parser';
 
 import { Messages, Rooms } from '../../../models';
 import { settings } from '../../../settings';
@@ -44,6 +45,12 @@ export const updateMessage = function(message, user, originalMessage) {
 
 	message = callbacks.run('beforeSaveMessage', message);
 
+	try {
+		message.md = parser(message.msg);
+	} catch (e) {
+		console.log(e); // errors logged while the parser is at experimental stage
+	}
+
 	const tempid = message._id;
 	delete message._id;
 

app/lib/server/startup/settings.js

@@ -507,16 +507,25 @@ settings.addGroup('Accounts', function() {
 			public: true,
 			i18nLabel: 'New_Message_Notification',
 		});
+
 		this.add('Accounts_Default_User_Preferences_muteFocusedConversations', true, {
 			type: 'boolean',
 			public: true,
 			i18nLabel: 'Mute_Focused_Conversations',
 		});
+
 		this.add('Accounts_Default_User_Preferences_notificationsSoundVolume', 100, {
 			type: 'int',
 			public: true,
 			i18nLabel: 'Notifications_Sound_Volume',
 		});
+
+		this.add('Accounts_Default_User_Preferences_enableMessageParserEarlyAdoption', false, {
+			type: 'boolean',
+			public: true,
+			i18nLabel: 'Enable_message_parser_early_adoption',
+			alert: 'Enable_message_parser_early_adoption_alert',
+		});
 	});
 
 	this.section('Avatar', function() {

app/models/server/models/Messages.js

@@ -589,6 +589,7 @@ export class Messages extends Base {
 				},
 			},
 			$unset: {
+				md: 1,
 				blocks: 1,
 				tshow: 1,
 			},

app/settings/client/lib/settings.ts

@@ -10,7 +10,7 @@ class Settings extends SettingsBase {
 
 	collection = PublicSettingsCachedCollection.get().collection;
 
-	dict = new ReactiveDict<any>('settings');
+	dict = new ReactiveDict('settings');
 
 	get(_id: string): any {
 		return this.dict.get(_id);

app/ui-message/client/message.html

@@ -104,7 +104,11 @@
 							{{> Blocks blocks=msg.blocks rid=msg.rid mid=msg._id}}
 						</div>
 					{{else}}
-						{{{body}}}
+						{{# if enableMessageParserEarlyAdoption }}
+							{{> MessageBody tokens=msg.md mentions=msg.mentions }}
+						{{else}}
+							{{{body}}}
+						{{/if}}
 					{{/if}}
 					{{#if msg.location}}
 						{{> messageLocation location=msg.location}}
@@ -123,7 +127,7 @@
 			{{#if hasAttachments}}
 				{{> reactAttachments attachments=msg.attachments file=msg.file }}
 			{{/if}}
-			
+
 
 			{{#with readReceipt}}
 				<div class="read-receipt {{readByEveryone}}">
@@ -170,7 +174,7 @@
 			{{#if msg.drid}}
 				{{> DiscussionMetric count=msg.dcount drid=msg.drid lm=msg.dlm openDiscussion=actions.openDiscussion }}
 			{{/if}}
-			
+
 			{{#if $and settings.showReplyButton msg.tcount}}
 			    {{> ThreadMetric counter=msg.tcount following=following lm=msg.tlm rid=msg.rid mid=msg._id unread=unread mention=mention all=all openThread=actions.openThread }}
 			{{/if}}

app/ui-message/client/message.js

@@ -52,6 +52,10 @@ const renderBody = (msg, settings) => {
 };
 
 Template.message.helpers({
+	enableMessageParserEarlyAdoption() {
+		const { settings: { enableMessageParserEarlyAdoption }, msg } = this;
+		return enableMessageParserEarlyAdoption && msg.md;
+	},
 	unread() {
 		const { msg, subscription } = this;
 		return subscription?.tunread?.includes(msg._id);

app/ui-utils/client/lib/messageContext.js

@@ -13,8 +13,7 @@ import { fireGlobalEvent } from './fireGlobalEvent';
 import { actionLinks } from '../../../action-links/client';
 import { goToRoomById } from '../../../../client/lib/goToRoomById';
 
-
-const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
+const fields = { name: 1, username: 1, 'settings.preferences.enableMessageParserEarlyAdoption': 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
 
 export function messageContext({ rid } = Template.instance()) {
 	const uid = Meteor.userId();
@@ -99,6 +98,7 @@ export function messageContext({ rid } = Template.instance()) {
 			translateLanguage: AutoTranslate.getLanguage(rid),
 			showMessageInMainThread: getUserPreference(user, 'showMessageInMainThread'),
 			autoImageLoad: getUserPreference(user, 'autoImageLoad'),
+			enableMessageParserEarlyAdoption: getUserPreference(user, 'enableMessageParserEarlyAdoption'),
 			saveMobileBandwidth: Meteor.Device.isPhone() && getUserPreference(user, 'saveMobileBandwidth'),
 			collapseMediaByDefault: getUserPreference(user, 'collapseMediaByDefault'),
 			showreply: true,

client/components/Emoji.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { renderEmoji } from '../../app/emoji/client/index';
 
-function Emoji({ emojiHandle }) {
+function Emoji({ emojiHandle, className = undefined }) {
 	const markup = { __html: `${renderEmoji(emojiHandle)}` };
-	return <div dangerouslySetInnerHTML={markup}></div>;
+	return <span className={className} dangerouslySetInnerHTML={markup} />;
 }
 
 export default Emoji;

client/components/Message/Body/BigEmoji.tsx

@@ -0,0 +1,18 @@
+import { BigEmoji as ASTBigEmoji } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Emoji from '../../Emoji';
+
+type BigEmojiProps = {
+	value: ASTBigEmoji['value'];
+};
+
+const BigEmoji: FC<BigEmojiProps> = ({ value }) => (
+	<>
+		{value.map((block, index) => (
+			<Emoji className='big' key={index} emojiHandle={`:${block.value.value}:`} />
+		))}
+	</>
+);
+
+export default BigEmoji;

client/components/Message/Body/Body.tsx

@@ -0,0 +1,63 @@
+import { BigEmoji as ASTBigEmoji, MarkdownAST as GazzodownAST } from '@rocket.chat/message-parser';
+import React, { FC, memo } from 'react';
+
+import BigEmoji from './BigEmoji';
+import Code from './Code';
+import Heading from './Heading';
+import OrderedList from './OrderedList';
+import Paragraph from './Paragraph';
+import Quote from './Quote';
+import TaskList from './TaskList';
+import UnorderedList from './UnorderedList';
+import { UserMention } from './definitions/UserMention';
+
+type BodyProps = {
+	tokens: GazzodownAST;
+	mentions: UserMention[];
+};
+
+const isBigEmoji = (tokens: GazzodownAST): tokens is [ASTBigEmoji] =>
+	tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
+
+const Body: FC<BodyProps> = ({ tokens, mentions }) => {
+	if (isBigEmoji(tokens)) {
+		return <BigEmoji value={tokens[0].value} />;
+	}
+
+	return (
+		<>
+			{tokens.map((block, index) => {
+				if (block.type === 'UNORDERED_LIST') {
+					return <UnorderedList value={block.value} key={index} />;
+				}
+
+				if (block.type === 'QUOTE') {
+					return <Quote value={block.value} key={index} />;
+				}
+				if (block.type === 'TASKS') {
+					return <TaskList value={block.value} key={index} />;
+				}
+
+				if (block.type === 'ORDERED_LIST') {
+					return <OrderedList value={block.value} key={index} />;
+				}
+
+				if (block.type === 'PARAGRAPH') {
+					return <Paragraph mentions={mentions} value={block.value} key={index} />;
+				}
+
+				if (block.type === 'CODE') {
+					return <Code value={block.value} key={index} />;
+				}
+
+				if (block.type === 'HEADING') {
+					return <Heading value={block.value} key={index} />;
+				}
+
+				return null;
+			})}
+		</>
+	);
+};
+
+export default memo(Body);

client/components/Message/Body/Bold.tsx

@@ -0,0 +1,24 @@
+import { Bold as ASTBold } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Italic from './Italic';
+import Strike from './Strike';
+
+const Bold: FC<{ value: ASTBold['value'] }> = ({ value = [] }) => (
+	<strong>
+		{value.map((block, index) => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				case 'STRIKE':
+					return <Strike key={index} value={block.value} />;
+				case 'ITALIC':
+					return <Italic key={index} value={block.value} />;
+				default:
+					return null;
+			}
+		})}
+	</strong>
+);
+
+export default Bold;

client/components/Message/Body/Code.tsx

@@ -0,0 +1,19 @@
+import { Code as ASTCode } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import CodeLine from './CodeLine';
+
+const Code: FC<{ value: ASTCode['value'] }> = ({ value = [] }) => (
+	<code className='code-colors hljs'>
+		{value.map((block, index) => {
+			switch (block.type) {
+				case 'CODE_LINE':
+					return <CodeLine key={index} value={block.value} />;
+				default:
+					return null;
+			}
+		})}
+	</code>
+);
+
+export default Code;

client/components/Message/Body/CodeLine.tsx

@@ -0,0 +1,8 @@
+import { CodeLine as ASTCodeLine } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+const CodeLine: FC<{ value: ASTCodeLine['value'] }> = ({ value }) => (
+	<div>{value.type === 'PLAIN_TEXT' && value.value}</div>
+);
+
+export default CodeLine;

client/components/Message/Body/Heading.tsx

@@ -0,0 +1,17 @@
+import { Bold as ASTHeading } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+const Heading: FC<{ value: ASTHeading['value'] }> = ({ value = [] }) => (
+	<h1>
+		{value.map((block) => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				default:
+					return null;
+			}
+		})}
+	</h1>
+);
+
+export default Heading;

client/components/Message/Body/Inline.tsx

@@ -0,0 +1,47 @@
+import { Paragraph as ASTParagraph } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Emoji from '../../Emoji';
+import Bold from './Bold';
+import InlineCode from './InlineCode';
+import Italic from './Italic';
+import Link from './Link';
+import Mention from './Mention';
+import Plain from './Plain';
+import Strike from './Strike';
+import { UserMention } from './definitions/UserMention';
+
+const Inline: FC<{ value: ASTParagraph['value']; mentions?: UserMention[] }> = ({
+	value = [],
+	mentions = [],
+}) => (
+	<>
+		{value.map((block) => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				case 'BOLD':
+					return <Bold value={block.value} />;
+				case 'STRIKE':
+					return <Strike value={block.value} />;
+				case 'ITALIC':
+					return <Italic value={block.value} />;
+				case 'LINK':
+					return <Link value={block.value} />;
+				case 'MENTION_USER':
+					return <Mention value={block.value} mentions={mentions} />;
+				case 'EMOJI':
+					return <Emoji emojiHandle={`:${block.value.value}:`} />;
+				case 'MENTION_CHANNEL':
+					// case 'COLOR':
+					return <Plain value={block.value} />;
+				case 'INLINE_CODE':
+					return <InlineCode value={block.value} />;
+				default:
+					return null;
+			}
+		})}
+	</>
+);
+
+export default Inline;

client/components/Message/Body/InlineCode.tsx

@@ -0,0 +1,17 @@
+import { InlineCode as ASTInlineCode } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+const InlineCode: FC<{ value: ASTInlineCode['value'] }> = ({ value }) => (
+	<code className='code-colors inline'>
+		{((block): string | null => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				default:
+					return null;
+			}
+		})(value)}
+	</code>
+);
+
+export default InlineCode;

client/components/Message/Body/Italic.tsx

@@ -0,0 +1,25 @@
+import { Italic as ASTItalic } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Bold from './Bold';
+import Strike from './Strike';
+
+const Italic: FC<{ value: ASTItalic['value'] }> = ({ value = [] }) => (
+	<i>
+		{value.map((block, index) => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				case 'STRIKE':
+					return <Strike key={index} value={block.value} />;
+				case 'BOLD':
+					return <Bold key={index} value={block.value} />;
+
+				default:
+					return null;
+			}
+		})}
+	</i>
+);
+
+export default Italic;

client/components/Message/Body/Link.tsx

@@ -0,0 +1,36 @@
+import { Link as ASTLink } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import { baseURI } from '../../../lib/baseuri';
+import Bold from './Bold';
+import Italic from './Italic';
+import Strike from './Strike';
+
+type LinkProps = {
+	value: ASTLink['value'];
+};
+
+const Link: FC<LinkProps> = ({ value }) => {
+	const { src, label } = value;
+	const target = src.value.indexOf(baseURI) === 0 ? '' : '_blank';
+	return (
+		<a href={src.value} target={target} rel='noopener noreferrer'>
+			{((block: ASTLink['value']['label']): JSX.Element | string | null => {
+				switch (block.type) {
+					case 'PLAIN_TEXT':
+						return <>{block.value}</>;
+					case 'STRIKE':
+						return <Strike value={block.value} />;
+					case 'ITALIC':
+						return <Italic value={block.value} />;
+					case 'BOLD':
+						return <Bold value={block.value} />;
+					default:
+						return null;
+				}
+			})(label)}
+		</a>
+	);
+};
+
+export default Link;

client/components/Message/Body/Mention.tsx

@@ -0,0 +1,34 @@
+import { UserMention as ASTUserMention } from '@rocket.chat/message-parser';
+import React, { FC, memo } from 'react';
+
+import { useUserId } from '../../../contexts/UserContext';
+import { UserMention } from './definitions/UserMention';
+
+const Mention: FC<{ value: ASTUserMention['value']; mentions: UserMention[] }> = ({
+	value: { value: mention },
+	mentions,
+}) => {
+	const uid = useUserId();
+	const mentioned = mentions.find((mentioned) => mentioned.username === mention);
+	const classNames = ['mention-link'];
+	if (mention === 'all') {
+		classNames.push('mention-link--all');
+		classNames.push('mention-link--group');
+	} else if (mention === 'here') {
+		classNames.push('mention-link--here');
+		classNames.push('mention-link--group');
+	} else if (mentioned && mentioned._id === uid) {
+		classNames.push('mention-link--me');
+		classNames.push('mention-link--user');
+	} else {
+		classNames.push('mention-link--user');
+	}
+	return (
+		<>
+			{mentioned && <span className={classNames.join(' ')}>{mentioned.name || mention}</span>}
+			{!mentioned && `@${mention}`}
+		</>
+	);
+};
+
+export default memo(Mention);

client/components/Message/Body/OrderedList.tsx

@@ -0,0 +1,16 @@
+import { OrderedList as ASTOrderedList } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Inline from './Inline';
+
+const OrderedList: FC<{ value: ASTOrderedList['value'] }> = ({ value }) => (
+	<ol>
+		{value.map((item, index) => (
+			<li key={index}>
+				<Inline value={item.value} />
+			</li>
+		))}
+	</ol>
+);
+
+export default OrderedList;

client/components/Message/Body/Paragraph.tsx

@@ -0,0 +1,16 @@
+import { Paragraph as ASTParagraph } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Inline from './Inline';
+import { UserMention } from './definitions/UserMention';
+
+const Paragraph: FC<{ value: ASTParagraph['value']; mentions: UserMention[] }> = ({
+	value = [],
+	mentions,
+}) => (
+	<p>
+		<Inline value={value} mentions={mentions} />
+	</p>
+);
+
+export default Paragraph;

client/components/Message/Body/Plain.tsx

@@ -0,0 +1,8 @@
+import { Plain as ASTPlain } from '@rocket.chat/message-parser';
+import React, { FC, memo } from 'react';
+
+const Plain: FC<{ value: ASTPlain }> = ({ value }) => (
+	<>{value.type === 'PLAIN_TEXT' && value.value}</>
+);
+
+export default memo(Plain);

client/components/Message/Body/Quote.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@rocket.chat/fuselage';
+import { Quote as ASTQuote } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Paragraph from './Paragraph';
+
+const Quote: FC<{ value: ASTQuote['value'] }> = ({ value }) => (
+	<Box is='blockquote' backgroundColor='neutral-200' pi='x8'>
+		{value.map((item, index) => (
+			<Paragraph key={index} value={item.value} mentions={[]} />
+		))}
+	</Box>
+);
+
+export default Quote;

client/components/Message/Body/Strike.tsx

@@ -0,0 +1,24 @@
+import { Strike as ASTStrike } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Bold from './Bold';
+import Italic from './Italic';
+
+const Strike: FC<{ value: ASTStrike['value'] }> = ({ value = [] }) => (
+	<del>
+		{value.map((block, index) => {
+			switch (block.type) {
+				case 'PLAIN_TEXT':
+					return block.value;
+				case 'BOLD':
+					return <Bold key={index} value={block.value} />;
+				case 'ITALIC':
+					return <Italic key={index} value={block.value} />;
+				default:
+					return null;
+			}
+		})}
+	</del>
+);
+
+export default Strike;

client/components/Message/Body/TaskList.tsx

@@ -0,0 +1,23 @@
+import { CheckBox } from '@rocket.chat/fuselage';
+import { Tasks as ASTTasks } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Inline from './Inline';
+
+const TaksList: FC<{ value: ASTTasks['value'] }> = ({ value }) => (
+	<ul
+		style={{
+			listStyle: 'none',
+			marginLeft: 0,
+			paddingLeft: 0,
+		}}
+	>
+		{value.map((item) => (
+			<li>
+				<CheckBox checked={item.status} /> <Inline value={item.value} />
+			</li>
+		))}
+	</ul>
+);
+
+export default TaksList;

client/components/Message/Body/UnorderedList.tsx

@@ -0,0 +1,16 @@
+import { UnorderedList as ASTUnorderedList } from '@rocket.chat/message-parser';
+import React, { FC } from 'react';
+
+import Inline from './Inline';
+
+const UnorderedList: FC<{ value: ASTUnorderedList['value'] }> = ({ value }) => (
+	<ul>
+		{value.map((item) => (
+			<li>
+				<Inline value={item.value} />
+			</li>
+		))}
+	</ul>
+);
+
+export default UnorderedList;

client/components/Message/Body/definitions/UserMention.ts

@@ -0,0 +1,3 @@
+import { IUser } from '../../../../../definition/IUser';
+
+export type UserMention = Pick<IUser, '_id' | 'name' | 'username'>;

client/components/Message/Body/index.ts

@@ -0,0 +1 @@
+export { default } from './Body';

client/lib/appLayout.ts

@@ -4,7 +4,7 @@ import { Subscription, Unsubscribe } from 'use-subscription';
 
 type BlazeLayoutDescriptor = {
 	template: string;
-	data?: Record<string, unknown>;
+	data?: EJSONable;
 };
 
 type ComponentLayoutDescriptor<Props extends {} = {}> = {
@@ -29,13 +29,10 @@ class AppLayoutSubscription
 	}
 
 	render: {
-		(template: string, data?: Record<string, unknown>): void;
+		(template: string, data?: EJSONable): void;
 		(descriptor: BlazeLayoutDescriptor): void;
 		<Props = {}>(descriptor: ComponentLayoutDescriptor<Props>): void;
-	} = (
-		templateOrDescriptor: string | AppLayoutDescriptor,
-		data?: Record<string, unknown>,
-	): void => {
+	} = (templateOrDescriptor: string | AppLayoutDescriptor, data?: EJSONable): void => {
 		if (typeof templateOrDescriptor === 'string') {
 			this.setCurrentValue({ template: templateOrDescriptor, data });
 			return;

client/lib/baseuri.ts

@@ -0,0 +1,18 @@
+export const baseURI: string = ((): string => {
+	if (document.baseURI) {
+		return document.baseURI;
+	}
+
+	// Should be exactly one tag:
+	//   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+	const base = document.getElementsByTagName('base');
+
+	// Return location from BASE tag.
+	if (base.length > 0) {
+		return base[0].href;
+	}
+
+	// Else use implementation of documentURI:
+	//   http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI
+	return document.URL;
+})();

client/templates.ts

@@ -24,6 +24,8 @@ createTemplateForComponent(
 	},
 );
 
+createTemplateForComponent('MessageBody', () => import('./components/Message/Body'));
+
 createTemplateForComponent(
 	'BroadCastMetric',
 	() => import('./components/Message/Metrics/Broadcast'),

client/types/main.d.ts

@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/interface-name-prefix */
-
-declare module 'meteor/reactive-dict' {
-	const ReactiveDict: ReactiveDictStatic;
-	interface ReactiveDictStatic {
-		new <T>(name: string, initialValue?: T): ReactiveDict<T>;
-	}
-	interface ReactiveDict<T> {
-		get(name: string): T;
-		set(name: string, newValue: T): void;
-	}
-}

client/views/account/preferences/PreferencesGlobalSection.js

@@ -1,4 +1,11 @@
-import { Accordion, Field, FieldGroup, MultiSelect } from '@rocket.chat/fuselage';
+import {
+	Accordion,
+	Field,
+	FieldGroup,
+	MultiSelect,
+	ToggleSwitch,
+	Callout,
+} from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
@@ -9,6 +16,9 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 	const t = useTranslation();
 
 	const userDontAskAgainList = useUserPreference('dontAskAgainList');
+	const userEnableMessageParserEarlyAdoption = useUserPreference(
+		'enableMessageParserEarlyAdoption',
+	);
 
 	const options = useMemo(
 		() => (userDontAskAgainList || []).map(({ action, label }) => [action, label]),
@@ -17,11 +27,17 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 
 	const selectedOptions = options.map(([action]) => action);
 
-	const { values, handlers, commit } = useForm({ dontAskAgainList: selectedOptions }, onChange);
+	const { values, handlers, commit } = useForm(
+		{
+			dontAskAgainList: selectedOptions,
+			enableMessageParserEarlyAdoption: userEnableMessageParserEarlyAdoption,
+		},
+		onChange,
+	);
 
-	const { dontAskAgainList } = values;
+	const { dontAskAgainList, enableMessageParserEarlyAdoption } = values;
 
-	const { handleDontAskAgainList } = handlers;
+	const { handleDontAskAgainList, handleEnableMessageParserEarlyAdoption } = handlers;
 
 	commitRef.current.global = commit;
 
@@ -40,6 +56,18 @@ const PreferencesGlobalSection = ({ onChange, commitRef, ...props }) => {
 					</Field.Row>
 				</Field>
 			</FieldGroup>
+			<FieldGroup>
+				<Field>
+					<Field.Label>{t('Enable_message_parser_early_adoption')}</Field.Label>
+					<Field.Row>
+						<ToggleSwitch
+							checked={enableMessageParserEarlyAdoption}
+							onChange={handleEnableMessageParserEarlyAdoption}
+						/>
+					</Field.Row>
+				</Field>
+				<Callout type='warning'>{t('Enable_message_parser_early_adoption_alert')}</Callout>
+			</FieldGroup>
 		</Accordion.Item>
 	);
 };

client/views/root/BlazeTemplate.tsx

@@ -1,11 +1,12 @@
 import { Blaze } from 'meteor/blaze';
+import { EJSONable } from 'meteor/ejson';
 import { ReactiveDict } from 'meteor/reactive-dict';
 import { Template } from 'meteor/templating';
 import React, { FC, useEffect, useRef } from 'react';
 
 type BlazeTemplateProps = {
 	template: keyof typeof Template;
-	data?: Record<string, unknown>;
+	data?: EJSONable;
 };
 
 const hiddenStyle = { display: 'none' } as const;

package-lock.json

@@ -6418,12 +6418,17 @@
       "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.24.0.tgz",
       "integrity": "sha512-6K+XrEaW/SJNq1wb6wygonuJl0VGrZSa6CJa0vlA+xGOmkEcL6Z2KTCsTNEinh8SRlQ692meWmovWnnSKMjszw=="
     },
+    "@rocket.chat/message-parser": {
+      "version": "0.6.3-dev.245",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/message-parser/-/message-parser-0.6.3-dev.245.tgz",
+      "integrity": "sha512-4EeiWT9nBZevDzZRImkjb30e3FDwWEVj5c0AzdQIX8Av1PBvXa0l7XUB88e93sH128LqFjdF68O41a5I9uLEFg=="
+    },
     "@rocket.chat/mp3-encoder": {
       "version": "0.24.0",
       "resolved": "https://registry.npmjs.org/@rocket.chat/mp3-encoder/-/mp3-encoder-0.24.0.tgz",
       "integrity": "sha512-evrPEZP2FgZxQoHbIZrmOZtlvJ0JAjDnFKGaQBEpt49KJA82+qHOpyfALtWsvROyYUvo/xaia7XB4aXfLc+gxw==",
       "requires": {
-        "lamejs": "git+https://github.com/zhuker/lamejs.git"
+        "lamejs": "git+https://github.com/zhuker/lamejs.git#564612b5b57336238a5920ba4c301b49f7cb2bab"
       }
     },
     "@rocket.chat/sdk": {
@@ -22875,8 +22880,7 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -22900,15 +22904,13 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -22925,22 +22927,19 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -23071,8 +23070,7 @@
           "version": "2.0.3",
           "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -23086,7 +23084,6 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -23103,7 +23100,6 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -23112,15 +23108,13 @@
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -23141,7 +23135,6 @@
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -23237,8 +23230,7 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -23252,7 +23244,6 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -23348,8 +23339,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -23391,7 +23381,6 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -23413,7 +23402,6 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -23462,15 +23450,13 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": false,
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -23663,8 +23649,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -23682,13 +23667,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -23701,18 +23684,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -23815,8 +23795,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -23826,7 +23805,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -23839,20 +23817,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -23869,7 +23844,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -23948,8 +23922,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -23959,7 +23932,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -24035,8 +24007,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -24066,7 +24037,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -24084,7 +24054,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -24123,13 +24092,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -39731,7 +39698,6 @@
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
           "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-extglob": "^2.1.1"
           }

package.json

@@ -149,6 +149,7 @@
 		"@rocket.chat/fuselage-tokens": "^0.24.0",
 		"@rocket.chat/fuselage-ui-kit": "^0.24.0",
 		"@rocket.chat/memo": "^0.24.0",
+		"@rocket.chat/message-parser": "^0.6.3-dev.245",
 		"@rocket.chat/mp3-encoder": "^0.24.0",
 		"@rocket.chat/ui-kit": "^0.24.0",
 		"@slack/client": "^4.12.0",

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1526,6 +1526,8 @@
   "Emoji_provided_by_JoyPixels": "Emoji provided by <strong>JoyPixels</strong>",
   "EmojiCustomFilesystem": "Custom Emoji Filesystem",
   "Empty_title": "Empty title",
+  "Enable_message_parser_early_adoption": "Enable the Message parser",
+  "Enable_message_parser_early_adoption_alert": "This is an experimental feature and will remain that way at least until version 3.19.0, this option is to help us with tests and edge cases. As soon as we don't find any more problems, we will remove that option and migrate to the new solution",
   "See_on_Engagement_Dashboard": "See on Engagement Dashboard",
   "Enable": "Enable",
   "Enable_Auto_Away": "Enable Auto Away",

tsconfig.json

@@ -42,6 +42,7 @@
 	"exclude": [
 		"./.meteor/**",
 		"./packages/**"
+		// "./ee/server/services/**"
 		// "node_modules"
 	]
 }