OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add basic plain text editor

pull/28217/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/views/rooms/_MessageComposer.pcss
View File

@ -240,7 +240,7 @@ limitations under the License.
*/
.mx_MessageComposer_wysiwyg {
.mx_MessageComposer_e2eIcon.mx_E2EIcon,.mx_MessageComposer_button, .mx_MessageComposer_sendMessage {
margin-top: 22px;
margin-top: 28px;
}
}
@ -264,6 +264,14 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
}
.mx_MessageComposer_plain_text::before {
mask-image: url('$(res)/img/element-icons/room/composer/plain_text.svg');
}
.mx_MessageComposer_rich_text::before {
mask-image: url('$(res)/img/element-icons/room/composer/rich_text.svg');
}
.mx_MessageComposer_location::before {
mask-image: url('$(res)/img/element-icons/room/composer/location.svg');
}

11
res/img/element-icons/room/composer/plain_text.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1456_146365)">
<path d="M7.00042 13.7333H13.6671L14.5471 15.8667C14.7471 16.3467 15.2137 16.6667 15.7337 16.6667C16.6537 16.6667 17.2671 15.72 16.9071 14.88L11.7337 2.92C11.4937 2.36 10.9471 2 10.3337 2C9.72042 2 9.17375 2.36 8.93375 2.92L3.76042 14.88C3.40042 15.72 4.02708 16.6667 4.94708 16.6667C5.46708 16.6667 5.93375 16.3467 6.13375 15.8667L7.00042 13.7333ZM10.3337 4.64L12.8271 11.3333H7.84042L10.3337 4.64Z" fill="#C1C6CD"/>
<path d="M0.5 9.66927C0.5 10.6787 1.32386 11.5026 2.33333 11.5026H18.3333C19.3428 11.5026 20.1667 10.6787 20.1667 9.66927C20.1667 8.6598 19.3428 7.83594 18.3333 7.83594H2.33333C1.32386 7.83594 0.5 8.6598 0.5 9.66927Z" fill="#C1C6CD" stroke="white"/>
</g>
<defs>
<clipPath id="clip0_1456_146365">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 921 B

