Adds captions in the viewer

This commit is contained in:
Josh Perez 2022-04-14 13:02:12 -04:00 committed by GitHub
parent 247149c58e
commit 4015259def
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 32 deletions

View file

@ -5,6 +5,7 @@ import React from 'react';
import type { Props as MessageBodyPropsType } from './MessageBody';
import { MessageBody } from './MessageBody';
import { graphemeAwareSlice } from '../../util/graphemeAwareSlice';
export type Props = Pick<
MessageBodyPropsType,
@ -29,37 +30,6 @@ export function doesMessageBodyOverflow(str: string): boolean {
return str.length > INITIAL_LENGTH + BUFFER;
}
function graphemeAwareSlice(
str: string,
length: number
): {
hasReadMore: boolean;
text: string;
} {
if (str.length <= length + BUFFER) {
return { text: str, hasReadMore: false };
}
let text: string | undefined;
for (const { index } of new Intl.Segmenter().segment(str)) {
if (!text && index >= length) {
text = str.slice(0, index);
}
if (text && index > length) {
return {
text,
hasReadMore: true,
};
}
}
return {
text: str,
hasReadMore: false,
};
}
export function MessageBodyReadMore({
bodyRanges,
direction,
@ -74,7 +44,11 @@ export function MessageBodyReadMore({
}: Props): JSX.Element {
const maxLength = displayLimit || INITIAL_LENGTH;
const { hasReadMore, text: slicedText } = graphemeAwareSlice(text, maxLength);
const { hasReadMore, text: slicedText } = graphemeAwareSlice(
text,
maxLength,
BUFFER
);
const onIncreaseTextLength = hasReadMore
? () => {