From a511fbdfb4a44c7b7fe86ba103861df9cfdfd5a0 Mon Sep 17 00:00:00 2001
From: Emma Fabre <ehtnam6@gmail.com>
Date: Fri, 10 Mar 2023 11:48:49 +0100
Subject: [PATCH] Prevent Draft-related libraries from crashing when rendered
 server-side

See:
https://github.com/jpuri/react-draft-wysiwyg/issues/920
https://github.com/jpuri/html-to-draftjs/issues/78
---
 src/pages/RichTextEditor.tsx                        | 11 ++++++-----
 .../AdditionalInformationStep/DescriptionStep.tsx   | 13 ++++---------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/pages/RichTextEditor.tsx b/src/pages/RichTextEditor.tsx
index 4ef94be11..2b988b139 100644
--- a/src/pages/RichTextEditor.tsx
+++ b/src/pages/RichTextEditor.tsx
@@ -1,12 +1,13 @@
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
-import { Editor } from 'react-draft-wysiwyg';
+import dynamic from 'next/dynamic';
 
-function RichTextEditor({ editorState, onInput, onBlur }) {
-  if (typeof window === 'undefined') {
-    return null;
-  }
+const Editor = dynamic(
+  () => import('react-draft-wysiwyg').then(({ Editor }) => Editor),
+  { ssr: false },
+);
 
+function RichTextEditor({ editorState, onInput, onBlur }) {
   return (
     <div style={{ background: 'white', borderRadius: 10, padding: 10 }}>
       <Editor
diff --git a/src/pages/steps/AdditionalInformationStep/DescriptionStep.tsx b/src/pages/steps/AdditionalInformationStep/DescriptionStep.tsx
index 3e7f731e8..594fc2bd4 100644
--- a/src/pages/steps/AdditionalInformationStep/DescriptionStep.tsx
+++ b/src/pages/steps/AdditionalInformationStep/DescriptionStep.tsx
@@ -18,17 +18,12 @@ import { Breakpoints } from '@/ui/theme';
 import { TabContentProps, ValidationStatus } from './AdditionalInformationStep';
 import RichTextEditor from '@/pages/RichTextEditor';
 import draftToHtml from 'draftjs-to-html';
-import {
-  ContentState,
-  convertFromRaw,
-  convertToRaw,
-  EditorState,
-  RawDraftContentState,
-} from 'draft-js';
-import { raw } from '@storybook/react';
+import { ContentState, convertToRaw, EditorState } from 'draft-js';
 import { getLanguageObjectOrFallback } from '@/utils/getLanguageObjectOrFallback';
 import { SupportedLanguage } from '@/i18n/index';
-import htmlToDraft from 'html-to-draftjs';
+
+const htmlToDraft =
+  typeof window === 'object' && require('html-to-draftjs').default;
 
 const IDEAL_DESCRIPTION_LENGTH = 200;