keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

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

Browse Source
pull/3206/head
Audric Ackermann 8 months ago
parent 1f366b6d8b 63369cf008
commit be23ef0e92
6 changed files with 196 additions and 89 deletions
Show Stats Download Patch File Download Diff File

94
ts/components/basic/I18n.tsx
Unescape Escape View File

@ -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);
/** If the string contains a relevant formatting tag, render it as HTML */
if (containsFormattingTag || containsCustomTag) {
return (
<StyledHtmlRenderer darkMode={darkMode}>
<SessionHtmlRenderer tag={props.as} html={i18nString} />
</StyledHtmlRenderer>
);
}
let startTag: CustomTag | null = null;
let endTag: CustomTag | null = null;
const Comp = props.as ?? React.Fragment;
/**
* @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 <Comp>{i18nString}</Comp>;
return '';
});
const content = containsFormattingTag ? (
/** If the string contains a relevant formatting tag, render it as HTML */
<StyledHtmlRenderer isDarkTheme={isDarkMode}>
<SessionHtmlRenderer tag={props.as} html={i18nString} />
</StyledHtmlRenderer>
) : (
i18nString
);
const Comp = props.as ?? Fragment;
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>
);
};

29
ts/components/basic/SessionCustomTagRenderer.tsx
Unescape Escape View File

@ -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);
};

6
ts/components/conversation/SubtleNotification.tsx
Unescape Escape View File

@ -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>
);
};

88
ts/components/conversation/message/reactions/ReactionPopup.tsx
Unescape Escape View File

@ -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>
);
};

50
ts/types/Localizer.ts
Unescape Escape View File

@ -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;

18
ts/util/i18n.ts
Unescape Escape View File

@ -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}`);

Write Preview
Loading…
Cancel
Save