perf(ckeditor): only render if defaultData.shouldOverrideRand changes

snek-at · Sep 15, 2021 · 61361dc · 61361dc
1 parent 5f7099e
commit 61361dc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 72 deletions.
diff --git a/examples/my-gatsby-site/src/pages/index.js b/examples/my-gatsby-site/src/pages/index.js
@@ -203,7 +203,7 @@ const IndexPage = () => {
                 <div style={descriptionStyle}>
                   <fields.TextField
                     fieldName={`linkfield${index}`}
-                    initValue={link.description}
+                    initValue={`<p>${link.description}</p>`}
                   />
                 </div>
               </span>
@@ -212,35 +212,6 @@ const IndexPage = () => {
         </ul>
       </RevertCSSWrapper>
 
-      {/* <Button>test</Button> */}
-      {/* <fields.StreamField fieldName="streamfield1" initValue={{
-        0: {
-          typeName: "TestBlock",
-          fields: {
-            body: {
-              _type: "TextBlock",
-              text: "<p>This should resolve the window is not defined error and you should be able to build your code successfully. If you need more information regarding this, check the Gatsby documentation on Debugging HTML Builds.</p>"
-            },
-            body2: {
-              _type: "TextBlock",
-              text: "<p>02</p>"
-            }
-          }
-        },
-        1: {
-          typeName: "TestBlock",
-          fields: {
-            body: {
-              _type: "TextBlock",
-              text: "<p>11</p>"
-            },
-            body2: {
-              _type: "TextBlock",
-              text: "<p>12</p>"
-            }
-          }
-        }
-      }} blocks={[TestBlock, AirbnbBlock]}/> */}
       <fields.IndexField
         onRender={page => (
           <div>tsetsiasihfasjhfjkshs {Object.keys(page.children)}</div>

diff --git a/packages/jaen-pages/src/containers/Editor/index.tsx b/packages/jaen-pages/src/containers/Editor/index.tsx
@@ -18,10 +18,9 @@ const LoadableCKEditor = loadable(() => import('@ckeditor/ckeditor5-react'), {
 })
 
 type EditorProps = {
-  data: string
+  defaultData: {value: string; shouldOverrideRand?: number}
   editing: boolean
   disableToolbar: boolean
-  toolbarType: 'inline' | 'balloon'
   onChange: (data: string) => void
 }
 
@@ -31,7 +30,7 @@ const Editor: React.FC<EditorProps> = props => {
   const raw = (
     <Box
       className="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline"
-      dangerouslySetInnerHTML={{__html: props.data}}
+      dangerouslySetInnerHTML={{__html: props.defaultData.value}}
     />
   )
 
@@ -49,8 +48,6 @@ const Editor: React.FC<EditorProps> = props => {
 
   React.useEffect(() => {
     async function load() {
-      console.log('call', !BalloonEditor, props.editing)
-
       if (!BalloonEditor && props.editing) {
         BalloonEditor = await import('@ckeditor/ckeditor5-build-balloon')
 
@@ -59,7 +56,7 @@ const Editor: React.FC<EditorProps> = props => {
     }
 
     load()
-  }, [props.editing])
+  })
 
   return (
     <EditorWrapper>
@@ -69,7 +66,7 @@ const Editor: React.FC<EditorProps> = props => {
           //@ts-ignore
           editor={editor?.default}
           config={editorConfig}
-          data={props.data}
+          data={props.defaultData.value}
           //@ts-ignore
           onChange={(event, editor) => {
             const data = editor.getData()
@@ -86,29 +83,8 @@ const Editor: React.FC<EditorProps> = props => {
   )
 }
 
-// // A custom React Hook for using CKEditor with SSR
-// // particularly with NextJS.
-// // https://ckeditor.com | https://nextjs.org
-
-// export function useCKEditor() {
-//   const editorRef = useRef()
-//   const [isEditorLoaded, setIsEditorLoaded] = useState(false)
-//   const {CKEditor, InlineEditor} = editorRef.current || {}
-
-//   useEffect(() => {
-//     editorRef.current = {
-//       // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
-//       CKEditor: require('@ckeditor/ckeditor5-react').CKEditor, // v3+
-//       InlineEditor: require('@ckeditor/ckeditor5-build-inline')
-//     }
-//     setIsEditorLoaded(true)
-//   }, [])
-
-//   return Object.freeze({
-//     isEditorLoaded,
-//     CKEditor,
-//     InlineEditor
-//   })
-// }
-
-export default Editor
+export default React.memo(
+  Editor,
+  (prev, next) =>
+    prev.defaultData.shouldOverrideRand === next.defaultData.shouldOverrideRand
+)
diff --git a/packages/jaen-pages/src/containers/fields/TextField/index.tsx b/packages/jaen-pages/src/containers/fields/TextField/index.tsx
@@ -98,16 +98,17 @@ const TextField: React.FC<TextFieldProps> = ({
     }
   }
 
+  // random Id
+  const resetEditorReset =
+    ((contextValue || initValue) === value && Math.random()) || undefined
+
   return (
-    <>
-      <Editor
-        data={value}
-        editing={isEditing}
-        onChange={handleOnChange}
-        disableToolbar={!rtf}
-        toolbarType={toolbar}
-      />
-    </>
+    <Editor
+      defaultData={{value, shouldOverrideRand: resetEditorReset}}
+      editing={isEditing}
+      onChange={handleOnChange}
+      disableToolbar={!rtf}
+    />
   )
 }