Update to using createRoot.

src/Editor.tsx

@@ -58,7 +58,11 @@ function Editor({ defaultValue = default_org_source }) {
         />
         <div className="Editor-underlay">{buildShadow(highlights, value)}</div>
       </div>
-      <OrgAst setHighlight={setHighlight} clearHighlights={clearHighlights} value={value} />
+      <OrgAst
+        setHighlight={setHighlight}
+        clearHighlights={clearHighlights}
+        value={value}
+      />
     </div>
   );
 }

src/OrgAst.tsx

@@ -2,7 +2,11 @@ import React, { ReactNode, useState } from "react";
 import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import styles from "./OrgAst.module.css";
 
-const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; value: string }) => {
+const OrgAst = (props: {
+  setHighlight: Function;
+  clearHighlights: Function;
+  value: string;
+}) => {
   const ast_tree = parse_org(props.value);
   console.log(JSON.stringify(ast_tree));
 
@@ -18,25 +22,51 @@ const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; valu
   } else {
     return (
       <div className={styles.OrgAst}>
-        <OrgAstNode selectNode={selectNode} node={ast_tree.content} parentUniqueId="^" selectedNode={selectedNode} />
+        <OrgAstNode
+          selectNode={selectNode}
+          node={ast_tree.content}
+          parentUniqueId="^"
+          selectedNode={selectedNode}
+        />
       </div>
     );
   }
 };
 
-const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: string, selectedNode: string }) => {
+const OrgAstNode = (props: {
-
+  selectNode: Function;
-  const uid = props.parentUniqueId + "_" + props.node["ast-node"] + "/" + props.node["standard-properties"]["begin"] + "/" + props.node["standard-properties"]["end"] + "#";
+  node: any;
+  parentUniqueId: string;
+  selectedNode: string;
+}) => {
+  const uid =
+    props.parentUniqueId +
+    "_" +
+    props.node["ast-node"] +
+    "/" +
+    props.node["standard-properties"]["begin"] +
+    "/" +
+    props.node["standard-properties"]["end"] +
+    "#";
 
   function selectNode() {
-    props.selectNode(uid, props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1);
+    props.selectNode(
+      uid,
+      props.node["standard-properties"]["begin"] - 1,
+      props.node["standard-properties"]["end"] - 1,
+    );
   }
 
-  const nodeClassName = props.selectedNode === uid ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode;
+  const nodeClassName =
+    props.selectedNode === uid
+      ? styles.OrgAstNode + " " + styles.selected
+      : styles.OrgAstNode;
 
   return (
     <div className={nodeClassName}>
-      <div className={styles.OrgAstNodeType} onClick={selectNode}>{props.node["ast-node"]}</div>
+      <div className={styles.OrgAstNodeType} onClick={selectNode}>
+        {props.node["ast-node"]}
+      </div>
       <details>
         <summary>Standard Properties</summary>
         <dl>
@@ -56,7 +86,12 @@ const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: st
         <details open={true}>
           <summary>Children</summary>
           <div className={styles.OrgAstChildren}>
-            <OrgAstNodeList selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node_list={props.node.children} />
+            <OrgAstNodeList
+              selectNode={props.selectNode}
+              parentUniqueId={props.parentUniqueId}
+              selectedNode={props.selectedNode}
+              node_list={props.node.children}
+            />
           </div>
         </details>
       ) : null}
@@ -64,9 +99,21 @@ const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: st
   );
 };
 
-const OrgAstNodeList = (props: { selectNode: Function; parentUniqueId: string; selectedNode: string; node_list: any[] }): React.JSX.Element[] => {
+const OrgAstNodeList = (props: {
+  selectNode: Function;
+  parentUniqueId: string;
+  selectedNode: string;
+  node_list: any[];
+}): React.JSX.Element[] => {
   return props.node_list.map((node) => {
-    return <OrgAstNode selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node={node} />;
+    return (
+      <OrgAstNode
+        selectNode={props.selectNode}
+        parentUniqueId={props.parentUniqueId}
+        selectedNode={props.selectedNode}
+        node={node}
+      />
+    );
   });
 };
 

src/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import App from "./App";
+import { createRoot } from "react-dom/client";
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+root.render(
   <>
     <App />
   </>,
-  document.getElementById("root"),
 );