fix(code-editor): highlight syntax web editor EE-5405 (#8871)

pull/8956/head
cmeng 2023-05-17 14:07:21 +12:00 committed by GitHub
parent 1473cc208b
commit e156243e43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 41 additions and 4 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -7,6 +7,8 @@ angular.module('portainer.app').component('codeEditor', {
identifier: '@',
placeholder: '@',
yml: '<',
dockerFile: '<',
shell: '<',
readOnly: '<',
onChange: '<',
value: '<',

View File

@ -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>

View File

@ -189,6 +189,8 @@ export const componentsModule = angular
'id',
'placeholder',
'yaml',
'dockerFile',
'shell',
'readonly',
'onChange',
'value',

View File

@ -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);

View File

@ -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,
}}
/>
</>