feat: peek highlight

README.md

@@ -33,7 +33,6 @@ This extension contributes the following settings:
 * `endFolderDisplayDepth`: The folder depth to display in the results after '...'.
 * `enableGotoNativeSearch`: If true, then swap to native vscode search if the custom suffix is entered using the current query.
 * `gotoNativeSearchSuffix`: If the query ends with this suffix, then swap to the native search with the query applied.
-
-## Todo
-
-* [ ] Support fuzzy search (fzf)
+* `peekBorderColor`: Change the peek color ('white', '#FFF' '#FFFFFFF', 'RGB(255,255,255)','RGB(255, 255, 255. 0.5) )
+* `peekBorderWidth`: Change the peek border width (px)
+* `peekBorderStyle`: Change the peek border style (solid, dashed, inset, double, groove, outset, ridge)

package.json

@@ -73,6 +73,28 @@
           "type": "string",
           "default": ">>",
           "description": "If the query ends with this suffix, then swap to the native search with the query applied."
+        },
+        "periscope.peekBorderColor": {
+          "type": "string",
+          "default": "rgb(0,255,246)",
+          "description": "Change the peek color ('white', '#FFF' '#FFFFFFF', 'RGB(255,255,255)','RGB(255, 255, 255. 0.5) )"
+        },
+        "periscope.peekBorderWidth": {
+          "type": "string",
+          "default": "2px"
+        },
+        "periscope.peekBorderStyle": {
+          "type": "string",
+          "enum": [
+            "solid",
+            "dashed",
+            "inset",
+            "double",
+            "groove",
+            "outset",
+            "ridge"
+          ],
+          "default": "solid"
         }
       }
     }

src/periscope.ts

@@ -1,18 +1,11 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import { ChildProcessWithoutNullStreams, spawn } from 'child_process';
+import { getConfig } from './utils/getConfig';
+import { getSelectedText } from './utils/getSelectedText';
+import { highlightDecorationType } from './utils/decorationType';
 
-// CONFIG: this should match the contribution in package.json
-type ConfigItems =
-  | 'rgOptions'
-  | 'addSrcPaths'
-  | 'rgGlobExcludes'
-  | 'startFolderDisplayDepth'
-  | 'endFolderDisplayDepth'
-  | 'enableGotoNativeSearch'
-  | 'gotoNativeSearchSuffix';
-
-interface QuickPickItemCustom extends vscode.QuickPickItem {
+export interface QuickPickItemCustom extends vscode.QuickPickItem {
   // custom payload
   data: {
     filePath: string
@@ -27,6 +20,7 @@ export const periscope = () => {
   let quickPick: vscode.QuickPick<vscode.QuickPickItem | QuickPickItemCustom>;
   let workspaceFolders = vscode.workspace.workspaceFolders;
   let query = '';
+  let highlightDecoration = highlightDecorationType();
 
   let spawnProcess: ChildProcessWithoutNullStreams | undefined;
   let config = getConfig();
@@ -222,6 +216,7 @@ export const periscope = () => {
         })
         .then(editor => {
           setPos(editor, linePos, colPos);
+
         });
     });
   }
@@ -258,6 +253,7 @@ export const periscope = () => {
         const range = editor.document.lineAt(newPosition).range;
         editor.selection = new vscode.Selection(newPosition, newPosition);
         editor.revealRange(range, vscode.TextEditorRevealType.InCenter);
+        highlightDecoration.set(editor);
       });
   }
 
