Allow user to select font from dropdown

Author: jonaraphael

package-lock.json

@@ -39,7 +39,8 @@
       { "command": "csv.toggleExtension", "title": "CSV: Toggle Extension On/Off" },
       { "command": "csv.toggleHeader", "title": "CSV: Toggle First Row as Header" },
       { "command": "csv.toggleSerialIndex", "title": "CSV: Toggle Serial Index Column" },
-      { "command": "csv.changeSeparator", "title": "CSV: Change CSV Separator" }
+      { "command": "csv.changeSeparator", "title": "CSV: Change CSV Separator" },
+      { "command": "csv.changeFontFamily", "title": "CSV: Change Font Family"}
     ],
     "configuration": {
       "type": "object",
@@ -87,7 +88,14 @@
           }
         ]
       }
-    ]
+    ],
+    "csv.fontFamily": {
+      "type": "string",
+      "default": "",
+      "description": "Font family used by the CSV custom editor. Leave empty to inherit ‘editor.fontFamily’.",
+      "scope": "application"
+    }
+
   },
   "scripts": {
     "compile": "tsc -p ./",
@@ -96,7 +104,8 @@
     "package": "vsce package"
   },
   "dependencies": {
-    "papaparse": "^5.4.1"
+    "papaparse": "^5.4.1",
+    "font-list": "^1.5.1"
   },
   "devDependencies": {
     "@types/mocha": "^10.0.10",

package.json

@@ -1,3 +1,4 @@
+import { getFonts } from 'font-list';
 import Papa from 'papaparse';
 import * as vscode from 'vscode';
 
@@ -37,7 +38,41 @@ export function activate(context: vscode.ExtensionContext) {
         vscode.window.showInformationMessage(`CSV separator changed to "${input}"`);
         CsvEditorProvider.editors.forEach(editor => editor.refresh());
       }
+    }),
+    vscode.commands.registerCommand('csv.changeFontFamily', async () => {
+      const csvCfg     = vscode.workspace.getConfiguration('csv');
+      const editorCfg  = vscode.workspace.getConfiguration('editor');
+
+      const currentCsvFont   = csvCfg.get<string>('fontFamily', '');
+      const inheritedFont    = editorCfg.get<string>('fontFamily', 'Menlo');
+      const currentEffective = currentCsvFont || inheritedFont;
+
+      // Build QuickPick list
+      let fonts: string[] = [];
+      try {
+        fonts = (await getFonts()).map((f: string) => f.replace(/^"(.*)"$/, '$1')).sort();
+      } catch (e) {
+        console.error('CSV: unable to enumerate system fonts', e);
+      }
+      const picks = ['(inherit editor setting)', ...fonts];
+
+      const choice = await vscode.window.showQuickPick(picks, {
+        placeHolder: `Current: ${currentEffective}`
+      });
+      if (choice === undefined) { return; }                      // user aborted
+
+      const newVal = choice === '(inherit editor setting)' ? '' : choice;
+      await csvCfg.update('fontFamily', newVal, vscode.ConfigurationTarget.Global);
+
+      vscode.window.showInformationMessage(
+        newVal
+          ? `CSV font set to “${newVal}”.`
+          : 'CSV font now inherits editor.fontFamily.'
+      );
+      // Refresh all open CSV editors
+      CsvEditorProvider.editors.forEach(ed => ed.refresh());
     })
+
   );
 
   // Register the custom editor provider for CSV files.

src/extension.ts

@@ -0,0 +1,5 @@
+// src/types/font-list.d.ts
+declare module 'font-list' {
+  /** Returns the list of installed font family names. */
+  export function getFonts(): Promise<string[]>;
+}