mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-12 22:25:24 +03:00
22 lines
959 B
TypeScript
22 lines
959 B
TypeScript
|
import { isDesktop } from "react-device-detect";
|
||
|
|
import { MonacoEditor } from "./MonacoEditor";
|
||
|
|
import { CodeMirrorEditor } from "./CodeMirrorEditor";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Provides an interface for a Code Editor, to enable easy swapping between different implementations
|
||
|
|
*/
|
||
|
|
export type CodeEditorProps = {
|
||
|
|
initialContent: string;
|
||
|
|
yamlSchemaUrl: string;
|
||
|
|
onDidChangeContent: (content: string) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Used to swap between the Monaco editor and the CodeMirror editor depending on device type.
|
||
|
|
* The Monaco editor doesn't work well on mobile devices, see Github issue: https://github.com/microsoft/monaco-editor/issues/246
|
||
|
|
*
|
||
|
|
* A common solution is to switch to CodeMirror on mobile devices as they have invested significantly in touch support.
|
||
|
|
*
|
||
|
|
* It would be great to revisit this in in the future if/when Monaco improves mobile support.
|
||
|
|
*/
|
||
|
|
export const CodeEditor: (props: CodeEditorProps) => JSX.Element = isDesktop ? MonacoEditor : CodeMirrorEditor;
|