@playpilot/tpi 5.20.0 → 5.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.20.0",
+	"version": "5.20.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/injection.ts

@@ -1,7 +1,7 @@
 import { mount, unmount } from 'svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
-import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
+import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getIndexOfPhraseInBoundary, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
@@ -122,7 +122,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   removePlayPilotTitleLinks()
 
   const mergedInjections = mergeInjectionTypes(injections)
-  if (!mergedInjections) return []
+  if (!mergedInjections.length) return []
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
   // This is to filter out injections that can't be injected anyway.
@@ -216,6 +216,13 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       // But it's something to fall back on regardless.
       const startOfSentenceIndex = sentenceIndex === -1 ? element.innerHTML.indexOf(injection.sentence.slice(0, 20)) : -1
 
+      // Similar to the start of the sentence, we look first just the first word of the sentence. This is only relevant if the start
+      // of the sentence is broken up by HTML is less characters than is required for startOfSentenceIndex.
+      // This only works if the first word occurs only once, as otherwise we might match on the incorrect part of the sentence.
+      const firstWordOfSentence = injection.sentence.split(' ')[0]
+      const firstWordOccurrences = findNumberOfMatchesInString(element.innerHTML, firstWordOfSentence)
+      const firstWordIndex = firstWordOccurrences === 1 ? element.innerHTML.indexOf(firstWordOfSentence) : -1
+
       // Starting from occurence happens when a sentence might include multiple occurences of the same phrase.
       // We might still prefer the valueIndex if that is higher than this value.
 
@@ -224,14 +231,26 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       const indexOfOccurrence = getNumberOfOccurrencesInArray<LinkInjection>(foundInjections.slice(0, injectionIndex + 1), injection, ['title', 'sentence']) - 1
       const indexInSentence = getIndexOfPhraseInElement(nodeContainingText.nodeValue, element, indexOfOccurrence)
 
-      replacementIndex = Math.max(valueIndex, startOfSentenceIndex, indexInSentence, sentenceIndex, 0)
+      replacementIndex = Math.max(valueIndex, startOfSentenceIndex, indexInSentence, firstWordIndex, sentenceIndex, 0)
     }
 
     if (replacementIndex === -1) continue
     if (hasBeenReplaced) continue
 
     if (!replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, replacementIndex)) {
-      failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
+      // If all else fails, we try one more time with a word boundary. If it has gotten to this point it likely means an
+      // injection tried to match into another that match partially. For example in the sentence:
+      // "Some Movie: The Sequel is a follow up to Some Movie", there are two matches for "Some Movie". But because the first
+      // match contains the second, the second will also try to inject itself into the first. In this case we try and find it
+      // again using a word boundary. This will fail in cases such as "Some Movie 2 is a follow up to Some Movie" because
+      // the word boundary still the first one.
+      const wordBoundaryMatchIndex = getIndexOfPhraseInBoundary(injection.title, element.innerHTML)
+
+      if (wordBoundaryMatchIndex > -1) {
+        replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, wordBoundaryMatchIndex)
+      } else {
+        failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
+      }
     }
   }
 

package/src/lib/text.ts

@@ -263,3 +263,25 @@ export function getRangesOfTextNodesInElement(element: Element): Range[] {
 
   return ranges
 }
+
+/**
+ * Attempt to find a phrase inside a word boundary, only matching phrases between given characters.
+ */
+export function getIndexOfPhraseInBoundary(phrase: string, text: string): number {
+  const boundaryCharacters = [' ', '.', ',', '<', '>']
+
+  try {
+    // This is a bit complicated looking, but this creates a regex for the given phrase
+    // between the word boundaries. ".phrase." " phrase.", ">phrase<", etc.
+    // In some cases the phrase might contain special characters, these are escaped first
+    // to make sure they don't interfere with the regex, or create totally invalid results.
+    const map = boundaryCharacters.map(c => '\\' + c).join('')
+    const escapedPhrase = phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const pattern = new RegExp(`([${map}])${escapedPhrase}([${map}])`)
+    const match = text.match(pattern)
+
+    return match?.index ? match.index + 1 : -1
+  } catch {
+    return -1
+  }
+}

package/src/tests/lib/injections.test.js

@@ -568,6 +568,37 @@ describe('linkInjection.js', () => {
       expect(links).toHaveLength(3)
     })
 
+    it('Should inject link properly when sentence already contains match of the same phrase but the sentence is broken up by HTML very early in the sentence.', () => {
+      document.body.innerHTML = '<p>A <em><a>phrase</a></em> within a sentence. Another <strong>sentence</strong> with a <em>phrase</em> in it.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const linkInjections = [generateInjection('Another sentence with a phrase in it.', 'phrase')]
+
+      injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })
+
+      const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
+
+      expect(links).toHaveLength(2)
+    })
+
+    it('Should inject link properly when sentence already contains partial match of the same phrase when the sentence is broken up by html.', () => {
+      document.body.innerHTML = '<p>Some sentence with a phrase: something, and another phrase.</p>'
+
+      const elements = Array.from(document.querySelectorAll('p'))
+
+      const linkInjections = [
+        generateInjection('Some sentence with a phrase: something, and another phrase.', 'phrase: something'),
+        generateInjection('Some sentence with a phrase: something, and another phrase.', 'phrase'),
+      ]
+
+      injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })
+
+      const links = /** @type {HTMLAnchorElement[]} */ (Array.from(document.querySelectorAll('a')))
+
+      expect(links).toHaveLength(2)
+    })
+
     it('Should not inject links into element attributes', () => {
       document.body.innerHTML = '<p><span data-thing="phrase">Some</span> phrase</p>'
 

package/src/tests/lib/text.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { cleanPhrase, findAllMatchesBetweenPhrases, findShortestMatchBetweenPhrases, findSurroundingPhrases, findTextNodeContaining, getFirstNumberOfWordsInString, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, getRangesOfTextNodesInElement, isNodeInLink, replaceStartingFrom, reverseString, truncateAroundPhrase } from '$lib/text'
+import { cleanPhrase, findAllMatchesBetweenPhrases, findShortestMatchBetweenPhrases, findSurroundingPhrases, findTextNodeContaining, getFirstNumberOfWordsInString, getIndexOfPhraseInBoundary, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, getRangesOfTextNodesInElement, isNodeInLink, replaceStartingFrom, reverseString, truncateAroundPhrase } from '$lib/text'
 
 describe('text.js', () => {
   beforeEach(() => {
@@ -428,4 +428,24 @@ describe('text.js', () => {
       expect(ranges).toEqual([])
     })
   })
+
+  describe('getIndexOfPhraseInBoundary', () => {
+    const text = 'This is a sentence. <phrase> Another phrase.'
+
+    it('Should find a phrase surrounded by spaces', () => {
+      expect(getIndexOfPhraseInBoundary('is', text)).toBe(5)
+    })
+
+    it('Should find a phrase surrounded by brackets', () => {
+      expect(getIndexOfPhraseInBoundary('phrase', text)).toBe(21)
+    })
+
+    it('Should return -1 if phrase is not found', () => {
+      expect(getIndexOfPhraseInBoundary('nothing', text)).toBe(-1)
+    })
+
+    it('Should return the first match', () => {
+      expect(getIndexOfPhraseInBoundary('phrase', ' .phrase. <phrase> phrase ')).toBe(2)
+    })
+  })
 })