imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render events as extensible events (behind labs) (#7462)

Browse source 
* Render events as extensible events (behind labs)

* Include the SDK

* Appease linter

* Update for changed property name

* Fix formatting error

* Fix branch matching for build steps

* Update SDK

* Update scripts/fetchdep.sh

Co-authored-by: Andy Balaam <andyb@element.io>

Co-authored-by: Andy Balaam <andyb@element.io>
This commit is contained in:
Travis Ralston 2022-01-13 10:03:37 -07:00 • committed by GitHub
parent 6d9d9a56b4
commit 61a0be7d46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 107 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/components/views/messages/TextualBody.tsx
View file

@ -18,6 +18,7 @@ import React, { createRef, SyntheticEvent } from 'react';
import ReactDOM from 'react-dom';
import highlight from 'highlight.js';
import { MsgType } from "matrix-js-sdk/src/@types/event";
import { isEventLike, LegacyMsgType, MessageEvent } from "matrix-events-sdk";
import * as HtmlUtils from '../../../HtmlUtils';
import { formatDate } from '../../../DateUtils';
@ -509,17 +510,44 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
}
const mxEvent = this.props.mxEvent;
const content = mxEvent.getContent();
let isNotice = false;
let isEmote = false;
// only strip reply if this is the original replying event, edits thereafter do not have the fallback
const stripReply = !mxEvent.replacingEvent() && !!ReplyChain.getParentEventId(mxEvent);
let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
disableBigEmoji: content.msgtype === MsgType.Emote
|| !SettingsStore.getValue<boolean>('TextualBody.enableBigEmoji'),
// Part of Replies fallback support
stripReplyFallback: stripReply,
ref: this.contentRef,
returnString: false,
});
let body;
if (SettingsStore.isEnabled("feature_extensible_events")) {
const extev = this.props.mxEvent.unstableExtensibleEvent;
if (extev && extev instanceof MessageEvent) {
isEmote = isEventLike(extev.wireFormat, LegacyMsgType.Emote);
isNotice = isEventLike(extev.wireFormat, LegacyMsgType.Notice);
body = HtmlUtils.bodyToHtml({
body: extev.text,
format: extev.html ? "org.matrix.custom.html" : undefined,
formatted_body: extev.html,
msgtype: MsgType.Text,
}, this.props.highlights, {
disableBigEmoji: isEmote
|| !SettingsStore.getValue<boolean>('TextualBody.enableBigEmoji'),
// Part of Replies fallback support
stripReplyFallback: stripReply,
ref: this.contentRef,
returnString: false,
});
}
}
if (!body) {
isEmote = content.msgtype === MsgType.Emote;
isNotice = content.msgtype === MsgType.Notice;
body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
disableBigEmoji: isEmote
|| !SettingsStore.getValue<boolean>('TextualBody.enableBigEmoji'),
// Part of Replies fallback support
stripReplyFallback: stripReply,
ref: this.contentRef,
returnString: false,
});
}
if (this.props.replacingEventId) {
body = <>
{ body }
@ -545,36 +573,35 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
/>;
}
switch (content.msgtype) {
case MsgType.Emote:
return (
<div className="mx_MEmoteBody mx_EventTile_content">
*&nbsp;
<span
className="mx_MEmoteBody_sender"
onClick={this.onEmoteSenderClick}
>
{ mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender() }
</span>
&nbsp;
{ body }
{ widgets }
</div>
);
case MsgType.Notice:
return (
<div className="mx_MNoticeBody mx_EventTile_content">
{ body }
{ widgets }
</div>
);
default: // including "m.text"
return (
<div className="mx_MTextBody mx_EventTile_content">
{ body }
{ widgets }
</div>
);
if (isEmote) {
return (
<div className="mx_MEmoteBody mx_EventTile_content">
*&nbsp;
<span
className="mx_MEmoteBody_sender"
onClick={this.onEmoteSenderClick}
>
{ mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender() }
</span>
&nbsp;
{ body }
{ widgets }
</div>
);
}
if (isNotice) {
return (
<div className="mx_MNoticeBody mx_EventTile_content">
{ body }
{ widgets }
</div>
);
}
return (
<div className="mx_MTextBody mx_EventTile_content">
{ body }
{ widgets }
</div>
);
}
}