/ concept-collection / proofery-web
Sign in
concept-collection / proofery-web
proofery-web / src / components / ProofEditor.tsx
109 lines · 2.7 KBCodeBlameHistory
c1bee11initialJeremy Magland 1import { Box } from '@mui/material';
2import Editor, { type OnMount } from '@monaco-editor/react';
4interface ProofEditorProps {
5 content: string;
6 onChange: (content: string) => void;
7}
9const ProofEditor: React.FC<ProofEditorProps> = ({ content, onChange }) => {
10 const handleEditorChange = (value: string | undefined) => {
11 onChange(value || '');
12 };
923e78dcompile fixJeremy Magland 14 const handleEditorDidMount: OnMount = (_editor, monaco) => {
c1bee11initialJeremy Magland 15 // Register the proofery language
16 monaco.languages.register({ id: 'proofery' });
18 // Define syntax highlighting
19 monaco.languages.setMonarchTokensProvider('proofery', {
20 keywords: [
21 'axiom',
22 'theorem',
23 'suppose',
24 'conclude',
25 'proof',
26 'exact',
27 'unpack-and',
28 'cases',
29 'witness',
30 'calculate',
31 'consider',
32 'forall-apply',
33 'deconstruct-exists',
34 'we-have',
35 'focus-or',
36 'define',
37 'assert',
38 'assert-goal',
39 'goal',
40 ],
42 operators: ['=', '==', ':'],
44 tokenizer: {
45 root: [
46 // Keywords
47 [
48 /\b(axiom|theorem|suppose|conclude|proof|exact|unpack-and|cases|witness|calculate|consider|forall-apply|deconstruct-exists|we-have|focus-or|define|assert|assert-goal|goal)\b/,
49 'keyword',
50 ],
52 // Types (capitalized words)
53 [/\b[A-Z][a-zA-Z0-9_]*\b/, 'type'],
55 // Operators
56 [/[=:]/, 'operator'],
58 // Identifiers
59 [/[a-z_][a-zA-Z0-9_]*/, 'identifier'],
61 // Whitespace
62 [/[ \t\r\n]+/, 'white'],
63 ],
64 },
65 });
67 // Define theme colors
68 monaco.editor.defineTheme('proofery-theme', {
69 base: 'vs',
70 inherit: true,
71 rules: [
72 { token: 'keyword', foreground: '0000FF', fontStyle: 'bold' },
73 { token: 'type', foreground: '267F99' },
74 { token: 'operator', foreground: '000000' },
75 { token: 'identifier', foreground: '000000' },
76 ],
77 colors: {
78 'editor.foreground': '#000000',
79 },
80 });
82 // Apply the theme
83 monaco.editor.setTheme('proofery-theme');
84 };
86 return (
87 <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
88 <Editor
89 height="100%"
90 defaultLanguage="proofery"
91 value={content}
92 onChange={handleEditorChange}
93 onMount={handleEditorDidMount}
94 options={{
95 minimap: { enabled: false },
96 fontSize: 14,
97 lineNumbers: 'on',
98 scrollBeyondLastLine: false,
99 wordWrap: 'on',
100 automaticLayout: true,
101 tabSize: 4,
102 insertSpaces: true,
103 }}
104 />
105 </Box>
106 );
107};
109export default ProofEditor;
moveopenescclose