onChange restarting the cursor from the beginning about mui-rte

[Abinaskarki]

perfect. Thank you so much.

[niuware]

Hi @Abinaskarki, every time you change the value property you are actually resetting the editor. If you need to get the content of the editor on every change, you may use the onChange property but there is no need to assign the value again as the state of the component has been already updated internally.

Hope this helps you :)

[Abinaskarki]

Hi @niuware, thank you for your response. If I don't have onChange property then, how would I access the content inside MUITextEditor when a button is clicked?

[niuware]

If I understand correctly, you have some choices:

1. You can keep updating the state of your own component using the MUIRichTextEditor component onChange property, but there is no need to set the value property again. (Use value property only when you want to load some default content).

2. If you just want to get the last state of the editor, you can trigger the save event by reference as shown here.

Does this helps you out?

[Abinaskarki]

Hi @niuware, sorry for the confusion. What I want to do is basically I will write something on a MUITextEditor and I have a button which should get the data written in MUITextEditor when clicked and do something. The only problem is that since I am not using onChange then, the content value in state is not updated and i am getting content from state. Is there another way to get text inside the MUITextEditor?

here is my code for the button;

const handleSubmit = () => {
  const { content } = post;
  const answerData = {
    content,
    questionId: props.questionId
  };
  props.postAnswer(answerData);
};

<Button
color="secondary"
variant="outlined"
className="w-1/4"
onClick={handleSubmit}
disabled={loading}
>
Post
</Button>

Updated Code Using onSave

  const ref = useRef();
  const handleSave = data => {
    setPost({ ...post, content: data });
    console.log(post.content);
  };
  const handleSubmit = () => {
    ref.current.save();
    const { content } = post;
    const answerData = {
      content,
      questionId: props.questionId
    };

    props.postAnswer(answerData);
  };
            <MUIRichTextEditor
              label="Write your aswer..."
              onSave={handleSave}
              ref={ref}
              controls={[
                'bold',
                'italic',
                'underline',
                'highlight',
                'link',
                'media',
                'numberList',
                'bulletList',
                'quote'
              ]}
              inlineToolbar={true}
            />
button is not changed.

[niuware]

In that case, what about doing something like this:

const [post, setPost] = useState({
    content: {},
    answer_errors: {},
    open: false,
    errors: null
});

const handleChange = prop => event => {
    setPost({
        ...post,
        [prop]: event
    });
};

const handleSubmit = () => {
    const { content } = post;
    const answerData = {
        content: JSON.stringify(convertToRaw(content.getCurrentContent())),
        questionId: props.questionId
    };
    props.postAnswer(answerData);
};

<Button
    color="secondary"
    variant="outlined"
    className="w-1/4"
    onClick={handleSubmit}
    disabled={loading}
>
    Post
</Button>

<MUIRichTextEditor
    label="Write your aswer..."
    controls={[
        'bold',
        'italic',
        'underline',
        'highlight',
        'link',
        'media',
        'numberList',
        'bulletList',
        'quote'
    ]}
    inlineToolbar={true}
    onChange={handleChange('content')}
/>;

[Abinaskarki]

Thank you. However, it gave me an error. But, I think i figured out the solution. Now, I don't know how to check if 'data' in handleSave is empty or not because I don't want to post anything empty.

Code:

  const [post, setPost] = useState({
    content: {},
    answer_errors: {},
    open: false,
    errors: null
  });
  const ref = useRef();
const handleSave = (data: string) => {
    const answerData = { content: data, questionId: props.questionId };

    const { answer_errors, valid } = validatePostAnswer(answerData.content);
    setPost({ ...post, answer_errors });

    if (!valid) {
      return;
    }
    props.postAnswer(answerData);
  };

  const handleSubmit = () => {
    ref.current.save();
  };
<MUIRichTextEditor
              label="Write your aswer..."
              onSave={handleSave}
              ref={ref}
              controls={[
                'bold',
                'italic',
                'underline',
                'highlight',
                'link',
                'media',
                'numberList',
                'bulletList',
                'quote'
              ]}
              inlineToolbar={true}
            />

This works perfectly. But, i don't know how to check empty on data of handleSave.

[niuware]

Just convert it back to a ContentState object:

const handleSave = (data: string) => {
    const content = convertFromRaw(JSON.parse(data))
    if (!content.hasText()) {
        console.log("empty")
    }
}

[helloncanella]

@niuware, you are right. If you don't change the value prop, the component isn't reset.

But here a suggestion: replace the name of value prop to defaultValue, to make it clear it is necessary to assign value only once.

Or at least, make available a defaultValue in the API.

[niuware]

@niuware, you are right. If you don't change the value prop, the component isn't reset.

But here a suggestion: replace the name of value prop to defaultValue, to make it clear it is necessary to assign value only once.

Or at least, make available a defaultValue in the API.

Thanks @helloncanella, I will take this in mind for next version.

[efikuta]

Another Solution is using ref with onBlur to raise the save Event.
In this solution we making the text editor semi - controlled component, which handled it`s own state.

An Example:

const textEditorRef = useRef();
const [bodyHTML, setBodyHTML] = useState('');

const contentHTML = convertFromHTML(bodyHTML);
const stateHtml = ContentState.createFromBlockArray(
  contentHTML.contentBlocks,
  contentHTML.entityMap
);

const handleSave = (data) => {
    const content = convertFromRaw(JSON.parse(data))
    if (!content.hasText()) {
          console.log("empty")
    }
   setBodyHTML(stateToHTML(content));
}

<MUIRichTextEditor
                  ref={textEditorRef}
                  inlineToolbar={true}
                  defaultValue={JSON.stringify(convertToRaw(stateHtml))}
                  onSave={handleSave}
                  onBlur={() => { textEditorRef.current.save(); }}
                />