10
res/img/element-icons/room/composer/rich_text.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1456_146350)">
<path d="M1 18.6667C1 19.4 1.6 20 2.33333 20H18.3333C19.0667 20 19.6667 19.4 19.6667 18.6667C19.6667 17.9333 19.0667 17.3333 18.3333 17.3333H2.33333C1.6 17.3333 1 17.9333 1 18.6667ZM7 11.7333H13.6667L14.5467 13.8667C14.7467 14.3467 15.2133 14.6667 15.7333 14.6667C16.6533 14.6667 17.2667 13.72 16.9067 12.88L11.7333 0.92C11.4933 0.36 10.9467 0 10.3333 0C9.72 0 9.17333 0.36 8.93333 0.92L3.76 12.88C3.4 13.72 4.02667 14.6667 4.94667 14.6667C5.46667 14.6667 5.93333 14.3467 6.13333 13.8667L7 11.7333ZM10.3333 2.64L12.8267 9.33333H7.84L10.3333 2.64Z" fill="#C1C6CD"/>
</g>
<defs>
<clipPath id="clip0_1456_146350">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

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={() => {

24
src/components/views/rooms/MessageComposerButtons.tsx
View File

@ -17,7 +17,7 @@ limitations under the License.
import classNames from 'classnames';
import { IEventRelation } from "matrix-js-sdk/src/models/event";
import { M_POLL_START } from "matrix-events-sdk";
import React, { createContext, ReactElement, useContext, useRef } from 'react';
import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from 'react';
import { Room } from 'matrix-js-sdk/src/models/room';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
@ -55,6 +55,9 @@ interface IProps {
toggleButtonMenu: () => void;
showVoiceBroadcastButton: boolean;
onStartVoiceBroadcastClick: () => void;
isComposerModeToggled: boolean;
showComposerModeButton: boolean;
onComposerModeClick: () => void;
}
type OverflowMenuCloser = () => void;
@ -85,6 +88,8 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
} else {
mainButtons = [
emojiButton(props),
props.showComposerModeButton &&
<ComposerModeButton key="composerModeButton" isToggled={props.isComposerModeToggled} onClick={props.onComposerModeClick} />,
uploadButton(), // props passed via UploadButtonContext
];
moreButtons = [
@ -397,4 +402,21 @@ function showLocationButton(
);
}
interface WysiwygToggleButtonProps {
isToggled: boolean;
onClick: MouseEventHandler<HTMLDivElement>;
}
function ComposerModeButton({ isToggled, onClick }: WysiwygToggleButtonProps) {
return <CollapsibleButton
className="mx_MessageComposer_button"
iconClassName={classNames({
"mx_MessageComposer_plain_text": !isToggled,
"mx_MessageComposer_rich_text": isToggled,
})}
onClick={onClick}
title={_t("Switch to plain text mode")}
/>;
}
export default MessageComposerButtons;

35
src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
View File

@ -15,32 +15,37 @@ limitations under the License.
*/
import React, { forwardRef, RefObject } from 'react';
import { FormattingFunctions } from '@matrix-org/matrix-wysiwyg';
import { useWysiwygSendActionHandler } from './hooks/useWysiwygSendActionHandler';
import { WysiwygComposer } from './components/WysiwygComposer';
import { PlainTextComposer } from './components/PlainTextComposer';
import { ComposerFunctions } from './types';
interface SendWysiwygComposerProps {
disabled?: boolean;
onChange: (content: string) => void;
onSend: () => void;
}
interface ContentProps {
disabled: boolean;
formattingFunctions: FormattingFunctions;
composerFunctions: ComposerFunctions;
}
const Content = forwardRef<HTMLElement, ContentProps>(
function Content({ disabled, formattingFunctions: wysiwyg }: ContentProps, forwardRef: RefObject<HTMLElement>) {
useWysiwygSendActionHandler(disabled, forwardRef, wysiwyg);
function Content({ disabled, composerFunctions }: ContentProps, forwardRef: RefObject<HTMLElement>) {
useWysiwygSendActionHandler(disabled, forwardRef, composerFunctions);
return null;
},
);
export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
return (
<WysiwygComposer className="mx_SendWysiwygComposer" {...props}>{ (ref, wysiwyg) => (
<Content disabled={props.disabled} ref={ref} formattingFunctions={wysiwyg} />
) }
</WysiwygComposer>);
interface SendWysiwygComposerProps {
isRichTextEnabled: boolean;
disabled?: boolean;
onChange: (content: string) => void;
onSend: () => void;
}
export function SendWysiwygComposer({ isRichTextEnabled, ...props }: SendWysiwygComposerProps) {
const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
return <Composer className="mx_SendWysiwygComposer" {...props}>
{ (ref, composerFunctions) => (
<Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
) }
</Composer>;
}

44
src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx Normal file
View File

@ -0,0 +1,44 @@
/*
Copyright 2022 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, { MutableRefObject, ReactNode } from 'react';
import { useComposerFunctions } from '../hooks/useComposerFunctions';
import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
import { ComposerFunctions } from '../types';
import { Editor } from "./Editor";
interface PlainTextComposerProps {
disabled?: boolean;
onChange?: (content: string) => void;
onSend: () => void;
initialContent?: string;
className?: string;
children?: (
ref: MutableRefObject<HTMLDivElement | null>,
composerFunctions: ComposerFunctions,
) => ReactNode;
}
export function PlainTextComposer({ className, disabled, onSend, onChange, children }: PlainTextComposerProps) {
const {ref, onInput, onPaste, onKeyDown} = usePlainTextListeners(onChange, onSend)
const composerFunctions = useComposerFunctions(ref)
return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
<Editor ref={ref} disabled={disabled} />
{children?.(ref, composerFunctions)}
</div>;
}

27
src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx Normal file
View File

@ -0,0 +1,27 @@
/*
Copyright 2022 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 { RefObject, useMemo } from "react";
export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
return useMemo(() => ({
clear: () => {
if (ref.current) {
ref.current.innerHTML = '';
}
},
}), [ref]);
}

2
src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
View File

@ -20,7 +20,7 @@ import { useCallback } from "react";
import { useSettingValue } from "../../../../../hooks/useSettings";
export function useInputEventProcessor(onSend: () => void) {
const isCtrlEnter = useSettingValue("MessageComposerInput.ctrlEnterToSend") as boolean;
const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
return useCallback((event: WysiwygInputEvent) => {
if (event instanceof ClipboardEvent) {
return event;

50
src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx Normal file
View File

@ -0,0 +1,50 @@
/*
Copyright 2022 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 { KeyboardEvent, SyntheticEvent, useCallback, useRef } from "react";
import { useInputEventProcessor } from "./useInputEventProcessor";
function isDivElement(target: EventTarget): target is HTMLDivElement {
return target instanceof HTMLDivElement;
}
export function usePlainTextListeners(onChange: (content: string) => void, onSend: () => void) {
const ref = useRef<HTMLDivElement>();
const send = useCallback((() => {
if (ref.current) {
ref.current.innerText = '';
}
onSend();
}), [ref, onSend]);
const inputEventProcessor = useInputEventProcessor(send);
const onInput = useCallback((event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
if (isDivElement(event.target)) {
onChange(event.target.innerText);
}
inputEventProcessor(event.nativeEvent);
}, [onChange, inputEventProcessor]);
const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'Enter') {
send();
}
}, [send]);
return { ref, onInput, onPaste: onInput, onKeyDown };
}

8
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
View File

@ -15,7 +15,6 @@ limitations under the License.
*/
import { RefObject, useCallback, useRef } from "react";
import { FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
import defaultDispatcher from "../../../../../dispatcher/dispatcher";
import { Action } from "../../../../../dispatcher/actions";
@ -23,11 +22,12 @@ import { ActionPayload } from "../../../../../dispatcher/payloads";
import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
import { useDispatcher } from "../../../../../hooks/useDispatcher";
import { focusComposer } from "./utils";
import { ComposerFunctions } from "../types";
export function useWysiwygSendActionHandler(
disabled: boolean,
composerElement: RefObject<HTMLElement>,
wysiwyg: FormattingFunctions,
composerFunctions: ComposerFunctions,
) {
const roomContext = useRoomContext();
const timeoutId = useRef<number>();
@ -45,12 +45,12 @@ export function useWysiwygSendActionHandler(
focusComposer(composerElement, context, roomContext, timeoutId);
break;
case Action.ClearAndFocusSendMessageComposer:
wysiwyg.clear();
composerFunctions.clear();
focusComposer(composerElement, context, roomContext, timeoutId);
break;
// TODO: case Action.ComposerInsert: - see SendMessageComposer
}
}, [disabled, composerElement, wysiwyg, timeoutId, roomContext]);
}, [disabled, composerElement, composerFunctions, timeoutId, roomContext]);
useDispatcher(defaultDispatcher, handler);
}

