Fix wikilink embed (#1430)

riccardoferretti · web-flow · commit a3b375e24896 · 2025-03-08T17:01:45.000+01:00
* wikilink embed: fixed bug in resolution, and extracted getNoteContent function

Bug was due to missing base note when resolving links in `withLinksRelativeToWorkspaceRoot`.
Also updated link to be rendered in HTML as absolute

* Improved embed reporting when running in web mode

* Fixed test (by not preloading document selectors)
diff --git a/packages/foam-vscode/src/features/commands/update-wikilinks.ts b/packages/foam-vscode/src/features/commands/update-wikilinks.ts
@@ -11,7 +11,7 @@ import {
   workspace,
   Position,
 } from 'vscode';
-import { isMdEditor, mdDocSelector } from '../../services/editor';
+import { isMdEditor, getFoamDocSelectors } from '../../services/editor';
 import { Foam } from '../../core/model/foam';
 import { FoamWorkspace } from '../../core/model/workspace';
 import {
@@ -48,7 +48,7 @@ export default async function activate(
       );
     }),
     languages.registerCodeLensProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       new WikilinkReferenceCodeLensProvider(
         foam.workspace,
         foam.services.parser
diff --git a/packages/foam-vscode/src/features/hover-provider.ts b/packages/foam-vscode/src/features/hover-provider.ts
@@ -14,7 +14,7 @@ import { OPEN_COMMAND } from './commands/open-resource';
 import { CREATE_NOTE_COMMAND } from './commands/create-note';
 import { commandAsURI } from '../utils/commands';
 import { Location } from '../core/model/location';
-import { getNoteTooltip, mdDocSelector } from '../services/editor';
+import { getNoteTooltip, getFoamDocSelectors } from '../services/editor';
 import { isSome } from '../core/utils';
 
 export const CONFIG_KEY = 'links.hover.enable';
@@ -31,7 +31,7 @@ export default async function activate(
   context.subscriptions.push(
     isHoverEnabled,
     vscode.languages.registerHoverProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       new HoverProvider(
         isHoverEnabled,
         foam.workspace,
diff --git a/packages/foam-vscode/src/features/link-completion.ts b/packages/foam-vscode/src/features/link-completion.ts
@@ -6,7 +6,7 @@ import { URI } from '../core/model/uri';
 import { FoamWorkspace } from '../core/model/workspace';
 import { getFoamVsCodeConfig } from '../services/config';
 import { fromVsCodeUri, toVsCodeUri } from '../utils/vsc-utils';
-import { getNoteTooltip, mdDocSelector } from '../services/editor';
+import { getNoteTooltip, getFoamDocSelectors } from '../services/editor';
 
 export const aliasCommitCharacters = ['#'];
 export const linkCommitCharacters = ['#', '|'];
@@ -27,12 +27,12 @@ export default async function activate(
   const foam = await foamPromise;
   context.subscriptions.push(
     vscode.languages.registerCompletionItemProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       new WikilinkCompletionProvider(foam.workspace, foam.graph),
       '['
     ),
     vscode.languages.registerCompletionItemProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       new SectionCompletionProvider(foam.workspace),
       '#'
     ),
diff --git a/packages/foam-vscode/src/features/navigation-provider.ts b/packages/foam-vscode/src/features/navigation-provider.ts
@@ -10,7 +10,7 @@ import { Position } from '../core/model/position';
 import { CREATE_NOTE_COMMAND } from './commands/create-note';
 import { commandAsURI } from '../utils/commands';
 import { Location } from '../core/model/location';
-import { mdDocSelector } from '../services/editor';
+import { getFoamDocSelectors } from '../services/editor';
 
 export default async function activate(
   context: vscode.ExtensionContext,
@@ -26,15 +26,15 @@ export default async function activate(
 
   context.subscriptions.push(
     vscode.languages.registerDefinitionProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       navigationProvider
     ),
     vscode.languages.registerDocumentLinkProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       navigationProvider
     ),
     vscode.languages.registerReferenceProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       navigationProvider
     )
   );
diff --git a/packages/foam-vscode/src/features/preview/wikilink-embed-web-extension.ts b/packages/foam-vscode/src/features/preview/wikilink-embed-web-extension.ts
@@ -17,9 +17,10 @@ export const markdownItWikilinkEmbed = (
     regex: WIKILINK_EMBED_REGEX,
     replace: (wikilinkItem: string) => {
       return `
-<div style="padding: 0.25em; margin: 1.5em 0; text-align: center; border: 1px solid var(--vscode-editorLineNumber-foreground);">
-Embeds are not supported in web extension: <br/> ${wikilinkItem}
-</div>`;
+      <div class="foam-embed-not-supported-warning">
+        Embed not supported in web mode: ${wikilinkItem}
+      </div>
+`;
     },
   });
 };
diff --git a/packages/foam-vscode/src/features/preview/wikilink-embed.ts b/packages/foam-vscode/src/features/preview/wikilink-embed.ts
@@ -10,9 +10,14 @@ import { Resource, ResourceParser } from '../../core/model/note';
 import { getFoamVsCodeConfig } from '../../services/config';
 import { fromVsCodeUri, toVsCodeUri } from '../../utils/vsc-utils';
 import { MarkdownLink } from '../../core/services/markdown-link';
+import { URI } from '../../core/model/uri';
 import { Position } from '../../core/model/position';
 import { TextEdit } from '../../core/services/text-edit';
 import { isNone, isSome } from '../../core/utils';
+import {
+  asAbsoluteWorkspaceUri,
+  isVirtualWorkspace,
+} from '../../services/editor';
 
 export const WIKILINK_EMBED_REGEX =
   /((?:(?:full|content)-(?:inline|card)|full|content|inline|card)?!\[\[[^[\]]+?\]\])/;
@@ -22,7 +27,7 @@ export const WIKILINK_EMBED_REGEX =
 export const WIKILINK_EMBED_REGEX_GROUPS =
   /((?:\w+)|(?:(?:\w+)-(?:\w+)))?!\[\[([^[\]]+?)\]\]/;
 export const CONFIG_EMBED_NOTE_TYPE = 'preview.embedNoteType';
-const refsStack: string[] = [];
+let refsStack: string[] = [];
 
 export const markdownItWikilinkEmbed = (
   md: markdownit,
@@ -38,6 +43,14 @@ export const markdownItWikilinkEmbed = (
           WIKILINK_EMBED_REGEX_GROUPS
         );
 
+        if (isVirtualWorkspace()) {
+          return `
+<div class="foam-embed-not-supported-warning">
+  Embed not supported in virtual workspace: ![[${wikilink}]]
+</div>
+          `;
+        }
+
         const includedNote = workspace.find(wikilink);
 
         if (!includedNote) {
@@ -48,56 +61,31 @@ export const markdownItWikilinkEmbed = (
           includedNote.uri.path.toLocaleLowerCase()
         );
 
-        if (!cyclicLinkDetected) {
-          refsStack.push(includedNote.uri.path.toLocaleLowerCase());
-        }
-
         if (cyclicLinkDetected) {
-          return `<div class="foam-cyclic-link-warning">Cyclic link detected for wikilink: ${wikilink}</div>`;
-        }
-        let content = `Embed for [[${wikilink}]]`;
-        let html: string;
-
-        switch (includedNote.type) {
-          case 'note': {
-            const { noteScope, noteStyle } =
-              retrieveNoteConfig(noteEmbedModifier);
-
-            const extractor: EmbedNoteExtractor =
-              noteScope === 'full'
-                ? fullExtractor
-                : noteScope === 'content'
-                ? contentExtractor
-                : fullExtractor;
-
-            const formatter: EmbedNoteFormatter =
-              noteStyle === 'card'
-                ? cardFormatter
-                : noteStyle === 'inline'
-                ? inlineFormatter
-                : cardFormatter;
-
-            content = extractor(includedNote, parser, workspace);
-            html = formatter(content, md);
-            break;
-          }
-          case 'attachment':
-            content = `
-<div class="embed-container-attachment">
-${md.renderInline('[[' + wikilink + ']]')}<br/>
-Embed for attachments is not supported
-</div>`;
-            html = md.render(content);
-            break;
-          case 'image':
-            content = `<div class="embed-container-image">${md.render(
-              `![](${md.normalizeLink(includedNote.uri.path)})`
-            )}</div>`;
-            html = md.render(content);
-            break;
+          return `
+<div class="foam-cyclic-link-warning">
+  Cyclic link detected for wikilink: ${wikilink}
+  <div class="foam-cyclic-link-warning__stack">
+    Link sequence: 
+    <ul>
+      ${refsStack.map(ref => `<li>${ref}</li>`).join('')}
+    </ul>
+  </div>
+</div>
+          `;
         }
+
+        refsStack.push(includedNote.uri.path.toLocaleLowerCase());
+
+        const content = getNoteContent(
+          includedNote,
+          noteEmbedModifier,
+          parser,
+          workspace,
+          md
+        );
         refsStack.pop();
-        return html;
+        return content;
       } catch (e) {
         Logger.error(
           `Error while including ${wikilinkItem} into the current document of the Preview panel`,
@@ -109,27 +97,79 @@ Embed for attachments is not supported
   });
 };
 
+function getNoteContent(
+  includedNote: Resource,
+  noteEmbedModifier: string | undefined,
+  parser: ResourceParser,
+  workspace: FoamWorkspace,
+  md: markdownit
+): string {
+  let content = `Embed for [[${includedNote.uri.path}]]`;
+  let html: string;
+
+  switch (includedNote.type) {
+    case 'note': {
+      const { noteScope, noteStyle } = retrieveNoteConfig(noteEmbedModifier);
+
+      const extractor: EmbedNoteExtractor =
+        noteScope === 'full'
+          ? fullExtractor
+          : noteScope === 'content'
+          ? contentExtractor
+          : fullExtractor;
+
+      const formatter: EmbedNoteFormatter =
+        noteStyle === 'card'
+          ? cardFormatter
+          : noteStyle === 'inline'
+          ? inlineFormatter
+          : cardFormatter;
+
+      content = extractor(includedNote, parser, workspace);
+      html = formatter(content, md);
+      break;
+    }
+    case 'attachment':
+      content = `
+<div class="embed-container-attachment">
+${md.renderInline('[[' + includedNote.uri.path + ']]')}<br/>
+Embed for attachments is not supported
+</div>`;
+      html = md.render(content);
+      break;
+    case 'image':
+      content = `<div class="embed-container-image">${md.render(
+        `![](${md.normalizeLink(includedNote.uri.path)})`
+      )}</div>`;
+      html = md.render(content);
+      break;
+    default:
+      html = content;
+  }
+
+  return html;
+}
+
 function withLinksRelativeToWorkspaceRoot(
+  noteUri: URI,
   noteText: string,
   parser: ResourceParser,
   workspace: FoamWorkspace
-) {
+): string {
   const note = parser.parse(
     fromVsCodeUri(vsWorkspace.workspaceFolders[0].uri),
     noteText
   );
   const edits = note.links
     .map(link => {
       const info = MarkdownLink.analyzeLink(link);
-      const resource = workspace.find(info.target);
+      const resource = workspace.find(info.target, noteUri);
       // embedded notes that aren't created are still collected
       // return null so it can be filtered in the next step
       if (isNone(resource)) {
         return null;
       }
-      const pathFromRoot = vsWorkspace.asRelativePath(
-        toVsCodeUri(resource.uri)
-      );
+      const pathFromRoot = asAbsoluteWorkspaceUri(resource.uri).path;
       return MarkdownLink.createUpdateLinkEdit(link, {
         target: pathFromRoot,
       });
@@ -185,7 +225,12 @@ function fullExtractor(
       .slice(section.range.start.line, section.range.end.line)
       .join('\n');
   }
-  noteText = withLinksRelativeToWorkspaceRoot(noteText, parser, workspace);
+  noteText = withLinksRelativeToWorkspaceRoot(
+    note.uri,
+    noteText,
+    parser,
+    workspace
+  );
   return noteText;
 }
 
@@ -211,7 +256,12 @@ function contentExtractor(
   }
   rows.shift();
   noteText = rows.join('\n');
-  noteText = withLinksRelativeToWorkspaceRoot(noteText, parser, workspace);
+  noteText = withLinksRelativeToWorkspaceRoot(
+    note.uri,
+    noteText,
+    parser,
+    workspace
+  );
   return noteText;
 }
 
diff --git a/packages/foam-vscode/src/features/tag-completion.ts b/packages/foam-vscode/src/features/tag-completion.ts
@@ -2,7 +2,7 @@ import * as vscode from 'vscode';
 import { Foam } from '../core/model/foam';
 import { FoamTags } from '../core/model/tags';
 import { isInFrontMatter, isOnYAMLKeywordLine } from '../core/utils/md';
-import { mdDocSelector } from '../services/editor';
+import { getFoamDocSelectors } from '../services/editor';
 
 // this regex is different from HASHTAG_REGEX in that it does not look for a
 // #+character. It uses a negative look-ahead for `# `
@@ -17,7 +17,7 @@ export default async function activate(
   const foam = await foamPromise;
   context.subscriptions.push(
     vscode.languages.registerCompletionItemProvider(
-      mdDocSelector,
+      getFoamDocSelectors(),
       new TagCompletionProvider(foam.tags),
       '#'
     )
diff --git a/packages/foam-vscode/src/services/editor.ts b/packages/foam-vscode/src/services/editor.ts
@@ -54,14 +54,14 @@ export function formatMarkdownTooltip(content: string): MarkdownString {
 }
 
 // Generate the document selector dynamically
-export const mdDocSelector = getFoamVsCodeConfig<string[]>(
-  'supportedLanguages',
-  ['markdown']
-).flatMap(lang => [
-  { language: lang, scheme: 'file' }, // Local files
-  { language: lang, scheme: 'vscode-vfs' }, // Remote files
-  { language: lang, scheme: 'untitled' }, // Untitled files
-]);
+export const getFoamDocSelectors = () =>
+  getFoamVsCodeConfig<string[]>('supportedLanguages', ['markdown']).flatMap(
+    lang => [
+      { language: lang, scheme: 'file' }, // Local files
+      { language: lang, scheme: 'vscode-vfs' }, // Remote files
+      { language: lang, scheme: 'untitled' }, // Untitled files
+    ]
+  );
 
 // Check if the editor's document is a supported language
 export function isMdEditor(editor: TextEditor): boolean {
@@ -76,6 +76,17 @@ export function isMdEditor(editor: TextEditor): boolean {
   );
 }
 
+/**
+ * Check if the workspace contains remote or virtual file system folders.
+ * @returns True if the workspace contains remote or virtual file system folders, false otherwise.
+ */
+export function isVirtualWorkspace(): boolean {
+  return workspace.workspaceFolders.some(folder => {
+    const scheme = folder.uri.scheme;
+    return scheme === 'vscode-remote' || scheme === 'vscode-vfs';
+  });
+}
+
 export function findSelectionContent(): SelectionInfo | undefined {
   const editor = window.activeTextEditor;
   if (editor === undefined) {
diff --git a/packages/foam-vscode/static/preview/style.css b/packages/foam-vscode/static/preview/style.css
