From bc479fb8089556f7ca60a4d4953e402fcfbe6cae Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 2 Aug 2024 17:53:00 +0200
Subject: [PATCH] Add Word Wrap menu option to Editor React monaco context menu
 in Documents Tab (#1922)

* Remove "Go to Symbol..." menu option by default in monaco. Add option to toggle word wrap.

* Remove code that removes "Go to symbol" as it is not a public API

* Move WordWrap context menu item to its own section. Remove unnecessary parameters.

* Fix format
---
 src/Explorer/Controls/Editor/EditorReact.tsx  | 31 +++++++++++++++++--
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    |  1 +
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index f2274d7dc..ebc91c68d 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -24,13 +24,19 @@ export interface EditorReactProps {
   monacoContainerStyles?: React.CSSProperties;
   className?: string;
   spinnerClassName?: string;
+
+  enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
+  onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
+  private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
   private rootNode: HTMLElement;
   private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
 
+  private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
+
   public constructor(props: EditorReactProps) {
     super(props);
     this.state = {
@@ -113,6 +119,23 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         },
       );
     }
+
+    if (this.props.enableWordWrapContextMenuItem) {
+      editor.addAction({
+        // An unique identifier of the contributed action.
+        id: "wordwrap",
+        label: "Toggle Word Wrap",
+        contextMenuGroupId: EditorReact.VIEWING_OPTIONS_GROUP_ID,
+        contextMenuOrder: 1,
+        // Method that will be executed when the action is triggered.
+        // @param editor The editor instance is passed in as a convenience
+        run: (ed) => {
+          const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
+          ed.updateOptions({ wordWrap: newOption });
+          this.props.onWordWrapChanged(newOption);
+        },
+      });
+    }
   }
 
   /**
@@ -136,9 +159,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     };
 
     this.rootNode.innerHTML = "";
-    const monaco = await loadMonaco();
+    const lazymonaco = await loadMonaco();
+
+    // We can only get this constant after loading monaco lazily
+    this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
+
     try {
-      createCallback(monaco?.editor?.create(this.rootNode, options));
+      createCallback(lazymonaco?.editor?.create(this.rootNode, options));
     } catch (error) {
       // This could happen if the parent node suddenly disappears during create()
       console.error("Unable to create EditorReact", error);
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index a40b1a356..f415f5eaa 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1876,6 +1876,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     lineNumbers={"on"}
                     theme={"_theme"}
                     onContentChanged={_onEditorContentChange}
+                    enableWordWrapContextMenuItem={true}
                   />
                 )}
                 {selectedRows.size > 1 && (