Add styling to editing

This commit is contained in:
Florian Duros 2022-10-20 17:31:17 +02:00
parent 072c767b68
commit 5987a6889b
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
7 changed files with 55 additions and 8 deletions

View file

@ -565,7 +565,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
if (this.props.editState) {
const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
return isWysiwygComposerEnabled ?
<EditWysiwygComposer editorStateTransfer={this.props.editState} /> :
<EditWysiwygComposer editorStateTransfer={this.props.editState} className="mx_EventTile_content" /> :
<EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
}
const mxEvent = this.props.mxEvent;

View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import React, { forwardRef, RefObject } from 'react';
import classNames from 'classnames';
import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
import { WysiwygComposer } from './components/WysiwygComposer';
@ -38,16 +39,17 @@ interface EditWysiwygComposerProps {
disabled?: boolean;
onChange?: (content: string) => void;
editorStateTransfer: EditorStateTransfer;
className?: string;
}
export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiwygComposerProps) {
export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || Boolean(initialContent);
const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
return isReady && <WysiwygComposer
className="mx_EditWysiwygComposer"
className={classNames("mx_EditWysiwygComposer", className)}
initialContent={initialContent}
onChange={onChange}
onSend={editMessage}

View file

@ -26,7 +26,7 @@ interface EditionButtonsProps {
}
export function EditionButtons({ onCancelClick, onSaveClick, isSaveDisabled = false }: EditionButtonsProps) {
return <div className="mx_EditMessageComposer_buttons">
return <div className="mx_EditWysiwygComposer_buttons">
<AccessibleButton kind="secondary" onClick={onCancelClick}>
{ _t("Cancel") }
</AccessibleButton>