fix(ui): migrate remaining Monaco views to Shiki

.bitmap

@@ -1486,13 +1486,6 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/component/renaming"
     },
-    "renderers/default-node-renderers": {
-        "name": "renderers/default-node-renderers",
-        "scope": "teambit.api-reference",
-        "version": "0.0.40",
-        "mainFile": "index.ts",
-        "rootDir": "components/renderers/default-node-renderers"
-    },
     "ripple": {
         "name": "ripple",
         "scope": "teambit.cloud",
@@ -1794,6 +1787,20 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/component-compare/changelog"
     },
+    "ui/component-compare/compare-aspects/compare-aspect-view": {
+        "name": "ui/component-compare/compare-aspects/compare-aspect-view",
+        "scope": "teambit.component",
+        "version": "0.0.16",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/compare-aspect-view"
+    },
+    "ui/component-compare/compare-aspects/compare-aspects": {
+        "name": "ui/component-compare/compare-aspects/compare-aspects",
+        "scope": "teambit.component",
+        "version": "0.0.155",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-compare/compare-aspects/compare-aspects"
+    },
     "ui/component-compare/component-compare": {
         "name": "ui/component-compare/component-compare",
         "scope": "teambit.component",
@@ -2320,4 +2327,4 @@
         "rootDir": "scopes/dependencies/yarn"
     },
     "$schema-version": "17.0.0"
-}
+}

components/ui/code-compare/code-compare-editor/code-compare-editor.provider.tsx

@@ -1,21 +1,14 @@
 /* eslint-disable react/prop-types */
 import type { ReactNode } from 'react';
-import React, { createContext, useContext } from 'react';
-
-const CodeCompareEditorContext = createContext<any>(null);
+import React from 'react';
 
 type CodeCompareEditorProviderProps = {
   children: ReactNode;
 };
 
 export const CodeCompareEditorProvider: React.FC<CodeCompareEditorProviderProps> = ({ children }) => {
-  const DiffEditor = React.lazy(() => {
-    return import('@monaco-editor/react').then((module) => ({ default: module.DiffEditor }));
-  });
-
-  return <CodeCompareEditorContext.Provider value={DiffEditor}>{children}</CodeCompareEditorContext.Provider>;
+  return <>{children}</>;
 };
 
-export const useCodeCompareEditor = () => {
-  return useContext(CodeCompareEditorContext);
-};
+/** @deprecated the Shiki diff renderer no longer needs an injected editor component. */
+export const useCodeCompareEditor = () => null;

components/ui/code-compare/code-compare-editor/code-compare-editor.tsx

@@ -1,88 +1,70 @@
-import React from 'react';
-import type { DiffEditorProps, DiffOnMount } from '@monaco-editor/react';
-import { loader } from '@monaco-editor/react';
-import { darkMode } from '@teambit/base-ui.theme.dark-theme';
+import React, { useEffect, useState } from 'react';
+import { DiffViewer } from '@teambit/code.ui.diff-viewer';
 import type { EditorSettingsState } from '../code-compare-editor-settings';
 
-loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.48.0/min/vs' } });
-
 export type CodeCompareEditorProps = {
-  language: string;
-  handleEditorDidMount: DiffOnMount;
+  language?: string;
+  handleEditorDidMount?: (...args: any[]) => void;
   Loader: React.ReactNode;
   modifiedFileContent?: string;
   originalFileContent?: string;
   originalPath: string;
   modifiedPath: string;
-  DiffEditor: React.FC<DiffEditorProps>;
+  DiffEditor?: React.ComponentType<any> | null;
   fullScreen?: boolean;
 } & EditorSettingsState;
 
