Merge pull request #52 from devgateway/task/fix-links

Author: timothygachengo

wp-react-lib/.changeset/good-falcons-notice.md

@@ -0,0 +1,5 @@
+---
+"@devgateway/wp-react-lib": patch
+---
+
+Fix links and remove old process.env.VITE_REACT_APP_WP_HOSTS

wp-react-lib/src/util/index.js

@@ -1,61 +1,72 @@
-const useHash = process.env.VITE_REACT_APP_USE_HASH_LINKS;
+const localReplaceLink = (url, locale) => {
+  if (!url) {
+    return "";
+  }
+  const safeLocale = locale || "en";
 
+  try {
+    let pathname = url;
 
-export const replaceLink = (url, locale) => {
-    //console.log("--------- replaceLink--------------")
-    //console.log(process.env.REACT_APP_WP_HOSTS)
-    const replacementTarget = process.env.VITE_REACT_APP_WP_HOSTS?.split(",") || []
-    let all = new RegExp("^(http|https)://(" + replacementTarget.join('|') + ")", "ig");
-    if (useHash && url) {
-        return url.replaceAll(all, "#" + locale)
-    } else if (url) {
-        return url.replaceAll(all, "/" + locale)
+    // If absolute URL, extract pathname and ignore origin
+    if (/^https?:\/\//i.test(url)) {
+      const parsed = new URL(url);
+      pathname = parsed.pathname + (parsed.search || "") + (parsed.hash || "");
+    }
+
+    if (!pathname.startsWith("/wp/")) {
+      return url; // Not a WordPress path, leave unchanged
     }
+
+    const afterWp = pathname.slice(3); // remove '/wp'
+
+    if (!afterWp.startsWith("/" + safeLocale)) {
+      return "/" + safeLocale + afterWp;
+    }
+
+    return afterWp;
+  } catch (e) {
+    console.error("Error parsing URL:", e);
+    return url;
+  }
+};
+
+export const replaceLink = (url, locale) => {
+  if (!url) {
+    return "";
+  }
+  return localReplaceLink(url, locale);
 }
 
 export const replaceHTMLinks = (html, locale) => {
-    //console.log("--------- replaceHTMLinks--------------")
-    // console.log(process.env.REACT_APP_WP_HOSTS)
-    const replacementTarget = process.env.VITE_REACT_APP_WP_HOSTS?.split(",") || []
-    let all = new RegExp("^(http|https)://(" + replacementTarget.join('|') + ")", "ig");
-
-    let link;
-    let regex = /href\s*=\s*(['"])(https?:\/\/.+?)\1/ig;
-
-    let newHtml = html
-    while ((link = regex.exec(html)) !== null) {
-        let href = link[2]
-        let newLink
-        if (useHash) {
-            newLink = href.replace(all, '#' + locale) //TODO:fix it!
-        } else {
-            newLink = href.replace(all, '' + locale) //TODO:fix it!
-        }
-        newHtml = newHtml.replaceAll(link[2], newLink)
-    }
-    if (useHash) {
-        let anchor = /href="#([^"]*)"/ig;
-        let re2 = new RegExp(anchor, "i");
-        while ((link = anchor.exec(html)) !== null) {
-            let href = link[0]
-            let newLink = href.replace(re2, 'href="javascript:document.getElementById(\'' + link[1] + '\').scrollIntoView({block: \'start\', behavior: \'smooth\'})"')
-            newHtml = newHtml.replaceAll(link[0], newLink)
-        }
+  //console.log("--------- replaceHTMLinks--------------")
+  // console.log(process.env.REACT_APP_WP_HOSTS)
+
+  let link;
+  // Match both absolute (http/https) and relative WP links in a single pass
+  let linkRegex = /href\s*=\s*(['"])(https?:\/\/.*?|\/wp\/.*?)\1/ig;
+
+  let newHtml = html
+  while ((link = linkRegex.exec(html)) !== null) {
+    let href = link[2]
+    let newLink = localReplaceLink(href, locale)
+    if (newLink !== href) {
+      newHtml = newHtml.replaceAll(href, newLink)
     }
-    return newHtml;
+  }
+  return newHtml;
 }
 
 export const removePatternBrackets = (html) => {
-    const bracketReplacement = `###${Math.random()}###`; // A unique string to mark replacements
-    const regex = new RegExp(`\\[${bracketReplacement}.*?]`, 'ig'); // No lookbehind, matches pattern within square brackets
-    if (html) {
-        return html
-            .replaceAll('[:', `[${bracketReplacement}`) // Use square brackets to match regex pattern
-            .replaceAll(regex, '') // Remove entire pattern inside square brackets
-            .replaceAll(`${bracketReplacement}`, ''); // Clean up any remaining placeholders
-    } else {
-        return null;
-    }
+  const bracketReplacement = `###${Math.random()}###`; // A unique string to mark replacements
+  const regex = new RegExp(`\\[${bracketReplacement}.*?]`, 'ig'); // No lookbehind, matches pattern within square brackets
+  if (html) {
+    return html
+      .replaceAll('[:', `[${bracketReplacement}`) // Use square brackets to match regex pattern
+      .replaceAll(regex, '') // Remove entire pattern inside square brackets
+      .replaceAll(`${bracketReplacement}`, ''); // Clean up any remaining placeholders
+  } else {
+    return null;
+  }
 };
 
-export default {replaceHTMLinks, replaceLink}
+export default { replaceHTMLinks, replaceLink }