woj/woj-ui-2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Ace Editor component

Browse Source
This commit is contained in:
Paul Pan 2024-03-15 16:12:22 +08:00
parent 8cb5f37308
commit a4a2a195ce
3 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

37
pnpm-lock.yaml
View File

@ -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
View 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,
}}
/>
</>
);
}