val 0.6.0

An arbitrary precision calculator language
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

import { Editor } from '@/components/editor';
import { EditorResetDialog } from '@/components/editor-reset-dialog';
import { EditorSettingsDialog } from '@/components/editor-settings-dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import type { Extension } from '@codemirror/state';
import type { EditorView, ViewUpdate } from '@codemirror/view';

interface EditorPaneProps {
  currentExample: string;
  examples: Record<string, string>;
  extensions: Extension[];
  onChange: (value: string) => void;
  onCreateEditor: (view: EditorView) => void;
  onExampleChange: (value: string) => void;
  onUpdate: (update: ViewUpdate) => void;
  value: string;
}

export const EditorPane = ({
  currentExample,
  examples,
  extensions,
  onChange,
  onCreateEditor,
  onExampleChange,
  onUpdate,
  value,
}: EditorPaneProps) => {
  return (
    <div className='flex h-full min-h-0 flex-col overflow-hidden'>
      <div className='bg-muted/50 flex shrink-0 items-center justify-between gap-1 border-b px-2 py-1'>
        <div className='flex min-w-0 items-center gap-1'>
          <Select value={currentExample} onValueChange={onExampleChange}>
            <SelectTrigger
              aria-label='Example program'
              className='bg-background dark:bg-background dark:hover:bg-background w-36 cursor-pointer text-sm data-[size=default]:h-7'
            >
              <SelectValue placeholder='Select example' />
            </SelectTrigger>
            <SelectContent>
              {Object.keys(examples).map((key) => (
                <SelectItem key={key} value={key}>
                  {key}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <EditorResetDialog
            example={currentExample}
            onReset={() => onChange(examples[currentExample])}
          />
        </div>
        <EditorSettingsDialog />
      </div>

      <div className='flex-1 overflow-hidden'>
        <Editor
          value={value}
          onChange={onChange}
          onCreateEditor={onCreateEditor}
          onUpdate={onUpdate}
          extensions={extensions}
        />
      </div>
    </div>
  );
};