Split MessageEditor in edit-specifics & reusable part for main composer

src/components/views/rooms/EditMessageComposer.js

@@ -0,0 +1,265 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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';
+import EditorModel from '../../../editor/model';
+import {getCaretOffsetAndText} from '../../../editor/dom';
+import {htmlSerializeIfNeeded, textSerialize} from '../../../editor/serialize';
+import {findEditableEvent} from '../../../utils/EventUtils';
+import {parseEvent} from '../../../editor/deserialize';
+import {PartCreator} from '../../../editor/parts';
+import EditorStateTransfer from '../../../utils/EditorStateTransfer';
+import {MatrixClient} from 'matrix-js-sdk';
+import classNames from 'classnames';
+import {EventStatus} from 'matrix-js-sdk';
+import BasicMessageComposer from "./BasicMessageComposer";
+
+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 EditMessageComposer extends React.Component {
+    static propTypes = {
+        // the message event being edited
+        editState: PropTypes.instanceOf(EditorStateTransfer).isRequired,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.model = null;
+        this._editorRef = null;
+    }
+
+    _setEditorRef = ref => {
+        this._editorRef = ref;
+    };
+
+    _getRoom() {
+        return this.context.matrixClient.getRoom(this.props.editState.getEvent().getRoomId());
+    }
+
+    _onKeyDown = (event) => {
+        if (event.metaKey || event.altKey || event.shiftKey) {
+            return;
+        }
+        if (event.key === "Enter") {
+            this._sendEdit();
+            event.preventDefault();
+        } else if (event.key === "Escape") {
+            this._cancelEdit();
+        } else if (event.key === "ArrowUp") {
+            if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) {
+                return;
+            }
+            const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
+            if (previousEvent) {
+                dis.dispatch({action: 'edit_event', event: previousEvent});
+                event.preventDefault();
+            }
+        } else if (event.key === "ArrowDown") {
+            if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) {
+                return;
+            }
+            const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
+            if (nextEvent) {
+                dis.dispatch({action: 'edit_event', event: nextEvent});
+            } else {
+                dis.dispatch({action: 'edit_event', event: null});
+                dis.dispatch({action: 'focus_composer'});
+            }
+            event.preventDefault();
+        }
+    }
+
+    _cancelEdit = () => {
+        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({action: 'focus_composer'});
+    }
+
+    _isModifiedOrSameAsOld(newContent) {
+        // if nothing has changed then bail
+        const oldContent = this.props.editState.getEvent().getContent();
+        if (!this._editorRef.isModified() ||
+            (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
+            oldContent["format"] === newContent["format"] &&
+            oldContent["formatted_body"] === newContent["formatted_body"])) {
+            return false;
+        }
+        return true;
+    }
+
+    _sendEdit = () => {
+        const editedEvent = this.props.editState.getEvent();
+        const editContent = createEditContent(this.model, editedEvent);
+        const newContent = editContent["m.new_content"];
+        if (!this._isModifiedOrSameAsOld(newContent)) {
+            return;
+        }
+        const roomId = editedEvent.getRoomId();
+        this._cancelPreviousPendingEdit();
+        this.context.matrixClient.sendMessage(roomId, editContent);
+
+        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({action: 'focus_composer'});
+    }
+
+    _cancelPreviousPendingEdit() {
+        const originalEvent = this.props.editState.getEvent();
+        const previousEdit = originalEvent.replacingEvent();
+        if (previousEdit && (
+            previousEdit.status === EventStatus.QUEUED ||
+            previousEdit.status === EventStatus.NOT_SENT
+        )) {
+            this.context.matrixClient.cancelPendingEvent(previousEdit);
+        }
+    }
+
+    componentWillUnmount() {
+        const sel = document.getSelection();
+        const {caret} = getCaretOffsetAndText(this._editorRef, sel);
+        const parts = this.model.serializeParts();
+        this.props.editState.setEditorState(caret, parts);
+    }
+
+    componentWillMount() {
+        this._createEditorModel();
+    }
+
+    _createEditorModel() {
+        const {editState} = this.props;
+        const room = this._getRoom();
+        const partCreator = new PartCreator(room, this.context.matrixClient);
+        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
+            parts = parseEvent(editState.getEvent(), partCreator);
+        }
+        this.model = new EditorModel(parts, partCreator);
+    }
+
+    _getInitialCaretPosition() {
+        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();
+        }
+        return caretPosition;
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return <div className={classNames("mx_MessageEditor", this.props.className)} onKeyDown={this._onKeyDown}>
+                <BasicMessageComposer
+                    ref={this._setEditorRef}
+                    model={this.model}
+                    room={this._getRoom()}
+                    initialCaret={this.props.editState.getCaret()}
+                />
+                <div className="mx_MessageEditor_buttons">
+                    <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
+                </div>
+            </div>;
+    }
+}