sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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
18 changed files with 315 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/rooms/MessageComposer.tsx
+26 -5
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={() => {
src/components/views/rooms/MessageComposerButtons.tsx
+23 -1
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;
src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
+19 -14
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} />
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} />
) }
</WysiwygComposer>);
</Composer>;
}
src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+44
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>;
}
src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.tsx
+27
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]);
}
src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+1 -1
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;
src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.tsx
+50
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 };
}
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
+4 -4
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);
}
src/components/views/rooms/wysiwyg_composer/types.ts
+19
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;
};
src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+36 -13
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 ?
src/components/views/rooms/wysiwyg_composer/utils/message.ts
+5 -3
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;