From cf166cae989bd5e45de6d5ee5d10c01ea7c442f3 Mon Sep 17 00:00:00 2001
From: Jacky Sun <67350368+JackySun9@users.noreply.github.com>
Date: Tue, 13 Aug 2024 09:08:36 -0700
Subject: [PATCH] MWPW-156094: clean up LTRM in URLs (#2718)

MWPW-156094: Unicode sequence %E2%80%8E is being added after il_he country code for MIQ json files | UAR | Milo
---
 libs/blocks/quiz/quizcontainer.js | 3 ++-
 libs/blocks/quiz/quizoption.js    | 9 +++++----
 libs/blocks/quiz/utils.js         | 5 ++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/blocks/quiz/quizcontainer.js b/libs/blocks/quiz/quizcontainer.js
index 03d2eebb70..52f14a9f06 100644
--- a/libs/blocks/quiz/quizcontainer.js
+++ b/libs/blocks/quiz/quizcontainer.js
@@ -1,6 +1,7 @@
 import { html } from '../../deps/htm-preact.js';
+import { removeLeftToRightMark } from './utils.js';
 
-export const DecorateBlockBackgroundCmp = ({ background = '' }) => html`<img loading="eager" alt="" src=${background} height="1020" width="1920" />`;
+export const DecorateBlockBackgroundCmp = ({ background = '' }) => html`<img loading="eager" alt="" src=${removeLeftToRightMark(background)} height="1020" width="1920" />`;
 
 export const DecorateBlockForeground = ({ heading, subhead }) => html`<div class="quiz-foreground">
     <h1 id="question" class="quiz-question-title" daa-lh="${heading}">${heading}</h1>
diff --git a/libs/blocks/quiz/quizoption.js b/libs/blocks/quiz/quizoption.js
index 7b0bd8f7a9..cdbefb80de 100644
--- a/libs/blocks/quiz/quizoption.js
+++ b/libs/blocks/quiz/quizoption.js
@@ -1,4 +1,5 @@
 import { html } from '../../deps/htm-preact.js';
+import { removeLeftToRightMark } from './utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options, disabled, selected, background,
@@ -22,15 +23,15 @@ export const OptionCard = ({
 
   const getIconHtml = () => html`<div class="quiz-option-icon ${getIconClass()}">
     <picture>
-      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${iconDesktop}" />`}
-      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${iconTablet}" />`}
-      <img src="${icon}" alt="" loading="lazy" />
+      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${removeLeftToRightMark(iconDesktop)}" />`}
+      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${removeLeftToRightMark(iconTablet)}" />`}
+      <img src="${removeLeftToRightMark(icon)}" alt="" loading="lazy" />
     </picture>
   </div>`;
 
   const imageHtml = html`
     <div class="quiz-option-image" 
-      style="background-image: url('${image}'); background-size: cover" loading="lazy">
+      style="background-image: url('${removeLeftToRightMark(image)}'); background-size: cover" loading="lazy">
     </div>`;
 
   const titleHtml = html`
diff --git a/libs/blocks/quiz/utils.js b/libs/blocks/quiz/utils.js
index 493979a9b9..d3cb740a5f 100644
--- a/libs/blocks/quiz/utils.js
+++ b/libs/blocks/quiz/utils.js
@@ -520,8 +520,11 @@ export const isValidUrl = (url) => VALID_URL_RE.test(url);
 
 export const getNormalizedMetadata = (el) => normalizeKeys(getMetadata(el));
 
+export const removeLeftToRightMark = (url) => decodeURIComponent(url).replace(/\u200E/g, '');
+
 export const getLocalizedURL = (originalURL) => {
   const { locale } = getConfig();
   const { prefix, ietf = 'en-US' } = locale || {};
-  return ietf !== 'en-US' && !originalURL.startsWith(`${prefix}/`) ? `${prefix}${originalURL}` : originalURL;
+  const decodedURL = removeLeftToRightMark(originalURL);
+  return ietf !== 'en-US' && !decodedURL.startsWith(`${prefix}/`) ? `${prefix}${decodedURL}` : decodedURL;
 };