-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): change to use monaco editor
- Loading branch information
1 parent
cb47e09
commit 3313bbd
Showing
13 changed files
with
263 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // Copyright (c) 2023 Luma <lumakernel@gmail.com> | ||
| // SPDX-License-Identifier: MIT or Apache-2.0 | ||
| declare module 'monaco-vim' { | ||
| class VimMode { | ||
| dispose(): void; | ||
| initVimMode(editor: editor.IStandaloneCodeEditor, statusbarNode?: Element | null): VimMode; | ||
| } | ||
| export function initVimMode(editor: editor.IStandaloneCodeEditor, statusbarNode?: HTMLElement): VimMode; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| // Copyright (c) 2023 Luma <lumakernel@gmail.com> | ||
| // SPDX-License-Identifier: MIT or Apache-2.0 | ||
| 'use client'; | ||
| import { CssBaseline, ThemeProvider, createTheme } from '@mui/material'; | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||
| import NextLink from 'next/link'; | ||
|
|
||
| import Menu from '@/components/navigation'; | ||
| import SnackBarProvider from '@/components/providers/snackbar'; | ||
|
|
||
| import type { ComponentProps, ReactNode } from 'react'; | ||
|
|
||
| const darkTheme = createTheme({ | ||
| palette: { | ||
| mode: 'dark', | ||
| }, | ||
| components: { | ||
| // biome-ignore lint/style/useNamingConvention: <explanation> | ||
| MuiLink: { | ||
| defaultProps: { | ||
| component: (props: ComponentProps<typeof NextLink>) => <NextLink {...props} />, | ||
| }, | ||
| }, | ||
| // biome-ignore lint/style/useNamingConvention: <explanation> | ||
| MuiButtonBase: { | ||
| defaultProps: { | ||
| // biome-ignore lint/style/useNamingConvention: <explanation> | ||
| LinkComponent: (props: ComponentProps<typeof NextLink>) => <NextLink {...props} />, | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| interface ClientLayoutProps { | ||
| children: ReactNode; | ||
| } | ||
| const queryClient = new QueryClient(); | ||
| export default function ClientLayout({ children }: Readonly<ClientLayoutProps>) { | ||
| return ( | ||
| <QueryClientProvider client={queryClient}> | ||
| <ThemeProvider theme={darkTheme}> | ||
| <SnackBarProvider /> | ||
| <CssBaseline /> | ||
| {children} | ||
| <Menu /> | ||
| </ThemeProvider> | ||
| </QueryClientProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
dar2oar_gui/frontend/src/components/editor/code_editor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| // Copyright (c) 2023 Luma <lumakernel@gmail.com> | ||
| // SPDX-License-Identifier: MIT or Apache-2.0 | ||
| // | ||
| // issue: https://github.com/suren-atoyan/monaco-react/issues/136#issuecomment-731420078 | ||
| 'use client'; | ||
| import Editor, { type OnMount } from '@monaco-editor/react'; | ||
| import { type ComponentProps, memo, useCallback, useRef } from 'react'; | ||
|
|
||
| import type monaco from 'monaco-editor/esm/vs/editor/editor.api'; | ||
| import type { VimMode } from 'monaco-vim'; | ||
|
|
||
| const loadVimKeyBindings: OnMount = (editor, monaco) => { | ||
| // setup key bindings before monaco-vim setup | ||
|
|
||
| // setup key bindings | ||
| editor.addAction({ | ||
| // an unique identifier of the contributed action | ||
| id: 'some-unique-id', | ||
| // a label of the action that will be presented to the user | ||
| label: 'Some label!', | ||
| keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS], | ||
|
|
||
| // the method that will be executed when the action is triggered. | ||
| run: (editor) => { | ||
| alert(`we wanna save something => ${editor.getValue()}`); | ||
| }, | ||
| }); | ||
|
|
||
| // setup monaco-vim | ||
| window.require.config({ | ||
| paths: { | ||
| 'monaco-vim': 'https://unpkg.com/monaco-vim/dist/monaco-vim', | ||
| }, | ||
| }); | ||
|
|
||
| window.require(['monaco-vim'], (monacoVim: VimMode) => { | ||
| const statusNode = document.querySelector('#status-node'); | ||
| monacoVim.initVimMode(editor, statusNode); | ||
| }); | ||
| }; | ||
|
|
||
| export type CodeEditorProps = ComponentProps<typeof Editor> & { | ||
| readonly vimMode?: boolean; | ||
| }; | ||
| function CodeEditorInternal({ vimMode = false, onMount, ...params }: CodeEditorProps) { | ||
| const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null); | ||
|
|
||
| const handleDidMount: OnMount = useCallback( | ||
| (editor, monaco) => { | ||
| editorRef.current = editor; | ||
| if (vimMode) { | ||
| loadVimKeyBindings(editor, monaco); | ||
| } | ||
|
|
||
| onMount?.(editor, monaco); | ||
| }, | ||
| [onMount, vimMode], | ||
| ); | ||
|
|
||
| return <Editor key='' theme='vs-dark' {...params} onMount={handleDidMount} />; | ||
| } | ||
|
|
||
| export const CodeEditor = memo(CodeEditorInternal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,4 @@ | ||
| // @index('./*', f => `export * from '${f.path}'`) | ||
| export * from './css_editor'; | ||
| export * from './js_editor'; | ||
|
|
||
| // NOTE: These extensions must be loaded after importing AceEditor or they will error | ||
| import 'ace-builds/src-min-noconflict/ext-language_tools'; // For completion | ||
| import 'ace-builds/src-min-noconflict/keybinding-vim'; | ||
| import 'ace-builds/src-min-noconflict/mode-css'; | ||
| import 'ace-builds/src-min-noconflict/mode-javascript'; | ||
| import 'ace-builds/src-min-noconflict/snippets/css'; | ||
| import 'ace-builds/src-min-noconflict/snippets/javascript'; | ||
| import 'ace-builds/src-min-noconflict/theme-one_dark'; | ||
| export * from './code_editor'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.