HTML Parser - Implement position based highlighting for block editor#138

Fix tests.
Yoast · Jun 19, 2023 · a337871 · a337871
1 parent 3aa96c5
commit a337871
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 31 deletions.
diff --git a/packages/yoastseo/spec/languageProcessing/helpers/highlighting/getMarkingsInSentenceSpec.js b/packages/yoastseo/spec/languageProcessing/helpers/highlighting/getMarkingsInSentenceSpec.js
@@ -21,7 +21,12 @@ const testCases = [
 		expectedResult: [ new Mark( {
 			marked: "<yoastmark class='yoast-text-mark'>This</yoastmark> is a sentence.",
 			original: "This is a sentence.",
-			position: { endOffset: 4, startOffset: 0 },
+			position: {
+				startOffset: 0,
+				endOffset: 4,
+				startOffsetBlock: 0,
+				endOffsetBlock: 4,
+			},
 		} ) ],
 	},
 	{
@@ -30,11 +35,18 @@ const testCases = [
 		matchesInSentence: [ { sourceCodeRange: { startOffset: 0, endOffset: 4 } }, { sourceCodeRange: { startOffset: 5, endOffset: 7 } } ],
 		matchWordCustomHelper: false,
 		locale: "en_US",
-		expectedResult: [ new Mark( {
-			marked: "<yoastmark class='yoast-text-mark'>This is</yoastmark> a sentence.",
-			original: "This is a sentence.",
-			position: { endOffset: 7, startOffset: 0 },
-		} ) ],
+		expectedResult: [
+			new Mark( {
+				marked: "<yoastmark class='yoast-text-mark'>This is</yoastmark> a sentence.",
+				original: "This is a sentence.",
+				position: {
+					startOffset: 0,
+					endOffset: 7,
+					startOffsetBlock: 0,
+					endOffsetBlock: 7,
+				},
+			} ),
+		],
 	},
 	{
 		testDescription: "Two markings that are not consecutive in sentence",
@@ -46,12 +58,22 @@ const testCases = [
 			new Mark( {
 				marked: "<yoastmark class='yoast-text-mark'>This</yoastmark> is a <yoastmark class='yoast-text-mark'>sentence</yoastmark>.",
 				original: "This is a sentence.",
-				position: { endOffset: 4, startOffset: 0 },
+				position: {
+					startOffset: 0,
+					endOffset: 4,
+					startOffsetBlock: 0,
+					endOffsetBlock: 4,
+				},
 			} ),
 			new Mark( {
 				marked: "<yoastmark class='yoast-text-mark'>This</yoastmark> is a <yoastmark class='yoast-text-mark'>sentence</yoastmark>.",
 				original: "This is a sentence.",
-				position: { endOffset: 18, startOffset: 10 },
+				position: {
+					startOffset: 10,
+					endOffset: 18,
+					startOffsetBlock: 10,
+					endOffsetBlock: 18,
+				},
 			} ),
 		],
 	},
@@ -61,23 +83,37 @@ const testCases = [
 		matchesInSentence: [ { sourceCodeRange: { startOffset: 10, endOffset: 14 } } ],
 		matchWordCustomHelper: false,
 		locale: "en_US",
-		expectedResult: [ new Mark( {
-			marked: "<yoastmark class='yoast-text-mark'>This</yoastmark> is a sentence.",
-			original: "This is a sentence.",
-			position: { endOffset: 14, startOffset: 10 },
-		} ) ],
+		expectedResult: [
+			new Mark( {
+				marked: "<yoastmark class='yoast-text-mark'>This</yoastmark> is a sentence.",
+				original: "This is a sentence.",
+				position: {
+					startOffset: 10,
+					endOffset: 14,
+					startOffsetBlock: 10,
+					endOffsetBlock: 14,
+				},
+			} ),
+		],
 	},
 	{
 		testDescription: "One marking in a sentence of a language that does not use spaces",
 		sentence: { text: "これは文です.", sourceCodeRange: { startOffset: 0, endOffset: 7 } },
 		matchesInSentence: [ { sourceCodeRange: { startOffset: 3, endOffset: 4 } } ],
 		matchWordCustomHelper: JapaneseCustomHelper,
 		locale: "ja",
-		expectedResult: [ new Mark( {
-			marked: "これは<yoastmark class='yoast-text-mark'>文</yoastmark>です.",
-			original: "これは文です.",
-			position: { endOffset: 4, startOffset: 3 },
-		} ) ],
+		expectedResult: [
+			new Mark( {
+				marked: "これは<yoastmark class='yoast-text-mark'>文</yoastmark>です.",
+				original: "これは文です.",
+				position: {
+					startOffset: 3,
+					endOffset: 4,
+					startOffsetBlock: 3,
+					endOffsetBlock: 4,
+				},
+			} ),
+		],
 	},
 	{
 		testDescription: "Two markings that overlap",
@@ -89,7 +125,12 @@ const testCases = [
 			new Mark( {
 				marked: "<yoastmark class='yoast-text-mark'>This is a</yoastmark> sentence.",
 				original: "This is a sentence.",
-				position: { endOffset: 9, startOffset: 0 },
+				position: {
+					startOffset: 0,
+					endOffset: 9,
+					startOffsetBlock: 0,
+					endOffsetBlock: 9,
+				},
 			} ),
 		],
 	},

diff --git a/packages/yoastseo/spec/languageProcessing/helpers/sentence/getSentencesFromTreeSpec.js b/packages/yoastseo/spec/languageProcessing/helpers/sentence/getSentencesFromTreeSpec.js
@@ -15,6 +15,7 @@ describe( "test", () => {
 		expect( getSentencesFromTree( paper ) ).toEqual( [
 			{
 				sourceCodeRange: { endOffset: 44, startOffset: 3 },
+				parentStartOffset: 3,
 				text: "A very intelligent cat loves their human.",
 				tokens: [
 					{ sourceCodeRange: { endOffset: 4, startOffset: 3 }, text: "A" },
@@ -35,6 +36,7 @@ describe( "test", () => {
 			},
 			{
 				sourceCodeRange: { endOffset: 64, startOffset: 44 },
+				parentStartOffset: 3,
 				text: " A dog is very cute.",
 				tokens: [
 					{ sourceCodeRange: { endOffset: 45, startOffset: 44 }, text: " " },
@@ -51,6 +53,7 @@ describe( "test", () => {
 				] },
 			{
 				sourceCodeRange: { endOffset: 86, startOffset: 72 },
+				parentStartOffset: 72,
 				text: "A subheading 3",
 				tokens: [
 					{ sourceCodeRange: { endOffset: 73, startOffset: 72 }, text: "A" },
@@ -61,6 +64,7 @@ describe( "test", () => {
 				] },
 			{
 				sourceCodeRange: {},
+				parentStartOffset: 0,
 				text: "text text text",
 				tokens: [
 					{ sourceCodeRange: {}, text: "text" },
@@ -71,6 +75,7 @@ describe( "test", () => {
 				] },
 			{
 				sourceCodeRange: { endOffset: 123, startOffset: 109 },
+				parentStartOffset: 109,
 				text: "A subheading 4",
 				tokens: [
 					{ sourceCodeRange: { endOffset: 110, startOffset: 109 }, text: "A" },
@@ -81,6 +86,7 @@ describe( "test", () => {
 				] },
 			{
 				sourceCodeRange: { endOffset: 138, startOffset: 128 },
+				parentStartOffset: 0,
 				text: "more text.",
 				tokens: [
 					{ sourceCodeRange: { endOffset: 132, startOffset: 128 }, text: "more" },

diff --git a/packages/yoastseo/spec/scoring/assessments/seo/KeywordDensityAssessmentSpec.js b/packages/yoastseo/spec/scoring/assessments/seo/KeywordDensityAssessmentSpec.js
@@ -254,15 +254,26 @@ describe( "A test for marking the keyword", function() {
 					"<yoastmark class='yoast-text-mark'>keyword</yoastmark> and another " +
 					"<yoastmark class='yoast-text-mark'>keyword</yoastmark>.",
 				original: "This is a very interesting paper with a keyword and another keyword.",
-				position: { endOffset: 50, startOffset: 43 },
+				position: {
+					startOffset: 43,
+					endOffset: 50,
+					startOffsetBlock: 40,
+					endOffsetBlock: 47,
+				},
 			} ),
 			new Mark( {
 				marked: "This is a very interesting paper with a " +
 					"<yoastmark class='yoast-text-mark'>keyword</yoastmark> and another " +
 					"<yoastmark class='yoast-text-mark'>keyword</yoastmark>.",
 				original: "This is a very interesting paper with a keyword and another keyword.",
-				position: { endOffset: 70, startOffset: 63 },
-			} ) ];
+				position: {
+					startOffset: 63,
+					endOffset: 70,
+					startOffsetBlock: 60,
+					endOffsetBlock: 67,
+				},
+			} ),
+		];
 		expect( keywordDensityAssessment.getMarks() ).toEqual( expected );
 	} );
 
@@ -277,7 +288,14 @@ describe( "A test for marking the keyword", function() {
 		const expected = [
 			new Mark( { marked: "This is the release of <yoastmark class='yoast-text-mark'>YoastSEO 9.3</yoastmark>.",
 				original: "This is the release of YoastSEO 9.3.",
-				position: { startOffset: 26, endOffset: 38 } } ) ];
+				position: {
+					startOffset: 26,
+					endOffset: 38,
+					startOffsetBlock: 23,
+					endOffsetBlock: 35,
+				},
+			} ),
+		];
 		expect( keywordDensityAssessment.getMarks() ).toEqual( expected );
 	} );
 
@@ -297,11 +315,24 @@ describe( "A test for marking the keyword", function() {
 				marked: " A flamboyant <yoastmark class='yoast-text-mark'>cat</yoastmark> with a <yoastmark class='yoast-text-mark'>" +
 					"toy</yoastmark>\n",
 				original: " A flamboyant cat with a toy\n",
-				position: { endOffset: 204, startOffset: 201 } } ),
+				position: {
+					startOffset: 201,
+					endOffset: 204,
+					startOffsetBlock: 198,
+					endOffsetBlock: 201,
+				},
+			} ),
 			new Mark( {
 				marked: " A flamboyant <yoastmark class='yoast-text-mark'>cat</yoastmark> with a <yoastmark class='yoast-text-mark'>" +
 					"toy</yoastmark>\n",
-				original: " A flamboyant cat with a toy\n", position: { endOffset: 215, startOffset: 212 } } ),
+				original: " A flamboyant cat with a toy\n",
+				position: {
+					startOffset: 212,
+					endOffset: 215,
+					startOffsetBlock: 209,
+					endOffsetBlock: 212,
+				},
+			} ),
 		];
 		expect( keywordDensityAssessment.getMarks() ).toEqual( expected );
 	} );

diff --git a/packages/yoastseo/src/languageProcessing/helpers/highlighting/getMarkingsInSentence.js b/packages/yoastseo/src/languageProcessing/helpers/highlighting/getMarkingsInSentence.js
@@ -144,8 +144,8 @@ function getMarkingsInSentence( sentence, matchesInSentence, matchWordCustomHelp
 				startOffset: token.sourceCodeRange.startOffset,
 				endOffset: token.sourceCodeRange.endOffset,
 				// relative to start of block positions.
-				startOffsetBlock: token.sourceCodeRange.startOffset - sentence.parentCodeRange.startOffset,
-				endOffsetBlock: token.sourceCodeRange.endOffset - sentence.parentCodeRange.startOffset,
+				startOffsetBlock: token.sourceCodeRange.startOffset - ( sentence.parentStartOffset || 0 ),
+				endOffsetBlock: token.sourceCodeRange.endOffset - ( sentence.parentStartOffset || 0 ),
 			},
 			marked: markedSentence,
 			original: sentence.text,

diff --git a/packages/yoastseo/src/languageProcessing/helpers/sentence/getSentencesFromTree.js b/packages/yoastseo/src/languageProcessing/helpers/sentence/getSentencesFromTree.js
@@ -11,10 +11,7 @@ export default function( paper ) {
 
 	return tree.flatMap( node => node.sentences.map( s => ( {
 		...s,
-		parentCodeRange: {
-			startOffset: node.sourceCodeLocation.startTag.endOffset,
-			endOffset: node.sourceCodeLocation.endTag.startOffset,
-		},
+		parentStartOffset: ( node.sourceCodeLocation && node.sourceCodeLocation.startTag ) ? node.sourceCodeLocation.startTag.endOffset : 0,
 	} ) )
 	);
 }