|
@@ -1,5 +1,5 @@
|
|
import React from "react";
|
|
import React from "react";
|
|
-import AceEditor from "react-ace";
|
|
|
|
|
|
+import AceEditor, { IAceOptions } from "react-ace";
|
|
import parseJson from "parse-json";
|
|
import parseJson from "parse-json";
|
|
import styled from "styled-components";
|
|
import styled from "styled-components";
|
|
import { ErrorContainer } from "./ErrorContainer";
|
|
import { ErrorContainer } from "./ErrorContainer";
|
|
@@ -17,7 +17,14 @@ const StyledEditorWrapper = styled.div`
|
|
user-select: none;
|
|
user-select: none;
|
|
`;
|
|
`;
|
|
|
|
|
|
-const aceOptions = { useWorker: false };
|
|
|
|
|
|
+const aceOptions: IAceOptions = {
|
|
|
|
+ useWorker: false,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ tabSize: 2,
|
|
|
|
+ showPrintMargin: false,
|
|
|
|
+ wrap: true,
|
|
|
|
+ mode: "json",
|
|
|
|
+};
|
|
|
|
|
|
const JsonEditor: React.FC = () => {
|
|
const JsonEditor: React.FC = () => {
|
|
const {
|
|
const {
|
|
@@ -86,17 +93,12 @@ const JsonEditor: React.FC = () => {
|
|
<StyledEditorWrapper>
|
|
<StyledEditorWrapper>
|
|
<ErrorContainer error={error} setError={setError} />
|
|
<ErrorContainer error={error} setError={setError} />
|
|
<AceEditor
|
|
<AceEditor
|
|
|
|
+ height="100%"
|
|
value={value}
|
|
value={value}
|
|
onChange={setValue}
|
|
onChange={setValue}
|
|
- mode="json"
|
|
|
|
theme={editorTheme}
|
|
theme={editorTheme}
|
|
width={editorWidth}
|
|
width={editorWidth}
|
|
- height="100%"
|
|
|
|
- fontSize={12}
|
|
|
|
- wrapEnabled
|
|
|
|
setOptions={aceOptions}
|
|
setOptions={aceOptions}
|
|
- showPrintMargin={false}
|
|
|
|
- tabSize={2}
|
|
|
|
/>
|
|
/>
|
|
</StyledEditorWrapper>
|
|
</StyledEditorWrapper>
|
|
);
|
|
);
|