diff --git a/src/components/document-read-only-page/document-read-only-page.tsx b/src/components/document-read-only-page/document-read-only-page.tsx
index a035ded67..d919c4abc 100644
--- a/src/components/document-read-only-page/document-read-only-page.tsx
+++ b/src/components/document-read-only-page/document-read-only-page.tsx
@@ -22,6 +22,7 @@ import { ErrorWhileLoadingNoteAlert } from './ErrorWhileLoadingNoteAlert'
 import { LoadingNoteAlert } from './LoadingNoteAlert'
 import { RendererType } from '../render-page/rendering-message'
 import { useApplicationState } from '../../hooks/common/use-application-state'
+import { IframeEditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/iframe-editor-to-renderer-communicator-context-provider'
 
 export const DocumentReadOnlyPage: React.FC = () => {
   useTranslation()
@@ -37,32 +38,34 @@ export const DocumentReadOnlyPage: React.FC = () => {
   const noteDetails = useApplicationState((state) => state.noteDetails)
 
   return (
-    <div className={'d-flex flex-column mvh-100 bg-light'}>
-      <MotdBanner />
-      <AppBar mode={AppBarMode.BASIC} />
-      <div className={'container'}>
-        <ErrorWhileLoadingNoteAlert show={error} />
-        <LoadingNoteAlert show={loading} />
+    <IframeEditorToRendererCommunicatorContextProvider>
+      <div className={'d-flex flex-column mvh-100 bg-light'}>
+        <MotdBanner />
+        <AppBar mode={AppBarMode.BASIC} />
+        <div className={'container'}>
+          <ErrorWhileLoadingNoteAlert show={error} />
+          <LoadingNoteAlert show={loading} />
+        </div>
+        <ShowIf condition={!error && !loading}>
+          <DocumentInfobar
+            changedAuthor={noteDetails.lastChange.userName ?? ''}
+            changedTime={noteDetails.lastChange.timestamp}
+            createdAuthor={'Test'}
+            createdTime={noteDetails.createTime}
+            editable={true}
+            noteId={id}
+            viewCount={noteDetails.viewCount}
+          />
+          <RenderIframe
+            frameClasses={'flex-fill h-100 w-100'}
+            markdownContent={markdownContent}
+            onFirstHeadingChange={onFirstHeadingChange}
+            onFrontmatterChange={onFrontmatterChange}
+            rendererType={RendererType.DOCUMENT}
+          />
+        </ShowIf>
       </div>
-      <ShowIf condition={!error && !loading}>
-        <DocumentInfobar
-          changedAuthor={noteDetails.lastChange.userName ?? ''}
-          changedTime={noteDetails.lastChange.timestamp}
-          createdAuthor={'Test'}
-          createdTime={noteDetails.createTime}
-          editable={true}
-          noteId={id}
-          viewCount={noteDetails.viewCount}
-        />
-        <RenderIframe
-          frameClasses={'flex-fill h-100 w-100'}
-          markdownContent={markdownContent}
-          onFirstHeadingChange={onFirstHeadingChange}
-          onFrontmatterChange={onFrontmatterChange}
-          rendererType={RendererType.DOCUMENT}
-        />
-      </ShowIf>
-    </div>
+    </IframeEditorToRendererCommunicatorContextProvider>
   )
 }