mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
Merge pull request #30 from AykutSarac/replace-editor-monaco
Replace Editor with monaco-editor
This commit is contained in:
Aykut Saraç
GitHub
commit
1978862c42
@ -12,12 +12,12 @@
|
||||
"deploy": "gh-pages -d out -t true"
|
||||
},
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.4.4",
|
||||
"allotment": "^1.12.1",
|
||||
"next": "^12.1.5",
|
||||
"next-transpile-modules": "^9.0.0",
|
||||
"parse-json": "^6.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-ace": "10.1.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-hot-toast": "^2.2.0",
|
||||
"react-icons": "^4.3.1",
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import React from "react";
|
||||
import AceEditor, { IAceOptions } from "react-ace";
|
||||
import Editor from "@monaco-editor/react";
|
||||
import parseJson from "parse-json";
|
||||
import styled from "styled-components";
|
||||
import { ErrorContainer } from "../../components/ErrorContainer/ErrorContainer";
|
||||
import { ConfigActionType } from "src/reducer/reducer";
|
||||
import { useConfig } from "src/hocs/config";
|
||||
require("ace-builds/src-noconflict/mode-json");
|
||||
require("ace-builds/src-noconflict/theme-tomorrow_night");
|
||||
require("ace-builds/src-noconflict/theme-github");
|
||||
import { Loading } from "src/components/Loading";
|
||||
|
||||
const StyledEditorWrapper = styled.div`
|
||||
display: flex;
|
||||
@ -17,17 +15,14 @@ const StyledEditorWrapper = styled.div`
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const aceOptions: IAceOptions = {
|
||||
useWorker: false,
|
||||
fontSize: 12,
|
||||
tabSize: 2,
|
||||
showPrintMargin: false,
|
||||
wrap: true,
|
||||
const editorOptions = {
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
|
||||
const JsonEditor: React.FC = () => {
|
||||
export const JsonEditor: React.FC = () => {
|
||||
const { json, settings, dispatch } = useConfig();
|
||||
const [editorWidth, setEditorWidth] = React.useState("auto");
|
||||
const [value, setValue] = React.useState("");
|
||||
const [error, setError] = React.useState({
|
||||
message: "",
|
||||
@ -35,22 +30,10 @@ const JsonEditor: React.FC = () => {
|
||||
});
|
||||
|
||||
const editorTheme = React.useMemo(
|
||||
() => (settings.lightmode ? "github" : "tomorrow_night"),
|
||||
() => (settings.lightmode ? "light" : "vs-dark"),
|
||||
[settings.lightmode]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const resizeObserver = new ResizeObserver((observed) => {
|
||||
const width = observed[0].contentRect.width;
|
||||
setEditorWidth(width ? width.toString() : "auto");
|
||||
});
|
||||
|
||||
const dom = document.querySelector(".ace_scroller");
|
||||
if (dom) resizeObserver.observe(dom);
|
||||
|
||||
return () => resizeObserver.disconnect();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (settings.autoformat) {
|
||||
return setValue(JSON.stringify(JSON.parse(json), null, 2));
|
||||
@ -60,25 +43,28 @@ const JsonEditor: React.FC = () => {
|
||||
}, [settings.autoformat, json]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const formatTimer = setTimeout(() => {
|
||||
try {
|
||||
if (value) {
|
||||
const parsedJson = parseJson(value);
|
||||
const formatTimer = setTimeout(
|
||||
() => {
|
||||
try {
|
||||
if (value) {
|
||||
const parsedJson = parseJson(value);
|
||||
|
||||
if (settings.autoformat) {
|
||||
setValue(JSON.stringify(parsedJson, null, 2));
|
||||
} else {
|
||||
setValue(value);
|
||||
if (settings.autoformat) {
|
||||
setValue(JSON.stringify(parsedJson, null, 2));
|
||||
} else {
|
||||
setValue(value);
|
||||
}
|
||||
|
||||
dispatch({ type: ConfigActionType.SET_JSON, payload: value });
|
||||
}
|
||||
|
||||
dispatch({ type: ConfigActionType.SET_JSON, payload: value });
|
||||
setError((err) => ({ ...err, message: "" }));
|
||||
} catch (jsonError: any) {
|
||||
setError((err) => ({ ...err, message: jsonError.message }));
|
||||
}
|
||||
|
||||
setError((err) => ({ ...err, message: "" }));
|
||||
} catch (jsonError: any) {
|
||||
setError((err) => ({ ...err, message: jsonError.message }));
|
||||
}
|
||||
}, 1800);
|
||||
},
|
||||
settings.autoformat ? 1200 : 1800
|
||||
);
|
||||
|
||||
return () => clearTimeout(formatTimer);
|
||||
}, [value, dispatch]);
|
||||
@ -86,19 +72,15 @@ const JsonEditor: React.FC = () => {
|
||||
return (
|
||||
<StyledEditorWrapper>
|
||||
<ErrorContainer error={error} setError={setError} />
|
||||
<AceEditor
|
||||
<Editor
|
||||
height="100%"
|
||||
mode="json"
|
||||
defaultLanguage="json"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
options={editorOptions}
|
||||
theme={editorTheme}
|
||||
width={editorWidth}
|
||||
setOptions={aceOptions}
|
||||
loading={<Loading message="Loading Editor..." />}
|
||||
onChange={(value) => setValue(value as string)}
|
||||
/>
|
||||
</StyledEditorWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const memoizedJsonEditor = React.memo(JsonEditor);
|
||||
|
||||
export { memoizedJsonEditor as JsonEditor };
|
||||
|
||||
@ -5,17 +5,7 @@ import dynamic from "next/dynamic";
|
||||
|
||||
const Editor = dynamic(() => import("src/containers/Editor"), { ssr: false });
|
||||
|
||||
const StyledEditorWrapper = styled.div`
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: ${({ theme }) => theme.BLACK_SECONDARY};
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: ${({ theme }) => theme.SILVER_DARK};
|
||||
}
|
||||
`;
|
||||
const StyledEditorWrapper = styled.div``;
|
||||
|
||||
const EditorPage: React.FC = () => {
|
||||
return (
|
||||
|
||||
46
yarn.lock
46
yarn.lock
@ -1249,6 +1249,21 @@
|
||||
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
|
||||
integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
|
||||
|
||||
"@monaco-editor/loader@^1.3.1":
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.1.tgz#35d198fb13a983dd49e9e448a172b6a9da309411"
|
||||
integrity sha512-LfpAO6e54SZQW0nnI1sWKO4XtAlNx3WHXYZixeVy0HhZ4txGPOok4rs2u4dSi2+iRWeL198cZ2FlFQKr8mH+cw==
|
||||
dependencies:
|
||||
state-local "^1.0.6"
|
||||
|
||||
"@monaco-editor/react@^4.4.4":
|
||||
version "4.4.4"
|
||||
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.4.tgz#8d6b0ac144e2b673f85408e30f1facafff9b7aab"
|
||||
integrity sha512-yQsYnVkgP5RC5ZMoRVCXSBn4D4hLUOgoQK+AZJpVY57NDXmEb57OVaaYKh8/RTzxkpuLV278hKNw5DnuzlgQwg==
|
||||
dependencies:
|
||||
"@monaco-editor/loader" "^1.3.1"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
"@next/env@12.1.5":
|
||||
version "12.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.5.tgz#a21ba6708022d630402ca2b340316e69a0296dfc"
|
||||
@ -1820,11 +1835,6 @@ abab@^2.0.5, abab@^2.0.6:
|
||||
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
|
||||
integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
|
||||
|
||||
ace-builds@^1.4.14:
|
||||
version "1.4.14"
|
||||
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.14.tgz#2c41ccbccdd09e665d3489f161a20baeb3a3c852"
|
||||
integrity sha512-NBOQlm9+7RBqRqZwimpgquaLeTJFayqb9UEPtTkpC3TkkwDnlsT/TwsCC0svjt9kEZ6G9mH5AEOHSz6Q/HrzQQ==
|
||||
|
||||
acorn-globals@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
|
||||
@ -2680,11 +2690,6 @@ detect-newline@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
|
||||
integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
|
||||
|
||||
diff-match-patch@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
|
||||
integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
|
||||
|
||||
diff-sequences@^27.5.1:
|
||||
version "27.5.1"
|
||||
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
|
||||
@ -4643,11 +4648,6 @@ lodash.flattendeep@^4.4.0:
|
||||
resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
|
||||
integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
|
||||
|
||||
lodash.get@^4.4.2:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
|
||||
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
|
||||
|
||||
lodash.isequal@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
|
||||
@ -5312,17 +5312,6 @@ rdk@^6.0.1:
|
||||
popper.js "^1.16.1"
|
||||
react-scrolllock "^5.0.1"
|
||||
|
||||
react-ace@10.1.0:
|
||||
version "10.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-10.1.0.tgz#d348eac2b16475231779070b6cd16768deed565f"
|
||||
integrity sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==
|
||||
dependencies:
|
||||
ace-builds "^1.4.14"
|
||||
diff-match-patch "^1.0.5"
|
||||
lodash.get "^4.4.2"
|
||||
lodash.isequal "^4.5.0"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-cool-dimensions@^2.0.7:
|
||||
version "2.0.7"
|
||||
resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
|
||||
@ -5784,6 +5773,11 @@ stack-utils@^2.0.3:
|
||||
dependencies:
|
||||
escape-string-regexp "^2.0.0"
|
||||
|
||||
state-local@^1.0.6:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
|
||||
integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
|
||||
|
||||
string-length@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user