Utils

In the render rich text editor page, we have discussed how to destructure and use output and fetchOutput from the useRichTextEditor hook. In addition to these, you can also destructure utils and fetchUtils.

Here's how to do it:

// import RichTextEditor component & useRichTextEditor hook
 
export default function Demo() {
 
  const { utils, fetchUtils } = useRichTextEditor();
 
  return (
 
    <RichTextEditor
 
      fetchUtils={fetchUtils}
 
      // ...
    />
 
    // ...
  )
 
}

Passing fetchUtils to RichTextEditor Component

The "RichTextEditor" component accepts a fetchUtils prop. To this prop, pass the fetchUtils you've destructured from "useRichTextEditor" hook.

Working with utils

The utils object provides several utility functions for enhanced control over the Rich Text Editor:

• resetEditor: This function clears the editor's content. It's useful in your submit handler to reset the editor after a successful submission. To use it, call utils.resetEditor().

• focusOnEditor: This function allows you to set focus to the editor programmatically. To use it, call utils.focusOnEditor().

• removeFocusFromEditor: To remove focus from the editor, use utils.removeFocusFromEditor().