Support for receiving formatted messages
Co-authored-by: Alvaro Carrasco <alvaro@signal.org>
This commit is contained in:
parent
d34d187f1e
commit
d9d820e72a
72 changed files with 3421 additions and 858 deletions
398
ts/components/conversation/MessageTextRenderer.tsx
Normal file
398
ts/components/conversation/MessageTextRenderer.tsx
Normal file
|
@ -0,0 +1,398 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import emojiRegex from 'emoji-regex';
|
||||
|
||||
import { linkify, SUPPORTED_PROTOCOLS } from './Linkify';
|
||||
import type {
|
||||
BodyRange,
|
||||
BodyRangesForDisplayType,
|
||||
DisplayNode,
|
||||
HydratedBodyRangeMention,
|
||||
RangeNode,
|
||||
} from '../../types/BodyRange';
|
||||
import {
|
||||
insertRange,
|
||||
collapseRangeTree,
|
||||
groupContiguousSpoilers,
|
||||
} from '../../types/BodyRange';
|
||||
import { AtMention } from './AtMention';
|
||||
import { isLinkSneaky } from '../../types/LinkPreview';
|
||||
import { Emojify } from './Emojify';
|
||||
import { AddNewLines } from './AddNewLines';
|
||||
import type { SizeClassType } from '../emoji/lib';
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
|
||||
const EMOJI_REGEXP = emojiRegex();
|
||||
export enum RenderLocation {
|
||||
ConversationList = 'ConversationList',
|
||||
Quote = 'Quote',
|
||||
SearchResult = 'SearchResult',
|
||||
StoryViewer = 'StoryViewer',
|
||||
Timeline = 'Timeline',
|
||||
}
|
||||
|
||||
type Props = {
|
||||
bodyRanges: BodyRangesForDisplayType;
|
||||
direction: 'incoming' | 'outgoing' | undefined;
|
||||
disableLinks: boolean;
|
||||
emojiSizeClass: SizeClassType | undefined;
|
||||
i18n: LocalizerType;
|
||||
isSpoilerExpanded: boolean;
|
||||
messageText: string;
|
||||
onExpandSpoiler?: () => void;
|
||||
onMentionTrigger: (conversationId: string) => void;
|
||||
renderLocation: RenderLocation;
|
||||
// Sometimes we're passed a string with a suffix (like '...'); we won't process that
|
||||
textLength: number;
|
||||
};
|
||||
|
||||
export function MessageTextRenderer({
|
||||
bodyRanges,
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
i18n,
|
||||
isSpoilerExpanded,
|
||||
messageText,
|
||||
onExpandSpoiler,
|
||||
onMentionTrigger,
|
||||
renderLocation,
|
||||
textLength,
|
||||
}: Props): JSX.Element {
|
||||
const links = disableLinks ? [] : extractLinks(messageText);
|
||||
const tree = bodyRanges.reduce<ReadonlyArray<RangeNode>>(
|
||||
(acc, range) => {
|
||||
// Drop bodyRanges that don't apply. Read More means truncated strings.
|
||||
if (range.start < textLength) {
|
||||
return insertRange(range, acc);
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
links.map(b => ({ ...b, ranges: [] }))
|
||||
);
|
||||
const nodes = collapseRangeTree({ tree, text: messageText });
|
||||
const finalNodes = groupContiguousSpoilers(nodes);
|
||||
|
||||
return (
|
||||
<>
|
||||
{finalNodes.map(node =>
|
||||
renderNode({
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
i18n,
|
||||
isInvisible: false,
|
||||
isSpoilerExpanded,
|
||||
node,
|
||||
renderLocation,
|
||||
onMentionTrigger,
|
||||
onExpandSpoiler,
|
||||
})
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function renderNode({
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
i18n,
|
||||
isInvisible,
|
||||
isSpoilerExpanded,
|
||||
node,
|
||||
onExpandSpoiler,
|
||||
onMentionTrigger,
|
||||
renderLocation,
|
||||
}: {
|
||||
direction: 'incoming' | 'outgoing' | undefined;
|
||||
disableLinks: boolean;
|
||||
emojiSizeClass: SizeClassType | undefined;
|
||||
i18n: LocalizerType;
|
||||
isInvisible: boolean;
|
||||
isSpoilerExpanded: boolean;
|
||||
node: DisplayNode;
|
||||
onExpandSpoiler?: () => void;
|
||||
onMentionTrigger: ((conversationId: string) => void) | undefined;
|
||||
renderLocation: RenderLocation;
|
||||
}): ReactElement {
|
||||
const key = node.start;
|
||||
|
||||
if (node.isSpoiler && node.spoilerChildren?.length) {
|
||||
const isSpoilerHidden = Boolean(node.isSpoiler && !isSpoilerExpanded);
|
||||
const content = node.spoilerChildren?.map(spoilerNode =>
|
||||
renderNode({
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
i18n,
|
||||
isInvisible: isSpoilerHidden,
|
||||
isSpoilerExpanded,
|
||||
node: spoilerNode,
|
||||
renderLocation,
|
||||
onMentionTrigger,
|
||||
onExpandSpoiler,
|
||||
})
|
||||
);
|
||||
|
||||
if (!isSpoilerHidden) {
|
||||
return (
|
||||
<span
|
||||
key={key}
|
||||
className="MessageTextRenderer__formatting--spoiler--revealed"
|
||||
>
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
key={key}
|
||||
tabIndex={disableLinks ? undefined : 0}
|
||||
role={disableLinks ? undefined : 'button'}
|
||||
aria-label={i18n('icu:MessageTextRenderer--spoiler--label')}
|
||||
aria-expanded={false}
|
||||
className={classNames(
|
||||
'MessageTextRenderer__formatting--spoiler',
|
||||
`MessageTextRenderer__formatting--spoiler-${renderLocation}`,
|
||||
direction
|
||||
? `MessageTextRenderer__formatting--spoiler-${renderLocation}--${direction}`
|
||||
: null,
|
||||
disableLinks
|
||||
? 'MessageTextRenderer__formatting--spoiler--noninteractive'
|
||||
: null
|
||||
)}
|
||||
onClick={
|
||||
disableLinks
|
||||
? undefined
|
||||
: event => {
|
||||
if (onExpandSpoiler) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onExpandSpoiler();
|
||||
}
|
||||
}
|
||||
}
|
||||
onKeyDown={
|
||||
disableLinks
|
||||
? undefined
|
||||
: event => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onExpandSpoiler?.();
|
||||
}
|
||||
}
|
||||
>
|
||||
<span aria-hidden>{content}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const content = renderMentions({
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
isInvisible,
|
||||
mentions: node.mentions,
|
||||
onMentionTrigger,
|
||||
text: node.text,
|
||||
});
|
||||
|
||||
const formattingClasses = classNames(
|
||||
node.isBold ? 'MessageTextRenderer__formatting--bold' : null,
|
||||
node.isItalic ? 'MessageTextRenderer__formatting--italic' : null,
|
||||
node.isMonospace ? 'MessageTextRenderer__formatting--monospace' : null,
|
||||
node.isStrikethrough
|
||||
? 'MessageTextRenderer__formatting--strikethrough'
|
||||
: null,
|
||||
node.isKeywordHighlight
|
||||
? 'MessageTextRenderer__formatting--keywordHighlight'
|
||||
: null,
|
||||
isInvisible ? 'MessageTextRenderer__formatting--invisible' : null
|
||||
);
|
||||
|
||||
if (
|
||||
node.url &&
|
||||
SUPPORTED_PROTOCOLS.test(node.url) &&
|
||||
!isLinkSneaky(node.url)
|
||||
) {
|
||||
return (
|
||||
<a key={key} className={formattingClasses} href={node.url}>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span key={key} className={formattingClasses}>
|
||||
{content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function renderMentions({
|
||||
direction,
|
||||
disableLinks,
|
||||
emojiSizeClass,
|
||||
isInvisible,
|
||||
mentions,
|
||||
onMentionTrigger,
|
||||
text,
|
||||
}: {
|
||||
emojiSizeClass: SizeClassType | undefined;
|
||||
isInvisible: boolean;
|
||||
mentions: ReadonlyArray<HydratedBodyRangeMention>;
|
||||
text: string;
|
||||
disableLinks: boolean;
|
||||
direction: 'incoming' | 'outgoing' | undefined;
|
||||
onMentionTrigger: ((conversationId: string) => void) | undefined;
|
||||
}): ReactElement {
|
||||
const result: Array<ReactElement> = [];
|
||||
|
||||
let offset = 0;
|
||||
|
||||
for (const mention of mentions) {
|
||||
// collect any previous text
|
||||
if (mention.start > offset) {
|
||||
result.push(
|
||||
renderText({
|
||||
isInvisible,
|
||||
key: result.length.toString(),
|
||||
emojiSizeClass,
|
||||
text: text.slice(offset, mention.start),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
result.push(
|
||||
renderMention({
|
||||
isInvisible,
|
||||
key: result.length.toString(),
|
||||
conversationId: mention.conversationID,
|
||||
disableLinks,
|
||||
direction,
|
||||
name: mention.replacementText,
|
||||
onMentionTrigger,
|
||||
})
|
||||
);
|
||||
|
||||
offset = mention.start + mention.length;
|
||||
}
|
||||
|
||||
// collect any text after
|
||||
result.push(
|
||||
renderText({
|
||||
isInvisible,
|
||||
key: result.length.toString(),
|
||||
emojiSizeClass,
|
||||
text: text.slice(offset, text.length),
|
||||
})
|
||||
);
|
||||
|
||||
return <>{result}</>;
|
||||
}
|
||||
|
||||
function renderMention({
|
||||
conversationId,
|
||||
name,
|
||||
isInvisible,
|
||||
key,
|
||||
disableLinks,
|
||||
direction,
|
||||
onMentionTrigger,
|
||||
}: {
|
||||
conversationId: string;
|
||||
name: string;
|
||||
isInvisible: boolean;
|
||||
key: string;
|
||||
disableLinks: boolean;
|
||||
direction: 'incoming' | 'outgoing' | undefined;
|
||||
onMentionTrigger: ((conversationId: string) => void) | undefined;
|
||||
}): ReactElement {
|
||||
if (disableLinks) {
|
||||
return (
|
||||
<bdi key={key}>
|
||||
@
|
||||
<Emojify isInvisible={isInvisible} text={name} />
|
||||
</bdi>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AtMention
|
||||
key={key}
|
||||
id={conversationId}
|
||||
isInvisible={isInvisible}
|
||||
name={name}
|
||||
direction={direction}
|
||||
onClick={() => {
|
||||
if (onMentionTrigger) {
|
||||
onMentionTrigger(conversationId);
|
||||
}
|
||||
}}
|
||||
onKeyUp={e => {
|
||||
if (
|
||||
e.target === e.currentTarget &&
|
||||
e.key === 'Enter' &&
|
||||
onMentionTrigger
|
||||
) {
|
||||
onMentionTrigger(conversationId);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
/** Render text that does not contain body ranges or is in between body ranges */
|
||||
function renderText({
|
||||
text,
|
||||
emojiSizeClass,
|
||||
isInvisible,
|
||||
key,
|
||||
}: {
|
||||
text: string;
|
||||
emojiSizeClass: SizeClassType | undefined;
|
||||
isInvisible: boolean;
|
||||
key: string;
|
||||
}) {
|
||||
return (
|
||||
<Emojify
|
||||
key={key}
|
||||
isInvisible={isInvisible}
|
||||
renderNonEmoji={({ text: innerText, key: innerKey }) => (
|
||||
<AddNewLines key={innerKey} text={innerText} />
|
||||
)}
|
||||
sizeClass={emojiSizeClass}
|
||||
text={text}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function extractLinks(
|
||||
messageText: string
|
||||
): ReadonlyArray<BodyRange<{ url: string }>> {
|
||||
// to support emojis immediately before links
|
||||
// we replace emojis with a space for each byte
|
||||
const matches = linkify.match(
|
||||
messageText.replace(EMOJI_REGEXP, s => ' '.repeat(s.length))
|
||||
);
|
||||
|
||||
if (matches == null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return matches.map(match => {
|
||||
return {
|
||||
start: match.index,
|
||||
length: match.lastIndex - match.index,
|
||||
url: match.url,
|
||||
};
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue