133 lines
3.2 KiB
TypeScript
133 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { RenderTextCallbackType } from '../../../../types/Util';
|
|
import { getSizeClass, SizeClassType } from '../../../../util/emoji';
|
|
import { AddMentions } from '../../AddMentions';
|
|
import { AddNewLines } from '../../AddNewLines';
|
|
import { Emojify } from '../../Emojify';
|
|
import { Linkify } from '../../Linkify';
|
|
|
|
interface Props {
|
|
text: string;
|
|
/** If set, all emoji will be the same size. Otherwise, just one emoji will be large. */
|
|
disableJumbomoji?: boolean;
|
|
/** If set, links will be left alone instead of turned into clickable `<a>` tags. */
|
|
disableLinks?: boolean;
|
|
isGroup?: boolean;
|
|
convoId: string;
|
|
}
|
|
|
|
const renderMentions: RenderTextCallbackType = ({ text, key, convoId }) => (
|
|
<AddMentions key={key} text={text} convoId={convoId || ''} />
|
|
);
|
|
|
|
const renderDefault: RenderTextCallbackType = ({ text }) => text;
|
|
|
|
const renderNewLines: RenderTextCallbackType = ({
|
|
text: textWithNewLines,
|
|
key,
|
|
isGroup,
|
|
convoId,
|
|
}) => {
|
|
const renderOther = isGroup ? renderMentions : renderDefault;
|
|
|
|
return (
|
|
<AddNewLines
|
|
key={key}
|
|
text={textWithNewLines}
|
|
renderNonNewLine={renderOther}
|
|
convoId={convoId}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderEmoji = ({
|
|
text,
|
|
key,
|
|
sizeClass,
|
|
renderNonEmoji,
|
|
isGroup,
|
|
convoId,
|
|
}: {
|
|
text: string;
|
|
key: number;
|
|
sizeClass?: SizeClassType;
|
|
renderNonEmoji: RenderTextCallbackType;
|
|
isGroup?: boolean;
|
|
convoId?: string;
|
|
}) => (
|
|
<Emojify
|
|
key={key}
|
|
text={text}
|
|
sizeClass={sizeClass}
|
|
renderNonEmoji={renderNonEmoji}
|
|
isGroup={isGroup}
|
|
convoId={convoId}
|
|
/>
|
|
);
|
|
|
|
/**
|
|
* This component makes it very easy to use all three of our message formatting
|
|
* components: `Emojify`, `Linkify`, and `AddNewLines`. Because each of them is fully
|
|
* configurable with their `renderXXX` props, this component will assemble all three of
|
|
* them for you.
|
|
*/
|
|
export class MessageBody extends React.Component<Props> {
|
|
public static defaultProps: Partial<Props> = {
|
|
isGroup: false,
|
|
};
|
|
|
|
public renderJsxSelectable(jsx: JSX.Element): JSX.Element {
|
|
return (
|
|
<span
|
|
className="text-selectable"
|
|
onDragStart={(e: any) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
}}
|
|
>
|
|
{jsx}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
public render() {
|
|
const { text, disableJumbomoji, disableLinks, isGroup, convoId } = this.props;
|
|
const sizeClass = disableJumbomoji ? undefined : getSizeClass(text);
|
|
|
|
if (disableLinks) {
|
|
return this.renderJsxSelectable(
|
|
renderEmoji({
|
|
text,
|
|
sizeClass,
|
|
key: 0,
|
|
renderNonEmoji: renderNewLines,
|
|
isGroup,
|
|
convoId,
|
|
})
|
|
);
|
|
}
|
|
|
|
if (text && text.startsWith('```') && text.endsWith('```')) {
|
|
const length = text.length;
|
|
return <pre className="text-selectable">{text.substring(4, length - 3)}</pre>;
|
|
}
|
|
|
|
return this.renderJsxSelectable(
|
|
<Linkify
|
|
text={text}
|
|
renderNonLink={({ key, text: nonLinkText }) => {
|
|
return renderEmoji({
|
|
text: nonLinkText,
|
|
sizeClass,
|
|
key,
|
|
renderNonEmoji: renderNewLines,
|
|
isGroup,
|
|
convoId,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|