Fix prompt rendering highlight regex (#1997)

Fix #1942 and #1937 

<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Fixes regex in `RenderPromptPart` to correctly handle overlapping text
chunks, addressing issues #1942 and #1937.
> 
>   - **Behavior**:
> - Fixes regex in `RenderPromptPart` in `render-text.tsx` to handle
overlapping text chunks correctly.
> - Stores matches and applies replacements in reverse order to maintain
correct indices.
>   - **Misc**:
>     - Addresses issues #1942 and #1937.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 82692a1. You can
[customize](https://app.ellipsis.dev/BoundaryML/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

Author: antoniosarosi

typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-text.tsx

@@ -49,15 +49,43 @@ export const RenderPromptPart: React.FC<{
 
     try {
       let result = text
+      // Store all matches and their replacements. We want to avoid replacing
+      // already replaced chunks. The regex below could match parts of the <mark>
+      // tag that we use to highlight the text, so we need to apply replacements
+      // once we know all their locations.
+      const replacements: { start: number; end: number; replacement: string }[] = []
+
       highlightChunks.forEach((chunk) => {
         if (!chunk) return
         if (chunk.length > 30000) return
         const regex = new RegExp(`(${chunk.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'g')
-        result = result.replace(
-          regex,
-          '<mark class="bg-yellow-100/70 text-yellow-900 dark:bg-yellow-800/30 dark:text-yellow-100 rounded-sm px-0.5">$1</mark>',
-        )
+        let match
+        while ((match = regex.exec(text)) !== null) {
+          const start = match.index
+          const end = start + match[0].length
+          // Check if this range overlaps with any existing replacement
+          const hasOverlap = replacements.some(
+            (r) => (start >= r.start && start < r.end) || (end > r.start && end <= r.end),
+          )
+
+          if (!hasOverlap) {
+            replacements.push({
+              start,
+              end,
+              replacement: `<mark class="bg-yellow-100/70 text-yellow-900 dark:bg-yellow-800/30 dark:text-yellow-100 rounded-sm px-0.5">${match[0]}</mark>`,
+            })
+          }
+        }
       })
+
+      // Sort replacements in reverse order to maintain correct indices
+      replacements.sort((a, b) => b.start - a.start)
+
+      // Apply all replacements
+      for (const { start, end, replacement } of replacements) {
+        result = result.slice(0, start) + replacement + result.slice(end)
+      }
+
       return result
     } catch (e) {
       console.error('Error highlighting text', e)