PR6: Add Monaco editor (#114)

Summary:
- Hardens Monaco Diff Editor lifecycle and option synchronization for consistent VSCode-style diffs.
- Ensures both sides have word wrap on by default and mitigates disposal errors during navigation.

#### Key Changes
- `website/src/components/DiffComparisonView.tsx` sets `wordWrap`, `wordWrapOverride1/2`, `diffWordWrap`, `wordWrapMinified`, `wrappingStrategy` and updates options on layout/events.
- Adds explicit `editor.dispose()` and `editor.setModel(null)` in unmount cleanup to prevent "TextModel got disposed" errors.
- `FileDiffView` optionally unmounts diff (`hideDiff`) before navigation to avoid Monaco race conditions.

Pull Request resolved: #114

Reviewed By: sfzhu93

Differential Revision: D82745927

Pulled By: FindHao

fbshipit-source-id: 7b7787c77d91556c26951a58ed0250de9ec7d4e7

Author: FindHao

website/src/components/DiffComparisonView.tsx

@@ -87,10 +87,15 @@ const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
     return () => {
       try {
         const editor: any = editorRef.current;
-        if (editor && typeof editor.dispose === 'function') {
-          editor.dispose();
+        if (editor) {
+          try { editor.setModel?.(null); } catch {}
+          try { editor.getOriginalEditor?.()?.setModel?.(null); } catch {}
+          try { editor.getModifiedEditor?.()?.setModel?.(null); } catch {}
+          try { editor.dispose?.(); } catch {}
         }
       } catch {}
+      editorRef.current = null as any;
+      try { (window as any).__DIFF = undefined; } catch {}
     };
   }, []);
 
@@ -200,5 +205,3 @@ const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
 };
 
 export default DiffComparisonView;
-
-

website/src/pages/FileDiffView.tsx

@@ -186,10 +186,10 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
       if (sessLeftLen === 0 && kernelsLeft.length > 0) {
         if (leftLoadedUrl) {
           sess.setLeftFromUrl(leftLoadedUrl, kernelsLeft);
-          
+
         } else {
           sess.setLeftFromLocal(kernelsLeft);
-          
+
         }
         sess.setLeftIdx(Math.max(0, leftIdx));
       }
@@ -305,6 +305,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
         </div>
         {!hideDiff && (
           <DiffComparisonView
+            key={`single-${leftIdx}-${rightIdx}-${irType}`}
             leftContent={leftContent}
             rightContent={rightContent}
             height="calc(100vh - 14rem)"
@@ -350,6 +351,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
                 <div className="px-2 pb-2">
                   {!hideDiff && (
                     <DiffComparisonView
+                      key={`all-${t}-${leftIdx}-${rightIdx}`}
                       leftContent={leftContent}
                       rightContent={rightContent}
                       height="calc(100vh - 14rem)"
@@ -641,5 +643,3 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
 };
 
 export default FileDiffView;
-
-