Merge pull request #3498 from ramarivera/fixes/markdown-renderer

fix: Inline attachment previews are now visible in Live Preview and Reading modes

Author: claremacrae

.gitignore

@@ -56,3 +56,6 @@ yarn-error.log
 
 # VS code config
 .vscode/
+
+# Obsidian's hot reload plugin marker file
+.hotreload

src/Obsidian/InlineRenderer.ts

@@ -1,4 +1,4 @@
-import type { MarkdownPostProcessorContext, Plugin } from 'obsidian';
+import type { App, MarkdownPostProcessorContext, Plugin } from 'obsidian';
 import { MarkdownRenderChild } from 'obsidian';
 import { GlobalFilter } from '../Config/GlobalFilter';
 import { TaskLayoutOptions } from '../Layout/TaskLayoutOptions';
@@ -23,7 +23,11 @@ import { TaskLocation } from '../Task/TaskLocation';
  * See also {@link LivePreviewExtension} which handles Markdown task lines in Obsidian's Live Preview mode.
  */
 export class InlineRenderer {
-    constructor({ plugin }: { plugin: Plugin }) {
+    private readonly app: App;
+
+    constructor({ plugin, app }: { plugin: Plugin; app: App }) {
+        this.app = app;
+
         plugin.registerMarkdownPostProcessor((el, ctx) => {
             plugin.app.workspace.onLayoutReady(() => {
                 this.markdownPostProcessor(el, ctx);
@@ -114,6 +118,7 @@ export class InlineRenderer {
         }
 
         const taskLineRenderer = new TaskLineRenderer({
+            obsidianApp: this.app,
             obsidianComponent: childComponent,
             parentUlElement: element,
             taskLayoutOptions: new TaskLayoutOptions(),

src/Renderer/QueryRenderer.ts

@@ -120,17 +120,19 @@ class QueryRenderChild extends MarkdownRenderChild {
     }) {
         super(container);
 
+        this.app = app;
+
         this.queryResultsRenderer = new QueryResultsRenderer(
             this.containerEl.className,
             source,
             tasksFile,
-            MarkdownRenderer.renderMarkdown,
+            MarkdownRenderer.render,
             this,
+            this.app,
         );
 
         this.queryResultsRenderer.query.debug('[render] QueryRenderChild.constructor() entered');
 
-        this.app = app;
         this.plugin = plugin;
         this.events = events;
 

src/Renderer/QueryResultsRenderer.ts

@@ -1,4 +1,4 @@
-import type { Component, TFile } from 'obsidian';
+import type { App, Component, TFile } from 'obsidian';
 import { GlobalFilter } from '../Config/GlobalFilter';
 import { GlobalQuery } from '../Config/GlobalQuery';
 import { postponeButtonTitle, shouldShowPostponeButton } from '../DateTime/Postponer';
@@ -67,19 +67,28 @@ export class QueryResultsRenderer {
     // Renders the group heading in this class:
     private readonly renderMarkdown;
     private readonly obsidianComponent: Component | null;
+    private readonly obsidianApp: App;
 
     constructor(
         className: string,
         source: string,
         tasksFile: TasksFile,
-        renderMarkdown: (markdown: string, el: HTMLElement, sourcePath: string, component: Component) => Promise<void>,
+        renderMarkdown: (
+            app: App,
+            markdown: string,
+            el: HTMLElement,
+            sourcePath: string,
+            component: Component,
+        ) => Promise<void>,
         obsidianComponent: Component | null,
+        obsidianApp: App,
         textRenderer: TextRenderer = TaskLineRenderer.obsidianMarkdownRenderer,
     ) {
         this.source = source;
         this._tasksFile = tasksFile;
         this.renderMarkdown = renderMarkdown;
         this.obsidianComponent = obsidianComponent;
+        this.obsidianApp = obsidianApp;
         this.textRenderer = textRenderer;
 
         // The engine is chosen on the basis of the code block language. Currently,
@@ -257,6 +266,7 @@ export class QueryResultsRenderer {
 
         const taskLineRenderer = new TaskLineRenderer({
             textRenderer: this.textRenderer,
+            obsidianApp: this.obsidianApp,
             obsidianComponent: this.obsidianComponent,
             parentUlElement: taskList,
             taskLayoutOptions: this.query.taskLayoutOptions,
@@ -469,7 +479,13 @@ export class QueryResultsRenderer {
         if (this.obsidianComponent === null) {
             return;
         }
-        await this.renderMarkdown(group.displayName, headerEl, this.tasksFile.path, this.obsidianComponent);
+        await this.renderMarkdown(
+            this.obsidianApp,
+            group.displayName,
+            headerEl,
+            this.tasksFile.path,
+            this.obsidianComponent,
+        );
     }
 
     private addBacklinks(

src/Renderer/TaskLineRenderer.ts

@@ -1,5 +1,5 @@
 import type { Moment } from 'moment';
-import { Component, MarkdownRenderer } from 'obsidian';
+import { type App, Component, MarkdownRenderer } from 'obsidian';
 import { GlobalFilter } from '../Config/GlobalFilter';
 import { TASK_FORMATS, getSettings } from '../Config/Settings';
 import type { QueryLayoutOptions } from '../Layout/QueryLayoutOptions';
@@ -21,6 +21,7 @@ import { TaskFieldRenderer } from './TaskFieldRenderer';
  * The function used to render a Markdown task line into an existing HTML element.
  */
 export type TextRenderer = (
+    app: App,
     text: string,
     element: HTMLSpanElement,
     path: string,
@@ -65,12 +66,14 @@ export function createAndAppendElement<K extends keyof HTMLElementTagNameMap>(
  */
 export class TaskLineRenderer {
     private readonly textRenderer: TextRenderer;
+    private readonly obsidianApp: App;
     private readonly obsidianComponent: Component | null;
     private readonly parentUlElement: HTMLElement;
     private readonly taskLayoutOptions: TaskLayoutOptions;
     private readonly queryLayoutOptions: QueryLayoutOptions;
 
     public static async obsidianMarkdownRenderer(
+        app: App,
         text: string,
         element: HTMLSpanElement,
         path: string,
@@ -79,7 +82,8 @@ export class TaskLineRenderer {
         if (!obsidianComponent) {
             return;
         }
-        await MarkdownRenderer.renderMarkdown(text, element, path, obsidianComponent);
+
+        await MarkdownRenderer.render(app, text, element, path, obsidianComponent);
     }
 
     /**
@@ -99,18 +103,21 @@ export class TaskLineRenderer {
      */
     constructor({
         textRenderer = TaskLineRenderer.obsidianMarkdownRenderer,
+        obsidianApp,
         obsidianComponent,
         parentUlElement,
         taskLayoutOptions,
         queryLayoutOptions,
     }: {
         textRenderer?: TextRenderer;
+        obsidianApp: App;
         obsidianComponent: Component | null;
         parentUlElement: HTMLElement;
         taskLayoutOptions: TaskLayoutOptions;
         queryLayoutOptions: QueryLayoutOptions;
     }) {
         this.textRenderer = textRenderer;
+        this.obsidianApp = obsidianApp;
         this.obsidianComponent = obsidianComponent;
         this.parentUlElement = parentUlElement;
         this.taskLayoutOptions = taskLayoutOptions;
@@ -301,7 +308,7 @@ export class TaskLineRenderer {
             // Add some debug output to enable hidden information in the task to be inspected.
             description += `<br>🐛 <b>${task.lineNumber}</b> . ${task.sectionStart} . ${task.sectionIndex} . '<code>${task.originalMarkdown}</code>'<br>'<code>${task.path}</code>' > '<code>${task.precedingHeader}</code>'<br>`;
         }
-        await this.textRenderer(description, span, task.path, this.obsidianComponent);
+        await this.textRenderer(this.obsidianApp, description, span, task.path, this.obsidianComponent);
 
         // If the task is a block quote, the block quote wraps the p-tag that contains the content.
         // In that case, we need to unwrap the p-tag *inside* the surrounding block quote.
@@ -495,6 +502,7 @@ export class TaskLineRenderer {
 
         const span = createAndAppendElement('span', li);
         await this.textRenderer(
+            this.obsidianApp,
             listItem.description,
             span,
             listItem.findClosestParentTask()?.path ?? '',

src/main.ts

@@ -61,7 +61,7 @@ export default class TasksPlugin extends Plugin {
             events,
         });
 
-        this.inlineRenderer = new InlineRenderer({ plugin: this });
+        this.inlineRenderer = new InlineRenderer({ plugin: this, app: this.app });
         this.queryRenderer = new QueryRenderer({ plugin: this, events });
 
         // Update types.json.

tests/Renderer/QueryResultsRenderer.test.ts

@@ -17,6 +17,7 @@ import { prettifyHTML } from '../TestingTools/HTMLHelpers';
 import { TaskBuilder } from '../TestingTools/TaskBuilder';
 import { toMarkdown } from '../TestingTools/TestHelpers';
 import { resetSettings, updateSettings } from '../../src/Config/Settings';
+import { mockApp } from '../__mocks__/obsidian';
 import { mockHTMLRenderer } from './RenderingTestHelpers';
 
 window.moment = moment;
@@ -39,6 +40,7 @@ function makeQueryResultsRenderer(source: string, tasksFile: TasksFile) {
         tasksFile,
         () => Promise.resolve(),
         null,
+        mockApp,
         mockHTMLRenderer,
     );
 }

tests/Renderer/RenderingTestHelpers.ts

@@ -1,11 +1,13 @@
-export const mockHTMLRenderer = async (text: string, element: HTMLSpanElement, _path: string) => {
+import type { App } from 'obsidian';
+
+export const mockHTMLRenderer = async (_obsidianApp: App, text: string, element: HTMLSpanElement, _path: string) => {
     // Contrary to the default mockTextRenderer(),
     // instead of the rendered HTMLSpanElement.innerText,
     // we need the plain HTML here like in TaskLineRenderer.renderComponentText(),
     // to ensure that description and tags are retained.
     element.innerHTML = text;
 };
 
-export const mockTextRenderer = async (text: string, element: HTMLSpanElement, _path: string) => {
+export const mockTextRenderer = async (_obsidianApp: App, text: string, element: HTMLSpanElement, _path: string) => {
     element.innerText = text;
 };

tests/Renderer/TaskLineRenderer.test.ts

@@ -17,6 +17,7 @@ import { verifyWithFileExtension } from '../TestingTools/ApprovalTestHelpers';
 import { prettifyHTML } from '../TestingTools/HTMLHelpers';
 import { TaskBuilder } from '../TestingTools/TaskBuilder';
 import { fromLine } from '../TestingTools/TestHelpers';
+import { mockApp } from '../__mocks__/obsidian';
 import { mockHTMLRenderer, mockTextRenderer } from './RenderingTestHelpers';
 
 jest.mock('obsidian');
@@ -41,6 +42,7 @@ async function renderListItem(
 ) {
     const taskLineRenderer = new TaskLineRenderer({
         textRenderer: testRenderer ?? mockTextRenderer,
+        obsidianApp: mockApp,
         obsidianComponent: null,
         parentUlElement: document.createElement('div'),
         taskLayoutOptions: taskLayoutOptions ?? new TaskLayoutOptions(),
@@ -84,6 +86,7 @@ describe('task line rendering - HTML', () => {
         const ulElement = document.createElement('ul');
         const taskLineRenderer = new TaskLineRenderer({
             textRenderer: mockTextRenderer,
+            obsidianApp: mockApp,
             obsidianComponent: null,
             parentUlElement: ulElement,
             taskLayoutOptions: new TaskLayoutOptions(),

tests/__mocks__/obsidian.ts

@@ -1,7 +1,14 @@
-import type { CachedMetadata } from 'obsidian';
+import type { App, CachedMetadata } from 'obsidian';
 
 export {};
 
+/**
+ * Since we don't use the app object's method or properties directly,
+ * and just treat it as an "opaque object" for markdown rendering, there is
+ * not a lot to mock in particular.
+ */
+export const mockApp = {} as unknown as App;
+
 export class MenuItem {
     public title: string | DocumentFragment = '';
     public callback: (evt: MouseEvent | KeyboardEvent) => any;