Support for receiving formatted messages

Co-authored-by: Alvaro Carrasco <alvaro@signal.org>
This commit is contained in:
Scott Nonnenberg 2023-04-10 09:31:45 -07:00 committed by GitHub
parent d34d187f1e
commit d9d820e72a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 3421 additions and 858 deletions

View file

@ -16,13 +16,15 @@ import { emojiToImage } from '../emoji/lib';
// ts/components/emoji/Emoji.tsx
// ts/quill/emoji/blot.tsx
function getImageTag({
isInvisible,
key,
match,
sizeClass,
key,
}: {
isInvisible?: boolean;
key: string | number;
match: string;
sizeClass?: SizeClassType;
key: string | number;
}): JSX.Element | string {
const img = emojiToImage(match);
@ -35,18 +37,24 @@ function getImageTag({
key={key}
src={img}
aria-label={match}
className={classNames('emoji', sizeClass)}
className={classNames(
'emoji',
sizeClass,
isInvisible ? 'emoji--invisible' : null
)}
alt={match}
/>
);
}
export type Props = {
text: string;
/** When behind a spoiler, this emoji needs to be visibility: hidden */
isInvisible?: boolean;
/** A class name to be added to the generated emoji images */
sizeClass?: SizeClassType;
/** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
renderNonEmoji?: RenderTextCallbackType;
text: string;
};
const defaultRenderNonEmoji: RenderTextCallbackType = ({ text }) => text;
@ -54,14 +62,15 @@ const defaultRenderNonEmoji: RenderTextCallbackType = ({ text }) => text;
export class Emojify extends React.Component<Props> {
public override render(): null | Array<JSX.Element | string | null> {
const {
text,
sizeClass,
isInvisible,
renderNonEmoji = defaultRenderNonEmoji,
sizeClass,
text,
} = this.props;
return splitByEmoji(text).map(({ type, value: match }, index) => {
if (type === 'emoji') {
return getImageTag({ match, sizeClass, key: index });
return getImageTag({ isInvisible, match, sizeClass, key: index });
}
if (type === 'text') {