fix: count all types of code blocks for explanations (#29749)

* fix: count all types of code blocks for explanations

* dx: rm warning on frames plugin

This makes the build output unnecessarily chatty. Just keep on chugging
along.

Author: colbywhite

src/plugins/expressive-code/explain-code.js

@@ -157,14 +157,12 @@ export default () => {
 					context.renderData.blockAst
 				);
 
+				// Expressive Code frames plugin is required for explain button to work correctly. Ignore if it's not present.
 				if (
 					blockAst.tagName !== "figure" ||
 					!Array.isArray(blockAst.properties?.className) ||
 					!blockAst.properties.className.includes("frame")
 				) {
-					console.warn(
-						"Expressive Code frames plugin is required for explain button to work correctly",
-					);
 					return;
 				}
 

src/scripts/explain-code.ts

@@ -1,8 +1,20 @@
 import "../components/explain-code-sheet/explain-code-sheet";
 
 function getCodeBlockPosition(button: HTMLElement): number {
-	const codeBlocks = document.querySelectorAll(".expressive-code");
-	const currentBlock = button.closest(".expressive-code");
+	const wrapperSelector = ".explain";
+	const codeSelector = "pre code";
+	const codeBlocks = document.querySelectorAll(codeSelector);
+	const wrapper = button.closest(wrapperSelector);
+
+	let currentBlock = wrapper?.previousElementSibling;
+	while (currentBlock) {
+		if (currentBlock.tagName === "PRE") {
+			currentBlock = currentBlock.querySelector(codeSelector);
+			console.log(currentBlock);
+			break;
+		}
+		currentBlock = currentBlock.previousElementSibling;
+	}
 	if (!currentBlock) return 1;
 	return Array.from(codeBlocks).indexOf(currentBlock) + 1;
 }