Add basic support for displaying emotes (#161)

This commit is contained in:
Samuel Dionne-Riel 2021-11-14 00:02:32 -05:00 committed by GitHub
parent b5c5cd9586
commit 14cd84dab7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 3 deletions

View file

@ -106,10 +106,17 @@ MessageReply.propTypes = {
content: PropTypes.string.isRequired,
};
function MessageContent({ content, isMarkdown, isEdited }) {
function MessageContent({
senderName,
content,
isMarkdown,
isEdited,
msgType,
}) {
return (
<div className="message__content">
<div className="text text-b1">
{ msgType === 'm.emote' && `* ${senderName} ` }
{ isMarkdown ? genMarkdown(content) : linkifyContent(content) }
</div>
{ isEdited && <Text className="message__content-edited" variant="b3">(edited)</Text>}
@ -121,9 +128,11 @@ MessageContent.defaultProps = {
isEdited: false,
};
MessageContent.propTypes = {
senderName: PropTypes.string.isRequired,
content: PropTypes.node.isRequired,
isMarkdown: PropTypes.bool,
isEdited: PropTypes.bool,
msgType: PropTypes.string.isRequired,
};
function MessageEdit({ content, onSave, onCancel }) {
@ -228,10 +237,27 @@ MessageOptions.propTypes = {
function Message({
avatar, header, reply, content, editContent, reactions, options,
msgType,
}) {
const msgClass = header === null ? ' message--content-only' : ' message--full';
const className = [
'message',
header === null ? ' message--content-only' : ' message--full',
];
switch (msgType) {
case 'm.text':
className.push('message--type-text');
break;
case 'm.emote':
className.push('message--type-emote');
break;
case 'm.notice':
className.push('message--type-notice');
break;
default:
}
return (
<div className={`message${msgClass}`}>
<div className={className.join(' ')}>
<div className="message__avatar-container">
{avatar !== null && avatar}
</div>
@ -254,6 +280,7 @@ Message.defaultProps = {
editContent: null,
reactions: null,
options: null,
msgType: 'm.text',
};
Message.propTypes = {
avatar: PropTypes.node,
@ -263,6 +290,7 @@ Message.propTypes = {
editContent: PropTypes.node,
reactions: PropTypes.node,
options: PropTypes.node,
msgType: PropTypes.string,
};
export {

View file

@ -410,3 +410,14 @@
}
}
}
.message.message--type-emote {
.message__content {
font-style: italic;
// Remove blockness of first `<p>` so that markdown emotes stay on one line.
p:first-of-type {
display: inline;
}
}
}

View file

@ -282,6 +282,7 @@ function RoomViewContent({
let content = mEvent.getContent().body;
if (typeof content === 'undefined') return null;
const msgType = mEvent.getContent()?.msgtype;
let reply = null;
let reactions = null;
let isMarkdown = mEvent.getContent().format === 'org.matrix.custom.html';
@ -379,8 +380,10 @@ function RoomViewContent({
);
const userContent = (
<MessageContent
senderName={getUsernameOfRoomMember(mEvent.sender)}
isMarkdown={isMarkdown}
content={isMedia(mEvent) ? genMediaContent(mEvent) : content}
msgType={msgType}
isEdited={isEdited}
/>
);
@ -496,6 +499,7 @@ function RoomViewContent({
header={userHeader}
reply={userReply}
content={editEvent !== null && isEditingEvent ? null : userContent}
msgType={msgType}
editContent={editEvent !== null && isEditingEvent ? (
<MessageEdit
content={content}