19
src/components/views/rooms/wysiwyg_composer/types.ts Normal file
View File

@ -0,0 +1,19 @@
/*
Copyright 2022 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.
*/
export type ComposerFunctions = {
clear: () => void;
};

49
src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
View File

@ -16,6 +16,8 @@ limitations under the License.
import { IContent, IEventRelation, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
import { htmlSerializeFromMdIfNeeded } from "../../../../../editor/serialize";
import SettingsStore from "../../../../../settings/SettingsStore";
import { RoomPermalinkCreator } from "../../../../../utils/permalinks/Permalinks";
import { addReplyToMessageContent } from "../../../../../utils/Reply";
@ -39,6 +41,19 @@ function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
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 htmlToPlainText(html: string) {
return new DOMParser().parseFromString(html, 'text/html').documentElement.textContent;
}
interface CreateMessageContentParams {
relation?: IEventRelation;
replyToEvent?: MatrixEvent;
@ -49,6 +64,7 @@ interface CreateMessageContentParams {
export function createMessageContent(
message: string,
isHTML: boolean,
{ relation, replyToEvent, permalinkCreator, includeReplyLegacyFallback = true, editedEvent }:
CreateMessageContentParams,
): IContent {
@ -56,6 +72,7 @@ export function createMessageContent(
const isEditing = Boolean(editedEvent);
const isReply = isEditing ? Boolean(editedEvent?.replyEventId) : Boolean(replyToEvent);
const isReplyAndEditing = isEditing && isReply;
/*const isEmote = containsEmote(model);
if (isEmote) {
@ -67,37 +84,43 @@ export function createMessageContent(
model = unescapeMessage(model);*/
// const body = textSerialize(model);
const body = message;
const body = isHTML && htmlToPlainText(message) || message;
const bodyPrefix = isReplyAndEditing && getTextReplyFallback(editedEvent) || '';
const formattedBodyPrefix = isReplyAndEditing && getHtmlReplyFallback(editedEvent) || '';
const content: IContent = {
// TODO emote
// msgtype: isEmote ? "m.emote" : "m.text",
msgtype: MsgType.Text,
body: body,
// TODO when available, use HTML --> Plain text conversion from wysiwyg rust model
body: isEditing ? `${bodyPrefix} * ${body}` : body,
};
// TODO markdown support
/*const formattedBody = htmlSerializeIfNeeded(model, {
forceHTML: !!replyToEvent,
useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
});*/
const formattedBody = message;
const isMarkdownEnabled = SettingsStore.getValue<boolean>("MessageComposerInput.useMarkdown");
const formattedBody =
isHTML ?
message :
isMarkdownEnabled ?
htmlSerializeFromMdIfNeeded(message, { forceHTML: isReply }) :
null;
if (formattedBody) {
content.format = "org.matrix.custom.html";
const htmlPrefix = isReply && isEditing ? getHtmlReplyFallback(editedEvent) : '';
content.formatted_body = isEditing ? `${htmlPrefix} * ${formattedBody}` : formattedBody;
content.formatted_body = isEditing ? `${formattedBodyPrefix} * ${formattedBody}` : formattedBody;
}
if (isEditing) {
content['m.new_content'] = {
"msgtype": content.msgtype,
"body": body,
"format": "org.matrix.custom.html",
'formatted_body': formattedBody,
};
if (formattedBody) {
content['m.new_content'].format = "org.matrix.custom.html";
content['m.new_content']['formatted_body'] = formattedBody;
}
}
const newRelation = isEditing ?

8
src/components/views/rooms/wysiwyg_composer/utils/message.ts
View File

@ -44,7 +44,8 @@ interface SendMessageParams {
}
export function sendMessage(
html: string,
message: string,
isHTML: boolean,
{ roomContext, mxClient, ...params }: SendMessageParams,
) {
const { relation, replyToEvent } = params;
@ -76,7 +77,8 @@ export function sendMessage(
if (!content) {
content = createMessageContent(
html,
message,
isHTML,
params,
);
}
@ -167,7 +169,7 @@ export function editMessage(
const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
}*/
const editContent = createMessageContent(html, { editedEvent });
const editContent = createMessageContent(html, true, { editedEvent });
const newContent = editContent["m.new_content"];
const shouldSend = true;

2
test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
View File

@ -163,7 +163,7 @@ describe('EditWysiwygComposer', () => {
// Then
const expectedContent = {
"body": mockContent,
"body": ` * ${mockContent}`,
"format": "org.matrix.custom.html",
"formatted_body": ` * ${mockContent}`,
"m.new_content": {

2
test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View File

@ -72,7 +72,7 @@ describe('SendWysiwygComposer', () => {
return render(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={defaultRoomContext}>
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} />
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={true} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);

18
test/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
View File

@ -40,11 +40,11 @@ describe('createMessageContent', () => {
it("Should create html message", () => {
// When
const content = createMessageContent(message, { permalinkCreator });
const content = createMessageContent(message, true, { permalinkCreator });
// Then
expect(content).toEqual({
"body": message,
"body": "hello world",
"format": "org.matrix.custom.html",
"formatted_body": message,
"msgtype": "m.text",
@ -53,11 +53,11 @@ describe('createMessageContent', () => {
it('Should add reply to message content', () => {
// When
const content = createMessageContent(message, { permalinkCreator, replyToEvent: mockEvent });
const content = createMessageContent(message, true, { permalinkCreator, replyToEvent: mockEvent });
// Then
expect(content).toEqual({
"body": "> <myfakeuser> Replying to this\n\n<i><b>hello</b> world</i>",
"body": "> <myfakeuser> Replying to this\n\nhello world",
"format": "org.matrix.custom.html",
"formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
" <a href=\"https://matrix.to/#/myfakeuser\">myfakeuser</a>"+
@ -77,11 +77,11 @@ describe('createMessageContent', () => {
rel_type: "m.thread",
event_id: "myFakeThreadId",
};
const content = createMessageContent(message, { permalinkCreator, relation });
const content = createMessageContent(message, true, { permalinkCreator, relation });
// Then
expect(content).toEqual({
"body": message,
"body": "hello world",
"format": "org.matrix.custom.html",
"formatted_body": message,
"msgtype": "m.text",
@ -110,16 +110,16 @@ describe('createMessageContent', () => {
event: true,
});
const content =
createMessageContent(message, { permalinkCreator, editedEvent });
createMessageContent(message, true, { permalinkCreator, editedEvent });
// Then
expect(content).toEqual({
"body": message,
"body": " * hello world",
"format": "org.matrix.custom.html",
"formatted_body": ` * ${message}`,
"msgtype": "m.text",
"m.new_content": {
"body": message,
"body": "hello world",
"format": "org.matrix.custom.html",
"formatted_body": message,
"msgtype": "m.text",

28
test/components/views/rooms/wysiwyg_composer/utils/message-test.ts
View File

@ -65,7 +65,7 @@ describe('message', () => {
describe('sendMessage', () => {
it('Should not send empty html message', async () => {
// When
await sendMessage('', { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
await sendMessage('', true, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
// Then
expect(mockClient.sendMessage).toBeCalledTimes(0);
@ -74,11 +74,15 @@ describe('message', () => {
it('Should send html message', async () => {
// When
await sendMessage(message, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
await sendMessage(
message,
true,
{ roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
);
// Then
const expectedContent = {
"body": "<i><b>hello</b> world</i>",
"body": "hello world",
"format": "org.matrix.custom.html",
"formatted_body": "<i><b>hello</b> world</i>",
"msgtype": "m.text",
@ -97,7 +101,7 @@ describe('message', () => {
});
// When
await sendMessage(message, {
await sendMessage(message, true, {
roomContext: defaultRoomContext,
mxClient: mockClient,
permalinkCreator,
@ -112,7 +116,7 @@ describe('message', () => {
});
const expectedContent = {
"body": "> <myfakeuser2> My reply\n\n<i><b>hello</b> world</i>",
"body": "> <myfakeuser2> My reply\n\nhello world",
"format": "org.matrix.custom.html",
"formatted_body": "<mx-reply><blockquote><a href=\"$$permalink$$\">In reply to</a>" +
" <a href=\"https://matrix.to/#/myfakeuser2\">myfakeuser2</a>" +
@ -130,7 +134,11 @@ describe('message', () => {
it('Should scroll to bottom after sending a html message', async () => {
// When
SettingsStore.setValue("scrollToBottomOnMessageSent", null, SettingLevel.DEVICE, true);
await sendMessage(message, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
await sendMessage(
message,
true,
{ roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
);
// Then
expect(spyDispatcher).toBeCalledWith(
@ -140,7 +148,11 @@ describe('message', () => {
it('Should handle emojis', async () => {
// When
await sendMessage('🎉', { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
await sendMessage(
'🎉',
false,
{ roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator },
);
// Then
expect(spyDispatcher).toBeCalledWith(
@ -203,7 +215,7 @@ describe('message', () => {
// Then
const { msgtype, format } = mockEvent.getContent();
const expectedContent = {
"body": newMessage,
"body": ` * ${newMessage}`,
"formatted_body": ` * ${newMessage}`,
"m.new_content": {
"body": "Replying to this new content",