@@ -303,23 +299,17 @@ export const periscope = () => {
     const folders = [workspaceFolderName, ...relativeFilePath.split(path.sep)];
 
     // abbreviate path if too long
-    if (folders.length > (config.startFolderDisplayDepth + config.endFolderDisplayDepth)) {
+    if (
+      folders.length >
+      config.startFolderDisplayDepth + config.endFolderDisplayDepth
+    ) {
       const initialFolders = folders.splice(0, config.startFolderDisplayDepth);
       folders.splice(0, folders.length - config.endFolderDisplayDepth);
       folders.unshift(...initialFolders, '...');
     }
     return folders.join(path.sep);
   }
 
-  function getSelectedText() {
-    let selectedText = '';
-    const editor = vscode.window.activeTextEditor;
-    if (editor) {
-      selectedText = editor.document.getText(editor.selection);
-    }
-    return selectedText;
-  }
-
   // Open the native VSCode search with the provided query and enable regex
   function openNativeVscodeSearch() {
     // remove the config suffix from the query
@@ -340,26 +330,9 @@ export const periscope = () => {
     quickPick.hide();
   }
 
-  function getConfig() {
-    const vsConfig = vscode.workspace.getConfiguration('periscope');
-
-    return {
-      rgOptions: vsConfig.get<string[]>('rgOptions', [
-        '--smart-case',
-        '--sortr path',
-      ]),
-      addSrcPaths: vsConfig.get<string[]>('addSrcPaths', []),
-      rgGlobExcludes: vsConfig.get<string[]>('rgGlobExcludes', []),
-      startFolderDisplayDepth: vsConfig.get<number>('startFolderDisplayDepth', 1),
-      endFolderDisplayDepth: vsConfig.get<number>('endFolderDisplayDepth', 4),
-      enableGotoNativeSearch: vsConfig.get<boolean>('enableGotoNativeSearch', true),
-      gotoNativeSearchSuffix:
-        vsConfig.get<string>('gotoNativeSearchSuffix', '>>') || '>>',
-    } as const satisfies { [key in ConfigItems]: any };
-  }
-
   function finished() {
     checkKillProcess();
+    highlightDecoration.remove();
     setActiveContext(false);
     console.log('PERISCOPE: finished');
   }

src/utils/decorationType.ts

@@ -0,0 +1,45 @@
+import * as vscode from 'vscode';
+import { getConfig } from './getConfig';
+
+/**
+ * Util to create a decoration type (for highlighting) for when 'peeking' at a file
+ */
+export function highlightDecorationType() {
+  const {
+    peekBorderColor: borderColor,
+    peekBorderWidth: borderWidth,
+    peekBorderStyle: borderStyle,
+  } = getConfig();
+
+  function get() {
+    const decorationType = vscode.window.createTextEditorDecorationType({
+      isWholeLine: true,
+      borderWidth: `0 0 ${borderWidth} 0`,
+      borderStyle: `${borderStyle}`,
+      borderColor,
+    });
+
+    return decorationType;
+  }
+  const decorationType = get();
+
+  function set(editor: vscode.TextEditor) {
+    const currentPosition = editor.selection.active;
+    const newDecoration = {
+      range: new vscode.Range(currentPosition, currentPosition),
+    };
+    editor.setDecorations(decorationType, [newDecoration]);
+  }
+
+  function remove() {
+    if (decorationType) {
+      vscode.window.activeTextEditor?.setDecorations(decorationType, []);
+      decorationType.dispose();
+    }
+  }
+
+  return {
+    set,
+    remove,
+  };
+}

src/utils/getConfig.ts

@@ -0,0 +1,38 @@
+import * as vscode from 'vscode';
+
+// CONFIG: this should match the contribution in package.json
+type ConfigItems =
+  | 'rgOptions'
+  | 'addSrcPaths'
+  | 'rgGlobExcludes'
+  | 'startFolderDisplayDepth'
+  | 'endFolderDisplayDepth'
+  | 'enableGotoNativeSearch'
+  | 'gotoNativeSearchSuffix'
+  | 'peekBorderColor'
+  | 'peekBorderWidth'
+  | 'peekBorderStyle';
+
+export function getConfig() {
+  const vsConfig = vscode.workspace.getConfiguration('periscope');
+
+  return {
+    rgOptions: vsConfig.get<string[]>('rgOptions', [
+      '--smart-case',
+      '--sortr path',
+    ]),
+    addSrcPaths: vsConfig.get<string[]>('addSrcPaths', []),
+    rgGlobExcludes: vsConfig.get<string[]>('rgGlobExcludes', []),
+    startFolderDisplayDepth: vsConfig.get<number>('startFolderDisplayDepth', 1),
+    endFolderDisplayDepth: vsConfig.get<number>('endFolderDisplayDepth', 4),
+    enableGotoNativeSearch: vsConfig.get<boolean>(
+      'enableGotoNativeSearch',
+      true
+    ),
+    gotoNativeSearchSuffix:
+      vsConfig.get<string>('gotoNativeSearchSuffix', '>>') || '>>',
+    peekBorderColor: vsConfig.get<string>('peekBorderColor', 'rgb(0,255,246)'),
+    peekBorderWidth: vsConfig.get<string>('peekBorderWidth', '2px'),
+    peekBorderStyle: vsConfig.get<string>('peekBorderStyle', 'solid'),
+  } as const satisfies { [key in ConfigItems]: any };
+}

src/utils/getSelectedText.ts

@@ -0,0 +1,10 @@
+import * as vscode from 'vscode';
+
+export function getSelectedText() {
+  let selectedText = '';
+  const editor = vscode.window.activeTextEditor;
+  if (editor) {
+    selectedText = editor.document.getText(editor.selection);
+  }
+  return selectedText;
+}