Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] Add katex render to new message react template #25239

Merged
merged 4 commits into from
Apr 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/meteor/app/katex/client/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -185,3 +185,7 @@ export const createKatexMessageRendering = (options) => {
const instance = new Katex(katex, options);
return (message) => instance.renderMessage(message);
};

export const getKatexHtml = (text, katex) => {
return createKatexMessageRendering({ dollarSyntax: katex.dollarSyntaxEnabled, parenthesisSyntax: katex.parenthesisSyntaxEnabled })(text);
};
29 changes: 29 additions & 0 deletions apps/meteor/client/components/CustomText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { memo, ReactElement } from 'react';

import { highlightWords as getHighlightHtml } from '../../app/highlight-words/client/helper';
import Katex from './Katex';

type CustomTextProps = {
text: string;
wordsToHighlight?: {
highlight: string;
regex: RegExp;
urlRegex: RegExp;
}[];
katex?: {
dollarSyntaxEnabled: boolean;
parenthesisSyntaxEnabled: boolean;
};
};

const CustomText = ({ text, wordsToHighlight, katex }: CustomTextProps): ReactElement => {
// TODO: chapter day frontend: remove dangerouslySetInnerHTML, convert to tokens and do not mix with katex
const html = wordsToHighlight?.length ? getHighlightHtml(text, wordsToHighlight) : text;
if (katex) {
return <Katex text={html} options={{ dollarSyntax: katex.dollarSyntaxEnabled, parenthesisSyntax: katex.parenthesisSyntaxEnabled }} />;
}

return <span dangerouslySetInnerHTML={{ __html: html }} />;
};

export default memo(CustomText);
18 changes: 0 additions & 18 deletions apps/meteor/client/components/Highlighter.tsx

This file was deleted.

17 changes: 17 additions & 0 deletions apps/meteor/client/components/Katex.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { memo, ReactElement } from 'react';

import { createKatexMessageRendering } from '../../app/katex/client';

type KatexProps = {
text: string;
options: {
dollarSyntax: boolean;
parenthesisSyntax: boolean;
};
};

const Katex = ({ text, options }: KatexProps): ReactElement => (
<span dangerouslySetInnerHTML={{ __html: createKatexMessageRendering(options)(text) }} />
);

export default memo(Katex);
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { Plain as ASTPlain } from '@rocket.chat/message-parser';
import React, { FC, memo } from 'react';

import { useMessageListHighlights } from '../../../views/room/MessageList/contexts/MessageListContext';
import Highlighter from '../../Highlighter';
import { useMessageListHighlights, useMessageListKatex } from '../../../views/room/MessageList/contexts/MessageListContext';
import CustomText from '../../CustomText';

type PlainTextType = {
value: ASTPlain['value'];
};

const PlainText: FC<PlainTextType> = ({ value: text }) => {
const highlights = useMessageListHighlights();
const katex = useMessageListKatex();

if (highlights) {
return <Highlighter text={text} wordsToHighlight={highlights} />;
if (highlights || katex) {
return <CustomText text={text} wordsToHighlight={highlights} katex={katex} />;
}

return <>{text}</>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export type MessageListContextValue = {
regex: RegExp;
urlRegex: RegExp;
}[];
katex?: {
dollarSyntaxEnabled: boolean;
parenthesisSyntaxEnabled: boolean;
};
};

export const MessageListContext = createContext<MessageListContextValue>({
Expand Down Expand Up @@ -57,6 +61,7 @@ export const useMessageListShowRoles = (): MessageListContextValue['showRoles']
export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName;
export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;
export const useMessageListHighlights = (): MessageListContextValue['highlights'] => useContext(MessageListContext).highlights;
export const useMessageListKatex = (): MessageListContextValue['katex'] => useContext(MessageListContext).katex;

export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (message: IMessage) =>
useContext(MessageListContext).useUserHasReacted(message);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ export const MessageListProvider: FC<{
const showRealName = Boolean(useSetting('UI_Use_Real_Name')) && !isMobile;
const showReadReceipt = Boolean(useSetting('Message_Read_Receipt_Enabled'));
const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
const katexEnabled = Boolean(useSetting('Katex_Enabled'));
const katexDollarSyntaxEnabled = Boolean(useSetting('Katex_Dollar_Syntax'));
const katexParenthesisSyntaxEnabled = Boolean(useSetting('Katex_Parenthesis_Syntax'));

const showRoles = Boolean(!useUserPreference<boolean>('hideRoles') && !isMobile);
const showUsername = Boolean(!useUserPreference<boolean>('hideUsernames') && !isMobile);
const highlights = useUserPreference<string[]>('highlights');
Expand Down Expand Up @@ -84,6 +88,12 @@ export const MessageListProvider: FC<{
showRoles,
showRealName,
showUsername,
...(katexEnabled && {
katex: {
dollarSyntaxEnabled: katexDollarSyntaxEnabled,
parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
},
}),
highlights: highlights
?.map((str) => str.trim())
.map((highlight) => ({
Expand Down Expand Up @@ -118,6 +128,9 @@ export const MessageListProvider: FC<{
showRealName,
showUsername,
showReadReceipt,
katexEnabled,
katexDollarSyntaxEnabled,
katexParenthesisSyntaxEnabled,
highlights,
reactToMessage,
],
Expand Down