feat(completion): Add note and images preview to the link completion …

…popup (#472)

src/features/completionProvider.spec.ts

@@ -1,6 +1,10 @@
-import { window, Position } from 'vscode';
+import { window, Position, CompletionItem, CompletionItemKind, MarkdownString, Uri } from 'vscode';
 
-import { provideCompletionItems } from './completionProvider';
+import {
+ MemoCompletionItem,
+ provideCompletionItems,
+ resolveCompletionItem,
+} from './completionProvider';
 import {
  createFile,
  rndName,
@@ -247,3 +251,43 @@ describe('provideCompletionItems()', () => {
  });
  });
 });
+
+describe('resolveCompletionItem()', () => {
+ beforeEach(closeEditorsAndCleanWorkspace);
+
+ afterEach(closeEditorsAndCleanWorkspace);
+
+ it('should add documentation for a markdown completion item', async () => {
+ const noteName = `note-${rndName()}`;
+
+ const noteUri = await createFile(`${noteName}.md`, 'Test documentation');
+
+ const completionItem: MemoCompletionItem = new CompletionItem(
+ noteName,
+ CompletionItemKind.File,
+ );
+
+ completionItem.fsPath = noteUri!.fsPath;
+
+ expect(
+ ((await resolveCompletionItem(completionItem)).documentation as MarkdownString).value,
+ ).toBe('Test documentation');
+ });
+
+ it('should add documentation for an image completion item', async () => {
+ const imageName = `image-${rndName()}`;
+
+ const imageUri = await createFile(`${imageName}.png`);
+
+ const completionItem: MemoCompletionItem = new CompletionItem(
+ imageName,
+ CompletionItemKind.File,
+ );
+
+ completionItem.fsPath = imageUri!.fsPath;
+
+ expect(
+ ((await resolveCompletionItem(completionItem)).documentation as MarkdownString).value,
+ ).toBe(`![](${Uri.file(completionItem.fsPath).toString()}|height=200)`);
+ });
+});

src/features/completionProvider.ts

@@ -7,20 +7,31 @@ import {
  CompletionItemKind,
  Uri,
  ExtensionContext,
+ MarkdownString,
 } from 'vscode';
+import util from 'util';
 import path from 'path';
 import groupBy from 'lodash.groupby';
+import fs from 'fs';
 
 import {
  getWorkspaceCache,
  fsPathToRef,
+ containsMarkdownExt,
  containsImageExt,
  containsOtherKnownExts,
  getMemoConfigProperty,
+ isUncPath,
 } from '../utils';
 
 const padWithZero = (n: number): string => (n < 10 ? '0' + n : String(n));
 
+export type MemoCompletionItem = CompletionItem & {
+ fsPath?: string;
+};
+
+const readFile = util.promisify(fs.readFile);
+
 export const provideCompletionItems = (document: TextDocument, position: Position) => {
  const linePrefix = document.lineAt(position).text.substr(0, position.character);
 
@@ -31,7 +42,7 @@ export const provideCompletionItems = (document: TextDocument, position: Positio
  return undefined;
  }
 
- const completionItems: CompletionItem[] = [];
+ const completionItems: MemoCompletionItem[] = [];
 
  const uris: Uri[] = [
  ...(isResourceAutocomplete
@@ -75,7 +86,7 @@ export const provideCompletionItems = (document: TextDocument, position: Positio
  return;
  }
 
- const item = new CompletionItem(longRef, CompletionItemKind.File);
+ const item = new CompletionItem(longRef, CompletionItemKind.File) as MemoCompletionItem;
 
  const linksFormat = getMemoConfigProperty('links.format', 'short');
 
@@ -87,6 +98,8 @@ export const provideCompletionItems = (document: TextDocument, position: Positio
  // prepend index with 0, so a lexicographic sort doesn't mess things up
  item.sortText = padWithZero(index);
 
+ item.fsPath = uri.fsPath;
+
  completionItems.push(item);
  });
 
@@ -108,12 +121,38 @@ export const provideCompletionItems = (document: TextDocument, position: Positio
  return completionItems;
 };
 
+export const resolveCompletionItem = async (item: MemoCompletionItem) => {
+ if (item.fsPath) {
+ try {
+ if (containsMarkdownExt(item.fsPath)) {
+ const documentation = (await readFile(item.fsPath)).toString();
+
+ item.documentation = new MarkdownString(documentation);
+ } else if (containsImageExt(item.fsPath) && !isUncPath(item.fsPath)) {
+ const imageMaxHeight = Math.max(
+ getMemoConfigProperty('links.preview.imageMaxHeight', 200),
+ 10,
+ );
+
+ item.documentation = new MarkdownString(
+ `![](${Uri.file(item.fsPath).toString()}|height=${imageMaxHeight})`,
+ );
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ return item;
+};
+
 export const activate = (context: ExtensionContext) =>
  context.subscriptions.push(
  languages.registerCompletionItemProvider(
  'markdown',
  {
  provideCompletionItems,
+ resolveCompletionItem,
  },
  '[',
  ),