feat: add setting to show image preview (#188)

Co-Authored-By: Tony Brix <[email protected]>

Author: UziTech

lib/config/index.js

@@ -22,6 +22,11 @@ export const config = {
     default: false,
     description: "Follow directory symlinks. Disable if you have a self-referencing symlink.",
   },
+  imagePreview: {
+    type: "boolean",
+    default: false,
+    description: "Show preview icon for images.",
+  },
   ignoredNames: {
     type: "boolean",
     default: true,

lib/paths-provider.js

@@ -103,10 +103,13 @@ export default class PathsProvider extends EventEmitter {
       })
     }
 
+    const showImagePreview = atom.config.get("autocomplete-paths.imagePreview")
+    const imgRegex = /\.(png|svg|jpg|jpeg|jfif|pjpeg|pjp|gif|apng|ico|cur)$/
+
     const suggestions = files.map((pathName) => {
       let text = pathName
       const normalizeSlashes = atom.config.get("autocomplete-paths.normalizeSlashes")
-
+      const absolutePath = path.resolve(path.dirname(request.editor.getPath()), pathName)
       const projectRelativePath = atom.project.relativizePath(text)[1]
       let displayText = projectRelativePath
       if (directoryGiven) {
@@ -147,12 +150,17 @@ export default class PathsProvider extends EventEmitter {
 
       // Calculate distance to file
       const distanceToFile = relativePath.split(path.sep).length
+
+      const iconHTML =
+        showImagePreview && imgRegex.test(absolutePath)
+          ? `<image style="background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(${absolutePath}); height:29px; width:29px;"></image>`
+          : '<i class="icon-file-code"></i>'
       return {
         text,
         replacementPrefix: pathPrefix,
         displayText,
         type: "import",
-        iconHTML: '<i class="icon-file-code"></i>',
+        iconHTML,
         score: score(displayText, request.prefix),
         distanceToFile,
       }