imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add basic plain text editor

Browse source
This commit is contained in:
Florian Duros 2022-10-25 17:26:14 +02:00
parent 6e73a853a8
commit 50279c8870
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
18 changed files with 316 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/views/rooms/MessageComposer.tsx
View file

@ -100,6 +100,8 @@ interface IState {
showStickersButton: boolean;
showPollsButton: boolean;
showVoiceBroadcastButton: boolean;
isWysiwygLabEnabled: boolean;
isRichTextEnabled: boolean;
}
export class MessageComposer extends React.Component<IProps, IState> {
@ -117,6 +119,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
public static defaultProps = {
compact: false,
showVoiceBroadcastButton: false,
isRichTextEnabled: true,
};
public constructor(props: IProps) {
@ -133,6 +136,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
showStickersButton: SettingsStore.getValue("MessageComposerInput.showStickersButton"),
showPollsButton: SettingsStore.getValue("MessageComposerInput.showPollsButton"),
showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
isRichTextEnabled: true,
};
this.instanceId = instanceCount++;
@ -140,6 +145,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null);
SettingsStore.monitorSetting("MessageComposerInput.showPollsButton", null);
SettingsStore.monitorSetting(Features.VoiceBroadcast, null);
SettingsStore.monitorSetting("feature_wysiwyg_composer", null);
}
private get voiceRecording(): Optional<VoiceMessageRecording> {
@ -220,6 +226,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
}
break;
}
case "feature_wysiwyg_composer": {
if (this.state.isWysiwygLabEnabled !== settingUpdatedPayload.newValue) {
this.setState({ isWysiwygLabEnabled: Boolean(settingUpdatedPayload.newValue) });
}
break;
}
}
}
}
@ -318,10 +330,10 @@ export class MessageComposer extends React.Component<IProps, IState> {
this.messageComposerInput.current?.sendMessage();
const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
if (isWysiwygComposerEnabled) {
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 });
dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
}
@ -340,6 +352,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
});
};
private onRichTextToggle = () => {
this.setState(state => ({
isRichTextEnabled: !state.isRichTextEnabled,
}));
};
private onVoiceStoreUpdate = () => {
this.updateRecordingState();
};
@ -395,7 +413,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
}
public render() {
const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
const controls = [
this.props.e2eStatus ?
<E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
@ -410,12 +427,13 @@ export class MessageComposer extends React.Component<IProps, IState> {
const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
if (canSendMessages) {
if (isWysiwygComposerEnabled) {
if (this.state.isWysiwygLabEnabled) {
controls.push(
<SendWysiwygComposer key="controls_input"
disabled={this.state.haveRecording}
onChange={this.onWysiwygChange}
onSend={this.sendMessage}
isRichTextEnabled={this.state.isRichTextEnabled}
/>,
);
} else {
@ -503,7 +521,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
"mx_MessageComposer": true,
"mx_MessageComposer--compact": this.props.compact,
"mx_MessageComposer_e2eStatus": this.props.e2eStatus != undefined,
"mx_MessageComposer_wysiwyg": isWysiwygComposerEnabled,
"mx_MessageComposer_wysiwyg": this.state.isWysiwygLabEnabled && this.state.isRichTextEnabled,
});
return (
@ -532,6 +550,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
showLocationButton={!window.electron}
showPollsButton={this.state.showPollsButton}
showStickersButton={this.showStickersButton}
showComposerModeButton={this.state.isWysiwygLabEnabled}
isComposerModeToggled={this.state.isRichTextEnabled}
onComposerModeClick={this.onRichTextToggle}
toggleButtonMenu={this.toggleButtonMenu}
showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
onStartVoiceBroadcastClick={() => {