adding a rich text editor in next js with react-rte

Question

i am trying to add a rich text editor in nextjs what i choose is react-rte but i am getting error

Server Error
ReferenceError: window is not defined

i dont know what i did wrong i am trying to implement a simple rich text editor with h1 h2 h3 h4 h5 h6 and paragragh tag

import React, { Component } from "react";
// import RichTextEditor from "react-rte";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

class MyStatefulEditor extends Component {
  static propTypes = {
    onChange: PropTypes.func,
  };

  state = {
    value: RichTextEditor.createEmptyValue(),
  };

  onChange = (value) => {
    this.setState({ value });
    if (this.props.onChange) {
      // Send the changes up to the parent component as an HTML string.
      // This is here to demonstrate using `.toString()` but in a real app it
      // would be better to avoid generating a string on each change.
      this.props.onChange(value.toString("html"));
    }
  };

  render() {
    return <RichTextEditor value={this.state.value} onChange={this.onChange} />;
  }
}

Answer 1

I'm using this playground for the demo

You can look into this code snippet with some comments

import React, { Component } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
//import the component lazily (not module itself)
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

class MyStatefulEditor extends Component {
   constructor(props) {
       super(props)
       this.state = {}
   }

  static propTypes = {
    onChange: PropTypes.func,
  };

  //only trigger on the client-side
  componentDidMount = async () => {
    //import module on the client-side to get `createEmptyValue` instead of a component
    const module = await import("react-rte")
    this.setState({ 
        value: module.createEmptyValue(),
       })
  }

  onChange = (value) => {
    this.setState({ value });
    if (this.props.onChange) {
      this.props.onChange(value.toString("html"));
    }
  };

  render() {
    return <RichTextEditor value={this.state.value} onChange={this.onChange} />;
  }
}

export default MyStatefulEditor

Function-based component version

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
//import the component
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState();

  useEffect(() => {
    const importModule = async () => {
      //import module on the client-side to get `createEmptyValue` instead of a component
      const module = await import("react-rte");
      setValue(module.createEmptyValue());
    };
    importModule();
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func
};

export default MyStatefulEditor;

Answer 2

import dynamic from 'next/dynamic'
const RichTextEditor = dynamic(
  () => import('react-rte'),
  { ssr: false }
)