diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx
index 6a9d12653..15d40dfa7 100644
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -75,7 +75,7 @@ type Props = WithTranslation &
 @observer
 class DocumentScene extends React.Component<Props> {
   @observable
-  editor = React.createRef<TEditor>();
+  editor: TEditor | null;
 
   @observable
   isUploading = false;
@@ -157,7 +157,7 @@ class DocumentScene extends React.Component<Props> {
   }
 
   replaceDocument = (template: Document | Revision) => {
-    const editorRef = this.editor.current;
+    const editorRef = this.editor;
 
     if (!editorRef) {
       return;
@@ -194,7 +194,7 @@ class DocumentScene extends React.Component<Props> {
     const { toasts, history, location, t } = this.props;
     const restore = location.state?.restore;
     const revisionId = location.state?.revisionId;
-    const editorRef = this.editor.current;
+    const editorRef = this.editor;
 
     if (!editorRef || !restore) {
       return;
@@ -380,7 +380,7 @@ class DocumentScene extends React.Component<Props> {
     this.getEditorText = getEditorText;
 
     // Keep headings in sync for table of contents
-    const headings = this.editor.current?.getHeadings() ?? [];
+    const headings = this.editor?.getHeadings() ?? [];
     if (
       headings.map((h) => h.level + h.title).join("") !==
       this.headings.map((h) => h.level + h.title).join("")
@@ -389,7 +389,7 @@ class DocumentScene extends React.Component<Props> {
     }
 
     // Keep derived task list in sync
-    const tasks = this.editor.current?.getTasks();
+    const tasks = this.editor?.getTasks();
     const total = tasks?.length ?? 0;
     const completed = tasks?.filter((t) => t.completed).length ?? 0;
     document.updateTasks(total, completed);
@@ -427,6 +427,11 @@ class DocumentScene extends React.Component<Props> {
     }
   };
 
+  handleRef = (ref: TEditor | null) => {
+    this.editor = ref;
+    this.headings = this.editor?.getHeadings() ?? [];
+  };
+
   render() {
     const {
       document,
@@ -581,7 +586,7 @@ class DocumentScene extends React.Component<Props> {
                   <Editor
                     id={document.id}
                     key={embedsDisabled ? "disabled" : "enabled"}
-                    ref={this.editor}
+                    ref={this.handleRef}
                     multiplayer={collaborativeEditing}
                     shareId={shareId}
                     isDraft={document.isDraft}