Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -60,7 +61,7 @@ export default class ImageView extends React.Component {
}
onKeyDown = (ev) => {
- if (ev.keyCode == 27) { // escape
+ if (ev.keyCode === 27) { // escape
ev.stopPropagation();
ev.preventDefault();
this.props.onFinished();
@@ -72,7 +73,6 @@ export default class ImageView extends React.Component {
Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
onFinished: (proceed) => {
if (!proceed) return;
- const self = this;
MatrixClientPeg.get().redactEvent(
this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
).catch(function(e) {
@@ -153,32 +153,38 @@ export default class ImageView extends React.Component {
size = filesize(this.props.fileSize);
}
- let size_res;
+ let sizeRes;
if (size && res) {
- size_res = size + ", " + res;
+ sizeRes = size + ", " + res;
} else {
- size_res = size || res;
+ sizeRes = size || res;
}
+ let mayRedact = false;
const showEventMeta = !!this.props.mxEvent;
let eventMeta;
if (showEventMeta) {
// Figure out the sender, defaulting to mxid
let sender = this.props.mxEvent.getSender();
- const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+ const cli = MatrixClientPeg.get();
+ const room = cli.getRoom(this.props.mxEvent.getRoomId());
if (room) {
+ mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
const member = room.getMember(sender);
if (member) sender = member.name;
}
eventMeta = (
- { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
+ { _t('Uploaded on %(date)s by %(user)s', {
+ date: formatDate(new Date(this.props.mxEvent.getTs())),
+ user: sender,
+ }) }
);
}
let eventRedact;
- if (showEventMeta) {
+ if (mayRedact) {
eventRedact = (
{ _t('Remove') }
);
@@ -213,7 +219,7 @@ export default class ImageView extends React.Component {
{ _t('Download this file') }
- { size_res }
+ { sizeRes }
{ eventRedact }
diff --git a/src/components/views/elements/MessageEditor.js b/src/components/views/elements/MessageEditor.js
index 593e5bc616..cf306d80bb 100644
--- a/src/components/views/elements/MessageEditor.js
+++ b/src/components/views/elements/MessageEditor.js
@@ -33,6 +33,80 @@ import {MatrixClient} from 'matrix-js-sdk';
import classNames from 'classnames';
import {EventStatus} from 'matrix-js-sdk';
+function _isReply(mxEvent) {
+ const relatesTo = mxEvent.getContent()["m.relates_to"];
+ const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
+ return isReply;
+}
+
+function getHtmlReplyFallback(mxEvent) {
+ const html = mxEvent.getContent().formatted_body;
+ if (!html) {
+ return "";
+ }
+ const rootNode = new DOMParser().parseFromString(html, "text/html").body;
+ const mxReply = rootNode.querySelector("mx-reply");
+ return (mxReply && mxReply.outerHTML) || "";
+}
+
+function getTextReplyFallback(mxEvent) {
+ const body = mxEvent.getContent().body;
+ const lines = body.split("\n").map(l => l.trim());
+ if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
+ return `${lines[0]}\n\n`;
+ }
+ return "";
+}
+
+function _isEmote(model) {
+ const firstPart = model.parts[0];
+ return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
+}
+
+function createEditContent(model, editedEvent) {
+ const isEmote = _isEmote(model);
+ if (isEmote) {
+ // trim "/me "
+ model = model.clone();
+ model.removeText({index: 0, offset: 0}, 4);
+ }
+ const isReply = _isReply(editedEvent);
+ let plainPrefix = "";
+ let htmlPrefix = "";
+
+ if (isReply) {
+ plainPrefix = getTextReplyFallback(editedEvent);
+ htmlPrefix = getHtmlReplyFallback(editedEvent);
+ }
+
+ const body = textSerialize(model);
+
+ const newContent = {
+ "msgtype": isEmote ? "m.emote" : "m.text",
+ "body": plainPrefix + body,
+ };
+ const contentBody = {
+ msgtype: newContent.msgtype,
+ body: `${plainPrefix} * ${body}`,
+ };
+
+ const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: isReply});
+ if (formattedBody) {
+ newContent.format = "org.matrix.custom.html";
+ newContent.formatted_body = htmlPrefix + formattedBody;
+ contentBody.format = newContent.format;
+ contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
+ }
+
+ return Object.assign({
+ "m.new_content": newContent,
+ "m.relates_to": {
+ "rel_type": "m.replace",
+ "event_id": editedEvent.getId(),
+ },
+ }, contentBody);
+}
+
export default class MessageEditor extends React.Component {
static propTypes = {
// the message event being edited
@@ -53,7 +127,7 @@ export default class MessageEditor extends React.Component {
};
this._editorRef = null;
this._autocompleteRef = null;
- this._hasModifications = false;
+ this._modifiedFlag = false;
}
_getRoom() {
@@ -73,7 +147,7 @@ export default class MessageEditor extends React.Component {
}
_onInput = (event) => {
- this._hasModifications = true;
+ this._modifiedFlag = true;
const sel = document.getSelection();
const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
this.model.update(text, event.inputType, caret);
@@ -131,7 +205,7 @@ export default class MessageEditor extends React.Component {
} else if (event.key === "Escape") {
this._cancelEdit();
} else if (event.key === "ArrowUp") {
- if (this._hasModifications || !this._isCaretAtStart()) {
+ if (this._modifiedFlag || !this._isCaretAtStart()) {
return;
}
const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
@@ -140,7 +214,7 @@ export default class MessageEditor extends React.Component {
event.preventDefault();
}
} else if (event.key === "ArrowDown") {
- if (this._hasModifications || !this._isCaretAtEnd()) {
+ if (this._modifiedFlag || !this._isCaretAtEnd()) {
return;
}
const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
@@ -159,45 +233,28 @@ export default class MessageEditor extends React.Component {
dis.dispatch({action: 'focus_composer'});
}
- _isEmote() {
- const firstPart = this.model.parts[0];
- return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
+ _hasModifications(newContent) {
+ // if nothing has changed then bail
+ const oldContent = this.props.editState.getEvent().getContent();
+ if (!this._modifiedFlag ||
+ (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
+ oldContent["format"] === newContent["format"] &&
+ oldContent["formatted_body"] === newContent["formatted_body"])) {
+ return false;
+ }
+ return true;
}
_sendEdit = () => {
- const isEmote = this._isEmote();
- let model = this.model;
- if (isEmote) {
- // trim "/me "
- model = model.clone();
- model.removeText({index: 0, offset: 0}, 4);
+ const editedEvent = this.props.editState.getEvent();
+ const editContent = createEditContent(this.model, editedEvent);
+ const newContent = editContent["m.new_content"];
+ if (!this._hasModifications(newContent)) {
+ return;
}
- const newContent = {
- "msgtype": isEmote ? "m.emote" : "m.text",
- "body": textSerialize(model),
- };
- const contentBody = {
- msgtype: newContent.msgtype,
- body: ` * ${newContent.body}`,
- };
- const formattedBody = htmlSerializeIfNeeded(model);
- if (formattedBody) {
- newContent.format = "org.matrix.custom.html";
- newContent.formatted_body = formattedBody;
- contentBody.format = newContent.format;
- contentBody.formatted_body = ` * ${newContent.formatted_body}`;
- }
- const content = Object.assign({
- "m.new_content": newContent,
- "m.relates_to": {
- "rel_type": "m.replace",
- "event_id": this.props.editState.getEvent().getId(),
- },
- }, contentBody);
-
- const roomId = this.props.editState.getEvent().getRoomId();
+ const roomId = editedEvent.getRoomId();
this._cancelPreviousPendingEdit();
- this.context.matrixClient.sendMessage(roomId, content);
+ this.context.matrixClient.sendMessage(roomId, editContent);
dis.dispatch({action: "edit_event", event: null});
dis.dispatch({action: 'focus_composer'});
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index fef9c362c6..fe8d465698 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -20,6 +20,11 @@ import * as HtmlUtils from '../../../HtmlUtils';
import {formatTime} from '../../../DateUtils';
import {MatrixEvent} from 'matrix-js-sdk';
import {pillifyLinks} from '../../../utils/pillify';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import classNames from 'classnames';
export default class EditHistoryMessage extends React.PureComponent {
static propTypes = {
@@ -27,35 +32,130 @@ export default class EditHistoryMessage extends React.PureComponent {
mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
};
+ constructor(props) {
+ super(props);
+ const cli = MatrixClientPeg.get();
+ const {userId} = cli.credentials;
+ const event = this.props.mxEvent;
+ const room = cli.getRoom(event.getRoomId());
+ if (event.localRedactionEvent()) {
+ event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
+ }
+ const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
+ this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
+ }
+
+ _onAssociatedStatusChanged = () => {
+ this.setState({sendStatus: this.props.mxEvent.getAssociatedStatus()});
+ };
+
+ _onRedactClick = async () => {
+ const event = this.props.mxEvent;
+ const cli = MatrixClientPeg.get();
+ const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
+
+ Modal.createTrackedDialog('Confirm Redact Dialog', 'Edit history', ConfirmAndWaitRedactDialog, {
+ redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
+ }, 'mx_Dialog_confirmredact');
+ };
+
+ _onViewSourceClick = () => {
+ const ViewSource = sdk.getComponent('structures.ViewSource');
+ Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
+ roomId: this.props.mxEvent.getRoomId(),
+ eventId: this.props.mxEvent.getId(),
+ content: this.props.mxEvent.event,
+ }, 'mx_Dialog_viewsource');
+ };
+
+ pillifyLinks() {
+ // not present for redacted events
+ if (this.refs.content) {
+ pillifyLinks(this.refs.content.children, this.props.mxEvent);
+ }
+ }
+
componentDidMount() {
- pillifyLinks(this.refs.content.children, this.props.mxEvent);
+ this.pillifyLinks();
+ }
+
+ componentWillUnmount() {
+ const event = this.props.mxEvent;
+ if (event.localRedactionEvent()) {
+ event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
+ }
}
componentDidUpdate() {
- pillifyLinks(this.refs.content.children, this.props.mxEvent);
+ this.pillifyLinks();
+ }
+
+ _renderActionBar() {
+ const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ // hide the button when already redacted
+ let redactButton;
+ if (!this.props.mxEvent.isRedacted()) {
+ redactButton = (
+
+ {_t("Remove")}
+
+ );
+ }
+ const viewSourceButton = (
+
+ {_t("View Source")}
+
+ );
+ // disabled remove button when not allowed
+ return (
+
+ {redactButton}
+ {viewSourceButton}
+
+ );
}
render() {
const {mxEvent} = this.props;
const originalContent = mxEvent.getOriginalContent();
const content = originalContent["m.new_content"] || originalContent;
- const contentElements = HtmlUtils.bodyToHtml(content);
let contentContainer;
- if (mxEvent.getContent().msgtype === "m.emote") {
- const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
- contentContainer = (*
- { name }
- {contentElements}
-
);
+ if (mxEvent.isRedacted()) {
+ const UnknownBody = sdk.getComponent('messages.UnknownBody');
+ contentContainer = ;
} else {
- contentContainer = ({contentElements}
);
+ const contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
+ if (mxEvent.getContent().msgtype === "m.emote") {
+ const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+ contentContainer = (
+ *
+ { name }
+ {contentElements}
+
+ );
+ } else {
+ contentContainer = {contentElements}
;
+ }
}
+
const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
- return
-
- {timestamp}
- { contentContainer }
-
- ;
+ const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
+ const classes = classNames({
+ "mx_EventTile": true,
+ "mx_EventTile_redacted": mxEvent.isRedacted(),
+ "mx_EventTile_sending": isSending,
+ "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
+ });
+ return (
+
+
+
+ {timestamp}
+ { contentContainer }
+ { this._renderActionBar() }
+
+