Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { createRef, ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import React, { createRef, ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import { IEventRelation, MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import { EventType } from 'matrix-js-sdk/src/@types/event';
|
||||
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||
import { Optional } from "matrix-events-sdk";
|
||||
import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
|
||||
import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import dis from '../../../dispatcher/dispatcher';
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||||
import Stickerpicker from './Stickerpicker';
|
||||
import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
|
||||
import E2EIcon from './E2EIcon';
|
||||
import Stickerpicker from "./Stickerpicker";
|
||||
import { makeRoomPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
||||
import E2EIcon from "./E2EIcon";
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
import { aboveLeftOf } from "../../structures/ContextMenu";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
|
|
@ -40,26 +40,26 @@ import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
|
|||
import { RecordingState } from "../../../audio/VoiceRecording";
|
||||
import Tooltip, { Alignment } from "../elements/Tooltip";
|
||||
import ResizeNotifier from "../../../utils/ResizeNotifier";
|
||||
import { E2EStatus } from '../../../utils/ShieldUtils';
|
||||
import { E2EStatus } from "../../../utils/ShieldUtils";
|
||||
import SendMessageComposer, { SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer";
|
||||
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import EditorModel from "../../../editor/model";
|
||||
import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
|
||||
import RoomContext from '../../../contexts/RoomContext';
|
||||
import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
|
||||
import RoomContext from "../../../contexts/RoomContext";
|
||||
import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdatedPayload";
|
||||
import MessageComposerButtons from './MessageComposerButtons';
|
||||
import { ButtonEvent } from '../elements/AccessibleButton';
|
||||
import MessageComposerButtons from "./MessageComposerButtons";
|
||||
import { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
|
||||
import { Features } from '../../../settings/Settings';
|
||||
import { VoiceMessageRecording } from '../../../audio/VoiceMessageRecording';
|
||||
import { VoiceBroadcastRecordingsStore } from '../../../voice-broadcast';
|
||||
import { SendWysiwygComposer, sendMessage } from './wysiwyg_composer/';
|
||||
import { MatrixClientProps, withMatrixClientHOC } from '../../../contexts/MatrixClientContext';
|
||||
import { htmlToPlainText } from '../../../utils/room/htmlToPlaintext';
|
||||
import { setUpVoiceBroadcastPreRecording } from '../../../voice-broadcast/utils/setUpVoiceBroadcastPreRecording';
|
||||
import { SdkContextClass } from '../../../contexts/SDKContext';
|
||||
import { isLocalRoom } from "../../../utils/localRoom/isLocalRoom";
|
||||
import { Features } from "../../../settings/Settings";
|
||||
import { VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
|
||||
import { VoiceBroadcastRecordingsStore } from "../../../voice-broadcast";
|
||||
import { SendWysiwygComposer, sendMessage } from "./wysiwyg_composer/";
|
||||
import { MatrixClientProps, withMatrixClientHOC } from "../../../contexts/MatrixClientContext";
|
||||
import { htmlToPlainText } from "../../../utils/room/htmlToPlaintext";
|
||||
import { setUpVoiceBroadcastPreRecording } from "../../../voice-broadcast/utils/setUpVoiceBroadcastPreRecording";
|
||||
import { SdkContextClass } from "../../../contexts/SDKContext";
|
||||
|
||||
let instanceCount = 0;
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ function SendButton(props: ISendButtonProps) {
|
|||
<AccessibleTooltipButton
|
||||
className="mx_MessageComposer_sendMessage"
|
||||
onClick={props.onClick}
|
||||
title={props.title ?? _t('Send message')}
|
||||
title={props.title ?? _t("Send message")}
|
||||
data-testid="sendmessagebtn"
|
||||
/>
|
||||
);
|
||||
|
|
@ -129,7 +129,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
|
||||
this.state = {
|
||||
isComposerEmpty: true,
|
||||
composerContent: '',
|
||||
composerContent: "",
|
||||
haveRecording: false,
|
||||
recordingTimeLeftSeconds: undefined, // when set to a number, shows a toast
|
||||
isMenuOpen: false,
|
||||
|
|
@ -139,7 +139,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
|
||||
isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
|
||||
isRichTextEnabled: true,
|
||||
initialComposerContent: '',
|
||||
initialComposerContent: "",
|
||||
};
|
||||
|
||||
this.instanceId = instanceCount++;
|
||||
|
|
@ -268,15 +268,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
private onTombstoneClick = (ev) => {
|
||||
ev.preventDefault();
|
||||
|
||||
const replacementRoomId = this.context.tombstone.getContent()['replacement_room'];
|
||||
const replacementRoomId = this.context.tombstone.getContent()["replacement_room"];
|
||||
const replacementRoom = MatrixClientPeg.get().getRoom(replacementRoomId);
|
||||
let createEventId = null;
|
||||
if (replacementRoom) {
|
||||
const createEvent = replacementRoom.currentState.getStateEvents(EventType.RoomCreate, '');
|
||||
const createEvent = replacementRoom.currentState.getStateEvents(EventType.RoomCreate, "");
|
||||
if (createEvent && createEvent.getId()) createEventId = createEvent.getId();
|
||||
}
|
||||
|
||||
const viaServers = [this.context.tombstone.getSender().split(':').slice(1).join(':')];
|
||||
const viaServers = [this.context.tombstone.getSender().split(":").slice(1).join(":")];
|
||||
|
||||
dis.dispatch<ViewRoomPayload>({
|
||||
action: Action.ViewRoom,
|
||||
|
|
@ -296,19 +296,19 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
if (this.props.replyToEvent) {
|
||||
const replyingToThread = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name;
|
||||
if (replyingToThread && this.props.e2eStatus) {
|
||||
return _t('Reply to encrypted thread…');
|
||||
return _t("Reply to encrypted thread…");
|
||||
} else if (replyingToThread) {
|
||||
return _t('Reply to thread…');
|
||||
return _t("Reply to thread…");
|
||||
} else if (this.props.e2eStatus) {
|
||||
return _t('Send an encrypted reply…');
|
||||
return _t("Send an encrypted reply…");
|
||||
} else {
|
||||
return _t('Send a reply…');
|
||||
return _t("Send a reply…");
|
||||
}
|
||||
} else {
|
||||
if (this.props.e2eStatus) {
|
||||
return _t('Send an encrypted message…');
|
||||
return _t("Send an encrypted message…");
|
||||
} else {
|
||||
return _t('Send a message…');
|
||||
return _t("Send a message…");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -334,11 +334,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
|
||||
if (this.state.isWysiwygLabEnabled) {
|
||||
const { permalinkCreator, relation, replyToEvent } = this.props;
|
||||
sendMessage(this.state.composerContent,
|
||||
this.state.isRichTextEnabled,
|
||||
{ mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
|
||||
sendMessage(this.state.composerContent, this.state.isRichTextEnabled, {
|
||||
mxClient: this.props.mxClient,
|
||||
roomContext: this.context,
|
||||
permalinkCreator,
|
||||
relation,
|
||||
replyToEvent,
|
||||
});
|
||||
dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
|
||||
this.setState({ composerContent: '', initialComposerContent: '' });
|
||||
this.setState({ composerContent: "", initialComposerContent: "" });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -356,12 +360,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
};
|
||||
|
||||
private onRichTextToggle = () => {
|
||||
this.setState(state => ({
|
||||
this.setState((state) => ({
|
||||
isRichTextEnabled: !state.isRichTextEnabled,
|
||||
initialComposerContent: !state.isRichTextEnabled ?
|
||||
state.composerContent :
|
||||
// TODO when available use rust model plain text
|
||||
htmlToPlainText(state.composerContent),
|
||||
initialComposerContent: !state.isRichTextEnabled
|
||||
? state.composerContent
|
||||
: // TODO when available use rust model plain text
|
||||
htmlToPlainText(state.composerContent),
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
@ -432,15 +436,17 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
contentRect.x,
|
||||
contentRect.y + heightToRemove,
|
||||
contentRect.width,
|
||||
contentRect.height - heightToRemove);
|
||||
contentRect.height - heightToRemove,
|
||||
);
|
||||
return aboveLeftOf(fixedRect);
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
|
||||
const e2eIcon = hasE2EIcon &&
|
||||
<E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />;
|
||||
const e2eIcon = hasE2EIcon && (
|
||||
<E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />
|
||||
);
|
||||
|
||||
const controls: ReactNode[] = [];
|
||||
const menuPosition = this.getMenuPosition();
|
||||
|
|
@ -449,8 +455,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
let composer: ReactNode;
|
||||
if (canSendMessages) {
|
||||
if (this.state.isWysiwygLabEnabled && menuPosition) {
|
||||
composer =
|
||||
<SendWysiwygComposer key="controls_input"
|
||||
composer = (
|
||||
<SendWysiwygComposer
|
||||
key="controls_input"
|
||||
disabled={this.state.haveRecording}
|
||||
onChange={this.onWysiwygChange}
|
||||
onSend={this.sendMessage}
|
||||
|
|
@ -459,9 +466,10 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
e2eStatus={this.props.e2eStatus}
|
||||
menuPosition={menuPosition}
|
||||
placeholder={this.renderPlaceholderText()}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
composer =
|
||||
composer = (
|
||||
<SendMessageComposer
|
||||
ref={this.messageComposerInput}
|
||||
key="controls_input"
|
||||
|
|
@ -473,43 +481,54 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
onChange={this.onChange}
|
||||
disabled={this.state.haveRecording}
|
||||
toggleStickerPickerOpen={this.toggleStickerPickerOpen}
|
||||
/>;
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
controls.push(<VoiceRecordComposerTile
|
||||
key="controls_voice_record"
|
||||
ref={this.voiceRecordingButton}
|
||||
room={this.props.room}
|
||||
permalinkCreator={this.props.permalinkCreator}
|
||||
relation={this.props.relation}
|
||||
replyToEvent={this.props.replyToEvent} />);
|
||||
controls.push(
|
||||
<VoiceRecordComposerTile
|
||||
key="controls_voice_record"
|
||||
ref={this.voiceRecordingButton}
|
||||
room={this.props.room}
|
||||
permalinkCreator={this.props.permalinkCreator}
|
||||
relation={this.props.relation}
|
||||
replyToEvent={this.props.replyToEvent}
|
||||
/>,
|
||||
);
|
||||
} else if (this.context.tombstone) {
|
||||
const replacementRoomId = this.context.tombstone.getContent()['replacement_room'];
|
||||
const replacementRoomId = this.context.tombstone.getContent()["replacement_room"];
|
||||
|
||||
const continuesLink = replacementRoomId ? (
|
||||
<a href={makeRoomPermalink(replacementRoomId)}
|
||||
<a
|
||||
href={makeRoomPermalink(replacementRoomId)}
|
||||
className="mx_MessageComposer_roomReplaced_link"
|
||||
onClick={this.onTombstoneClick}
|
||||
>
|
||||
{ _t("The conversation continues here.") }
|
||||
{_t("The conversation continues here.")}
|
||||
</a>
|
||||
) : '';
|
||||
) : (
|
||||
""
|
||||
);
|
||||
|
||||
controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
|
||||
<div className="mx_MessageComposer_replaced_valign">
|
||||
<img className="mx_MessageComposer_roomReplaced_icon"
|
||||
src={require("../../../../res/img/room_replaced.svg").default}
|
||||
/>
|
||||
<span className="mx_MessageComposer_roomReplaced_header">
|
||||
{ _t("This room has been replaced and is no longer active.") }
|
||||
</span><br />
|
||||
{ continuesLink }
|
||||
</div>
|
||||
</div>);
|
||||
controls.push(
|
||||
<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
|
||||
<div className="mx_MessageComposer_replaced_valign">
|
||||
<img
|
||||
className="mx_MessageComposer_roomReplaced_icon"
|
||||
src={require("../../../../res/img/room_replaced.svg").default}
|
||||
/>
|
||||
<span className="mx_MessageComposer_roomReplaced_header">
|
||||
{_t("This room has been replaced and is no longer active.")}
|
||||
</span>
|
||||
<br />
|
||||
{continuesLink}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
} else {
|
||||
controls.push(
|
||||
<div key="controls_error" className="mx_MessageComposer_noperm_error">
|
||||
{ _t('You do not have permission to post to this room') }
|
||||
{_t("You do not have permission to post to this room")}
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
|
|
@ -517,15 +536,13 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
let recordingTooltip;
|
||||
if (this.state.recordingTimeLeftSeconds) {
|
||||
const secondsLeft = Math.round(this.state.recordingTimeLeftSeconds);
|
||||
recordingTooltip = <Tooltip
|
||||
label={_t("%(seconds)ss left", { seconds: secondsLeft })}
|
||||
alignment={Alignment.Top}
|
||||
/>;
|
||||
recordingTooltip = (
|
||||
<Tooltip label={_t("%(seconds)ss left", { seconds: secondsLeft })} alignment={Alignment.Top} />
|
||||
);
|
||||
}
|
||||
|
||||
const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
|
||||
? this.props.relation.event_id
|
||||
: null;
|
||||
const threadId =
|
||||
this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
|
||||
|
||||
controls.push(
|
||||
<Stickerpicker
|
||||
|
|
@ -549,55 +566,58 @@ export class MessageComposer extends React.Component<IProps, IState> {
|
|||
|
||||
return (
|
||||
<div className={classes} ref={this.ref}>
|
||||
{ recordingTooltip }
|
||||
{recordingTooltip}
|
||||
<div className="mx_MessageComposer_wrapper">
|
||||
<ReplyPreview
|
||||
replyToEvent={this.props.replyToEvent}
|
||||
permalinkCreator={this.props.permalinkCreator} />
|
||||
permalinkCreator={this.props.permalinkCreator}
|
||||
/>
|
||||
<div className="mx_MessageComposer_row">
|
||||
{ e2eIcon }
|
||||
{ composer }
|
||||
{e2eIcon}
|
||||
{composer}
|
||||
<div className="mx_MessageComposer_actions">
|
||||
{ controls }
|
||||
{ canSendMessages && <MessageComposerButtons
|
||||
addEmoji={this.addEmoji}
|
||||
haveRecording={this.state.haveRecording}
|
||||
isMenuOpen={this.state.isMenuOpen}
|
||||
isStickerPickerOpen={this.state.isStickerPickerOpen}
|
||||
menuPosition={menuPosition}
|
||||
relation={this.props.relation}
|
||||
onRecordStartEndClick={() => {
|
||||
this.voiceRecordingButton.current?.onRecordStartEndClick();
|
||||
if (this.context.narrow) {
|
||||
{controls}
|
||||
{canSendMessages && (
|
||||
<MessageComposerButtons
|
||||
addEmoji={this.addEmoji}
|
||||
haveRecording={this.state.haveRecording}
|
||||
isMenuOpen={this.state.isMenuOpen}
|
||||
isStickerPickerOpen={this.state.isStickerPickerOpen}
|
||||
menuPosition={menuPosition}
|
||||
relation={this.props.relation}
|
||||
onRecordStartEndClick={() => {
|
||||
this.voiceRecordingButton.current?.onRecordStartEndClick();
|
||||
if (this.context.narrow) {
|
||||
this.toggleButtonMenu();
|
||||
}
|
||||
}}
|
||||
setStickerPickerOpen={this.setStickerPickerOpen}
|
||||
showLocationButton={!window.electron}
|
||||
showPollsButton={this.state.showPollsButton}
|
||||
showStickersButton={this.showStickersButton}
|
||||
isRichTextEnabled={this.state.isRichTextEnabled}
|
||||
onComposerModeClick={this.onRichTextToggle}
|
||||
toggleButtonMenu={this.toggleButtonMenu}
|
||||
showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
|
||||
onStartVoiceBroadcastClick={() => {
|
||||
setUpVoiceBroadcastPreRecording(
|
||||
this.props.room,
|
||||
MatrixClientPeg.get(),
|
||||
SdkContextClass.instance.voiceBroadcastPlaybacksStore,
|
||||
VoiceBroadcastRecordingsStore.instance(),
|
||||
SdkContextClass.instance.voiceBroadcastPreRecordingStore,
|
||||
);
|
||||
this.toggleButtonMenu();
|
||||
}
|
||||
}}
|
||||
setStickerPickerOpen={this.setStickerPickerOpen}
|
||||
showLocationButton={!window.electron}
|
||||
showPollsButton={this.state.showPollsButton}
|
||||
showStickersButton={this.showStickersButton}
|
||||
isRichTextEnabled={this.state.isRichTextEnabled}
|
||||
onComposerModeClick={this.onRichTextToggle}
|
||||
toggleButtonMenu={this.toggleButtonMenu}
|
||||
showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
|
||||
onStartVoiceBroadcastClick={() => {
|
||||
setUpVoiceBroadcastPreRecording(
|
||||
this.props.room,
|
||||
MatrixClientPeg.get(),
|
||||
SdkContextClass.instance.voiceBroadcastPlaybacksStore,
|
||||
VoiceBroadcastRecordingsStore.instance(),
|
||||
SdkContextClass.instance.voiceBroadcastPreRecordingStore,
|
||||
);
|
||||
this.toggleButtonMenu();
|
||||
}}
|
||||
/> }
|
||||
{ showSendButton && (
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showSendButton && (
|
||||
<SendButton
|
||||
key="controls_send"
|
||||
onClick={this.sendMessage}
|
||||
title={this.state.haveRecording ? _t("Send voice message") : undefined}
|
||||
/>
|
||||
) }
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue