Don't SSR example editor on website. (facebookarchive#2356)

Summary: There's suspicion the example editor fails in prod because of an SSR error, so lets not SSR-it. Also upgrades draft to the latest version on npm. Pull Request resolved: facebookarchive#2356 Test Plan: `yarn start`, played around with the editor. Reviewed By: claudiopro Differential Revision: D20532633 Pulled By: mrkev fbshipit-source-id: 934427d2e1a35232ee9f12632e539817a1f2eaa8
mmissey · Mar 24, 2020 · 058c1de · 058c1de
1 parent 559c795
commit 058c1de
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1,246 deletions.
diff --git a/website/package.json b/website/package.json
@@ -9,7 +9,7 @@
     "@docusaurus/core": "^2.0.0-alpha.36",
     "@docusaurus/preset-classic": "^2.0.0-alpha.36",
     "classnames": "^2.2.6",
-    "draft-js": "^0.11.3",
+    "draft-js": "^0.11.4",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
   },

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -17,6 +17,14 @@ import classnames from 'classnames';
 import DraftEditorExample from '../components/DraftEditorExample';
 import styles from './styles.module.css';
 
+/** Won't render children on server */
+function ClientOnly({children, fallback}) {
+  if (typeof window === 'undefined') {
+    return fallback || null;
+  }
+  return children;
+}
+
 function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
@@ -74,9 +82,9 @@ function Home() {
                   target="_blank"
                   rel="noreferrer noopener">
                   immutable-js
-                </a>, offering an API with functional state updates and
-                aggressively leveraging data persistence for scalable memory
-                usage.
+                </a>
+                , offering an API with functional state updates and aggressively
+                leveraging data persistence for scalable memory usage.
               </p>
             </div>
           </div>
@@ -87,15 +95,17 @@ function Home() {
             'margin-vert--xl',
             styles.hideOnTabletAndSmaller,
           )}>
-          <div className="col col--6 col--offset-3">
-            <h2>Try it out!</h2>
-            <p>
-              Here's a simple example of a rich text editor built in Draft.js.
-            </p>
-            <div id="rich-example">
-              <DraftEditorExample />
+          <ClientOnly fallback={null}>
+            <div className="col col--6 col--offset-3">
+              <h2>Try it out!</h2>
+              <p>
+                Here's a simple example of a rich text editor built in Draft.js.
+              </p>
+              <div id="rich-example">
+                <DraftEditorExample />
+              </div>
             </div>
-          </div>
+          </ClientOnly>
         </div>
         <div className="margin-vert--xl text--center">
           <Link