From d32fd6daa7e2fadd2c3b6e34fb4b9ee4702d85d9 Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Wed, 5 Mar 2025 22:58:07 +0530
Subject: [PATCH 1/5] Removed code duplication between server
 previewGeneration.js and client EmbedFrame.jsx. #2805

---
 client/modules/Preview/EmbedFrame.jsx | 19 ++++++-------------
 server/utils/previewGeneration.js     | 17 +++++------------
 shared/resolveUtils.js                | 22 ++++++++++++++++++++++
 3 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 shared/resolveUtils.js

diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
index 4b2ad60d9b..2d983f2d8a 100644
--- a/client/modules/Preview/EmbedFrame.jsx
+++ b/client/modules/Preview/EmbedFrame.jsx
@@ -18,6 +18,7 @@ import {
 import { getAllScriptOffsets } from '../../utils/consoleUtils';
 import { registerFrame } from '../../utils/dispatcher';
 import { createBlobUrl } from './filesReducer';
+import { resolvePathsForElementsWithAttribute } from '../../../shared/resolveUtils';
 
 let objectUrls = {};
 let objectPaths = {};
@@ -34,19 +35,6 @@ const Frame = styled.iframe`
   `}
 `;
 
-function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-  const elementsArray = Array.prototype.slice.call(elements);
-  elementsArray.forEach((element) => {
-    if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
-      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
-}
-
 function resolveCSSLinksInString(content, files) {
   let newContent = content;
   let cssFileStrings = content.match(STRING_REGEX);
@@ -218,7 +206,12 @@ function injectLocalFiles(files, htmlFile, options) {
   base.href = `${window.origin}${basePath}${basePath.length > 1 && '/'}`;
   sketchDoc.head.appendChild(base);
 
+  // Resolve paths for elements with the 'src' attribute
+  // This updates the 'src' attribute of elements (e.g., <img>, <script>) to their resolved URLs
   resolvePathsForElementsWithAttribute('src', sketchDoc, resolvedFiles);
+
+  // Resolve paths for elements with the 'href' attribute
+  // This updates the 'href' attribute of elements (e.g., <a>, <link>) to their resolved URLs
   resolvePathsForElementsWithAttribute('href', sketchDoc, resolvedFiles);
   // should also include background, data, poster, but these are used way less often
 
diff --git a/server/utils/previewGeneration.js b/server/utils/previewGeneration.js
index 22dbcd3a02..5570e01d16 100644
--- a/server/utils/previewGeneration.js
+++ b/server/utils/previewGeneration.js
@@ -1,3 +1,4 @@
+import { resolvePathsForElementsWithAttribute } from '../../shared/resolveUtils';
 import { resolvePathToFile } from '../utils/filePath';
 
 import {
@@ -13,8 +14,8 @@ function resolveLinksInString(content, files, projectId) {
   let fileStrings = content.match(STRING_REGEX);
   const fileStringRegex = /^('|")(?!(http:\/\/|https:\/\/)).*('|")$/i;
   fileStrings = fileStrings || [];
+  // if string does not begin with http or https
   fileStrings.forEach((fileString) => {
-    // if string does not begin with http or https
     if (fileString.match(fileStringRegex)) {
       const filePath = fileString.substr(1, fileString.length - 2);
       const resolvedFile = resolvePathToFile(filePath, files);
@@ -44,17 +45,9 @@ export function injectMediaUrls(filesToInject, allFiles, projectId) {
   });
 }
 
-export function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-  const elementsArray = Array.prototype.slice.call(elements);
-  elementsArray.forEach((element) => {
-    if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
-      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
+// Wrapped the function in a proper call
+export function resolveMediaElements(sketchDoc, files) {
+  resolvePathsForElementsWithAttribute('src', sketchDoc, files);
 }
 
 export function resolveScripts(sketchDoc, files, projectId) {
diff --git a/shared/resolveUtils.js b/shared/resolveUtils.js
new file mode 100644
index 0000000000..38565e7fbf
--- /dev/null
+++ b/shared/resolveUtils.js
@@ -0,0 +1,22 @@
+// Neessary imports required for the Function.
+import { resolvePathToFile } from '../server/utils/filePath';
+import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils';
+
+// Shared function to resolve paths for elements with a specific attribute
+export default function resolvePathsForElementsWithAttribute(
+  attr,
+  sketchDoc,
+  files
+) {
+  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
+  const elementsArray = Array.prototype.slice.call(elements);
+  elementsArray.forEach((element) => {
+    // Use RegExp.test() instead of match() !== null
+    if (MEDIA_FILE_REGEX.test(element.getAttribute(attr))) {
+      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
+      if (resolvedFile && resolvedFile.url) {
+        element.setAttribute(attr, resolvedFile.url);
+      }
+    }
+  });
+}

From 183d81d503fef913672ef8756cf0e4b5f724928a Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Fri, 7 Mar 2025 00:06:52 +0530
Subject: [PATCH 2/5] Update EmbedFrame.jsx

---
 client/modules/Preview/EmbedFrame.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
index 2d983f2d8a..46e5940836 100644
--- a/client/modules/Preview/EmbedFrame.jsx
+++ b/client/modules/Preview/EmbedFrame.jsx
@@ -8,7 +8,6 @@ import decomment from 'decomment';
 import { resolvePathToFile } from '../../../server/utils/filePath';
 import getConfig from '../../utils/getConfig';
 import {
-  MEDIA_FILE_REGEX,
   MEDIA_FILE_QUOTED_REGEX,
   STRING_REGEX,
   PLAINTEXT_FILE_REGEX,
@@ -18,7 +17,7 @@ import {
 import { getAllScriptOffsets } from '../../utils/consoleUtils';
 import { registerFrame } from '../../utils/dispatcher';
 import { createBlobUrl } from './filesReducer';
-import { resolvePathsForElementsWithAttribute } from '../../../shared/resolveUtils';
+import resolvePathsForElementsWithAttribute from '../../../shared/resolveUtils';
 
 let objectUrls = {};
 let objectPaths = {};

From 9a9c4ab21c1a1b5f4fa11dc0e11af03c9c16e5cc Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Mon, 10 Mar 2025 20:38:34 +0530
Subject: [PATCH 3/5] Update resolveUtils.js

---
 shared/resolveUtils.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/shared/resolveUtils.js b/shared/resolveUtils.js
index 38565e7fbf..b8b07bb4d2 100644
--- a/shared/resolveUtils.js
+++ b/shared/resolveUtils.js
@@ -1,6 +1,6 @@
-// Neessary imports required for the Function.
-import { resolvePathToFile } from '../server/utils/filePath';
-import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils';
+// Import necessary utilities for resolving file paths and checking media file patterns
+import { resolvePathToFile } from '../server/utils/filePath'; // Utility to resolve file paths
+import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils'; // Regex pattern to identify media files
 
 // Shared function to resolve paths for elements with a specific attribute
 export default function resolvePathsForElementsWithAttribute(
@@ -8,12 +8,23 @@ export default function resolvePathsForElementsWithAttribute(
   sketchDoc,
   files
 ) {
+  // Find all elements in the document that have the specified attribute
   const elements = sketchDoc.querySelectorAll(`[${attr}]`);
+
+  // Convert the NodeList to an array for easier iteration
   const elementsArray = Array.prototype.slice.call(elements);
+
+  // Iterate over each element with the specified attribute
   elementsArray.forEach((element) => {
+    // Get the value of the attribute
+    const attrValue = element.getAttribute(attr);
+
     // Use RegExp.test() instead of match() !== null
-    if (MEDIA_FILE_REGEX.test(element.getAttribute(attr))) {
-      const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
+    if (MEDIA_FILE_REGEX.test(attrValue)) {
+      // Resolve the file path using the provided files mapping
+      const resolvedFile = resolvePathToFile(attrValue, files);
+
+      // If the file is resolved successfully and has a URL, update the attribute
       if (resolvedFile && resolvedFile.url) {
         element.setAttribute(attr, resolvedFile.url);
       }

From 77c88bd3f1ecaa3e05d974255cb1a5d63e854fce Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Mon, 10 Mar 2025 20:39:24 +0530
Subject: [PATCH 4/5] Update previewGeneration.js

---
 server/utils/previewGeneration.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/server/utils/previewGeneration.js b/server/utils/previewGeneration.js
index 5570e01d16..2b5e09e449 100644
--- a/server/utils/previewGeneration.js
+++ b/server/utils/previewGeneration.js
@@ -2,7 +2,6 @@ import { resolvePathsForElementsWithAttribute } from '../../shared/resolveUtils'
 import { resolvePathToFile } from '../utils/filePath';
 
 import {
-  MEDIA_FILE_REGEX,
   STRING_REGEX,
   PLAINTEXT_FILE_REGEX,
   EXTERNAL_LINK_REGEX,

From b4e1290761b7501e64a267842e2e727d6751872c Mon Sep 17 00:00:00 2001
From: Harshit-7373 <harshit.sansanwal2528@gmail.com>
Date: Tue, 11 Mar 2025 00:51:13 +0530
Subject: [PATCH 5/5] Delete shared/resolveUtils.js

---
 shared/resolveUtils.js | 33 ---------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 shared/resolveUtils.js

diff --git a/shared/resolveUtils.js b/shared/resolveUtils.js
deleted file mode 100644
index b8b07bb4d2..0000000000
--- a/shared/resolveUtils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Import necessary utilities for resolving file paths and checking media file patterns
-import { resolvePathToFile } from '../server/utils/filePath'; // Utility to resolve file paths
-import { MEDIA_FILE_REGEX } from '../server/utils/fileUtils'; // Regex pattern to identify media files
-
-// Shared function to resolve paths for elements with a specific attribute
-export default function resolvePathsForElementsWithAttribute(
-  attr,
-  sketchDoc,
-  files
-) {
-  // Find all elements in the document that have the specified attribute
-  const elements = sketchDoc.querySelectorAll(`[${attr}]`);
-
-  // Convert the NodeList to an array for easier iteration
-  const elementsArray = Array.prototype.slice.call(elements);
-
-  // Iterate over each element with the specified attribute
-  elementsArray.forEach((element) => {
-    // Get the value of the attribute
-    const attrValue = element.getAttribute(attr);
-
-    // Use RegExp.test() instead of match() !== null
-    if (MEDIA_FILE_REGEX.test(attrValue)) {
-      // Resolve the file path using the provided files mapping
-      const resolvedFile = resolvePathToFile(attrValue, files);
-
-      // If the file is resolved successfully and has a URL, update the attribute
-      if (resolvedFile && resolvedFile.url) {
-        element.setAttribute(attr, resolvedFile.url);
-      }
-    }
-  });
-}