Fix TaskNotes widgets in embedded task sections

Author: callumalpass

docs/releases/unreleased.md

@@ -40,6 +40,9 @@ Example:
 
 ## Fixed
 
+- (#1786) Fixed TaskNotes task cards and relationships/subtasks widgets appearing inside embedded task-note heading or block sections.
+  - Skips note-level widget injection in detached or embedded Markdown editor contexts used by plugins such as Block Link Plus.
+  - Thanks to @3zra47 for reporting.
 - (#1815) Fixed the Priority property settings so the NLP trigger character field is visible and editable even when priority NLP parsing is disabled.
   - Thanks to @spiv for reporting.
 - (#1035) Fixed the task modal title field causing the modal to jump to the bottom when focused on iPhone.

src/editor/MarkdownWidgetContext.ts

@@ -0,0 +1,55 @@
+import { EditorView } from "@codemirror/view";
+import { WorkspaceLeaf, editorInfoField } from "obsidian";
+
+const EMBEDDED_MARKDOWN_CONTEXT_SELECTOR = [
+	".blp-inline-edit-root",
+	".internal-embed.markdown-embed",
+	".markdown-embed",
+	".popover.hover-popover",
+].join(", ");
+
+function isDetachedLeaf(leaf: unknown): boolean {
+	if (!leaf || typeof leaf !== "object") {
+		return false;
+	}
+
+	const leafRecord = leaf as { parent?: unknown };
+	return "parent" in leafRecord && leafRecord.parent == null;
+}
+
+function isEmbeddedMarkdownElement(element: HTMLElement | null | undefined): boolean {
+	return Boolean(element?.closest(EMBEDDED_MARKDOWN_CONTEXT_SELECTOR));
+}
+
+export function shouldSkipMarkdownWidgetEditor(view: EditorView): boolean {
+	if (isEmbeddedMarkdownElement(view.dom)) {
+		return true;
+	}
+
+	try {
+		const editorInfo = view.state.field(editorInfoField, false) as
+			| {
+					leaf?: WorkspaceLeaf;
+					containerEl?: HTMLElement;
+			  }
+			| undefined;
+
+		if (isDetachedLeaf(editorInfo?.leaf)) {
+			return true;
+		}
+
+		return isEmbeddedMarkdownElement(editorInfo?.containerEl);
+	} catch (error) {
+		console.debug("[TaskNotes] Error checking markdown widget editor context:", error);
+		return false;
+	}
+}
+
+export function shouldSkipMarkdownWidgetLeaf(leaf: WorkspaceLeaf): boolean {
+	if (isDetachedLeaf(leaf)) {
+		return true;
+	}
+
+	const viewContainer = (leaf.view as { containerEl?: HTMLElement } | undefined)?.containerEl;
+	return isEmbeddedMarkdownElement(viewContainer);
+}

src/editor/RelationshipsDecorations.ts

@@ -62,6 +62,10 @@ import {
 	ReadingModeInjectionContext,
 	ReadingModeInjectionScheduler,
 } from "./ReadingModeInjectionScheduler";
+import {
+	shouldSkipMarkdownWidgetEditor,
+	shouldSkipMarkdownWidgetLeaf,
+} from "./MarkdownWidgetContext";
 
 // CSS class for identifying plugin-generated elements
 const CSS_RELATIONSHIPS_WIDGET = 'tasknotes-relationships-widget';
@@ -221,6 +225,8 @@ class RelationshipsDecorationsPlugin implements PluginValue {
 			const editorElement = view.dom;
 			if (!editorElement) return false;
 
+			if (shouldSkipMarkdownWidgetEditor(view)) return true;
+
 			const tableCell = editorElement.closest("td, th");
 			if (tableCell) return true;
 
@@ -303,15 +309,15 @@ class RelationshipsDecorationsPlugin implements PluginValue {
 		// Remove any existing widget first
 		this.removeWidget();
 
+		// Don't show note-level widgets in embedded or detached markdown editors
+		if (this.isTableCellEditor(view)) {
+			return;
+		}
+
 		// Also clean up any orphaned widgets
 		this.cleanupOrphanedWidgets(view);
 
 		try {
-			// Don't show widget in table cell editors
-			if (this.isTableCellEditor(view)) {
-				return;
-			}
-
 			// Check if relationships widget is enabled
 			if (!this.plugin.settings.showRelationships) {
 				return;
@@ -435,6 +441,10 @@ async function injectReadingModeWidget(
 		return;
 	}
 
+	if (shouldSkipMarkdownWidgetLeaf(leaf)) {
+		return;
+	}
+
 	const file = view.file;
 	if (!file) {
 		return;

src/editor/TaskCardNoteDecorations.ts

@@ -68,6 +68,10 @@ import {
 	ReadingModeInjectionContext,
 	ReadingModeInjectionScheduler,
 } from "./ReadingModeInjectionScheduler";
+import {
+	shouldSkipMarkdownWidgetEditor,
+	shouldSkipMarkdownWidgetLeaf,
+} from "./MarkdownWidgetContext";
 
 // CSS class for identifying plugin-generated elements
 const CSS_TASK_CARD_WIDGET = 'tasknotes-task-card-note-widget';
@@ -293,6 +297,8 @@ export class TaskCardNoteDecorationsPlugin implements PluginValue {
 			const editorElement = view.dom;
 			if (!editorElement) return false;
 
+			if (shouldSkipMarkdownWidgetEditor(view)) return true;
+
 			const tableCell = editorElement.closest("td, th");
 			if (tableCell) return true;
 
@@ -343,15 +349,15 @@ export class TaskCardNoteDecorationsPlugin implements PluginValue {
 		// Remove any existing widget first
 		this.removeWidget();
 
+		// Don't show note-level widgets in embedded or detached markdown editors
+		if (this.isTableCellEditor(view)) {
+			return;
+		}
+
 		// Also clean up any orphaned widgets
 		this.cleanupOrphanedWidgets(view);
 
 		try {
-			// Don't show widget in table cell editors
-			if (this.isTableCellEditor(view)) {
-				return;
-			}
-
 			// Check if task card widget is enabled
 			if (!this.plugin.settings.showTaskCardInNote) {
 				return;
@@ -427,6 +433,10 @@ async function injectReadingModeWidget(
 		return;
 	}
 
+	if (shouldSkipMarkdownWidgetLeaf(leaf)) {
+		return;
+	}
+
 	const file = view.file;
 	if (!file) {
 		return;

tests/unit/editor/MarkdownWidgetContext.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { EditorView } from "@codemirror/view";
+import {
+	shouldSkipMarkdownWidgetEditor,
+	shouldSkipMarkdownWidgetLeaf,
+} from "../../../src/editor/MarkdownWidgetContext";
+
+function createMockView(options: {
+	dom?: HTMLElement;
+	leaf?: { parent?: unknown };
+	containerEl?: HTMLElement;
+}): EditorView {
+	return {
+		dom: options.dom ?? document.createElement("div"),
+		state: {
+			field: jest.fn(() => ({
+				file: { path: "tasks/task.md" },
+				leaf: options.leaf,
+				containerEl: options.containerEl,
+			})),
+		},
+	} as unknown as EditorView;
+}
+
+describe("MarkdownWidgetContext", () => {
+	it("skips detached editor leaves used by embedded inline editors", () => {
+		const view = createMockView({
+			leaf: { parent: null },
+		});
+
+		expect(shouldSkipMarkdownWidgetEditor(view)).toBe(true);
+	});
+
+	it("does not treat missing mock leaf parent data as detached", () => {
+		const view = createMockView({
+			leaf: {},
+		});
+
+		expect(shouldSkipMarkdownWidgetEditor(view)).toBe(false);
+	});
+
+	it("skips editors mounted inside markdown embeds", () => {
+		const embed = document.createElement("div");
+		embed.className = "internal-embed markdown-embed";
+		const editor = document.createElement("div");
+		embed.appendChild(editor);
+
+		const view = createMockView({
+			dom: editor,
+			leaf: { parent: {} },
+		});
+
+		expect(shouldSkipMarkdownWidgetEditor(view)).toBe(true);
+	});
+
+	it("skips Block Link Plus inline edit roots", () => {
+		const root = document.createElement("div");
+		root.className = "blp-inline-edit-root";
+		const editor = document.createElement("div");
+		root.appendChild(editor);
+
+		const view = createMockView({
+			dom: editor,
+			leaf: { parent: {} },
+		});
+
+		expect(shouldSkipMarkdownWidgetEditor(view)).toBe(true);
+	});
+
+	it("skips detached reading-mode leaves", () => {
+		const leaf = {
+			parent: undefined,
+			view: { containerEl: document.createElement("div") },
+		};
+
+		expect(shouldSkipMarkdownWidgetLeaf(leaf as any)).toBe(true);
+	});
+});