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

app/docker/views/images/build/buildimage.html

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

app/kubernetes/views/deploy/deploy.html

@@ -184,7 +184,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>

app/portainer/components/code-editor/code-editor.html

@@ -2,6 +2,7 @@
   id="$ctrl.identifier"
   placeholder="$ctrl.placeholder"
   yaml="$ctrl.yml"
+  docker-file="$ctrl.dockerFile"
   readonly="$ctrl.readOnly"
   on-change="($ctrl.handleChange)"
   value="$ctrl.value"

app/portainer/components/code-editor/code-editor.js

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

app/portainer/components/environment-variables-panel/environment-variables-panel.html

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

app/portainer/react/components/index.ts

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

app/react/components/CodeEditor.module.css

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

app/react/components/CodeEditor.tsx

@@ -1,6 +1,7 @@
 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 { useMemo } from 'react';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as highlightTags } from '@lezer/highlight';
@@ -12,6 +13,7 @@ interface Props {
   id: string;
   placeholder?: string;
   yaml?: boolean;
+  dockerFile?: boolean;
   readonly?: boolean;
   onChange: (value: string) => void;
   value: string;
@@ -37,10 +39,18 @@ 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)
+);
 
 export function CodeEditor({
   id,
@@ -50,8 +60,18 @@ export function CodeEditor({
   value,
   height = '500px',
   yaml: isYaml,
+  dockerFile: isDockerFile,
 }: Props) {
-  const extensions = useMemo(() => (isYaml ? [yamlLanguage] : []), [isYaml]);
+  const extensions = useMemo(() => {
+    const extensions = [];
+    if (isYaml) {
+      extensions.push(yamlLanguage);
+    }
+    if (isDockerFile) {
+      extensions.push(dockerFileLanguage);
+    }
+    return extensions;
+  }, [isYaml, isDockerFile]);
 
   return (
     <>
@@ -67,6 +87,7 @@ export function CodeEditor({
         height={height}
         basicSetup={{
           highlightSelectionMatches: false,
+          autocompletion: false,
         }}
       />
     </>