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

Implement custom syntax-highlighting

This commit is contained in:
Rene Saarsoo 2020-10-04 00:10:42 +03:00
parent 28769a417c
commit 77a5dc0fb6
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.tsx
View File

@ -6,14 +6,19 @@ import { ErrorMessage } from './components/ErrorMessage';
import styled from 'styled-components'; import styled from 'styled-components';
import { CodeEditor } from './components/CodeEditor'; import { CodeEditor } from './components/CodeEditor';
const defaultWorkout = `Name: Hello const defaultWorkout = `Name: Sample workout
Description: Try changing it, and see what happens below.
Warmup: 10:00 30%..60% Warmup: 10:00 30%..75%
Interval: 20:00 100% Interval: 15:00 100% 90rpm
@ 00:00 Start off easy
@ 01:00 Settle into rythm
@ 07:30 Half way through
@ 14:00 Final minute, stay strong!
Rest: 10:00 75% Rest: 10:00 75%
Interval: 20:00 100% FreeRide: 20:00
FreeRide: 10:00 @ 00:10 Just have some fun, riding as you wish
Cooldown: 10:00 60%..30% Cooldown: 10:00 70%..30%
`; `;
const AppContainer = styled.div` const AppContainer = styled.div`

40
src/components/CodeEditor.tsx
View File

@ -1,11 +1,49 @@
import Editor from 'react-simple-code-editor'; import Editor from 'react-simple-code-editor';
import styled from 'styled-components'; import styled from 'styled-components';
export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight: code => code })` const highlight = (code: string): string => {
return code
.replace(/^(Name|Author|Description|Warmup|Rest|Interval|Cooldown|FreeRide):/gm, "<code class='keyword'>$&</code>")
.replace(/(\d{1,2}:)?\d{1,2}:\d{1,2}/g, "<code class='duration'>$&</code>")
.replace(/\d+%/g, "<code class='intensity'>$&</code>")
.replace(/\d+rpm/g, "<code class='cadence'>$&</code>")
.replace(/\.\./g, "<code class='range'>$&</code>")
.replace(/@(.*?)$/gm, "<code class='comment-start'>@</code><code class='comment'>$1</code>");
};
export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight })`
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
border: 1px inset #bbb; border: 1px inset #bbb;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
code.keyword {
font-weight: bold;
}
code.duration {
color: #681caf;
}
code.intensity {
color: #af391c;
}
code.cadence {
color: #86af1c;
}
code.range {
color: #888;
}
code.comment {
font-style: italic;
color: #888;
.duration {
color: #8d67af;
}
}
code.comment-start {
font-weight: bold;
font-style: italic;
color: #888;
}
`; `;