Merge branch 'standardised_strings' of github.com:Aerilym/session-desktop into standardised_strings

ts/components/basic/I18n.tsx

@@ -1,14 +1,20 @@
-import React from 'react';
-
 import styled from 'styled-components';
+import { Fragment } from 'react';
 import type {
   GetMessageArgs,
   I18nProps,
   LocalizerDictionary,
   LocalizerToken,
 } from '../../types/Localizer';
+
 import { useIsDarkTheme } from '../../state/selectors/theme';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
+import {
+  type CustomTag,
+  CustomTagProps,
+  SessionCustomTagRenderer,
+  supportedCustomTags,
+} from './SessionCustomTagRenderer';
 
 /** An array of supported html tags to render if found in a string */
 const supportedFormattingTags = ['b', 'i', 'u', 's', 'br', 'span'];
@@ -19,25 +25,22 @@ const formattingTagRegex = new RegExp(
   'g'
 );
 
-const supportedCustomTags = ['emoji'];
-
-const customTagRegex = new RegExp(
-  `<(?:${supportedFormattingTags.join('|')})>.*?</(?:${supportedCustomTags.join('|')})>`,
-  'g'
-);
+const customTagRegex = new RegExp(`<(${supportedCustomTags.join('|')})/>`, 'g');
 
-const StyledHtmlRenderer = styled.span<{ darkMode: boolean }>`
+const StyledHtmlRenderer = styled.span<{ isDarkTheme: boolean }>`
   span {
-    color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')};
+    color: ${props => (props.isDarkTheme ? 'var(--primary-color)' : 'var(--text-primary-color)')};
   }
 `;
 
 /**
  * Retrieve a localized message string, substituting dynamic parts where necessary and formatting it as HTML if necessary.
  *
- * @param token - The token identifying the message to retrieve and an optional record of substitution variables and their replacement values.
- * @param args - An optional record of substitution variables and their replacement values. This is required if the string has dynamic parts.
- * @param as - An optional HTML tag to render the component as. Defaults to a fragment, unless the string contains html tags. In that case, it will render as HTML in a div tag.
+ * @param props.token - The token identifying the message to retrieve and an optional record of substitution variables and their replacement values.
+ * @param props.args - An optional record of substitution variables and their replacement values. This is required if the string has dynamic parts.
+ * @param props.as - An optional HTML tag to render the component as. Defaults to a fragment, unless the string contains html tags. In that case, it will render as HTML in a div tag.
+ * @param props.startTagProps - An optional object of props to pass to the start tag.
+ * @param props.endTagProps - An optional object of props to pass to the end tag.
  *
  * @returns The localized message string with substitutions and formatting applied.
  *
@@ -49,7 +52,7 @@ const StyledHtmlRenderer = styled.span<{ darkMode: boolean }>`
  * ```
  */
 export const I18n = <T extends LocalizerToken>(props: I18nProps<T>) => {
-  const darkMode = useIsDarkTheme();
+  const isDarkMode = useIsDarkTheme();
   const i18nArgs = 'args' in props ? props.args : undefined;
 
   const i18nString = window.i18n<T, LocalizerDictionary[T]>(
@@ -57,18 +60,59 @@ export const I18n = <T extends LocalizerToken>(props: I18nProps<T>) => {
   );
 
   const containsFormattingTag = i18nString.match(formattingTagRegex);
-  const containsCustomTag = i18nString.match(customTagRegex);
 
+  let startTag: CustomTag | null = null;
+  let endTag: CustomTag | null = null;
+
+  /**
+   * @param match - The entire match, including the custom tag.
+   * @param group - The custom tag, without the angle brackets.
+   * @param index - The index of the match in the string.
+   */
+  i18nString.replace(customTagRegex, (match: string, group: CustomTag, index: number) => {
+    if (index === 0) {
+      startTag = group;
+    } else if (index === i18nString.length - match.length) {
+      endTag = group;
+    } else {
+      /**
+       * If the match is not at the start or end of the string, throw an error.
+       * NOTE: This should never happen as this rule is enforced when the dictionary is generated.
+       */
+      throw new Error(
+        `Custom tag ${group} (${match}) is not at the start or end (i=${index}) of the string: ${i18nString}`
+      );
+    }
+
+    return '';
+  });
+
+  const content = containsFormattingTag ? (
     /** If the string contains a relevant formatting tag, render it as HTML */
-  if (containsFormattingTag || containsCustomTag) {
-    return (
-      <StyledHtmlRenderer darkMode={darkMode}>
+    <StyledHtmlRenderer isDarkTheme={isDarkMode}>
       <SessionHtmlRenderer tag={props.as} html={i18nString} />
     </StyledHtmlRenderer>
+  ) : (
+    i18nString
   );
-  }
 
-  const Comp = props.as ?? React.Fragment;
+  const Comp = props.as ?? Fragment;
 
-  return <Comp>{i18nString}</Comp>;
+  return (
+    <Comp>
+      {startTag ? (
+        <SessionCustomTagRenderer
+          tag={startTag}
+          tagProps={props.startTagProps as CustomTagProps<typeof startTag>}
+        />
+      ) : null}
+      {content}
+      {endTag ? (
+        <SessionCustomTagRenderer
+          tag={endTag}
+          tagProps={props.endTagProps as CustomTagProps<typeof endTag>}
+        />
+      ) : null}
+    </Comp>
+  );
 };

ts/components/basic/SessionCustomTagRenderer.tsx

@@ -6,24 +6,35 @@ const StyledEmoji = styled.span`
   margin-left: 8px;
 `;
 
+export const supportedCustomTags = ['emoji'] as const;
+
+export type CustomTag = (typeof supportedCustomTags)[number];
+
+/**
+ * A dictionary of custom tags and their rendering functions.
+ */
 export const customTag = {
   emoji: ({ emoji }: { emoji: string }) => (
     <StyledEmoji role={'img'} aria-label={nativeEmojiData?.ariaLabels?.[emoji]}>
       {emoji}
     </StyledEmoji>
   ),
-};
+} as const;
 
-export const SessionCustomTag = <Tag extends keyof typeof customTag>({
+export type CustomTagProps<Tag extends CustomTag> = Parameters<(typeof customTag)[Tag]>[0];
+
+/**
+ * Render a custom tag with its props.
+ *
+ * @param tag - The custom tag to render.
+ * @param tagProps - The props to pass to the custom tag.
+ */
+export const SessionCustomTagRenderer = <Tag extends CustomTag>({
   tag,
-  props,
+  tagProps,
 }: {
   tag: Tag;
-  props: Parameters<(typeof customTag)[Tag]>[0];
+  tagProps: CustomTagProps<Tag>;
 }) => {
-  return customTag[tag](props);
-};
-
-export const SessionCustomTagRenderer = ({ str }: { str: string }) => {
-  const splitString = str.split();
+  return customTag[tag](tagProps);
 };

ts/components/conversation/SubtleNotification.tsx

@@ -98,7 +98,7 @@ export const NoMessageInConversation = () => {
   const privateBlindedAndBlockingMsgReqs = useSelectedHasDisabledBlindedMsgRequests();
   const name = useSelectedNicknameOrProfileNameOrShortenedPubkey();
 
-  const messageText = useMemo(() => {
+  const content = useMemo(() => {
     if (isMe) {
       return <I18n token="noteToSelfEmpty" />;
     }
@@ -120,9 +120,7 @@ export const NoMessageInConversation = () => {
 
   return (
     <Container data-testid="empty-conversation-notification">
-      <TextInner>
-        <SessionHtmlRenderer html={messageText} />
-      </TextInner>
+      <TextInner>{content}</TextInner>
     </Container>
   );
 };

ts/components/conversation/message/reactions/ReactionPopup.tsx

@@ -2,7 +2,8 @@ import { useMemo } from 'react';
 import styled from 'styled-components';
 import { findAndFormatContact } from '../../../../models/message';
 import { PubKey } from '../../../../session/types/PubKey';
-import { nativeEmojiData } from '../../../../util/emoji';
+
+import { I18n } from '../../../basic/I18n';
 
 export type TipPosition = 'center' | 'left' | 'right';
 
@@ -51,18 +52,6 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
   }
 `;
 