+const REGULAR_DIFF_HEIGHT = 640;
+const FULLSCREEN_CHROME_HEIGHT = 160;
+const MIN_FULLSCREEN_DIFF_HEIGHT = 220;
+
+function useDiffHeight(fullScreen?: boolean) {
+  const [height, setHeight] = useState(REGULAR_DIFF_HEIGHT);
+
+  useEffect(() => {
+    if (!fullScreen) {
+      setHeight(REGULAR_DIFF_HEIGHT);
+      return undefined;
+    }
+
+    const updateHeight = () =>
+      setHeight(Math.max(MIN_FULLSCREEN_DIFF_HEIGHT, window.innerHeight - FULLSCREEN_CHROME_HEIGHT));
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [fullScreen]);
+
+  return height;
+}
+
 export function CodeCompareEditor({
   modifiedFileContent,
   originalFileContent,
   originalPath,
   modifiedPath,
   language,
-  handleEditorDidMount,
   ignoreWhitespace,
   wordWrap,
   diffOnly,
   editorViewMode,
-  Loader,
-  DiffEditor,
   fullScreen,
 }: CodeCompareEditorProps) {
+  const maxHeight = useDiffHeight(fullScreen);
   return (
-    <React.Suspense fallback={Loader ?? <></>}>
-      <DiffEditor
-        // need to force re-render when the editor view mode changes
-        key={`${originalPath}-${modifiedPath}-${editorViewMode}`}
-        modified={modifiedFileContent || undefined}
-        original={originalFileContent || undefined}
-        language={language}
-        originalModelPath={originalPath}
-        modifiedModelPath={modifiedPath}
-        onMount={handleEditorDidMount}
-        className={darkMode}
-        theme="vs-dark"
-        options={
-          {
-            ignoreTrimWhitespace: ignoreWhitespace,
-            useInlineViewWhenSpaceIsLimited: false,
-            readOnly: true,
-            renderSideBySide: editorViewMode === 'split',
-            minimap: { enabled: false },
-            scrollbar: {
-              alwaysConsumeMouseWheel: !wordWrap,
-              vertical: fullScreen ? 'auto' : 'hidden',
-              horizontal: 'hidden',
-            },
-            hideUnchangedRegions: {
-              enabled: diffOnly,
-              revealLineCount: 20,
-              contextLineCount: 2,
-              minimumLineCount: 5,
-            },
-            renderOverviewRuler: fullScreen,
-            scrollBeyondLastLine: false,
-            folding: false,
-            overviewRulerLanes: 0,
-            automaticLayout: true,
-            overviewRulerBorder: false,
-            diffWordWrap: (wordWrap && 'on') || 'off',
-            wordWrap: (wordWrap && 'on') || 'off',
-            wrappingStrategy: (wordWrap && 'advanced') || undefined,
-            fixedOverflowWidgets: true,
-            renderLineHighlight: 'none',
-            lineHeight: 20,
-            padding: { top: 8 },
-            hover: { enabled: false },
-            cursorBlinking: 'smooth',
-          } as any
-        }
-        loading={Loader}
-      />
-    </React.Suspense>
+    <DiffViewer
+      key={`${originalPath}-${modifiedPath}-${editorViewMode}`}
+      fileName={modifiedPath || originalPath}
+      oldContent={originalFileContent || ''}
+      newContent={modifiedFileContent || ''}
+      ignoreTrimWhitespace={ignoreWhitespace}
+      language={language}
+      view={editorViewMode === 'inline' ? 'unified' : 'split'}
+      contextLines={diffOnly ? 3 : Number.MAX_SAFE_INTEGER}
+      maxHeight={maxHeight}
+      showHeader={false}
+      showViewToggle={false}
+      collapsible={false}
+      wrap={wordWrap}
+    />
   );
 }

components/ui/code-compare/code-compare-view/code-compare-view.module.scss

@@ -2,6 +2,7 @@
 
 .componentCompareCodeViewContainer {
   width: 100%;
+  min-height: 250px;
   display: flex;
   flex-direction: column;
   background: var(--on-surface-neutral-low-color, #282828) !important;
@@ -11,11 +12,14 @@
 .componentCompareCodeDiffEditorContainer {
   display: flex;
   flex: 1;
+  min-width: 0;
+  min-height: 220px;
+  padding: 8px;
   transition: height 0.4s ease-in-out;
   position: relative;
 
-  > section {
-    overflow: hidden;
+  > * {
+    width: 100%;
   }
 }