1 files changed, 26 insertions, 20 deletions
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index ceff01fc2..f3295a6c6 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -1,14 +1,19 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable react/button-has-type */
+/* eslint-disable no-use-before-define */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-redeclare */
 import { action, configure, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { DocServer } from '../client/DocServer';
 import { resolvedPorts } from '../client/util/CurrentUserUtils';
 import { CompileScript } from '../client/util/Scripting';
 import { EditableView } from '../client/views/EditableView';
 import CursorField from '../fields/CursorField';
 import { DateField } from '../fields/DateField';
-import { Doc, Field, FieldResult } from '../fields/Doc';
+import { Doc, Field, FieldType, FieldResult } from '../fields/Doc';
 import { Id } from '../fields/FieldSymbols';
 import { List } from '../fields/List';
 import { RichTextField } from '../fields/RichTextField';
@@ -39,7 +44,7 @@ configure({
 });
 
 @observer
-class ListViewer extends React.Component<{ field: List<Field> }> {
+class ListViewer extends React.Component<{ field: List<FieldType> }> {
     @observable
     expanded = false;
 
@@ -86,14 +91,12 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
         let content;
         if (this.expanded) {
             const keys = Object.keys(this.props.field);
-            const fields = keys.map(key => {
-                return (
-                    <div key={key}>
-                        <b>({key}): </b>
-                        <DebugViewer field={this.props.field[key]} setValue={value => applyToDoc(this.props.field, key, value)}></DebugViewer>
-                    </div>
-                );
-            });
+            const fields = keys.map(key => (
+                <div key={key}>
+                    <b>({key}): </b>
+                    <DebugViewer field={this.props.field[key]} setValue={value => applyToDoc(this.props.field, key, value)} />
+                </div>
+            ));
             content = (
                 <div>
                     Document ({this.props.field[Id]})<div style={{ paddingLeft: '25px' }}>{fields}</div>
@@ -115,7 +118,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
 class DebugViewer extends React.Component<{ field: FieldResult; setValue(value: string): boolean }> {
     render() {
         let content;
-        const field = this.props.field;
+        const { field } = this.props;
         if (field instanceof List) {
             content = <ListViewer field={field} />;
         } else if (field instanceof Doc) {
@@ -144,7 +147,7 @@ class Viewer extends React.Component {
     private idToAdd: string = '';
 
     @observable
-    private fields: Field[] = [];
+    private fields: FieldType[] = [];
 
     @action
     inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -171,7 +174,7 @@ class Viewer extends React.Component {
                 <input value={this.idToAdd} onChange={this.inputOnChange} onKeyDown={this.onKeyDown} />
                 <div>
                     {this.fields.map((field, index) => (
-                        <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>
+                        <DebugViewer field={field} key={index} setValue={() => false} />
                     ))}
                 </div>
             </>
@@ -181,10 +184,13 @@ class Viewer extends React.Component {
 
 (async function () {
     await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, 'viewer');
-    ReactDOM.render(
-        <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
-            <Viewer />
-        </div>,
-        document.getElementById('root')
-    );
+    const root = document.getElementById('root');
+    if (root) {
+        const reactDom = ReactDOM.createRoot(root);
+        reactDom.render(
+            <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
+                <Viewer />
+            </div>
+        );
+    }
 })();