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

Add wysisyg composer (can only send message, enable behind a labs flag)

Browse source
This commit is contained in:
Florian Duros 2022-10-05 12:01:41 +02:00
parent 16c3efead5
commit bfb1638ff3
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
11 changed files with 401 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,6 +58,7 @@ import {
startNewVoiceBroadcastRecording,
VoiceBroadcastRecordingsStore,
} from '../../../voice-broadcast';
import { WysiwygComposer } from './wysiwyg_composer/WysiwygComposer';
let instanceCount = 0;
@ -105,6 +106,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
private ref: React.RefObject<HTMLDivElement> = createRef();
private instanceId: number;
private composerSendMessage?: () => void;
private _voiceRecording: Optional<VoiceMessageRecording>;
@ -313,6 +315,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
}
this.messageComposerInput.current?.sendMessage();
this.composerSendMessage?.();
};
private onChange = (model: EditorModel) => {
@ -321,6 +324,13 @@ export default class MessageComposer extends React.Component<IProps, IState> {
});
};
private onWysiwygChange = (content: string) => {
console.log('content', content);
this.setState({
isComposerEmpty: content?.length === 0,
});
};
private onVoiceStoreUpdate = () => {
this.updateRecordingState();
};
@ -394,20 +404,37 @@ export default class MessageComposer extends React.Component<IProps, IState> {
const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
if (canSendMessages) {
controls.push(
<SendMessageComposer
ref={this.messageComposerInput}
key="controls_input"
room={this.props.room}
placeholder={this.renderPlaceholderText()}
permalinkCreator={this.props.permalinkCreator}
relation={this.props.relation}
replyToEvent={this.props.replyToEvent}
onChange={this.onChange}
disabled={this.state.haveRecording}
toggleStickerPickerOpen={this.toggleStickerPickerOpen}
/>,
);
const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
if (isWysiwygComposerEnabled) {
controls.push(
<WysiwygComposer key="controls_input"
disabled={this.state.haveRecording}
onChange={this.onWysiwygChange}
permalinkCreator={this.props.permalinkCreator}
relation={this.props.relation}
replyToEvent={this.props.replyToEvent}>
{ (sendMessage) => {
this.composerSendMessage = sendMessage;
} }
</WysiwygComposer>,
);
} else {
controls.push(
<SendMessageComposer
ref={this.messageComposerInput}
key="controls_input"
room={this.props.room}
placeholder={this.renderPlaceholderText()}
permalinkCreator={this.props.permalinkCreator}
relation={this.props.relation}
replyToEvent={this.props.replyToEvent}
onChange={this.onChange}
disabled={this.state.haveRecording}
toggleStickerPickerOpen={this.toggleStickerPickerOpen}
/>,
);
}
controls.push(<VoiceRecordComposerTile
key="controls_voice_record"