2023-02-23 05:10:31 +00:00
|
|
|
import CodeMirror from '@uiw/react-codemirror';
|
2023-03-06 07:13:42 +00:00
|
|
|
import { StreamLanguage, LanguageSupport } from '@codemirror/language';
|
2023-02-23 05:10:31 +00:00
|
|
|
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
|
2023-05-17 02:07:21 +00:00
|
|
|
import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
|
|
|
|
import { shell } from '@codemirror/legacy-modes/mode/shell';
|
2023-02-23 05:10:31 +00:00
|
|
|
import { useMemo } from 'react';
|
2023-03-06 07:13:42 +00:00
|
|
|
import { createTheme } from '@uiw/codemirror-themes';
|
|
|
|
import { tags as highlightTags } from '@lezer/highlight';
|
|
|
|
|
2023-05-31 00:28:11 +00:00
|
|
|
import { CopyButton } from '@@/buttons/CopyButton';
|
|
|
|
|
2023-03-06 07:13:42 +00:00
|
|
|
import styles from './CodeEditor.module.css';
|
2023-03-30 09:26:32 +00:00
|
|
|
import { TextTip } from './Tip/TextTip';
|
2023-02-23 05:10:31 +00:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
id: string;
|
|
|
|
placeholder?: string;
|
|
|
|
yaml?: boolean;
|
2023-05-17 02:07:21 +00:00
|
|
|
dockerFile?: boolean;
|
|
|
|
shell?: boolean;
|
2023-02-23 05:10:31 +00:00
|
|
|
readonly?: boolean;
|
|
|
|
onChange: (value: string) => void;
|
|
|
|
value: string;
|
|
|
|
height?: string;
|
|
|
|
}
|
|
|
|
|
2023-03-06 07:13:42 +00:00
|
|
|
const theme = createTheme({
|
|
|
|
theme: 'light',
|
|
|
|
settings: {
|
|
|
|
background: 'var(--bg-codemirror-color)',
|
|
|
|
foreground: 'var(--text-codemirror-color)',
|
|
|
|
caret: 'var(--border-codemirror-cursor-color)',
|
|
|
|
selection: 'var(--bg-codemirror-selected-color)',
|
|
|
|
selectionMatch: 'var(--bg-codemirror-selected-color)',
|
|
|
|
gutterBackground: 'var(--bg-codemirror-gutters-color)',
|
|
|
|
},
|
|
|
|
styles: [
|
|
|
|
{ tag: highlightTags.atom, color: 'var(--text-cm-default-color)' },
|
|
|
|
{ tag: highlightTags.meta, color: 'var(--text-cm-meta-color)' },
|
|
|
|
{
|
|
|
|
tag: [highlightTags.string, highlightTags.special(highlightTags.brace)],
|
|
|
|
color: 'var(--text-cm-string-color)',
|
|
|
|
},
|
|
|
|
{ tag: highlightTags.number, color: 'var(--text-cm-number-color)' },
|
|
|
|
{ tag: highlightTags.keyword, color: 'var(--text-cm-keyword-color)' },
|
2023-05-17 02:07:21 +00:00
|
|
|
{ tag: highlightTags.comment, color: 'var(--text-cm-comment-color)' },
|
|
|
|
{
|
|
|
|
tag: highlightTags.variableName,
|
|
|
|
color: 'var(--text-cm-variable-name-color)',
|
|
|
|
},
|
2023-03-06 07:13:42 +00:00
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
const yamlLanguage = new LanguageSupport(StreamLanguage.define(yaml));
|
2023-05-17 02:07:21 +00:00
|
|
|
const dockerFileLanguage = new LanguageSupport(
|
|
|
|
StreamLanguage.define(dockerFile)
|
|
|
|
);
|
|
|
|
const shellLanguage = new LanguageSupport(StreamLanguage.define(shell));
|
2023-03-06 07:13:42 +00:00
|
|
|
|
2023-02-23 05:10:31 +00:00
|
|
|
export function CodeEditor({
|
|
|
|
id,
|
|
|
|
onChange,
|
|
|
|
placeholder,
|
|
|
|
readonly,
|
|
|
|
value,
|
|
|
|
height = '500px',
|
|
|
|
yaml: isYaml,
|
2023-05-17 02:07:21 +00:00
|
|
|
dockerFile: isDockerFile,
|
|
|
|
shell: isShell,
|
2023-02-23 05:10:31 +00:00
|
|
|
}: Props) {
|
2023-05-17 02:07:21 +00:00
|
|
|
const extensions = useMemo(() => {
|
|
|
|
const extensions = [];
|
|
|
|
if (isYaml) {
|
|
|
|
extensions.push(yamlLanguage);
|
|
|
|
}
|
|
|
|
if (isDockerFile) {
|
|
|
|
extensions.push(dockerFileLanguage);
|
|
|
|
}
|
|
|
|
if (isShell) {
|
|
|
|
extensions.push(shellLanguage);
|
|
|
|
}
|
|
|
|
return extensions;
|
|
|
|
}, [isYaml, isDockerFile, isShell]);
|
2023-02-23 05:10:31 +00:00
|
|
|
|
|
|
|
return (
|
2023-03-30 09:26:32 +00:00
|
|
|
<>
|
2023-08-17 10:01:10 +00:00
|
|
|
<div className="mb-2 flex items-center justify-between">
|
|
|
|
<div className="flex flex-1 items-center">
|
|
|
|
{!!placeholder && <TextTip color="blue">{placeholder}</TextTip>}
|
2023-05-31 00:28:11 +00:00
|
|
|
</div>
|
2023-08-17 10:01:10 +00:00
|
|
|
|
|
|
|
<CopyButton
|
2023-08-27 21:01:35 +00:00
|
|
|
fadeDelay={2500}
|
2023-08-17 10:01:10 +00:00
|
|
|
copyText={value}
|
|
|
|
color="link"
|
|
|
|
className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
|
|
|
|
indicatorPosition="left"
|
|
|
|
>
|
|
|
|
Copy to clipboard
|
|
|
|
</CopyButton>
|
2023-05-31 00:28:11 +00:00
|
|
|
</div>
|
2023-03-30 09:26:32 +00:00
|
|
|
<CodeMirror
|
|
|
|
className={styles.root}
|
|
|
|
theme={theme}
|
|
|
|
value={value}
|
|
|
|
onChange={onChange}
|
|
|
|
readOnly={readonly}
|
|
|
|
id={id}
|
|
|
|
extensions={extensions}
|
|
|
|
height={height}
|
2023-05-09 00:59:34 +00:00
|
|
|
basicSetup={{
|
|
|
|
highlightSelectionMatches: false,
|
2023-05-17 02:07:21 +00:00
|
|
|
autocompletion: false,
|
2023-05-09 00:59:34 +00:00
|
|
|
}}
|
2023-03-30 09:26:32 +00:00
|
|
|
/>
|
|
|
|
</>
|
2023-02-23 05:10:31 +00:00
|
|
|
);
|
|
|
|
}
|