Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

fix(ui/code-editor): apply theme colors [EE-5104] (#8558)

Browse source 
* fix(ui/code-editor): apply theme colors [EE-5104]

fix [EE-5104]

* fix(kube/yaml): expand yaml inspector

* fix(ui/code-editor): have default height

* fix(ui/code-editor): boolean color

* fix(ui/code-editor): style search bar
This commit is contained in:
Chaim Lev-Ari 2023-03-06 09:13:42 +02:00 • committed by GitHub
parent 07100258cd
commit 03712966e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 128 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/react/components/CodeEditor.tsx
View file

@ -1,7 +1,11 @@
import CodeMirror from '@uiw/react-codemirror';
import { StreamLanguage } from '@codemirror/language';
import { StreamLanguage, LanguageSupport } from '@codemirror/language';
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
import { useMemo } from 'react';
import { createTheme } from '@uiw/codemirror-themes';
import { tags as highlightTags } from '@lezer/highlight';
import styles from './CodeEditor.module.css';
interface Props {
id: string;
@ -13,6 +17,30 @@ interface Props {
height?: string;
}
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)' },
],
});
const yamlLanguage = new LanguageSupport(StreamLanguage.define(yaml));
export function CodeEditor({
id,
onChange,
@ -22,13 +50,12 @@ export function CodeEditor({
height = '500px',
yaml: isYaml,
}: Props) {
const extensions = useMemo(
() => (isYaml ? [StreamLanguage.define(yaml)] : []),
[isYaml]
);
const extensions = useMemo(() => (isYaml ? [yamlLanguage] : []), [isYaml]);
return (
<CodeMirror
className={styles.root}
theme={theme}
value={value}
onChange={onChange}
readOnly={readonly}