Exafunction · khou22 · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024
diff --git a/src/components/CodeiumEditor/CodeiumEditor.tsx b/src/components/CodeiumEditor/CodeiumEditor.tsx
@@ -12,6 +12,7 @@ import { LanguageServerService } from '../../api/proto/exa/language_server_pb/la
 import { InlineCompletionProvider } from './InlineCompletionProvider';
 import { CodeiumLogo } from '../CodeiumLogo/CodeiumLogo';
 import { Document } from '../../models';
+import { deepMerge } from '../../utils/merge';
 
 export interface CodeiumEditorProps extends EditorProps {
   language: string;
@@ -184,26 +185,28 @@ export const CodeiumEditor: React.FC<CodeiumEditorProps> = ({
         width={layout.width}
         height={layout.height}
         onMount={handleEditorDidMount}
-        options={{
-          scrollBeyondLastColumn: 0,
-          scrollbar: {
-            alwaysConsumeMouseWheel: false,
+        options={deepMerge<editor.IStandaloneEditorConstructionOptions>(
+          props.options,
+          {
+            scrollBeyondLastColumn: 0,
+            scrollbar: {
+              alwaysConsumeMouseWheel: false,
+            },
+            codeLens: false,
+            // for resizing, but apparently might have "severe performance impact"
+            // automaticLayout: true,
+            minimap: {
+              enabled: false,
+            },
+            quickSuggestions: false,
+            folding: false,
+            foldingHighlight: false,
+            foldingImportsByDefault: false,
+            links: false,
+            fontSize: 14,
+            wordWrap: 'on',
           },
-          codeLens: false,
-          // for resizing, but apparently might have "severe performance impact"
-          // automaticLayout: true,
-          minimap: {
-            enabled: false,
-          },
-          quickSuggestions: false,
-          folding: false,
-          foldingHighlight: false,
-          foldingImportsByDefault: false,
-          links: false,
-          fontSize: 14,
-          wordWrap: 'on',
-          ...props.options,
-        }}
+        )}
       />
     </div>
   );

diff --git a/src/stories/CodeiumEditor.stories.tsx b/src/stories/CodeiumEditor.stories.tsx
@@ -167,6 +167,11 @@ export const MultiFileContext: Story = {
   args: {
     ...baseParams,
     language: 'javascript',
+    options: {
+      scrollbar: {
+        vertical: 'hidden',
+      },
+    },
     value: `// You have context over a sample HTML page.
 // Codeium's generation will take this context into account when suggesting.
 

diff --git a/src/utils/merge.ts b/src/utils/merge.ts
@@ -0,0 +1,31 @@
+/**
+ * Merges a partial object with a fallback object, deeply combining the two.
+ *
+ * @param {Partial<T>} partial - the partial object to merge (can be undefined)
+ * @param {T} fallback - the fallback object to merge with
+ * @return {T} the merged object
+ */
+export function deepMerge<T>(partial: Partial<T> | undefined, fallback: T): T {
+  const merged: any = { ...fallback };
+
+  for (const key in partial) {
+    if (typeof partial[key] === 'object' && !Array.isArray(partial[key])) {
+      if (
+        fallback[key] &&
+        typeof fallback[key] === 'object' &&
+        !Array.isArray(fallback[key])
+      ) {
+        merged[key] = deepMerge(
+          partial[key] as Partial<T> | undefined,
+          fallback[key] as T,
+        );
+      } else {
+        merged[key] = { ...partial[key] };
+      }
+    } else {
+      merged[key] = partial[key];
+    }
+  }
+
+  return merged;
+}