diff --git a/frontend/src/components/loading_spinner.tsx b/frontend/src/components/loading_spinner.tsx
index 0afe75c5..ed2dd1c0 100644
--- a/frontend/src/components/loading_spinner.tsx
+++ b/frontend/src/components/loading_spinner.tsx
@@ -25,13 +25,7 @@ export function LoadingSpinner({
   );
 }
 
-export function LoadingBee({
-  className,
-  size = 20,
-}: {
-  className?: string;
-  size?: number;
-}) {
+export function LoadingBee({ className, size = 20 }: { className?: string; size?: number }) {
   return (
     <div
       style={{
@@ -40,17 +34,9 @@ export function LoadingBee({
       }}
       aria-label="Loading"
       role="status"
-      className={clsx(
-        'animate-spin-slow flex flex-col items-center',
-        className,
-      )}
+      className={clsx('animate-spin-slow flex flex-col items-center', className)}
     >
-      <img src="/favicon.svg"
-      className={clsx(
-        'w-1/3 h-1/3 flex-none',
-        className,
-      )}
-      />
+      <img src="/favicon.svg" className={clsx('w-1/3 h-1/3 flex-none', className)} />
     </div>
   );
 }
diff --git a/frontend/src/editor/automerge_websocket_editor.ts b/frontend/src/editor/automerge_websocket_editor.ts
index 3e657f8e..5c0bc928 100644
--- a/frontend/src/editor/automerge_websocket_editor.ts
+++ b/frontend/src/editor/automerge_websocket_editor.ts
@@ -24,7 +24,7 @@ export function useAutomergeWebsocketEditor(
     editor: Editor;
     initialValue: Paragraph[];
   }>(null);
-  const editorRef = useRef<null | Editor>(null);
+  const editorRef = useRef<undefined | Editor>();
   if (editorRef.current !== editorAndInitialValue?.editor)
     editorRef.current = editorAndInitialValue?.editor;
   const wsRef = useRef<ReconnectingWebSocket | null>(null);
diff --git a/frontend/src/editor/transcription_editor.tsx b/frontend/src/editor/transcription_editor.tsx
index 2ad619be..46c65537 100644
--- a/frontend/src/editor/transcription_editor.tsx
+++ b/frontend/src/editor/transcription_editor.tsx
@@ -264,6 +264,7 @@ export function TranscriptionEditor({
               <Editable
                 renderElement={Paragraph}
                 renderLeaf={renderLeaf}
+                readOnly={readOnly}
                 onClick={(e: React.MouseEvent) => {
                   const { selection } = editor;
 
@@ -281,14 +282,14 @@ export function TranscriptionEditor({
                 }}
                 className={clsx('2xl:-ml-20')}
               />
-              </ErrorBoundary>
+            </ErrorBoundary>
             <PlayerBar documentId={documentId} editor={editor} />
           </SpeakerColorsProvider>
         </Slate>
       ) : (
         <>
           <div className={clsx('grow-[2] flex items-center justify-center w-full h-full')}>
-              <LoadingBee size={200} className="" />
+            <LoadingBee size={200} className="" />
           </div>
           <div className="grow-[2] flex" />
         </>
diff --git a/frontend/src/pages/document.tsx b/frontend/src/pages/document.tsx
index 8d29f684..cc39c40f 100644
--- a/frontend/src/pages/document.tsx
+++ b/frontend/src/pages/document.tsx
@@ -9,7 +9,6 @@ import { updateDocument, useGetDocument } from '../api/document';
 import { TbFileExport, TbShare3 } from 'react-icons/tb';
 import { Suspense, lazy, useState, useCallback } from 'react';
 import { useDebugMode } from '../debugMode';
-import clsx from 'clsx';
 import { useAutomergeWebsocketEditor } from '../editor/automerge_websocket_editor';
 import { showModal } from '../components/modal';
 import { Input } from '../components/form';
@@ -130,15 +129,15 @@ export function DocumentPage({
 
   const [editor, initialValue] = useAutomergeWebsocketEditor(url, {
     onInitialSyncComplete: () => {
-      if (editor) {
-        const isNewDocument =
-          editor.doc.version === undefined &&
-          editor.doc.children === undefined &&
-          editor.doc.speaker_names === undefined;
-        if (!isNewDocument && editor.doc.version !== 2) {
-          alert('The document is in an unsupported version.');
-          navigate('/');
-        }
+      if (!editor) return;
+
+      const isNewDocument =
+        editor.doc.version === undefined &&
+        editor.doc.children === undefined &&
+        editor.doc.speaker_names === undefined;
+      if (!isNewDocument && editor.doc.version !== 2) {
+        alert('The document is in an unsupported version.');
+        navigate('/');
       }
     },
   });
@@ -180,20 +179,21 @@ export function DocumentPage({
               icon={TbShare3}
               label={'share...'}
               onClick={() => {
-                editor &&
-                  showModal(<ShareModal editor={editor} onClose={() => showModal(null)} />);
+                showModal(<ShareModal documentId={documentId} onClose={() => showModal(null)} />);
+              }}
+            />
+          )}
+          {editor && (
+            <IconButton
+              icon={TbFileExport}
+              label={'export...'}
+              onClick={() => {
+                showModal(
+                  <ExportModal editor={editor} onClose={() => showModal(null)} document={data} />,
+                );
               }}
             />
           )}
-          <IconButton
-            icon={TbFileExport}
-            label={'export...'}
-            onClick={() => {
-              showModal(
-                <ExportModal editor={editor} onClose={() => showModal(null)} document={data} />,
-              );
-            }}
-          />
           <WorkerStatus documentId={documentId} />
           {isLoggedIn && <MeButton />}
         </TopBarPart>
@@ -203,11 +203,11 @@ export function DocumentPage({
         editor={editor}
         documentId={documentId}
         initialValue={initialValue}
-        className={"grow flex flex-col"}
+        className={'grow flex flex-col'}
         readOnly={!data || !data.can_write}
       />
 
-      {editor && <Suspense>{debugMode && <LazyDebugPanel editor={editor} />}</Suspense>}
+      {editor && debugMode && <Suspense>{<LazyDebugPanel editor={editor} />}</Suspense>}
     </AppContainer>
   );
 }