pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Different highlight color for ValidationErrors

This commit is contained in:
Rene Saarsoo 2020-12-25 20:47:16 +02:00
parent db9677bcca
commit f513edca2a
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/CodeEditor.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from "react"; import React, { useCallback } from "react";
import Editor from "react-simple-code-editor"; import Editor from "react-simple-code-editor";
import styled from "styled-components"; import styled from "styled-components";
import { ZwiftoutException } from "zwiftout"; import { ValidationError, ZwiftoutException } from "zwiftout";
const highlight = (code: string): string => { const highlight = (code: string): string => {
return code return code
@ -48,15 +48,20 @@ export const BaseCodeEditor = styled(Editor).attrs({ padding: 10 })`
font-style: italic; font-style: italic;
color: #888; color: #888;
} }
code.error { code.parse-error {
background-color: rgba(252, 152, 152, 0.5); background-color: rgba(252, 152, 152, 0.5);
border-radius: 4px; border-radius: 4px;
} }
code.validation-error {
background-color: rgba(252, 209, 152, 0.5);
border-radius: 4px;
}
`; `;
const highlightErrorLine = (code: string, linenr: number): string => { const highlightErrorLine = (code: string, error: ZwiftoutException): string => {
const regex = new RegExp(`^((?:[^\\n]*?\\n){${linenr}})([^\\n]*?)\\n`); const regex = new RegExp(`^((?:[^\\n]*?\\n){${error.loc.row}})([^\\n]*?)\\n`);
return code.replace(regex, "$1<code class='error'>$2</code>\n"); const className = error instanceof ValidationError ? "validation-error" : "parse-error";
return code.replace(regex, `$1<code class='${className}'>$2</code>\n`);
}; };
interface CodeEditorProps { interface CodeEditorProps {
@ -66,8 +71,6 @@ interface CodeEditorProps {
} }
export const CodeEditor: React.FC<CodeEditorProps> = ({ value, onValueChange, error }) => { export const CodeEditor: React.FC<CodeEditorProps> = ({ value, onValueChange, error }) => {
const highlightFn = useCallback((code: string) => highlight(error ? highlightErrorLine(code, error.loc.row) : code), [ const highlightFn = useCallback((code: string) => highlight(error ? highlightErrorLine(code, error) : code), [error]);
error,
]);
return <BaseCodeEditor value={value} onValueChange={onValueChange} highlight={highlightFn} />; return <BaseCodeEditor value={value} onValueChange={onValueChange} highlight={highlightFn} />;
}; };