From cdf5677eb9c6ab35d7355c241cfd0c079270c42b Mon Sep 17 00:00:00 2001
From: PesBandi <127593627+PesBandi@users.noreply.github.com>
Date: Fri, 14 Jun 2024 17:09:52 +0200
Subject: [PATCH] [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       | 11 ++++-
 installer/PowerToysSetup/generateFileList.ps1 |  2 +-
 .../Monaco/customLanguages/gitignore.js       |  4 +-
 .../Assets/Monaco/customTokenColors.js        |  3 ++
 .../Assets/Monaco/index.html                  | 45 +++++++++++--------
 .../FilePreviewCommon.csproj                  |  3 ++
 6 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js

diff --git a/doc/devdocs/common/FilePreviewCommon.md b/doc/devdocs/common/FilePreviewCommon.md
index 7293e8c978..aee9de2b2a 100644
--- a/doc/devdocs/common/FilePreviewCommon.md
+++ b/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
 
diff --git a/installer/PowerToysSetup/generateFileList.ps1 b/installer/PowerToysSetup/generateFileList.ps1
index 9d9fe36c10..f674eae374 100644
--- a/installer/PowerToysSetup/generateFileList.ps1
+++ b/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")
 
diff --git a/src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js b/src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js
index 365f8f69cc..e4539dd50a 100644
--- a/src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js
+++ b/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']]
             ]
         }
     };
diff --git a/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js b/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js
new file mode 100644
index 0000000000..aa20d58d42
--- /dev/null
+++ b/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js
@@ -0,0 +1,3 @@
+export const customTokenColors = [
+    {token: 'custom-gitignore.negation', foreground: 'c00ce0'}
+];
\ No newline at end of file
diff --git a/src/common/FilePreviewCommon/Assets/Monaco/index.html b/src/common/FilePreviewCommon/Assets/Monaco/index.html
index d452475233..26d63dee29 100644
--- a/src/common/FilePreviewCommon/Assets/Monaco/index.html
+++ b/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']
diff --git a/src/common/FilePreviewCommon/FilePreviewCommon.csproj b/src/common/FilePreviewCommon/FilePreviewCommon.csproj
index da6b7bdbdb..d9493ece99 100644
--- a/src/common/FilePreviewCommon/FilePreviewCommon.csproj
+++ b/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>