Server side renderring of React-draft-wysiwyg

[fangqiao]

Hi, This react editor is great. I am trying to use it with a product I am developing with Nextjs, a server side react renderring framework.

This component could be rendered at server side then loaded in browser correctly.

However, the toolbars wouldn't work. And there is such warning: Warning: Propdata-offset-keydid not match. Server: "fk18m-0-0" Client: "boajl-0-0"

My code is simple:

function uploadImageCallBack(file) {
  return new Promise(
    (resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'https://api.imgur.com/3/image');
      xhr.setRequestHeader('Authorization', 'Client-ID XXXXX');
      const data = new FormData();
      data.append('image', file);
      xhr.send(data);
      xhr.addEventListener('load', () => {
        const response = JSON.parse(xhr.responseText);
        resolve(response);
      });
      xhr.addEventListener('error', () => {
        const error = JSON.parse(xhr.responseText);
        reject(error);
      });
    }
  );
}

const EditorImage = () => (
  <Editor
    wrapperClassName="demo-wrapper"
    editorClassName="demo-editor"
    toolbar={{
      inline: { inDropdown: true },
      list: { inDropdown: true },
      textAlign: { inDropdown: true },
      link: { inDropdown: true },
      history: { inDropdown: true },
      image: { uploadCallback: uploadImageCallBack, alt: { present: true, mandatory: true } },
    }}
  />
);

export default withRouter((props) => (
    <Layout>
       <div className="editorWrapper">
          <EditorImage/>
       </div>
    </Layout>
)

Is there a correct way to use your component with server side renderring? Thanks

[wubin1989]

I have the same problem. Any solution?

[caobaloc12]

Similar problem. I tried to simplify the toolbar but it doesn't work. It keeps using default toolbar.

[maxgfr]

+1