fixes a bug where yoast markers break html of content in shopify and classic

packages/js/src/decorator/tinyMCE.js

@@ -1,6 +1,5 @@
-import { markers } from "yoastseo";
+import { markers, languageProcessing } from "yoastseo";
 import { forEach } from "lodash-es";
-import { languageProcessing } from "yoastseo";
 
 var MARK_TAG = "yoastmark";
 
@@ -36,11 +35,30 @@ function markTinyMCE( editor, paper, marks ) {
 	let html = editor.getContent();
 	html = markers.removeMarks( html );
 
+	/*
+	 * Get the information whether we want to mark a specific part of the HTML. If we do, `fieldsToMark` should return an array with that information.
+	 * For example, [ "heading" ] means that we want to apply the markings in subheadings only, and not the other parts.
+	 * `selectedHTML` is an array of the HTML parts that we want to apply the marking to.
+	 */
 	const { fieldsToMark, selectedHTML } = languageProcessing.getFieldsToMark( marks, html );
-
 	// Generate marked HTML.
 	forEach( marks, function( mark ) {
+		/*
+		 * Classic editor uses double quotes for HTML attribute values. However, Block editor uses single quotes for HTML tag attributes,
+		 * and that's why in `yoastseo`, we use single quotes for the attribute values when we create the marked object. As a result,
+		 * the replacement did not work, as the marks passed by `yoastseo` did not match anything in the original text.
+		 * This step is replacing the single quotes in the marked object output by `yoastseo` with double quotes.
+		 * This way, we make sure that the replacement can find a match between the original text of the marked object and the text in the page.
+		 * Only do this in the classic editor. And not in the block editor when Advanced Custom Fields is active.
+		 */
+		if ( editor.id !== "acf_content" ) {
+			mark._properties.marked = languageProcessing.normalizeHTML( mark._properties.marked );
+			mark._properties.original = languageProcessing.normalizeHTML( mark._properties.original );
+		}
+
+		// Check if we want to mark only specific part of the HTML.
 		if ( fieldsToMark.length > 0 ) {
+			// Apply the marking to the selected HTML parts.
 			selectedHTML.forEach( element => {
 				const markedElement = mark.applyWithReplace( element );
 				html = html.replace( element, markedElement );
@@ -73,7 +91,6 @@ function markTinyMCE( editor, paper, marks ) {
  */
 export function tinyMCEDecorator( editor ) {
 	window.test = editor;
-
 	return markTinyMCE.bind( null, editor );
 }
 

packages/js/tests/settings/__snapshots__/search.test.js.snap

@@ -2,13 +2,13 @@
 
 exports[`Search test should match search snapshot 1`] = `
 "<Fragment>
-  <button type=\\"button\\" className=\\"yst-w-full yst-flex yst-items-center yst-bg-white yst-text-sm yst-leading-6 yst-text-slate-500 yst-rounded-md yst-border yst-border-slate-300 yst-shadow-sm yst-py-1.5 yst-pl-2 yst-pr-3 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-primary-500\\" onClick={[Function (anonymous)]}>
+  <button id=\\"button-search\\" type=\\"button\\" className=\\"yst-w-full yst-flex yst-items-center yst-bg-white yst-text-sm yst-leading-6 yst-text-slate-500 yst-rounded-md yst-border yst-border-slate-300 yst-shadow-sm yst-py-1.5 yst-pl-2 yst-pr-3 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-primary-500\\" onClick={[Function (anonymous)]}>
     <ForwardRef(SearchIcon) className=\\"yst-flex-none yst-w-5 yst-h-5 yst-mr-3 yst-text-slate-400\\" role=\\"img\\" aria-hidden=\\"true\\" />
     <span className=\\"yst-overflow-hidden yst-whitespace-nowrap yst-text-ellipsis\\">
       Quick search...
     </span>
   </button>
-  <Modal onClose={[Function (anonymous)]} isOpen={false} initialFocus={{...}} position=\\"top-center\\">
+  <Modal onClose={[Function (anonymous)]} isOpen={false} initialFocus={{...}} position=\\"top-center\\" aria-label=\\"Search\\">
     <Modal.Panel closeButtonScreenReaderText=\\"Close\\">
       <ComboboxFn as=\\"div\\" className=\\"yst--m-6 yst--mt-5\\" onChange={[Function (anonymous)]}>
         <div className=\\"yst-relative\\">

packages/yoastseo/spec/fullTextTests/testTexts/ca/catalanPaper.js

@@ -98,14 +98,15 @@ const expectedResults = {
 	},
 	keyphraseDistribution: {
 		isApplicable: true,
-		score: 9,
-		resultText: "<a href='https://yoa.st/33q' target='_blank'>Keyphrase distribution</a>: Good job!",
+		score: 6,
+		resultText: "<a href='https://yoa.st/33q' target='_blank'>Keyphrase distribution</a>: Uneven. Some parts of your text do not contain " +
+			"the keyphrase or its synonyms. <a href='https://yoa.st/33u' target='_blank'>Distribute them more evenly</a>.",
 	},
 	subheadingsTooLong: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34x' target='_blank'>Subheading distribution</a>: The beginning of your " +
-			"text is longer than 300 words and is not separated by any subheadings. <a href='https://yoa.st/34y' target='_blank'>Add subheadings to improve readability.</a>",
+		resultText: "<a href='https://yoa.st/34x' target='_blank'>Subheading distribution</a>: The beginning of your text is longer than 300 words " +
+			"and is not separated by any subheadings. <a href='https://yoa.st/34y' target='_blank'>Add subheadings to improve readability.</a>",
 	},
 	textParagraphTooLong: {
 		isApplicable: true,
@@ -121,7 +122,7 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 18.6% of the sentences contain transition words, " +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 16% of the sentences contain transition words, " +
 			"which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {

packages/yoastseo/spec/fullTextTests/testTexts/de/germanPaper.js

@@ -127,13 +127,13 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 6,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 27.1% of the sentences contain " +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 25.5% of the sentences contain " +
 			"transition words, which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 16.7% of the sentences contain passive voice, " +
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 15.7% of the sentences contain passive voice, " +
 			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
 			"Try to use their active counterparts</a>.",
 	},

packages/yoastseo/spec/fullTextTests/testTexts/el/greekPaper.js

@@ -126,13 +126,13 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 19.7% of the sentences contain" +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 18.9% of the sentences contain" +
 			" transition words, which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 25.9% of the sentences contain passive voice, " +
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 24.9% of the sentences contain passive voice, " +
 			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
 			"Try to use their active counterparts</a>.",
 	},

packages/yoastseo/spec/fullTextTests/testTexts/en/englishPaperForPerformanceTest.js

@@ -126,7 +126,7 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 5.6% of the sentences contain transition words, " +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 5.5% of the sentences contain transition words, " +
 			"which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {

packages/yoastseo/spec/fullTextTests/testTexts/fa/farsiPaper.js

@@ -135,7 +135,7 @@ const expectedResults = {
 	passiveVoice: {
 		isApplicable: true,
 		score: 6,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 11.8% of the sentences contain passive voice, " +
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 11.5% of the sentences contain passive voice, " +
 			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
 			"Try to use their active counterparts</a>.",
 	},

packages/yoastseo/spec/fullTextTests/testTexts/fr/frenchPaper.js

@@ -121,13 +121,13 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 6,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 26% of the sentences contain " +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 25% of the sentences contain " +
 			"transition words, which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 24% of the sentences contain passive voice, " +
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 23.1% of the sentences contain passive voice, " +
 			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
 			"Try to use their active counterparts</a>.",
 	},

packages/yoastseo/spec/fullTextTests/testTexts/hu/hungarianPaper.js

@@ -112,7 +112,7 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 13.1% of the sentences contain transition words, which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 12.5% of the sentences contain transition words, which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {
 		isApplicable: true,

packages/yoastseo/spec/fullTextTests/testTexts/id/indonesianPaper.js

@@ -119,7 +119,7 @@ const expectedResults = {
 	passiveVoice: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 25.3% of the sentences contain passive voice, which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>Try to use their active counterparts</a>.",
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 24.7% of the sentences contain passive voice, which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>Try to use their active counterparts</a>.",
 	},
 	textPresence: {
 		isApplicable: true,

packages/yoastseo/spec/fullTextTests/testTexts/nb/norwegianPaper.js

@@ -126,10 +126,8 @@ const expectedResults = {
 	},
 	passiveVoice: {
 		isApplicable: true,
-		score: 6,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 10.6% of the sentences contain passive voice, " +
-			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
-			"Try to use their active counterparts</a>.",
+		score: 9,
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: You're using enough active voice. That's great!",
 	},
 	textPresence: {
 		isApplicable: true,

packages/yoastseo/spec/fullTextTests/testTexts/pt/portuguesePaper.js

@@ -127,13 +127,13 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 9.2% of the sentences contain transition words," +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 9% of the sentences contain transition words," +
 			" which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 15.6% of the sentences contain passive voice, " +
+		resultText: "<a href='https://yoa.st/34t' target='_blank'>Passive voice</a>: 15.3% of the sentences contain passive voice, " +
 			"which is more than the recommended maximum of 10%. <a href='https://yoa.st/34u' target='_blank'>" +
 			"Try to use their active counterparts</a>.",
 	},

packages/yoastseo/spec/fullTextTests/testTexts/sk/slovakPaper.js

@@ -121,7 +121,7 @@ const expectedResults = {
 	textTransitionWords: {
 		isApplicable: true,
 		score: 3,
-		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 13.3% of the sentences contain transition words," +
+		resultText: "<a href='https://yoa.st/34z' target='_blank'>Transition words</a>: Only 12.6% of the sentences contain transition words," +
 			" which is not enough. <a href='https://yoa.st/35a' target='_blank'>Use more of them</a>.",
 	},
 	passiveVoice: {

packages/yoastseo/spec/fullTextTests/testTexts/tr/turkishPaper.js

@@ -90,8 +90,10 @@ const expectedResults = {
 		isApplicable: false,
 	},
 	keyphraseDistribution: {
-		// The text doesnt contain more than 15 sentences.
-		isApplicable: false,
+		isApplicable: true,
+		score: 6,
+		resultText: "<a href='https://yoa.st/33q' target='_blank'>Keyphrase distribution</a>: Uneven. Some parts of your text do not contain the " +
+			"keyphrase or its synonyms. <a href='https://yoa.st/33u' target='_blank'>Distribute them more evenly</a>.",
 	},
 	subheadingsTooLong: {
 		isApplicable: true,

packages/yoastseo/spec/languageProcessing/helpers/html/normalizeHTMLSpec.js

@@ -0,0 +1,35 @@
+import normalizeHTML from "../../../../src/languageProcessing/helpers/html/normalizeHTML";
+
+describe( "replace-quotes", function() {
+	describe( "normalizeHTML", function() {
+		it( "should return the same string when no single quotes are present", function() {
+			expect( normalizeHTML( "This is a test" ) )
+				.toEqual( "This is a test" );
+		} );
+
+		it( "should return the same string when only double quotes in HTML attribute values are present", function() {
+			expect( normalizeHTML( "<yoastmark class=\"yoast-text-mark\">This is a test</yoastmark>" ) )
+				.toEqual( "<yoastmark class=\"yoast-text-mark\">This is a test</yoastmark>" );
+		} );
+
+		it( "should not replace single quotes (or apostrophes) outside HTML tags", function() {
+			expect( normalizeHTML( "This is a test, let's go!" ) )
+				.toEqual( "This is a test, let's go!" );
+		} );
+
+		it( "should replace the outer single quotes in HTML attribute values with double quotes", function() {
+			expect( normalizeHTML( "<span style='color: red'>This</span> is a test" ) )
+				.toEqual( "<span style=\"color: red\">This</span> is a test" );
+		} );
+
+		it( "should not replace any inner single quotes in HTML attribute values", function() {
+			expect( normalizeHTML( "<span data-attr=\"let's go, time's up\">This</span> is a test" ) )
+				.toEqual( "<span data-attr=\"let's go, time's up\">This</span> is a test" );
+		} );
+
+		it( "should replace the outer single quotes in multiple HTML attribute values with double quotes", function() {
+			expect( normalizeHTML( "<yoastmark class='yoast-text-mark' style='color: blue'>This is a test</yoastmark>" ) )
+				.toEqual( "<yoastmark class=\"yoast-text-mark\" style=\"color: blue\">This is a test</yoastmark>" );
+		} );
+	} );
+} );