feat: add Ace Editor component
This commit is contained in:
parent
8cb5f37308
commit
a4a2a195ce
@ -22,10 +22,12 @@
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@reduxjs/toolkit": "^2.2.1",
|
||||
"ace-builds": "^1.32.7",
|
||||
"framer-motion": "^11.0.13",
|
||||
"github-markdown-css": "^5.5.1",
|
||||
"prism-react-renderer": "^2.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-ace": "^10.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-markdown": "^9.0.1",
|
||||
|
@ -26,6 +26,9 @@ dependencies:
|
||||
'@reduxjs/toolkit':
|
||||
specifier: ^2.2.1
|
||||
version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
|
||||
ace-builds:
|
||||
specifier: ^1.32.7
|
||||
version: 1.32.7
|
||||
framer-motion:
|
||||
specifier: ^11.0.13
|
||||
version: 11.0.13(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -38,6 +41,9 @@ dependencies:
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
react-ace:
|
||||
specifier: ^10.1.0
|
||||
version: 10.1.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
@ -2655,6 +2661,10 @@ packages:
|
||||
'@zag-js/dom-query': 0.16.0
|
||||
dev: false
|
||||
|
||||
/ace-builds@1.32.7:
|
||||
resolution: {integrity: sha512-ziv35kaYELFw4suWlotz/Xsl1/1LhWAbwFoD3zIgCgP9gXGECEsAM4GhiB0T0xZdmQjyv6hmAzO280g0+n4vGw==}
|
||||
dev: false
|
||||
|
||||
/acorn-jsx@5.3.2(acorn@8.11.3):
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
peerDependencies:
|
||||
@ -3215,6 +3225,10 @@ packages:
|
||||
dequal: 2.0.3
|
||||
dev: false
|
||||
|
||||
/diff-match-patch@1.0.5:
|
||||
resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
|
||||
dev: false
|
||||
|
||||
/dir-glob@3.0.1:
|
||||
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
|
||||
engines: {node: '>=8'}
|
||||
@ -4668,6 +4682,14 @@ packages:
|
||||
p-locate: 5.0.0
|
||||
dev: true
|
||||
|
||||
/lodash.get@4.4.2:
|
||||
resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
|
||||
dev: false
|
||||
|
||||
/lodash.isequal@4.5.0:
|
||||
resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
|
||||
dev: false
|
||||
|
||||
/lodash.merge@4.6.2:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
dev: true
|
||||
@ -5538,6 +5560,21 @@ packages:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
dev: true
|
||||
|
||||
/react-ace@10.1.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==}
|
||||
peerDependencies:
|
||||
react: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
ace-builds: 1.32.7
|
||||
diff-match-patch: 1.0.5
|
||||
lodash.get: 4.4.2
|
||||
lodash.isequal: 4.5.0
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-clientside-effect@1.2.6(react@18.2.0):
|
||||
resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
|
||||
peerDependencies:
|
||||
|
48
src/components/Editor.tsx
Normal file
48
src/components/Editor.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { useColorMode } from "@chakra-ui/react";
|
||||
import AceEditor from "react-ace";
|
||||
|
||||
import "ace-builds/src-noconflict/mode-c_cpp";
|
||||
import "ace-builds/src-noconflict/mode-python";
|
||||
import "ace-builds/src-noconflict/mode-golang";
|
||||
import "ace-builds/src-noconflict/mode-rust";
|
||||
import "ace-builds/src-noconflict/snippets/c_cpp";
|
||||
import "ace-builds/src-noconflict/snippets/python";
|
||||
import "ace-builds/src-noconflict/snippets/golang";
|
||||
import "ace-builds/src-noconflict/snippets/rust";
|
||||
|
||||
import "ace-builds/src-noconflict/theme-tomorrow";
|
||||
import "ace-builds/src-noconflict/theme-github_dark";
|
||||
import "ace-builds/src-noconflict/ext-language_tools";
|
||||
|
||||
interface EditorProps {
|
||||
mode: string;
|
||||
onChange: (code: string) => void;
|
||||
}
|
||||
|
||||
export default function Editor(props: EditorProps) {
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<>
|
||||
<AceEditor
|
||||
name="code_editor"
|
||||
fontSize={16}
|
||||
height="75vh"
|
||||
width="100%"
|
||||
mode={props.mode}
|
||||
theme={colorMode == "light" ? "tomorrow" : "github_dark"}
|
||||
onChange={(code: string) => props.onChange(code)} // force converts to string
|
||||
editorProps={{
|
||||
$blockScrolling: false,
|
||||
$enableMultiselect: true,
|
||||
}}
|
||||
setOptions={{
|
||||
enableBasicAutocompletion: true,
|
||||
enableLiveAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
wrap: true,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user