@pocketprep/ui-kit 3.5.26 → 3.5.28

package/lib/components/Forms/Errors.vue

@@ -11,6 +11,13 @@
             class="uikit-errors__icon"
             type="warning"
         />
+        <div
+            v-if="errorHeader"
+            class="uikit-errors__error-header"
+            v-dark="isDarkMode"
+        >
+            {{ errorHeader }}
+        </div>
         <slot name="errors">
             <div
                 v-for="error in filteredErrors"
@@ -42,6 +49,7 @@ import { dark } from '../../directives'
 export default class Errors extends Vue {
     @Prop({ default: () => ([]) }) errors!: string[]
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop() errorHeader!: string
 
     get filteredErrors () {
         return [ ...new Set(this.errors) ]
@@ -92,7 +100,8 @@ export default class Errors extends Vue {
         }
     }
 
-    &__error {
+    &__error,
+    &__error-header {
         color: $brand-black;
         font-size: 14px;
         line-height: 19px;

package/lib/utils.ts

@@ -94,17 +94,66 @@ export const highlightKeywordsInText = (params: {
         return params.text
     }
 
-    const keywords = params.keywordDefinitions.map(k => k.keyword)
+    // Sort keywords by length (longest first) to handle overlapping keywords correctly
+    const sortedKeywords = [ ...params.keywordDefinitions ].map(k => k.keyword).sort((a, b) => b.length - a.length)
 
-    return keywords.reduce((acc, word) => {
-        const regex = new RegExp(`(\\W)(${escapeRegex(word)})(\\W)`, 'i')
-        return acc.replace(
-            regex, 
-            `$1<span class="keyword-highlight${params.isDarkMode 
-                ? ' keyword-highlight--dark' : ''}" data-location="${
-                params.location}" role="button" tabindex="0" aria-label="${
-                word}, Instruction. Click for definition" aria-haspopup="dialog" aria-expanded="false">
-                <span style="pointer-events: none;">$2</span></span>$3`
+    // Create an array for all matching keywords and substrings with their start and end indexes
+    const allMatches: { start: number; end: number; keyword: string; keywordMatch: string }[] = []
+    
+    sortedKeywords.forEach((keyword) => {
+        const escapedKeyword = escapeRegex(keyword)
+        const regex = new RegExp(`\\b${escapedKeyword}\\b`, 'gi')
+
+        // Use matchAll to get all keyword matches
+        // This will include keyword matches that are substrings of other keywords
+        // ie: keyword 'stakeholder' will match in a keyword string 'key stakeholder'
+        const matches = Array.from(params.text.matchAll(regex))
+        matches.forEach((match) => {
+            allMatches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                keyword,
+                keywordMatch: match[0],
+            })
+        })
+    })
+    
+    // Sort all matches by start index
+    allMatches.sort((a, b) => a.start - b.start)
+
+    // Create an array to track which indexes are already highlighted
+    const highlightedRanges: { start: number; end: number }[] = []
+
+    // Create an array to track non-overlapping keyword matches
+    const nonOverlappingMatches: { start: number; end: number; keyword: string; keywordMatch: string }[] = []
+    // Do not include any matches that are substrings of other matches
+    allMatches.forEach((match) => {
+        const overlaps = highlightedRanges.some(range => 
+            (match.start < range.end && match.end > range.start)
         )
-    }, params.text)
+        
+        if (!overlaps) {
+            nonOverlappingMatches.push(match)
+            highlightedRanges.push({ start: match.start, end: match.end })
+        }
+    })
+    
+    // Sort by start position again and process in reverse order to maintain positions
+    nonOverlappingMatches.sort((a, b) => b.start - a.start)
+
+    let result = params.text
+
+    nonOverlappingMatches.forEach((match) => {
+        const beforeMatch = result.substring(0, match.start)
+        const afterMatch = result.substring(match.end)
+        const highlightedMatch = `<span class="keyword-highlight${params.isDarkMode 
+            ? ' keyword-highlight--dark' : ''}" data-location="${
+            params.location}" role="button" tabindex="0" aria-label="${
+            match.keywordMatch}, Instruction. Click for definition" aria-haspopup="dialog" aria-expanded="false">
+                <span style="pointer-events: none;">${match.keywordMatch}</span></span>`
+        result = beforeMatch + highlightedMatch + afterMatch
+    })
+
+    return result
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.5.26",
+  "version": "3.5.28",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {