Use @uiw/react-codemirror and react@18

Updating redocly to latest and leveraging `@uiw/react-codemirror` which
it also uses.

content/shared/editor/editor.tsx

@@ -0,0 +1,32 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { ViewUpdate } from '@codemirror/view'
+import { Extension } from '@codemirror/state'
+
+import { editorXRPLTheme } from './theme'
+
+export interface EditorWrapperProps {
+    value: string
+    onChange?: (value: string, viewUpdate: ViewUpdate) => void
+    readOnly?: boolean
+    lineNumbers?: boolean
+}
+
+export interface EditorProps extends EditorWrapperProps {
+    extensions: Extension[]
+}
+
+export const Editor = ({value, extensions, onChange = () => {}, readOnly=false, lineNumbers=true }: EditorProps) => {
+    return (
+        <CodeMirror
+          value={value}
+          theme={editorXRPLTheme}
+          extensions={[...extensions]}
+          onChange={onChange}
+          basicSetup={{
+            highlightActiveLine: false,
+            highlightActiveLineGutter: false,
+            lineNumbers
+          }}
+        />
+    );
+}

content/shared/editor/javascript-editor.tsx

@@ -0,0 +1,15 @@
+import { javascript } from '@codemirror/lang-javascript'
+import { Editor, EditorWrapperProps } from './editor'
+
+export const JavascriptEditor = ({value, onChange, readOnly }: EditorWrapperProps) => {
+    return <Editor
+        value={value}
+        onChange={onChange}
+        readOnly={readOnly}
+        extensions={
+            [
+                javascript(),
+            ]
+        }
+    />
+}

content/shared/editor/json-editor.tsx

@@ -0,0 +1,26 @@
+import { linter, lintGutter } from '@codemirror/lint'
+import { json, jsonParseLinter } from '@codemirror/lang-json'
+import { Extension } from '@codemirror/state'
+
+import { Editor, EditorWrapperProps } from './editor'
+
+export const JsonEditor = ({value, onChange, readOnly, lineNumbers }: EditorWrapperProps) => {
+    const extensions: Extension[] = [
+        json()
+    ]
+
+    if(!readOnly) {
+        extensions.push(
+            lintGutter(),
+            linter(jsonParseLinter())
+        )
+    }
+
+    return <Editor
+        value={value}
+        onChange={onChange}
+        readOnly={readOnly}
+        extensions={extensions}
+        lineNumbers={lineNumbers}
+    />
+}

content/shared/editor/theme.ts

@@ -0,0 +1,40 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+const blue200 = '#B2E0FF'
+const blue500 = '#19A3FF'
+const gray500 = '#838386'
+const gray800 = '#232325'
+const green700 = '#28B86A'
+const orange500 = '#FF6719'
+const white = '#FFFFFF'
+
+export const editorXRPLTheme = createTheme({
+    theme: 'dark',
+    settings: {
+      background: gray800,
+      backgroundImage: '',
+      fontFamily: 'Space Mono',
+      foreground: white,
+      caret: gray500,
+      lineHighlight: gray800,
+      gutterBackground: gray800,
+    },
+    styles: [
+      { tag: [t.attributeName, t.attributeValue], color: white },
+      { tag: t.propertyName, color: green700 },
+      { tag: t.comment, color: gray500 },
+      { tag: t.variableName, color: white },
+      { tag: [t.string, t.special(t.brace)], color: green700 },
+      { tag: t.number, color: blue500 },
+      { tag: t.atom, color: orange500 },
+      { tag: t.bool, color: orange500 },
+      { tag: t.null, color: orange500 },
+      { tag: t.keyword, color: orange500 },
+      { tag: t.operator, color: white },
+      { tag: t.definition(t.typeName), color: white },
+      { tag: t.tagName, color: white },
+      { tag: [t.brace, t.bracket], color: white },
+      { tag: t.link, color: blue200 }
+    ],
+});