Add syntax highlighting support for shell and powershell scripts (#28417)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.

# Details

This PR adds syntax highlighting for shell scripts and Powershell
scripts. It switches highlighting mode based on the extension of the
file.

**Shell:**
<img width="775" alt="image"
src="https://github.com/user-attachments/assets/712ef7db-cf33-4bd7-b620-e4b55225ecf5"
/>

**Powershell:**
<img width="773" alt="image"
src="https://github.com/user-attachments/assets/8a9fedb8-d8e3-4285-9ae6-d6f17c760e52"
/>

changes/27463-add-script-syntax-highlighting

@@ -0,0 +1 @@
+- Added shell and Powershell syntax highlighting when editing scripts

frontend/components/Editor/Editor.tsx

@@ -2,6 +2,8 @@ import classnames from "classnames";
 import TooltipWrapper from "components/TooltipWrapper";
 import React, { ReactNode } from "react";
 import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-sh";
+import "ace-builds/src-noconflict/mode-powershell";
 import { IAceEditor } from "react-ace/lib/types";
 
 const baseClass = "editor";
@@ -30,6 +32,9 @@ interface IEditorProps {
    * @default "editor"
    */
   name?: string;
+  /** The syntax highlighting mode to use.
+   */
+  mode?: string;
   /** Include correct styles as a form field.
    * @default false
    */
@@ -58,6 +63,7 @@ const Editor = ({
   readOnly = false,
   wrapEnabled = false,
   name = "editor",
+  mode,
   isFormField = false,
   maxLines = 20,
   className,
@@ -118,6 +124,7 @@ const Editor = ({
     <div className={classNames}>
       {renderLabel()}
       <AceEditor
+        mode={mode}
         wrapEnabled={wrapEnabled}
         name={name}
         className={baseClass}

frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx

@@ -105,10 +105,14 @@ const EditScriptModal = ({
       return <DataError description="Close this modal and try again." />;
     }
 
+    // Set editing mode based on the file extension.
+    const mode = scriptName.match(/\.sh$/) ? "sh" : "powershell";
+
     return (
       <>
         <form onSubmit={onSubmit}>
           <Editor
+            mode={mode}
             error={formError}
             isFormField
             label="Script"