-const StyledEmoji = styled.span`
-  font-size: 36px;
-  margin-left: 8px;
-`;
-
-const StyledContacts = styled.span`
-  word-break: break-all;
-  span {
-    word-break: keep-all;
-  }
-`;
-
 const generateContactsString = (
   senders: Array<string>
 ): { contacts: Array<string>; numberOfReactors: number; hasMe: boolean } => {
@@ -83,38 +72,56 @@ const generateContactsString = (
   return { contacts, hasMe, numberOfReactors };
 };
 
-const generateReactionString = (
+const getI18nComponent = (
   isYou: boolean,
   contacts: Array<string>,
-  numberOfReactors: number
+  numberOfReactors: number,
+  emoji: string
 ) => {
   const name = contacts[0];
   const other_name = contacts[1];
 
   switch (numberOfReactors) {
     case 1:
-      return isYou
-        ? window.i18n('emojiReactsHoverYouDesktop')
-        : window.i18n('emojiReactsHoverNameDesktop', { name });
+      return isYou ? (
+        <I18n token="emojiReactsHoverYouDesktop" endTagProps={{ emoji }} />
+      ) : (
+        <I18n token="emojiReactsHoverNameDesktop" args={{ name }} endTagProps={{ emoji }} />
+      );
     case 2:
-      return isYou
-        ? window.i18n('emojiReactsHoverYouNameDesktop', { name })
-        : window.i18n('emojiReactsHoverTwoNameDesktop', { name, other_name });
+      return isYou ? (
+        <I18n token="emojiReactsHoverYouNameDesktop" args={{ name }} endTagProps={{ emoji }} />
+      ) : (
+        <I18n
+          token="emojiReactsHoverTwoNameDesktop"
+          args={{ name, other_name }}
+          endTagProps={{ emoji }}
+        />
+      );
     case 3:
-      return isYou
-        ? window.i18n('emojiReactsHoverYouNameOneDesktop', { name })
-        : window.i18n('emojiReactsHoverTwoNameDesktop', { name, other_name });
+      return isYou ? (
+        <I18n token="emojiReactsHoverYouNameOneDesktop" args={{ name }} endTagProps={{ emoji }} />
+      ) : (
+        <I18n
+          token="emojiReactsHoverTwoNameOneDesktop"
+          args={{ name, other_name }}
+          endTagProps={{ emoji }}
+        />
+      );
     default:
-      return isYou
-        ? window.i18n('emojiReactsHoverYouNameMultipleDesktop', {
-            name,
-            count: numberOfReactors - 2,
-          })
-        : window.i18n('emojiReactsHoverTwoNameMultipleDesktop', {
-            name,
-            other_name,
-            count: numberOfReactors - 2,
-          });
+      return isYou ? (
+        <I18n
+          token="emojiReactsHoverYouNameMultipleDesktop"
+          args={{ name, count: numberOfReactors - 2 }}
+          endTagProps={{ emoji }}
+        />
+      ) : (
+        <I18n
+          token="emojiReactsHoverTwoNameMultipleDesktop"
+          args={{ name, other_name, count: numberOfReactors - 2 }}
+          endTagProps={{ emoji }}
+        />
+      );
   }
 };
 
@@ -128,24 +135,21 @@ type Props = {
 };
 
 export const ReactionPopup = (props: Props) => {
-  const { emoji, count, senders, tooltipPosition = 'center', onClick } = props;
+  const { emoji, senders, tooltipPosition = 'center', onClick } = props;
 
   const { contacts, hasMe, numberOfReactors } = useMemo(
     () => generateContactsString(senders),
     [senders]
   );
 
-  const reactionString = useMemo(
-    () => generateReactionString(hasMe, contacts, numberOfReactors),
-    [hasMe, contacts, numberOfReactors]
+  const content = useMemo(
+    () => getI18nComponent(hasMe, contacts, numberOfReactors, emoji),
+    [hasMe, contacts, numberOfReactors, emoji]
   );
 
   return (
     <StyledPopupContainer tooltipPosition={tooltipPosition} onClick={onClick}>
-      {contacts.length ? <StyledContacts>{Contacts(contacts, count)}</StyledContacts> : null}
-      <StyledEmoji role={'img'} aria-label={nativeEmojiData?.ariaLabels?.[emoji]}>
-        {emoji}
-      </StyledEmoji>
+      {content}
     </StyledPopupContainer>
   );
 };

ts/types/Localizer.ts

@@ -2,6 +2,7 @@
 import type { ElementType } from 'react';
 import type { Dictionary } from '../localization/locales';
 import { LOCALE_DEFAULTS } from '../session/constants';
+import { CustomTag, CustomTagProps } from '../components/basic/SessionCustomTagRenderer';
 
 /** A localization dictionary key */
 type Token = keyof Dictionary;
@@ -24,6 +25,7 @@ type DynamicArgs<LocalizedString extends string> =
     ? PluralVar | DynamicArgs<PluralOne> | DynamicArgs<PluralOther>
     : /** If a string segment has follows the variable form parse its variable name and recursively
        * check for more dynamic args */
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We dont care about _Pre TODO: see if we can remove this infer
       LocalizedString extends `${infer _Pre}{${infer Var}}${infer Rest}`
       ? Var | DynamicArgs<Rest>
       : never;
@@ -43,7 +45,13 @@ export type GetMessageArgs<T extends Token> = T extends Token
   : never;
 
 /** Basic props for all calls of the I18n component */
-type I18nBaseProps<T extends Token> = { token: T; as?: ElementType };
+type I18nBaseProps<T extends Token> = {
+  token: T;
+  as?: ElementType;
+  // TODO: investigate making these required when required and not required when not required
+  startTagProps?: CustomStartTagProps<T>;
+  endTagProps?: CustomEndTagProps<T>;
+};
 
 /** The props for the localization component */
 export type I18nProps<T extends Token> = T extends Token
@@ -54,6 +62,46 @@ export type I18nProps<T extends Token> = T extends Token
       : I18nBaseProps<T> & { args: ArgsRecordExcludingDefaults<T> }
   : never;
 
+/** The props for custom tags at the start of an i18n strings */
+export type CustomStartTagProps<T extends Token> = T extends Token
+  ? Dictionary[T] extends `<${infer Tag}/>${string}`
+    ? Tag extends CustomTag
+      ? CustomTagProps<Tag>
+      : never
+    : never
+  : never;
+
+/**
+ * This is used to find the end tag. TypeScript navigates from outwards to inwards when doing magic
+ * with strings. This means we need a recursive type to find the actual end tag.
+ *
+ * @example For the string `{name} reacted with <emoji/>`
+ * The first iteration will find `Tag` as `emoji` because it grabs the first `<` and the last `/>`
+ * Because it doesn't contain a `<` it will return the Tag.
+ *
+ * @example For the string `You, {name} & <span>1 other</span> reacted with <emoji/>`
+ * The first iteration will find `Tag` as `span>1 other</span> reacted with <emoji` because it
+ * grabs the first `<` and the last `/>, so we then check if Tag contains a `<`:
+ * - If it doesn't then we have found it;
+ * - If it does then we need to run it through the same process again to search deeper.
+ */
+type CustomEndTag<LocalizedString extends string> =
+  LocalizedString extends `${string}<${infer Tag}/>${string}` ? FindCustomTag<Tag> : never;
+
+type FindCustomTag<S extends string> = S extends CustomTag
+  ? S
+  : S extends `${string}<${infer Tag}`
+    ? Tag extends CustomTag
+      ? Tag
+      : FindCustomTag<Tag>
+    : never;
+
+/** The props for custom tags at the end of an i18n strings */
+type CustomEndTagProps<T extends Token> =
+  CustomEndTag<Dictionary[T]> extends CustomTag
+    ? CustomTagProps<CustomEndTag<Dictionary[T]>>
+    : never;
+
 /** The dictionary of localized strings */
 export type LocalizerDictionary = Dictionary;
 

ts/util/i18n.ts

@@ -97,8 +97,6 @@ export type Locale = keyof typeof timeLocaleMap;
 
 const enPluralFormRegex = /\{(\w+), plural, one \{(\w+)\} other \{(\w+)\}\}/;
 
-const cardinalPluralFormRegex = /(zero|one|two|few|many|other) \{([^}]*)\}/g;
-
 const cardinalPluralRegex: Record<Intl.LDMLPluralRule, RegExp> = {
   zero: /(zero) \{([^}]*)\}/,
   one: /(one) \{([^}]*)\}/,
@@ -110,7 +108,7 @@ const cardinalPluralRegex: Record<Intl.LDMLPluralRule, RegExp> = {
 
 function getPluralKey(string: PluralString): PluralKey | undefined {
   const match = string.match(enPluralFormRegex);
-  return match ? match[1] : undefined;
+  return match && match[1] ? match[1] : undefined;
 }
 
 function getStringForCardinalRule(
@@ -203,8 +201,10 @@ export const setupi18n = (locale: Locale, dictionary: LocalizerDictionary) => {
         return token as R;
       }
 
-      /** If a localized string does not have any arguments to substitute it is returned with no changes */
-      if (!args) {
+      /** If a localized string does not have any arguments to substitute it is returned with no
+       * changes. We also need to check if the string contains a curly bracket as if it does
+       * there might be a default arg */
+      if (!args && !localizedString.includes('{')) {
         return localizedString;
       }
 
@@ -216,7 +216,7 @@ export const setupi18n = (locale: Locale, dictionary: LocalizerDictionary) => {
             `i18n: Attempted to nonexistent pluralKey for plural form string '${localizedString}'`
           );
         } else {
-          const num = args[pluralKey] ?? 0;
+          const num = args?.[pluralKey] ?? 0;
 
           const cardinalRule = new Intl.PluralRules(locale).select(num);
 
@@ -234,8 +234,9 @@ export const setupi18n = (locale: Locale, dictionary: LocalizerDictionary) => {
       }
 
       /** Find and replace the dynamic variables in a localized string and substitute the variables with the provided values */
+      // @ts-expect-error TODO: Fix this type, now that we have plurals it doesnt quite work
       return localizedString.replace(/\{(\w+)\}/g, (match, arg: keyof typeof args) => {
-        const substitution = args[arg];
+        const substitution: string | undefined = args?.[arg];
 
         if (isUndefined(substitution)) {
           const defaultSubstitution = LOCALE_DEFAULTS[arg as keyof typeof LOCALE_DEFAULTS];
@@ -243,7 +244,8 @@ export const setupi18n = (locale: Locale, dictionary: LocalizerDictionary) => {
           return isUndefined(defaultSubstitution) ? match : defaultSubstitution;
         }
 
-        return substitution.toString();
+        // TODO: figure out why is was type never and fix the type
+        return (substitution as string).toString();
       }) as R;
     } catch (error) {
       i18nLog(`i18n: ${error.message}`);