fix: consider font styles (#94)

moshfeu · Apr 10, 2022 · 64af561 · 64af561
1 parent add096c
commit 64af561
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "diff-merge",
   "displayName": "Diff & Merge",
   "description": "Show diffs and merge",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/resources/monaco/src/utils.js b/resources/monaco/src/utils.js
@@ -11,7 +11,7 @@ let diffActionsNode,
 
 export function render(
   _diffEditor,
-  { rightPath, notSupportedFile, leftContent, rightContent, theme, tabSize }
+  { rightPath, notSupportedFile, leftContent, rightContent, theme, styles: {tabSize, fontSize, fontFamily} }
 ) {
   setTheme(theme);
   diffEditor = _diffEditor;
@@ -33,16 +33,18 @@ export function render(
   diffEditor.getModifiedEditor().onDidChangeModelContent(onDidUpdateDiff);
   bindSaveShortcut();
   extractEditorStyles(diffEditor);
-  setTabSize(tabSize);
+  setEditorStyles({tabSize, fontSize, fontFamily});
   listenToDiffEditorResize(diffEditor.getModifiedEditor().getDomNode());
 }
 
-function setTabSize(tabSize) {
+function setEditorStyles({tabSize, fontSize, fontFamily}) {
   const { originalEditor, modifiedEditor } = diffEditor;
-  const updateTabSize = (model) =>
-    model.updateOptions({ tabSize, detectIndentation: false });
-  updateTabSize(originalEditor.getModel());
-  updateTabSize(modifiedEditor.getModel());
+  const updateTabSize = (editor) => {
+    editor.updateOptions({ fontSize, fontFamily});
+    editor.getModel().updateOptions({ tabSize, detectIndentation: false });
+  }
+  updateTabSize(originalEditor);
+  updateTabSize(modifiedEditor);
 }
 
 function setEditorValue(editor, value) {

diff --git a/src/theme/extractor.ts b/src/theme/extractor.ts
@@ -1,4 +1,4 @@
-import { commands, window, Selection, Range, Position } from 'vscode';
+import { commands, window, Range, Position } from 'vscode';
 import { convertToMonacoTheme } from './adapter';
 import { log } from '../logger';
 

diff --git a/src/webview/extendedWebview.ts b/src/webview/extendedWebview.ts
@@ -18,7 +18,11 @@ export interface IExtendedWebviewEnvDiff {
   rightContent: string;
   fileNotSupported: string;
   theme: any;
-  tabSize: number;
+  styles: {
+    tabSize: number;
+    fontFamily: string;
+    fontSize: number;
+  }
 }
 
 export type ExtendedWebviewEnv = IExtendedWebviewEnvContentOnly | IExtendedWebviewEnvDiff;

diff --git a/src/webview/index.ts b/src/webview/index.ts
@@ -34,7 +34,7 @@ export async function showDiff({ leftContent, rightContent, leftPath, rightPath,
     );
 
     const theme = await extract();
-    const { tabSize } = workspace.getConfiguration('editor');
+    const { tabSize, fontFamily, fontSize } = workspace.getConfiguration('editor');
 
     const webviewEnv: ExtendedWebviewEnv = {
       leftPath,
@@ -43,7 +43,11 @@ export async function showDiff({ leftContent, rightContent, leftPath, rightPath,
       rightContent,
       fileNotSupported,
       theme,
-      tabSize
+      styles: {
+        tabSize,
+        fontFamily,
+        fontSize,
+      }
     };
 
     const extendsWebView = new ExtendedWebview(