diff --git a/examples/my-gatsby-site/src/pages/index.js b/examples/my-gatsby-site/src/pages/index.js
index 15a2a284..b01e9ff2 100644
--- 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
index f7198816..ba505cc9 100644
--- 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
index c359ea05..77e052fc 100644
--- 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}
+    />
   )
 }