136 lines
3.3 KiB
TypeScript
136 lines
3.3 KiB
TypeScript
import { Flex, Group, useMantineTheme } from '@mantine/core';
|
|
import { Editor, Monaco } from '@monaco-editor/react';
|
|
import { observer } from 'mobx-react-lite';
|
|
import * as monaco from 'monaco-editor';
|
|
import { SchemasSettings, configureMonacoYaml } from 'monaco-yaml';
|
|
import { useRef } from 'react';
|
|
import HeadSearch from '../shared/components/inputs/HeadSearch';
|
|
|
|
const Test = () => {
|
|
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
|
|
const theme = useMantineTheme();
|
|
|
|
|
|
const value = `
|
|
# Property descriptions are displayed when hovering over properties using your cursor
|
|
property: This property has a JSON schema description
|
|
|
|
|
|
# Titles work too!
|
|
titledProperty: Titles work too!
|
|
|
|
|
|
# Even markdown descriptions work
|
|
markdown: hover me to get a markdown based description 😮
|
|
|
|
|
|
# Enums can be autocompleted by placing the cursor after the colon and pressing Ctrl+Space
|
|
enum:
|
|
|
|
|
|
# Unused anchors will be reported
|
|
unused anchor: &unused anchor
|
|
|
|
|
|
# Of course numbers are supported!
|
|
number: 12
|
|
|
|
|
|
# As well as booleans!
|
|
boolean: true
|
|
|
|
|
|
# And strings
|
|
string: I am a string
|
|
|
|
|
|
# This property is using the JSON schema recursively
|
|
reference:
|
|
boolean: Not a boolean
|
|
|
|
|
|
# Also works in arrays
|
|
array:
|
|
- string: 12
|
|
enum: Mewtwo
|
|
reference:
|
|
reference:
|
|
boolean: true
|
|
|
|
|
|
# JSON referenses can be clicked for navigation
|
|
pointer:
|
|
$ref: '#/array'
|
|
|
|
|
|
# This anchor can be referenced
|
|
anchorRef: &anchor can be clicked as well
|
|
|
|
|
|
# Press control while hovering over the anchor
|
|
anchorPointer: *anchor
|
|
|
|
|
|
formatting: Formatting is supported too! Under the hood this is powered by Prettier. Just press Ctrl+Shift+I or right click and press Format to format this document.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`.replace(/:$/m, ': ')
|
|
|
|
function handleEditorWillMount(monaco: Monaco) {
|
|
const defaultSchema: SchemasSettings = {
|
|
uri: 'https://github.com/remcohaszing/monaco-yaml/blob/HEAD/examples/demo/src/schema.json',
|
|
fileMatch: ['monaco-yaml.yaml']
|
|
}
|
|
|
|
configureMonacoYaml(monaco, {
|
|
enableSchemaRequest: true,
|
|
schemas: [defaultSchema]
|
|
})
|
|
}
|
|
|
|
function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) {
|
|
// here is another way to get monaco instance
|
|
// you can also store it in `useRef` for further usage
|
|
const model = monaco.editor.createModel(value, 'yaml', monaco.Uri.parse('monaco-yaml.yaml'))
|
|
editor.setModel(model)
|
|
editorRef.current = editor;
|
|
}
|
|
|
|
|
|
return (
|
|
<Flex direction='column' h='100%' >
|
|
<Flex justify='space-between' align='center' w='100%'>
|
|
<Group
|
|
w='25%'
|
|
>
|
|
</Group>
|
|
<Group
|
|
w='50%'
|
|
style={{
|
|
justifyContent: 'center',
|
|
}}
|
|
><HeadSearch /></Group>
|
|
<Group
|
|
w='25%'
|
|
position="right">
|
|
</Group>
|
|
</Flex>
|
|
<Flex justify='center' h='100%' direction='column' >
|
|
<Editor
|
|
defaultLanguage='yaml'
|
|
value={value}
|
|
defaultValue="// Data empty"
|
|
theme={theme.colorScheme === "dark" ? "vs-dark" : "vs-light"}
|
|
beforeMount={handleEditorWillMount}
|
|
onMount={handleEditorDidMount}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default observer(Test); |