2019-05-06 18:41:15 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
2019-05-22 17:16:32 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2019-05-06 18:41:15 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import {_t} from '../../../languageHandler';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import dis from '../../../dispatcher';
|
2019-05-07 17:27:09 +03:00
|
|
|
import EditorModel from '../../../editor/model';
|
2019-05-13 18:42:00 +03:00
|
|
|
import {getCaretOffsetAndText} from '../../../editor/dom';
|
2019-08-21 12:26:21 +03:00
|
|
|
import {htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand} from '../../../editor/serialize';
|
2019-05-27 17:22:55 +03:00
|
|
|
import {findEditableEvent} from '../../../utils/EventUtils';
|
2019-05-14 12:53:42 +03:00
|
|
|
import {parseEvent} from '../../../editor/deserialize';
|
2019-08-05 16:27:40 +03:00
|
|
|
import {PartCreator} from '../../../editor/parts';
|
2019-06-12 19:52:34 +03:00
|
|
|
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
|
|
|
|
import {MatrixClient} from 'matrix-js-sdk';
|
2019-05-21 13:18:20 +03:00
|
|
|
import classNames from 'classnames';
|
2019-07-02 15:52:29 +03:00
|
|
|
import {EventStatus} from 'matrix-js-sdk';
|
2019-08-05 16:27:40 +03:00
|
|
|
import BasicMessageComposer from "./BasicMessageComposer";
|
2019-08-01 12:27:09 +03:00
|
|
|
|
2019-07-08 16:25:44 +03:00
|
|
|
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 createEditContent(model, editedEvent) {
|
2019-08-21 12:26:21 +03:00
|
|
|
const isEmote = containsEmote(model);
|
2019-07-08 16:25:44 +03:00
|
|
|
if (isEmote) {
|
2019-08-21 12:26:21 +03:00
|
|
|
model = stripEmoteCommand(model);
|
2019-07-08 16:25:44 +03:00
|
|
|
}
|
|
|
|
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}`,
|
|
|
|
};
|
|
|
|
|
2019-07-08 17:55:56 +03:00
|
|
|
const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: isReply});
|
2019-07-08 16:25:44 +03:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
export default class EditMessageComposer extends React.Component {
|
2019-05-06 18:41:15 +03:00
|
|
|
static propTypes = {
|
2019-05-15 11:46:08 +03:00
|
|
|
// the message event being edited
|
2019-06-12 19:52:34 +03:00
|
|
|
editState: PropTypes.instanceOf(EditorStateTransfer).isRequired,
|
2019-05-06 18:41:15 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
2019-06-12 19:52:34 +03:00
|
|
|
this.model = null;
|
2019-05-08 15:31:43 +03:00
|
|
|
this._editorRef = null;
|
2019-09-09 20:12:52 +03:00
|
|
|
|
|
|
|
this.state = {
|
2019-09-11 19:29:52 +03:00
|
|
|
saveDisabled: true,
|
2019-09-09 20:12:52 +03:00
|
|
|
};
|
2019-05-07 17:27:09 +03:00
|
|
|
}
|
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
_setEditorRef = ref => {
|
|
|
|
this._editorRef = ref;
|
|
|
|
};
|
|
|
|
|
2019-05-24 15:42:33 +03:00
|
|
|
_getRoom() {
|
2019-06-12 19:52:34 +03:00
|
|
|
return this.context.matrixClient.getRoom(this.props.editState.getEvent().getRoomId());
|
2019-05-24 15:42:33 +03:00
|
|
|
}
|
|
|
|
|
2019-05-09 16:00:48 +03:00
|
|
|
_onKeyDown = (event) => {
|
2019-09-25 11:33:52 +03:00
|
|
|
// ignore any keypress while doing IME compositions
|
2019-09-24 16:36:46 +03:00
|
|
|
if (this._editorRef.isComposing(event)) {
|
2019-09-24 16:32:30 +03:00
|
|
|
return;
|
|
|
|
}
|
2019-05-17 12:22:02 +03:00
|
|
|
if (event.metaKey || event.altKey || event.shiftKey) {
|
2019-05-09 16:00:48 +03:00
|
|
|
return;
|
|
|
|
}
|
2019-08-05 16:27:40 +03:00
|
|
|
if (event.key === "Enter") {
|
2019-05-17 12:22:02 +03:00
|
|
|
this._sendEdit();
|
|
|
|
event.preventDefault();
|
2019-05-17 17:35:14 +03:00
|
|
|
} else if (event.key === "Escape") {
|
|
|
|
this._cancelEdit();
|
2019-05-24 15:42:33 +03:00
|
|
|
} else if (event.key === "ArrowUp") {
|
2019-08-05 16:27:40 +03:00
|
|
|
if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
|
2019-05-24 15:42:33 +03:00
|
|
|
return;
|
|
|
|
}
|
2019-06-12 19:52:34 +03:00
|
|
|
const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
|
2019-05-24 15:42:33 +03:00
|
|
|
if (previousEvent) {
|
|
|
|
dis.dispatch({action: 'edit_event', event: previousEvent});
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
} else if (event.key === "ArrowDown") {
|
2019-08-05 16:27:40 +03:00
|
|
|
if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
|
2019-05-24 15:42:33 +03:00
|
|
|
return;
|
|
|
|
}
|
2019-06-12 19:52:34 +03:00
|
|
|
const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
|
2019-05-24 15:42:33 +03:00
|
|
|
if (nextEvent) {
|
|
|
|
dis.dispatch({action: 'edit_event', event: nextEvent});
|
|
|
|
} else {
|
|
|
|
dis.dispatch({action: 'edit_event', event: null});
|
2019-07-23 10:13:51 +03:00
|
|
|
dis.dispatch({action: 'focus_composer'});
|
2019-05-24 15:42:33 +03:00
|
|
|
}
|
|
|
|
event.preventDefault();
|
2019-05-09 16:00:48 +03:00
|
|
|
}
|
2019-05-06 18:41:15 +03:00
|
|
|
}
|
|
|
|
|
2019-05-17 17:35:14 +03:00
|
|
|
_cancelEdit = () => {
|
2019-05-06 18:41:15 +03:00
|
|
|
dis.dispatch({action: "edit_event", event: null});
|
2019-07-23 10:13:51 +03:00
|
|
|
dis.dispatch({action: 'focus_composer'});
|
2019-05-06 18:41:15 +03:00
|
|
|
}
|
|
|
|
|
2019-09-10 10:51:27 +03:00
|
|
|
_isContentModified(newContent) {
|
2019-06-14 00:56:32 +03:00
|
|
|
// if nothing has changed then bail
|
|
|
|
const oldContent = this.props.editState.getEvent().getContent();
|
2019-08-05 16:27:40 +03:00
|
|
|
if (!this._editorRef.isModified() ||
|
2019-06-29 08:52:19 +03:00
|
|
|
(oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
|
2019-06-14 00:56:32 +03:00
|
|
|
oldContent["format"] === newContent["format"] &&
|
2019-06-29 08:52:19 +03:00
|
|
|
oldContent["formatted_body"] === newContent["formatted_body"])) {
|
2019-07-08 16:25:44 +03:00
|
|
|
return false;
|
2019-06-14 00:56:32 +03:00
|
|
|
}
|
2019-07-08 16:25:44 +03:00
|
|
|
return true;
|
|
|
|
}
|
2019-06-14 00:56:32 +03:00
|
|
|
|
2019-07-08 16:25:44 +03:00
|
|
|
_sendEdit = () => {
|
|
|
|
const editedEvent = this.props.editState.getEvent();
|
|
|
|
const editContent = createEditContent(this.model, editedEvent);
|
|
|
|
const newContent = editContent["m.new_content"];
|
2019-09-09 20:12:52 +03:00
|
|
|
|
2019-09-10 10:51:27 +03:00
|
|
|
// If content is modified then send an updated event into the room
|
|
|
|
if (this._isContentModified(newContent)) {
|
2019-09-09 20:12:52 +03:00
|
|
|
const roomId = editedEvent.getRoomId();
|
|
|
|
this._cancelPreviousPendingEdit();
|
|
|
|
this.context.matrixClient.sendMessage(roomId, editContent);
|
2019-07-08 16:25:44 +03:00
|
|
|
}
|
2019-05-14 12:37:57 +03:00
|
|
|
|
2019-09-10 10:51:27 +03:00
|
|
|
// close the event editing and focus composer
|
2019-05-14 12:37:57 +03:00
|
|
|
dis.dispatch({action: "edit_event", event: null});
|
2019-07-23 10:13:51 +03:00
|
|
|
dis.dispatch({action: 'focus_composer'});
|
2019-09-09 20:12:52 +03:00
|
|
|
};
|
2019-05-14 12:37:57 +03:00
|
|
|
|
2019-07-02 15:52:29 +03:00
|
|
|
_cancelPreviousPendingEdit() {
|
|
|
|
const originalEvent = this.props.editState.getEvent();
|
|
|
|
const previousEdit = originalEvent.replacingEvent();
|
2019-07-02 19:30:57 +03:00
|
|
|
if (previousEdit && (
|
|
|
|
previousEdit.status === EventStatus.QUEUED ||
|
|
|
|
previousEdit.status === EventStatus.NOT_SENT
|
|
|
|
)) {
|
2019-07-02 15:52:29 +03:00
|
|
|
this.context.matrixClient.cancelPendingEvent(previousEdit);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-12 19:52:34 +03:00
|
|
|
componentWillUnmount() {
|
|
|
|
const sel = document.getSelection();
|
|
|
|
const {caret} = getCaretOffsetAndText(this._editorRef, sel);
|
|
|
|
const parts = this.model.serializeParts();
|
|
|
|
this.props.editState.setEditorState(caret, parts);
|
|
|
|
}
|
|
|
|
|
2019-08-05 16:27:40 +03:00
|
|
|
componentWillMount() {
|
2019-08-01 12:26:20 +03:00
|
|
|
this._createEditorModel();
|
2019-05-08 15:31:43 +03:00
|
|
|
}
|
|
|
|
|
2019-06-12 19:52:34 +03:00
|
|
|
_createEditorModel() {
|
|
|
|
const {editState} = this.props;
|
|
|
|
const room = this._getRoom();
|
2019-08-05 16:27:40 +03:00
|
|
|
const partCreator = new PartCreator(room, this.context.matrixClient);
|
2019-06-12 19:52:34 +03:00
|
|
|
let parts;
|
|
|
|
if (editState.hasEditorState()) {
|
|
|
|
// if restoring state from a previous editor,
|
|
|
|
// restore serialized parts from the state
|
|
|
|
parts = editState.getSerializedParts().map(p => partCreator.deserializePart(p));
|
|
|
|
} else {
|
|
|
|
// otherwise, parse the body of the event
|
2019-06-14 13:16:34 +03:00
|
|
|
parts = parseEvent(editState.getEvent(), partCreator);
|
2019-06-12 19:52:34 +03:00
|
|
|
}
|
2019-08-05 16:27:40 +03:00
|
|
|
this.model = new EditorModel(parts, partCreator);
|
2019-06-12 19:52:34 +03:00
|
|
|
}
|
|
|
|
|
2019-08-01 12:28:01 +03:00
|
|
|
_getInitialCaretPosition() {
|
2019-06-12 19:52:34 +03:00
|
|
|
const {editState} = this.props;
|
|
|
|
let caretPosition;
|
|
|
|
if (editState.hasEditorState()) {
|
|
|
|
// if restoring state from a previous editor,
|
|
|
|
// restore caret position from the state
|
|
|
|
const caret = editState.getCaret();
|
|
|
|
caretPosition = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
|
|
|
|
} else {
|
|
|
|
// otherwise, set it at the end
|
|
|
|
caretPosition = this.model.getPositionAtEnd();
|
|
|
|
}
|
2019-08-01 12:28:01 +03:00
|
|
|
return caretPosition;
|
2019-06-12 19:52:34 +03:00
|
|
|
}
|
|
|
|
|
2019-09-09 20:12:52 +03:00
|
|
|
_onChange = () => {
|
2019-09-11 19:29:52 +03:00
|
|
|
if (!this.state.saveDisabled || !this._editorRef || !this._editorRef.isModified()) {
|
2019-09-09 20:12:52 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
2019-09-11 19:29:52 +03:00
|
|
|
saveDisabled: false,
|
2019-09-09 20:12:52 +03:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2019-05-06 18:41:15 +03:00
|
|
|
render() {
|
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
2019-08-06 17:31:21 +03:00
|
|
|
return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
|
|
|
|
<BasicMessageComposer
|
|
|
|
ref={this._setEditorRef}
|
|
|
|
model={this.model}
|
|
|
|
room={this._getRoom()}
|
|
|
|
initialCaret={this.props.editState.getCaret()}
|
2019-08-06 18:03:16 +03:00
|
|
|
label={_t("Edit message")}
|
2019-09-09 20:12:52 +03:00
|
|
|
onChange={this._onChange}
|
2019-08-06 17:31:21 +03:00
|
|
|
/>
|
|
|
|
<div className="mx_EditMessageComposer_buttons">
|
|
|
|
<AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
|
2019-09-11 19:29:52 +03:00
|
|
|
<AccessibleButton kind="primary" onClick={this._sendEdit} disabled={this.state.saveDisabled}>
|
2019-09-09 20:12:52 +03:00
|
|
|
{_t("Save")}
|
|
|
|
</AccessibleButton>
|
2019-08-06 17:31:21 +03:00
|
|
|
</div>
|
|
|
|
</div>);
|
2019-05-06 18:41:15 +03:00
|
|
|
}
|
|
|
|
}
|