fix: Better UI

lykia-rs · Jul 22, 2024 · 9227add · 9227add
1 parent d961da9
commit 9227add
Show file tree

Hide file tree

Showing 3 changed files with 584 additions and 41 deletions.
diff --git a/lykiadb-playground/app/editor.tsx b/lykiadb-playground/app/editor.tsx
@@ -1,11 +1,8 @@
 'use client';
-import Editor from "react-simple-code-editor";
-import { JsonView, allExpanded, darkStyles } from 'react-json-view-lite';
+
 import React from "react";
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism.css';
+import CodeEditor from '@uiw/react-textarea-code-editor';
+import JsonView from '@uiw/react-json-view';
 import 'react-json-view-lite/dist/index.css';
 import { defaultFont } from '../styles/fonts'
 import SplitPane, { Pane } from 'split-pane-react';
@@ -35,26 +32,20 @@ const EditorView = () => {
 
   return (
     <SplitPane sizes={sizes} onChange={setSizes} className={defaultFont.className}>
-      <Pane minSize={300}>
-        <Editor
-          insertSpaces={true}
-          value={code}
-          onValueChange={(code: string) => updateCode(code)}
-          highlight={
-            (code: string) => {
-                return highlight(code, languages.js)
-            }
-          }
-          padding={10}
-          style={{
-            fontFamily: '',
-            fontSize: 16,
-          }}
-        />
+      <Pane minSize={300} className="h-screen">
+        <div className="h-full overflow-auto text-md">
+          <CodeEditor
+            value={code}
+            language="js"
+            placeholder="Please enter JS code."
+            onChange={(evn) => updateCode(evn.target.value)}
+            padding={15}
+          />
+        </div>
       </Pane>
       <Pane minSize={600} className="h-full">
         <div className="overflow-y-auto h-full">
-          <JsonView data={ast} shouldExpandNode={allExpanded} style={darkStyles} />
+          <JsonView value={ast} />
         </div>
       </Pane>
     </SplitPane>

diff --git a/lykiadb-playground/package.json b/lykiadb-playground/package.json
@@ -9,12 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@uiw/react-json-view": "2.0.0-alpha.25",
+    "@uiw/react-textarea-code-editor": "^3.0.2",
     "next": "14.2.5",
     "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-json-view-lite": "^1.4.0",
-    "react-simple-code-editor": "^0.14.1",
     "split-pane-react": "^0.1.3"
   },
   "devDependencies": {