Support for SSR about react-editor-js HOT 22 OPEN

import loadable from '@loadable/component'
const EditorJs = loadable(() => import('~/utils/editors'))

import React, { useEffect, useRef, useState } from 'react';
import EditorJs from 'react-editor-js';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
const EDITOR_JS_TOOLS = {
  paragraph: {
    class: Paragraph,
    inlineToolbar: true,
  },
  list: {
    class: List,
    inlineToolbar: true,
  },
};
export default ({
  id,
  label,
  labelStyle,
  editorContainerStyle,
  getValue,
  Data,
}) => {
  const instanceRef = useRef(null);
  async function handleSave() {
    // const savedData = await
    instanceRef.current
      .save()
      .then((outputData) => {
        function replaceAll(str, find, replace) {
          function escapeRegExp(string) {
            return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
          }
          return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
        }
        let stringData = JSON.stringify(outputData);
        let formattedData = replaceAll(stringData,'<b>','<strong>');
        formattedData = replaceAll(stringData, '<b/>', '<strong/>');
        getValue(formattedData);
      })
      .catch((error) => {
        console.log('Saving failed: ', error);
      });
  }
  console.log(Data)
  return (
    <div>
      <style global jsx>
        {`
          .ce-block__content {
            max-width: 100%;
            margin: 0 5rem;
          }
          .ce-toolbar__content {
            max-width: 100%;
            margin: 0 3.5rem;
            position: relative;
          }
          .editor-style {
            border-radius: 0.25rem;
            border-color: #ced4da;
          }
        `}
      </style>
      <label
        htmlFor={id}
        className={
          typeof labelStyle === 'undefined' || labelStyle === null
            ? `label-style`
            : `label-style {labelStyle}`
        }>
        {label}
      </label>
      <div
        className={`border rounded ${
          typeof editorContainerStyle !== undefined
            ? editorContainerStyle
            : null
        }`}>
        <EditorJs
          holder={id}
          instanceRef={(instance) => (instanceRef.current = instance)}
          data={
            typeof Data === 'string' && Data.length !== 0
              ? console.log(JSON.parse(Data))
              : Data
          }
          onChange={(e) => handleSave(e)}
          tools={EDITOR_JS_TOOLS}>
          <div id={id} />
        </EditorJs>
      </div>
    </div>
  );
};

const ReactEditorJS = createReactEditorJS();

<ReactEditorJS holder="ssrHolder" /> // works fine!

Server Error

ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

import dynamic from "next/dynamic";

const EditorJs = dynamic(() => import("react-editor-js"));
// Use EditorJs as component

"use client";
import { createReactEditorJS } from "react-editor-js";
import { EDITOR_JS_TOOLS } from "./tools";
import { useEffect } from "react";
import ReactDOM from "react-dom";
const ReactEditorJS = createReactEditorJS();
function Editor({ blocks }: any) {
  useEffect(() => {
    const holder = document.getElementById("holder");
    if (!holder) return;
    const Editor = (
      <ReactEditorJS
        tools={EDITOR_JS_TOOLS}
        defaultValue={blocks}
        placeholder={`Write from here...`}
        minHeight={900}
        inlineToolbar={true}
      />
    );
    const portalElement = ReactDOM.createPortal(Editor, holder);
    // @ts-ignore
    ReactDOM.createRoot(holder).render(portalElement);
  }, [blocks]);
  return <></>;
}

export default Editor;