fix: false positives for inline elements in no-reversed-media-syntax (#597)

* fix: false positives for inline elements in `no-reversed-media-syntax`

* wip: add more test cases

* wip: refactor

* wip: refactor

Author: lumirlumir

src/rules/no-reversed-media-syntax.js

@@ -8,7 +8,6 @@
 //-----------------------------------------------------------------------------
 
 /**
- * @import { SourceRange } from "@eslint/core"
  * @import { Heading, Paragraph, TableCell, Html, Image, ImageReference, InlineCode, LinkReference } from "mdast";
  * @import { MarkdownRuleDefinition } from "../types.js";
  * @typedef {"reversedSyntax"} NoReversedMediaSyntaxMessageIds
@@ -24,18 +23,6 @@
 const reversedPattern =
 	/(?<=(?<!\\)(?:\\{2})*)\((?<label>(?:\\.|[^()\\]|\([\s\S]*\))*)\)\[(?<url>(?:\\.|[^\]\\\r\n])*)\](?!\()/gu;
 
-/**
- * Checks if a match is within any skip range
- * @param {number} matchIndex The index of the match
- * @param {Array<SourceRange>} skipRanges The skip ranges
- * @returns {boolean} True if the match is within a skip range
- */
-function isInSkipRange(matchIndex, skipRanges) {
-	return skipRanges.some(
-		range => range[0] <= matchIndex && matchIndex < range[1],
-	);
-}
-
 //-----------------------------------------------------------------------------
 // Rule Definition
 //-----------------------------------------------------------------------------
@@ -62,57 +49,64 @@ export default {
 	create(context) {
 		const { sourceCode } = context;
 
-		/** @type {Array<SourceRange>} */
-		const skipRanges = [];
-
-		/**
-		 * Finds reversed link/image syntax in a node.
-		 * @param {Heading | Paragraph | TableCell} node The node to check.
-		 * @returns {void} Reports any reversed syntax found.
-		 */
-		function findReversedMediaSyntax(node) {
-			const text = sourceCode.getText(node);
-
-			/** @type {RegExpExecArray} */
-			let match;
+		/** @type {string[]} */
+		let buffer;
+		/** @type {number} */
+		let nodeStartOffset;
 
-			while ((match = reversedPattern.exec(text)) !== null) {
-				const { label, url } = match.groups;
-				const startOffset = match.index + node.position.start.offset; // Adjust `reversedPattern` match index to the full source code.
-				const endOffset = startOffset + match[0].length;
-
-				if (isInSkipRange(startOffset, skipRanges)) {
-					continue;
-				}
+		return {
+			"heading, paragraph, tableCell"(
+				/** @type {Heading | Paragraph | TableCell} */ node,
+			) {
+				// Initialize `buffer` with the full character array of the node text.
+				buffer = Array.from(sourceCode.getText(node));
 
-				context.report({
-					loc: {
-						start: sourceCode.getLocFromIndex(startOffset),
-						end: sourceCode.getLocFromIndex(endOffset),
-					},
-					messageId: "reversedSyntax",
-					fix(fixer) {
-						return fixer.replaceTextRange(
-							[startOffset, endOffset],
-							`[${label}](${url})`,
-						);
-					},
-				});
-			}
-		}
+				// Store the start offset of the node for later calculations.
+				nodeStartOffset = node.position.start.offset;
+			},
 
-		return {
 			":matches(heading, paragraph, tableCell) :matches(html, image, imageReference, inlineCode, linkReference)"(
 				/** @type {Html | Image | ImageReference | InlineCode | LinkReference} */ node,
 			) {
-				skipRanges.push(sourceCode.getRange(node));
+				const [startOffset, endOffset] = sourceCode.getRange(node);
+
+				// Mask the content of `html`, `image`, `imageReference`, `inlineCode`, and `linkReference` nodes with whitespaces.
+				for (let i = startOffset; i < endOffset; i++) {
+					buffer[i - nodeStartOffset] = " ";
+				}
 			},
 
-			":matches(heading, paragraph, tableCell):exit"(
-				/** @type {Heading | Paragraph | TableCell} */ node,
-			) {
-				findReversedMediaSyntax(node);
-				skipRanges.length = 0;
+			":matches(heading, paragraph, tableCell):exit"() {
+				const maskedText = buffer.join("");
+
+				/** @type {RegExpExecArray | null} */
+				let match;
+
+				while ((match = reversedPattern.exec(maskedText)) !== null) {
+					const { label, url } = match.groups;
+					const startOffset = match.index + nodeStartOffset; // Adjust `reversedPattern` match index to the full source code.
+					const endOffset = startOffset + match[0].length;
+
+					const labelStartOffset = startOffset + 1; // Skip "("
+					const labelEndOffset = labelStartOffset + label.length;
+
+					const urlStartOffset = labelEndOffset + 2; // Skip ")["
+					const urlEndOffset = urlStartOffset + url.length;
+
+					context.report({
+						loc: {
+							start: sourceCode.getLocFromIndex(startOffset),
+							end: sourceCode.getLocFromIndex(endOffset),
+						},
+						messageId: "reversedSyntax",
+						fix(fixer) {
+							return fixer.replaceTextRange(
+								[startOffset, endOffset],
+								`[${sourceCode.text.slice(labelStartOffset, labelEndOffset)}](${sourceCode.text.slice(urlStartOffset, urlEndOffset)})`,
+							);
+						},
+					});
+				}
 			},
 		};
 	},

tests/rules/no-reversed-media-syntax.test.js

@@ -71,6 +71,11 @@ ruleTester.run("no-reversed-media-syntax", rule, {
 		"text [foo](bar)[foo](bar)[foo](bar) text",
 		"text (text `func()[index]`) text",
 		'hi <span class="foo(bar)[baz]">hi</span>',
+		"( <!-- hi)[ --> ]",
+		'( <img data-custom = ")[" alt="alt"> ]',
+		"( ![image)[]]()",
+		"(`)[`]",
+		"(`)[]`",
 		// Heading
 		"# [ESLint](https://eslint.org/)",
 		"# ![A beautiful sunset](sunset.png)",