EditMessageComposer.tsx

/*
Copyright 2019 - 2021 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, { createRef, KeyboardEvent } from 'react';
import classNames from 'classnames';
import { EventStatus, IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
import { MsgType } from 'matrix-js-sdk/src/@types/event';
import { Room } from 'matrix-js-sdk/src/models/room';
import { logger } from "matrix-js-sdk/src/logger";
import { Composer as ComposerEvent } from "@matrix-org/analytics-events/types/typescript/Composer";

import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
import EditorModel from '../../../editor/model';
import { getCaretOffsetAndText } from '../../../editor/dom';
import { htmlSerializeIfNeeded, textSerialize, containsEmote, stripEmoteCommand } from '../../../editor/serialize';
import { findEditableEvent } from '../../../utils/EventUtils';
import { parseEvent } from '../../../editor/deserialize';
import { CommandPartCreator, Part, PartCreator } from '../../../editor/parts';
import EditorStateTransfer from '../../../utils/EditorStateTransfer';
import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
import { CommandCategories } from '../../../SlashCommands';
import { Action } from "../../../dispatcher/actions";
import { getKeyBindingsManager } from '../../../KeyBindingsManager';
import SendHistoryManager from '../../../SendHistoryManager';
import { ActionPayload } from "../../../dispatcher/payloads";
import AccessibleButton from '../elements/AccessibleButton';
import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
import SettingsStore from "../../../settings/SettingsStore";
import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
import RoomContext from '../../../contexts/RoomContext';
import { ComposerType } from "../../../dispatcher/payloads/ComposerInsertPayload";
import { getSlashCommand, isSlashCommand, runSlashCommand, shouldSendAnyway } from "../../../editor/commands";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { PosthogAnalytics } from "../../../PosthogAnalytics";
import { editorRoomKey, editorStateKey } from "../../../Editing";

function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
    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: MatrixEvent): string {
    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: EditorModel,
    editedEvent: MatrixEvent,
): IContent {
    const isEmote = containsEmote(model);
    if (isEmote) {
        model = stripEmoteCommand(model);
    }
    const isReply = !!editedEvent.replyEventId;
    let plainPrefix = "";
    let htmlPrefix = "";

    if (isReply) {
        plainPrefix = getTextReplyFallback(editedEvent);
        htmlPrefix = getHtmlReplyFallback(editedEvent);
    }

    const body = textSerialize(model);

    const newContent: IContent = {
        "msgtype": isEmote ? MsgType.Emote : MsgType.Text,
        "body": body,
    };
    const contentBody: IContent = {
        msgtype: newContent.msgtype,
        body: `${plainPrefix} * ${body}`,
    };

    const formattedBody = htmlSerializeIfNeeded(model, {
        forceHTML: isReply,
        useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
    });
    if (formattedBody) {
        newContent.format = "org.matrix.custom.html";
        newContent.formatted_body = formattedBody;
        contentBody.format = newContent.format;
        contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
    }

    const relation = {
        "m.new_content": newContent,
        "m.relates_to": {
            "rel_type": "m.replace",
            "event_id": editedEvent.getId(),
        },
    };

    return Object.assign(relation, contentBody);
}

interface IEditMessageComposerProps extends MatrixClientProps {
    editState: EditorStateTransfer;
    className?: string;
}
interface IState {
    saveDisabled: boolean;
}

class EditMessageComposer extends React.Component<IEditMessageComposerProps, IState> {
    static contextType = RoomContext;
    context!: React.ContextType<typeof RoomContext>;

    private readonly editorRef = createRef<BasicMessageComposer>();
    private readonly dispatcherRef: string;
    private model: EditorModel = null;

    constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
        super(props);
        this.context = context; // otherwise React will only set it prior to render due to type def above

        const isRestored = this.createEditorModel();
        const ev = this.props.editState.getEvent();

        const editContent = createEditContent(this.model, ev);
        this.state = {
            saveDisabled: !isRestored || !this.isContentModified(editContent["m.new_content"]),
        };

        window.addEventListener("beforeunload", this.saveStoredEditorState);
        this.dispatcherRef = dis.register(this.onAction);
    }

    private getRoom(): Room {
        return this.props.mxClient.getRoom(this.props.editState.getEvent().getRoomId());
    }

    private onKeyDown = (event: KeyboardEvent): void => {
        // ignore any keypress while doing IME compositions
        if (this.editorRef.current?.isComposing(event)) {
            return;
        }
        const action = getKeyBindingsManager().getMessageComposerAction(event);
        switch (action) {
            case KeyBindingAction.SendMessage:
                this.sendEdit();
                event.stopPropagation();
                event.preventDefault();
                break;
            case KeyBindingAction.CancelReplyOrEdit:
                event.stopPropagation();
                this.cancelEdit();
                break;
            case KeyBindingAction.EditPrevMessage: {
                if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtStart()) {
                    return;
                }
                const previousEvent = findEditableEvent({
                    events: this.events,
                    isForward: false,
                    fromEventId: this.props.editState.getEvent().getId(),
                });
                if (previousEvent) {
                    dis.dispatch({
                        action: Action.EditEvent,
                        event: previousEvent,
                        timelineRenderingType: this.context.timelineRenderingType,
                    });
                    event.preventDefault();
                }
                break;
            }
            case KeyBindingAction.EditNextMessage: {
                if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtEnd()) {
                    return;
                }
                const nextEvent = findEditableEvent({
                    events: this.events,
                    isForward: true,
                    fromEventId: this.props.editState.getEvent().getId(),
                });
                if (nextEvent) {
                    dis.dispatch({
                        action: Action.EditEvent,
                        event: nextEvent,
                        timelineRenderingType: this.context.timelineRenderingType,
                    });
                } else {
                    this.cancelEdit();
                }
                event.preventDefault();
                break;
            }
        }
    };

    private endEdit(): void {
        // close the event editing and focus composer
        dis.dispatch({
            action: Action.EditEvent,
            event: null,
            timelineRenderingType: this.context.timelineRenderingType,
        });
        dis.dispatch({
            action: Action.FocusSendMessageComposer,
            context: this.context.timelineRenderingType,
        });
    }

    private get editorRoomKey(): string {
        return editorRoomKey(this.props.editState.getEvent().getRoomId(), this.context.timelineRenderingType);
    }

    private get editorStateKey(): string {
        return editorStateKey(this.props.editState.getEvent().getId());
    }

    private get events(): MatrixEvent[] {
        const liveTimelineEvents = this.context.liveTimeline.getEvents();
        const pendingEvents = this.getRoom().getPendingEvents();
        const isInThread = Boolean(this.props.editState.getEvent().getThread());
        return liveTimelineEvents.concat(isInThread ? [] : pendingEvents);
    }

    private cancelEdit = (): void => {
        this.clearStoredEditorState();
        this.endEdit();
    };

    private get shouldSaveStoredEditorState(): boolean {
        return localStorage.getItem(this.editorRoomKey) !== null;
    }

    private restoreStoredEditorState(partCreator: PartCreator): Part[] {
        const json = localStorage.getItem(this.editorStateKey);
        if (json) {
            try {
                const { parts: serializedParts } = JSON.parse(json);
                const parts: Part[] = serializedParts.map(p => partCreator.deserializePart(p));
                return parts;
            } catch (e) {
                logger.error("Error parsing editing state: ", e);
            }
        }
    }

    private clearStoredEditorState(): void {
        localStorage.removeItem(this.editorRoomKey);
        localStorage.removeItem(this.editorStateKey);
    }

    private clearPreviousEdit(): void {
        if (localStorage.getItem(this.editorRoomKey)) {
            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this.editorRoomKey)}`);
        }
    }

    private saveStoredEditorState = (): void => {
        const item = SendHistoryManager.createItem(this.model);
        this.clearPreviousEdit();
        localStorage.setItem(this.editorRoomKey, this.props.editState.getEvent().getId());
        localStorage.setItem(this.editorStateKey, JSON.stringify(item));
    };

    private isContentModified(newContent: IContent): boolean {
        // if nothing has changed then bail
        const oldContent = this.props.editState.getEvent().getContent();
        if (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
            oldContent["format"] === newContent["format"] &&
            oldContent["formatted_body"] === newContent["formatted_body"]) {
            return false;
        }
        return true;
    }

    private sendEdit = async (): Promise<void> => {
        if (this.state.saveDisabled) return;

        const editedEvent = this.props.editState.getEvent();

        PosthogAnalytics.instance.trackEvent<ComposerEvent>({
            eventName: "Composer",
            isEditing: true,
            inThread: !!editedEvent?.getThread(),
            isReply: !!editedEvent.replyEventId,
        });

        // Replace emoticon at the end of the message
        if (SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji')) {
            const caret = this.editorRef.current?.getCaret();
            const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
            this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
        }
        const editContent = createEditContent(this.model, editedEvent);
        const newContent = editContent["m.new_content"];

        let shouldSend = true;

        if (newContent?.body === '') {
            this.cancelPreviousPendingEdit();
            createRedactEventDialog({
                mxEvent: editedEvent,
                onCloseDialog: () => {
                    this.cancelEdit();
                },
            });
            return;
        }

        // If content is modified then send an updated event into the room
        if (this.isContentModified(newContent)) {
            const roomId = editedEvent.getRoomId();
            if (!containsEmote(this.model) && isSlashCommand(this.model)) {
                const [cmd, args, commandText] = getSlashCommand(this.model);
                if (cmd) {
                    const threadId = editedEvent?.getThread()?.id || null;
                    const [content, commandSuccessful] = await runSlashCommand(cmd, args, roomId, threadId);
                    if (!commandSuccessful) {
                        return; // errored
                    }

                    if (cmd.category === CommandCategories.messages || cmd.category === CommandCategories.effects) {
                        editContent["m.new_content"] = content;
                    } else {
                        shouldSend = false;
                    }
                } else if (!await shouldSendAnyway(commandText)) {
                    // if !sendAnyway bail to let the user edit the composer and try again
                    return;
                }
            }
            if (shouldSend) {
                this.cancelPreviousPendingEdit();

                const event = this.props.editState.getEvent();
                const threadId = event.threadRootId || null;

                this.props.mxClient.sendMessage(roomId, threadId, editContent);
                this.clearStoredEditorState();
                dis.dispatch({ action: "message_sent" });
            }
        }

        this.endEdit();
    };

    private cancelPreviousPendingEdit(): void {
        const originalEvent = this.props.editState.getEvent();
        const previousEdit = originalEvent.replacingEvent();
        if (previousEdit && (
            previousEdit.status === EventStatus.QUEUED ||
            previousEdit.status === EventStatus.NOT_SENT
        )) {
            this.props.mxClient.cancelPendingEvent(previousEdit);
        }
    }

    componentWillUnmount() {
        // store caret and serialized parts in the
        // editorstate so it can be restored when the remote echo event tile gets rendered
        // in case we're currently editing a pending event
        const sel = document.getSelection();
        let caret;
        if (sel.focusNode) {
            caret = getCaretOffsetAndText(this.editorRef.current?.editorRef.current, sel).caret;
        }
        const parts = this.model.serializeParts();
        // if caret is undefined because for some reason there isn't a valid selection,
        // then when mounting the editor again with the same editor state,
        // it will set the cursor at the end.
        this.props.editState.setEditorState(caret, parts);
        window.removeEventListener("beforeunload", this.saveStoredEditorState);
        if (this.shouldSaveStoredEditorState) {
            this.saveStoredEditorState();
        }
        dis.unregister(this.dispatcherRef);
    }

    private createEditorModel(): boolean {
        const { editState } = this.props;
        const room = this.getRoom();
        const partCreator = new CommandPartCreator(room, this.props.mxClient);

        let parts: Part[];
        let isRestored = false;
        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, either restore serialized parts from localStorage or parse the body of the event
            const restoredParts = this.restoreStoredEditorState(partCreator);
            parts = restoredParts || parseEvent(editState.getEvent(), partCreator, {
                shouldEscape: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
            });
            isRestored = !!restoredParts;
        }
        this.model = new EditorModel(parts, partCreator);
        this.saveStoredEditorState();

        return isRestored;
    }

    private onChange = (): void => {
        if (!this.state.saveDisabled || !this.editorRef.current?.isModified()) {
            return;
        }

        this.setState({
            saveDisabled: false,
        });
    };

    private onAction = (payload: ActionPayload) => {
        if (!this.editorRef.current) return;

        if (payload.action === Action.ComposerInsert) {
            if (payload.timelineRenderingType !== this.context.timelineRenderingType) return;
            if (payload.composerType !== ComposerType.Edit) return;

            if (payload.userId) {
                this.editorRef.current?.insertMention(payload.userId);
            } else if (payload.event) {
                this.editorRef.current?.insertQuotedMessage(payload.event);
            } else if (payload.text) {
                this.editorRef.current?.insertPlaintext(payload.text);
            }
        } else if (payload.action === Action.FocusEditMessageComposer) {
            this.editorRef.current.focus();
        }
    };

    render() {
        return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
            <BasicMessageComposer
                ref={this.editorRef}
                model={this.model}
                room={this.getRoom()}
                threadId={this.props.editState?.getEvent()?.getThread()?.id}
                initialCaret={this.props.editState.getCaret()}
                label={_t("Edit message")}
                onChange={this.onChange}
            />
            <div className="mx_EditMessageComposer_buttons">
                <AccessibleButton kind="secondary" onClick={this.cancelEdit}>
                    { _t("Cancel") }
                </AccessibleButton>
                <AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
                    { _t("Save") }
                </AccessibleButton>
            </div>
        </div>);
    }
}

const EditMessageComposerWithMatrixClient = withMatrixClientHOC(EditMessageComposer);
export default EditMessageComposerWithMatrixClient;