mirror of https://github.com/portainer/portainer
fix(code-editor): highlight syntax web editor EE-5405 (#8871)
parent
1473cc208b
commit
e156243e43
|
@ -87,7 +87,7 @@
|
|||
<code-editor
|
||||
identifier="image-build-editor"
|
||||
placeholder="Define or paste the content of your Dockerfile here"
|
||||
yml="false"
|
||||
docker-file="true"
|
||||
on-change="(editorUpdate)"
|
||||
></code-editor>
|
||||
</div>
|
||||
|
|
|
@ -145,6 +145,7 @@
|
|||
placeholder="Define or paste the content of your script file here"
|
||||
on-change="($ctrl.editorUpdate)"
|
||||
value="$ctrl.model.FileContent"
|
||||
shell="true"
|
||||
></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -195,7 +195,7 @@
|
|||
<form class="form-horizontal mt-3">
|
||||
<div class="form-group" ng-if="ctrl.state.activeTab === 1">
|
||||
<div class="col-sm-12">
|
||||
<code-editor identifier="kubernetes-deploy-logs" read-only="true" yml="false" value="ctrl.errorLog"></code-editor>
|
||||
<code-editor identifier="kubernetes-deploy-logs" yml="true" read-only="true" value="ctrl.errorLog"></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
id="$ctrl.identifier"
|
||||
placeholder="$ctrl.placeholder"
|
||||
yaml="$ctrl.yml"
|
||||
docker-file="$ctrl.dockerFile"
|
||||
shell="$ctrl.shell"
|
||||
readonly="$ctrl.readOnly"
|
||||
on-change="($ctrl.handleChange)"
|
||||
value="$ctrl.value"
|
||||
|
|
|
@ -7,6 +7,8 @@ angular.module('portainer.app').component('codeEditor', {
|
|||
identifier: '@',
|
||||
placeholder: '@',
|
||||
yml: '<',
|
||||
dockerFile: '<',
|
||||
shell: '<',
|
||||
readOnly: '<',
|
||||
onChange: '<',
|
||||
value: '<',
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
Switch to simple mode to define variables line by line, or load from .env file
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<code-editor identifier="environment-variables-editor" placeholder="e.g. key=value" value="$ctrl.editorText" yml="false" on-change="($ctrl.editorUpdate)"></code-editor>
|
||||
<code-editor identifier="environment-variables-editor" placeholder="e.g. key=value" value="$ctrl.editorText" on-change="($ctrl.editorUpdate)"></code-editor>
|
||||
</div>
|
||||
<div class="col-sm-12 small text-muted" ng-if="$ctrl.showHelpMessage">
|
||||
<pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
|
||||
|
|
|
@ -189,6 +189,8 @@ export const componentsModule = angular
|
|||
'id',
|
||||
'placeholder',
|
||||
'yaml',
|
||||
'dockerFile',
|
||||
'shell',
|
||||
'readonly',
|
||||
'onChange',
|
||||
'value',
|
||||
|
|
|
@ -4,6 +4,8 @@
|
|||
--text-cm-string-color: var(--red-3);
|
||||
--text-cm-number-color: var(--green-1);
|
||||
--text-cm-keyword-color: var(--ui-blue-dark-9);
|
||||
--text-cm-comment-color: var(--ui-orange-6);
|
||||
--text-cm-variable-name-color: var(--ui-green-8);
|
||||
--text-codemirror-color: var(--black-color);
|
||||
--bg-codemirror-color: var(--white-color);
|
||||
--bg-codemirror-gutters-color: var(--grey-17);
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import CodeMirror from '@uiw/react-codemirror';
|
||||
import { StreamLanguage, LanguageSupport } from '@codemirror/language';
|
||||
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
|
||||
import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
|
||||
import { shell } from '@codemirror/legacy-modes/mode/shell';
|
||||
import { useMemo } from 'react';
|
||||
import { createTheme } from '@uiw/codemirror-themes';
|
||||
import { tags as highlightTags } from '@lezer/highlight';
|
||||
|
@ -12,6 +14,8 @@ interface Props {
|
|||
id: string;
|
||||
placeholder?: string;
|
||||
yaml?: boolean;
|
||||
dockerFile?: boolean;
|
||||
shell?: boolean;
|
||||
readonly?: boolean;
|
||||
onChange: (value: string) => void;
|
||||
value: string;
|
||||
|
@ -37,10 +41,19 @@ const theme = createTheme({
|
|||
},
|
||||
{ tag: highlightTags.number, color: 'var(--text-cm-number-color)' },
|
||||
{ tag: highlightTags.keyword, color: 'var(--text-cm-keyword-color)' },
|
||||
{ tag: highlightTags.comment, color: 'var(--text-cm-comment-color)' },
|
||||
{
|
||||
tag: highlightTags.variableName,
|
||||
color: 'var(--text-cm-variable-name-color)',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const yamlLanguage = new LanguageSupport(StreamLanguage.define(yaml));
|
||||
const dockerFileLanguage = new LanguageSupport(
|
||||
StreamLanguage.define(dockerFile)
|
||||
);
|
||||
const shellLanguage = new LanguageSupport(StreamLanguage.define(shell));
|
||||
|
||||
export function CodeEditor({
|
||||
id,
|
||||
|
@ -50,8 +63,22 @@ export function CodeEditor({
|
|||
value,
|
||||
height = '500px',
|
||||
yaml: isYaml,
|
||||
dockerFile: isDockerFile,
|
||||
shell: isShell,
|
||||
}: Props) {
|
||||
const extensions = useMemo(() => (isYaml ? [yamlLanguage] : []), [isYaml]);
|
||||
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]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -67,6 +94,7 @@ export function CodeEditor({
|
|||
height={height}
|
||||
basicSetup={{
|
||||
highlightSelectionMatches: false,
|
||||
autocompletion: false,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
|
Loading…
Reference in New Issue