[Monaco]Improve .gitignore definition (#33263)

* Update gitignore.js

* Update gitignore.js

* Add custom color for negations

* Add custom color for negations

* Regex refactoring

* Regex refactoring again

* Move customTokenColors to a separate file

* Move customTokenColors to a separate file

* Update devdocs

* Use kebab case for token names

* Update negation color

* Update index.html formatting

doc/devdocs/common/FilePreviewCommon.md

@@ -47,7 +47,16 @@ registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
 
   * The id can be anything. Recommended is one of the file extensions. For example "php" or "reg".
 
-4. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
+4. In case you wish to add a custom color for a token, you can do so by adding the following line to [`customTokenColors.js`](/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js):
+```javascript
+{token: 'token-name', foreground: 'ff0000'}
+```
+> Replace `token-name` with the name of the token and `ff0000` with the hex code of the desired color.
+> Note: you can also specify a `background` and a `fontStyle` attribute for your token.
+
+* Keep in mind that these rules apply to all languages. Therefore, you should not change the colors of any default tokens. Instead, create new tokens specific to the language you are adding.
+
+5. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
 
 ### Add a new file extension to an existing language
 

installer/PowerToysSetup/generateFileList.ps1

@@ -21,7 +21,7 @@ $fileWxs = Get-Content $wxsFilePath;
 
 $fileExclusionList = @("*.pdb", "*.lastcodeanalysissucceeded", "createdump.exe", "powertoys.exe")
 
-$fileInclusionList = @("*.dll", "*.exe", "*.json", "*.msix", "*.png", "*.gif", "*.ico", "*.cur", "*.svg", "index.html", "reg.js", "gitignore.js", "monacoSpecialLanguages.js", "*.pri")
+$fileInclusionList = @("*.dll", "*.exe", "*.json", "*.msix", "*.png", "*.gif", "*.ico", "*.cur", "*.svg", "index.html", "reg.js", "gitignore.js", "monacoSpecialLanguages.js", "customTokenColors.js", "*.pri")
 
 $dllsToIgnore = @("System.CodeDom.dll", "WindowsBase.dll")
 

src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js

@@ -5,8 +5,8 @@
         tokenizer: {
             root: [
                 [/^#.*$/, 'comment'],
-                [/^\s*!.*/, 'invalid'],
-                [/^\s*[^#]+/, "tag"]
+                [/.*((?<!(^|\/))\*\*.*|\*\*(?!(\/|$))).*/, 'invalid'],
+                [/((?:^!\s*(?:\\\s|\S)+)?)((?:^\s*(?:\\\s|\S)+)?)((?:\s+(?:\\\s|\S)+)*)/, ['custom-gitignore.negation', 'tag', 'invalid']]
             ]
         }
     };

src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js

@@ -0,0 +1,3 @@
+export const customTokenColors = [
+    {token: 'custom-gitignore.negation', foreground: 'c00ce0'}
+];

src/common/FilePreviewCommon/Assets/Monaco/index.html

@@ -6,7 +6,7 @@
 
         // Get URL parameters:
         // `code` contains the code of the file in base64 encoded
-        // `theme` can be "light" or "dark"
+        // `theme` can be "vs" for light theme or "vs-dark" for dark theme
         // `lang` is the language of the file
         // `wrap` if the editor is wrapping or not
         
@@ -59,19 +59,29 @@
     <script src="http://[[PT_URL]]/monacoSpecialLanguages.js" type="module"></script>
 <script type="module">
         var editor;
-        import { registerAdditionalLanguages } from "http://[[PT_URL]]/monacoSpecialLanguages.js"
+        import { registerAdditionalLanguages } from 'http://[[PT_URL]]/monacoSpecialLanguages.js';
+        import { customTokenColors } from 'http://[[PT_URL]]/customTokenColors.js';
         require.config({ paths: { vs: 'http://[[PT_URL]]/monacoSRC/min/vs' } });
         require(['vs/editor/editor.main'], async function () {
             await registerAdditionalLanguages(monaco)
+
+            // Creates a theme to handle custom tokens
+            monaco.editor.defineTheme('theme', {
+                base: theme, // Sets the base theme to "vs" or "vs-dark" depending on the user's preference
+                inherit: true,
+                rules: customTokenColors,
+                colors: {} // `colors` is a required attribute
+            });
+
             // Creates the editor
-            // For all parameters: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
+            // For all parameters: https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html
             editor = monaco.editor.create(document.getElementById('container'), {
                 value: code, // Sets content of the editor
-                language: lang, // Sets language fof the code
+                language: lang, // Sets language of the code
                 readOnly: true, // Sets to readonly
-                theme: theme, // Sets editor theme
+                theme: 'theme', // Sets editor theme
                 minimap: {enabled: false}, // Disables minimap
-                lineNumbersMinChars: "3", //Width of the line numbers
+                lineNumbersMinChars: '3', // Width of the line numbers
                 scrollbar: {
                     // Deactivate shadows
                     shadows: false,
@@ -79,17 +89,16 @@
                     // Render scrollbar automatically
                     vertical: 'auto',
                     horizontal: 'auto',
-
                 },
                 stickyScroll: {enabled: stickyScroll},
                 fontSize: fontSize,
-                wordWrap: (wrap?"on":"off") // Word wraps
+                wordWrap: (wrap ? 'on' : 'off') // Word wraps
             });
-            window.onresize = function (){
+            window.onresize = () => {
                 editor.layout();
             };
 
-            // Add switch wrap button to context menu
+            // Add toggle wrap button to context menu
             editor.addAction({
                 id: 'text-wrap',
 
@@ -101,17 +110,17 @@
                 // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
                 keybindingContext: null,
 
-			contextMenuGroupId: 'cutcopypaste',
+                contextMenuGroupId: 'cutcopypaste',
 
-			contextMenuOrder: 100,
+                contextMenuOrder: 100,
 
                 // Method that will be executed when the action is triggered.
                 // @param editor The editor instance is passed in as a convenience
                 run: function (ed) {
-                    if(wrap){
-                        editor.updateOptions({ wordWrap: "off" })
-                    }else{
-                        editor.updateOptions({ wordWrap: "on" })
+                    if (wrap) {
+                        editor.updateOptions({ wordWrap: 'off' })
+                    } else {
+                        editor.updateOptions({ wordWrap: 'on' })
                     }
                     wrap = !wrap;
                 }
@@ -120,11 +129,11 @@
             onContextMenu();
         });
 
-        function onContextMenu(){
+        function onContextMenu() {
             // Hide context menu items
             // Code modified from https://stackoverflow.com/questions/48745208/disable-cut-and-copy-in-context-menu-in-monaco-editor/65413517#65413517
             let menus = require('vs/platform/actions/common/actions').MenuRegistry._menuItems
-            let contextMenuEntry = [...menus].find(entry => entry[0].id == "EditorContext")
+            let contextMenuEntry = [...menus].find(entry => entry[0].id == 'EditorContext')
             let contextMenuLinks = contextMenuEntry[1]
 
             let removableIds = ['editor.action.clipboardCutAction', 'editor.action.formatDocument', 'editor.action.formatSelection', 'editor.action.quickCommand', 'editor.action.quickOutline', 'editor.action.refactor', 'editor.action.sourceAction', 'editor.action.rename', undefined, 'editor.action.revealDefinition', 'editor.action.revealDeclaration', 'editor.action.goToTypeDefinition', 'editor.action.goToImplementation', 'editor.action.goToReferences', 'editor.action.changeAll']

src/common/FilePreviewCommon/FilePreviewCommon.csproj

@@ -34,6 +34,9 @@
     <None Update="Assets\Monaco\monacoSpecialLanguages.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
+    <None Update="Assets\Monaco\customTokenColors.js">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
     <Content Include="Assets\Monaco\monacoSRC\**">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>