ENG-2250 Implement Discourse context overlay in Reading view

apps/obsidian/src/index.ts

@@ -21,6 +21,7 @@ import {
 import { createImageEmbedHoverExtension } from "~/utils/imageEmbedHoverIcon";
 import { createWikilinkDragExtension } from "~/utils/wikilinkDragHandler";
 import { createDiscourseContextOverlayExtension } from "~/utils/discourseContextOverlayExtension";
+import { createDiscourseContextOverlayPostProcessor } from "~/utils/discourseContextOverlayPostProcessor";
 import {
   registerDiscourseContextOverlayRefresh,
   refreshDiscourseContextOverlaySurfaces,
@@ -112,6 +113,9 @@ export default class DiscourseGraphPlugin extends Plugin {
     }
 
     this.relationsIndex.initialize();
+    this.registerMarkdownPostProcessor(
+      createDiscourseContextOverlayPostProcessor(this),
+    );
     registerDiscourseContextOverlayRefresh(this);
 
     registerCommands(this);
@@ -287,7 +291,10 @@ export default class DiscourseGraphPlugin extends Plugin {
     this.setupNodeTagHotkey();
   }
 
-  /** Applies the overlay setting immediately, without a reload. */
+  /**
+   * Re-renders both markdown surfaces so the discourse context overlay appears
+   * or disappears immediately when its setting is toggled, without a reload.
+   */
   refreshDiscourseContextOverlay(): void {
     refreshDiscourseContextOverlaySurfaces(this);
   }

apps/obsidian/src/utils/discourseContextOverlayPostProcessor.ts

@@ -0,0 +1,128 @@
+import { parseLinktext, type MarkdownPostProcessorContext } from "obsidian";
+import type DiscourseGraphPlugin from "~/index";
+import {
+  badgeTargetPath,
+  createDiscourseContextBadge,
+  updateDiscourseContextBadge,
+  DISCOURSE_CONTEXT_BADGE_CLASS,
+} from "~/components/discourseContextBadge";
+import { openDiscourseContextPopover } from "~/components/DiscourseContextPopover";
+import { resolveDiscourseLinkTarget } from "./discourseLinkUtils";
+
+/**
+ * A link inside a transclusion resolves against the embedded file, so walk the
+ * `.internal-embed` chain outwards to find the file it was actually written in.
+ */
+const resolveLinkSourcePath = ({
+  plugin,
+  link,
+  sourcePath,
+}: {
+  plugin: DiscourseGraphPlugin;
+  link: HTMLElement;
+  sourcePath: string;
+}): string | null => {
+  const embeds: HTMLElement[] = [];
+  let embed = link.parentElement?.closest<HTMLElement>(".internal-embed");
+  while (embed) {
+    embeds.unshift(embed);
+    embed = embed.parentElement?.closest<HTMLElement>(".internal-embed");
+  }
+
+  let path = sourcePath;
+  for (const ancestor of embeds) {
+    const src = ancestor.getAttribute("src");
+    if (!src) return null;
+    const file = plugin.app.metadataCache.getFirstLinkpathDest(
+      parseLinktext(src).path,
+      path,
+    );
+    if (!file) return null;
+    path = file.path;
+  }
+  return path;
+};
+
+/** Idempotent: Obsidian reuses rendered sections and re-runs post processors. */
+export const applyDiscourseContextBadges = ({
+  plugin,
+  el,
+  sourcePath,
+}: {
+  plugin: DiscourseGraphPlugin;
+  el: HTMLElement;
+  sourcePath: string;
+}): void => {
+  const links = el.querySelectorAll<HTMLAnchorElement>("a.internal-link");
+
+  for (const link of Array.from(links)) {
+    const linkSourcePath = resolveLinkSourcePath({ plugin, link, sourcePath });
+    if (!linkSourcePath) continue;
+    const existing = link.nextElementSibling?.hasClass(
+      DISCOURSE_CONTEXT_BADGE_CLASS,
+    )
+      ? (link.nextElementSibling as HTMLElement)
+      : null;
+
+    // data-href holds the link as written; href is resolved and URL-encoded.
+    const linktext =
+      link.getAttribute("data-href") ?? link.getAttribute("href");
+    if (!linktext) {
+      existing?.remove();
+      continue;
+    }
+
+    const target = resolveDiscourseLinkTarget({
+      plugin,
+      linktext,
+      sourcePath: linkSourcePath,
+    });
+    if (!target) {
+      existing?.remove();
+      continue;
+    }
+
+    // Updated rather than replaced when the target is unchanged: an open
+    // popover anchored to this badge would otherwise hold a detached element.
+    if (existing && badgeTargetPath(existing) === target.file.path) {
+      updateDiscourseContextBadge({
+        badge: existing,
+        nodeType: target.nodeType,
+        relationCount: target.relationCount,
+      });
+      continue;
+    }
+
+    const badge = createDiscourseContextBadge({
+      file: target.file,
+      nodeType: target.nodeType,
+      relationCount: target.relationCount,
+      onActivate: ({ file, anchor }) =>
+        openDiscourseContextPopover({
+          plugin,
+          file,
+          anchor,
+        }),
+    });
+
+    existing?.remove();
+    link.insertAdjacentElement("afterend", badge);
+  }
+};
+
+export const removeDiscourseContextBadges = (el: HTMLElement): void => {
+  el.querySelectorAll(`.${DISCOURSE_CONTEXT_BADGE_CLASS}`).forEach((badge) =>
+    badge.remove(),
+  );
+};
+
+export const createDiscourseContextOverlayPostProcessor =
+  (plugin: DiscourseGraphPlugin) =>
+  (el: HTMLElement, ctx: MarkdownPostProcessorContext): void => {
+    if (!plugin.settings.showDiscourseContextOverlay) return;
+    if (!ctx.sourcePath) return;
+    // Rendered sections arrive detached, so an attached one is the plugin's own
+    // MarkdownRenderer.render inside a modal, where the popover cannot dismiss.
+    if (el.closest(".modal-container")) return;
+    applyDiscourseContextBadges({ plugin, el, sourcePath: ctx.sourcePath });
+  };

apps/obsidian/src/utils/discourseContextOverlayRefresh.ts

@@ -1,8 +1,12 @@
-import { debounce, type TFile } from "obsidian";
+import { debounce, MarkdownView, type TFile } from "obsidian";
 import type DiscourseGraphPlugin from "~/index";
 import { QueryEngine } from "~/services/QueryEngine";
 import { getNodeTypeIdFromFrontmatter } from "./discourseLinkFrontmatter";
 import { refreshMarkdownEditors } from "./markdownViewRefresh";
+import {
+  applyDiscourseContextBadges,
+  removeDiscourseContextBadges,
+} from "./discourseContextOverlayPostProcessor";
 
 const REFRESH_DEBOUNCE_MS = 300;
 
@@ -15,11 +19,26 @@ const isDiscourseNodeFile = (
     plugin.app.metadataCache.getFileCache(file)?.frontmatter,
   );
 
-/** Redraws the overlay when relations or a node's frontmatter change. */
+/**
+ * Reading view is refreshed in place: rerender() blanks a pane that is not
+ * currently painting.
+ */
 export const refreshDiscourseContextOverlaySurfaces = (
   plugin: DiscourseGraphPlugin,
 ): void => {
   refreshMarkdownEditors(plugin.app);
+  plugin.app.workspace.iterateAllLeaves((leaf) => {
+    if (!(leaf.view instanceof MarkdownView)) return;
+    const el = leaf.view.previewMode?.containerEl;
+    if (!el) return;
+    if (!plugin.settings.showDiscourseContextOverlay) {
+      removeDiscourseContextBadges(el);
+      return;
+    }
+    const sourcePath = leaf.view.file?.path;
+    if (!sourcePath) return;
+    applyDiscourseContextBadges({ plugin, el, sourcePath });
+  });
 };
 
 export const registerDiscourseContextOverlayRefresh = (

apps/website/content/obsidian/configuration/general-settings.md

@@ -19,7 +19,7 @@ This setting controls the visibility of identifiers in your note's frontmatter s
 
 This setting controls whether links to discourse nodes carry an inline badge showing how many relations the linked node has.
 
-- When enabled, a badge appears after each link to a discourse node in Live Preview
+- When enabled, a badge appears after each link to a discourse node, in both Live Preview and Reading view
 - Selecting a badge opens that node's discourse context in a popover, where you can review its relationships and add a new one
 - A node with no relations shows a badge reading `0`, and its popover says "No discourse relation found"
 - Links to notes that are not discourse nodes never show a badge

apps/website/content/obsidian/core-features/discourse-context.md

@@ -30,7 +30,7 @@ You can configure a custom hotkey in the Obsidian settings to quickly toggle the
 
 Links to a discourse node show a small badge with the number of relations that node has. Select the badge to open its discourse context in place, without leaving the note you are reading.
 
-The badge appears in Live Preview, on every link to a discourse node. A node with no relations yet shows a badge reading `0`, and opening it says "No discourse relation found" alongside the option to add one. You can turn the badge off in [General settings](/docs/obsidian/configuration/general-settings).
+The badge appears in both Live Preview and Reading view, on every link to a discourse node. A node with no relations yet shows a badge reading `0`, and opening it says "No discourse relation found" alongside the option to add one. You can turn the badge off in [General settings](/docs/obsidian/configuration/general-settings).
 
 ## Using the discourse context