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

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

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

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

@@ -7,6 +7,8 @@ angular.module('portainer.app').component('codeEditor', {
     identifier: '@',
     placeholder: '@',
     yml: '<',
+    dockerFile: '<',
+    shell: '<',
     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,8 @@ export const componentsModule = angular
       'id',
       'placeholder',
       'yaml',
+      'dockerFile',
+      'shell',
       'readonly',
       'onChange',
       'value',