[Gekidou] Update Markdown theme (#6328)

* Fix Markdown when theme changes / latex correct font color

* Do not fetch emojis that are unicode

* Check for unicode emoji before searching for custom emoji

app/components/emoji/index.tsx

@@ -21,6 +21,7 @@ import NetworkManager from '@managers/network_manager';
 import {queryCustomEmojisByName} from '@queries/servers/custom_emoji';
 import {observeConfigBooleanValue} from '@queries/servers/system';
 import {EmojiIndicesByAlias, Emojis} from '@utils/emoji';
+import {isUnicodeEmoji} from '@utils/emoji/helpers';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
 import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji';
@@ -52,16 +53,17 @@ const Emoji = (props: Props) => {
     let assetImage = '';
     let unicode;
     let imageUrl = '';
+    const name = emojiName.trim();
 
-    if (EmojiIndicesByAlias.has(emojiName)) {
-        const emoji = Emojis[EmojiIndicesByAlias.get(emojiName)!];
+    if (EmojiIndicesByAlias.has(name)) {
+        const emoji = Emojis[EmojiIndicesByAlias.get(name)!];
         if (emoji.category === 'custom') {
             assetImage = emoji.fileName;
         } else {
             unicode = emoji.image;
         }
-    } else {
-        const custom = customEmojis.find((ce) => ce.name === emojiName);
+    } else if (!isUnicodeEmoji(name)) {
+        const custom = customEmojis.find((ce) => ce.name === name);
         if (custom) {
             try {
                 const client = NetworkManager.getClient(serverUrl);
@@ -69,8 +71,8 @@ const Emoji = (props: Props) => {
             } catch {
                 // do nothing
             }
-        } else {
-            fetchCustomEmojiInBatch(serverUrl, emojiName);
+        } else if (name) {
+            fetchCustomEmojiInBatch(serverUrl, name);
         }
     }
 

app/components/markdown/markdown.tsx

@@ -3,7 +3,7 @@
 
 import {Parser, Node} from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
-import React, {ReactElement, useRef} from 'react';
+import React, {ReactElement, useMemo, useRef} from 'react';
 import {Dimensions, GestureResponderEvent, Platform, StyleProp, Text, TextStyle, View} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
@@ -497,7 +497,7 @@ const Markdown = ({
     };
 
     const parser = useRef(new Parser({urlFilter, minimumHashtagLength})).current;
-    const renderer = useRef(createRenderer()).current;
+    const renderer = useMemo(() => createRenderer(), [theme]);
     let ast = parser.parse(value.toString());
 
     ast = combineTextNodes(ast);

app/components/markdown/markdown_latex_block/index.tsx

@@ -46,6 +46,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             flexDirection: 'row',
             flex: 1,
         },
+        mathStyle: {
+            color: theme.centerChannelColor,
+        },
         rightColumn: {
             flexDirection: 'column',
             flex: 1,
@@ -209,6 +212,7 @@ const LatexCodeBlock = ({content, theme}: Props) => {
                                     math={latexCode}
                                     renderError={onRenderErrorMessage}
                                     resizeMode={'cover'}
+                                    style={styles}
                                 />
                             </View>
                         ))}

app/components/markdown/markdown_latex_inline/index.tsx

@@ -24,6 +24,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         mathStyle: {
             marginBottom: Platform.select({default: -10, ios: 2.5}),
+            color: theme.centerChannelColor,
         },
         viewStyle: {
             flexDirection: 'row',

app/utils/emoji/helpers.ts

@@ -10,6 +10,8 @@ import {Emojis, EmojiIndicesByAlias, EmojiIndicesByUnicode} from '.';
 
 import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji';
 
+const UNICODE_REGEX = /\p{Emoji}/u;
+
 const RE_NAMED_EMOJI = /(:([a-zA-Z0-9_+-]+):)/g;
 
 const RE_UNICODE_EMOJI = emojiRegex();
@@ -52,6 +54,10 @@ function isEmoticon(text: string) {
     return false;
 }
 
+export function isUnicodeEmoji(text: string) {
+    return UNICODE_REGEX.test(text);
+}
+
 export function getEmoticonName(value: string) {
     return Object.keys(RE_EMOTICON).find((key) => value.match(RE_EMOTICON[key]) !== null);
 }