How to set the internal state to an empty string when using mui-rte for a chat message input

Question

I am using mui-rte, which is a nice Material-ui wrapper around draftjs:

I want to use MUIRichTextEditor for the input field for a web chat client. I have hit a roadblock on how to set the internal state to an empty string after hitting the send button. The RTE editor component looks like this:

import React, {useState, useEffect} from "react";
import MUIRichTextEditor from "mui-rte";
import {convertToRaw, EditorState} from 'draft-js'
import {stateFromMarkdown} from "draft-js-import-markdown";
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme, useTheme} from '@material-ui/core/styles';

const local_theme_overrides = {
    overrides: {
        MUIRichTextEditor: {
            root: {
                marginTop: 20,
                width: "80%"
            },
            editor: {
                border: "1px solid gray",
                borderRadius: 4
            }
        }
    }
};

export default function RichTextEditor(props)
{
    const { initialValue, onChange, ...rest } = props;
    const [initial, setInitial] = useState('');

    useEffect(() => {
        const init_state = EditorState.createWithContent(stateFromMarkdown(initialValue));
        setInitial(JSON.stringify(convertToRaw(init_state.getCurrentContent())));
        onChange(init_state);
    }, []);

    const theme = useTheme();
    const [localTheme, setLocalTheme] = useState(theme);

    useEffect(() => {
        setLocalTheme(Object.assign({...theme}, local_theme_overrides));
    }, []);

    return (
        <ThemeProvider theme={localTheme}>
            <MUIRichTextEditor
                onChange={onChange}
                value={initial}
                {...rest}
            >
            </MUIRichTextEditor>
        </ThemeProvider>
    );
}

The parent uses the field like this:

const [message_content, setMessageContent] = useState('');

function sendMessage() {
    if (message_content === '')
        return;
    let rte_markdown = stateToMarkdown(message_content.getCurrentContent());
    channel.sendMessage(rte_markdown);
    // I would like to reset or re-render the mui-tre component after sending the message
    //setMessageContent('');
}

.....
<RichTextEditor
    label={"Write a message to " + name}
    initialValue={''}
    onChange={data => setMessageContent(data)}
    placeholder={"Write a message to " + name}
    controls={[]}
/>

<Button
        autoFocus
        onClick={() => sendMessage()}
        disabled={message_content === ''}
>
     Send
</Button>

When the sent button is pressed the message gets deliver to the chat channel but I am falling short of being able to re-set or force re-render of the RTE component. Any ideas on how to do that?

score 1 · Answer 1 · answered Apr 14 '20 at 04:23

You can set the value property of the MUI text editor to an empty content state. The state has to be stringified and raw.

One way is to import the EditorState object and convertToRaw method from the draft-js library (which mui-rte is built on):

import { EditorState, convertToRaw } from 'draft-js'

const emptyContentState = JSON.stringify(
    convertToRaw(EditorState.createEmpty().getCurrentContent())

<MUIRichTextEditor value={emptyContentState} />

How to set the internal state to an empty string when using mui-rte for a chat message input

1 Answers1