@playpilot/tpi 3.8.1 → 4.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "3.8.1",
+	"version": "4.0.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.ts

@@ -105,6 +105,8 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], pageTe
     sid: linkInjection.sid,
     title: linkInjection.title,
     sentence: linkInjection.sentence,
+    phrase_before: linkInjection.phrase_before,
+    phrase_after: linkInjection.phrase_after,
     playpilot_url: linkInjection.playpilot_url,
     after_article: !!linkInjection.after_article,
     after_article_style: linkInjection.after_article_style || null,

package/src/lib/linkInjection.ts

@@ -2,7 +2,8 @@ import { mount, unmount } from 'svelte'
 import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
-import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
+import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
+import { getLargestValueInArray } from './array'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
@@ -138,32 +139,67 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
       const linkNodeContainingText = findTextNodeContaining(injection.title, element)
       if (linkNodeContainingText && isNodeInLink(linkNodeContainingText)) {
         failedMessages[injection.key] = 'Given text is already inside of a link.'
+        continue
       }
-
-      continue
     }
 
-    // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
-    // so that it is not directly inside of the link.
-    const linkWrapperElement = document.createElement('span')
-    linkWrapperElement.dataset.playpilotInjectionKey = injection.key
+    const { injectionElement, linkElement } = createLinkInjectionElement(injection)
+
+    let replacementIndex = -1
+    let hasBeenReplaced = false
+
+    // !! Option 1 - Simple replacements
+    // Check if there is only one occurance in the element, in which case the replacement is simple
+    const numberOfMatches = findNumberOfMatchesInString(cleanPhrase(element.innerText), cleanPhrase(injection.title))
+    if (numberOfMatches === 1) replacementIndex = element.innerHTML.indexOf(injection.title)
+
+    // !! Option 2 - Replace by phrase_before and phrase_after
+    // If multiple or no occurances were found, we use phrase_before and phrase_after to refine the search
+    if (replacementIndex === -1 && (injection.phrase_before || injection.phrase_after)) {
+      console.log(injection.phrase_before)
+      // The before and after phrase are combined to see if the sentence contains the match exactly.
+      // This is a fairly simple comparison that will fail on special characters, html tags, or inconsistencies
+      const fullPhrase = [injection.phrase_before, injection.title, injection.phrase_after].filter(Boolean).join(' ')
+
+      replacementIndex = element.innerHTML.indexOf(fullPhrase)
+
+      // If we reach this point the match wasn't straight forward and we need to replace whatever is between phrase_before and phrase_after fully.
+      // We insert the html here separately from below, where it's done with replacementIndex because we need to capture all html
+      // that may have been inside of the match.
+      if (replacementIndex === -1) {
+        const match = findShortestMatchBetweenPhrases(element.innerHTML, injection.title, injection.phrase_before || '', injection.phrase_after || '')
+
+        if (match) {
+          const { leadingSpaces, trailingSpaces } = getNumberOfLeadingAndTrailingSpaces(match.match)
+
+          linkElement.innerHTML = match.match.trim()
+
+          const startIndex = match.index + leadingSpaces
+          const endIndex = match.index + match.match.length - trailingSpaces
+          element.innerHTML = replaceBetween(element.innerHTML, injectionElement.outerHTML, startIndex, endIndex)
 
-    const linkElement = document.createElement('a')
-    linkElement.innerText = injection.title
-    linkElement.href = injection.playpilot_url
-    linkElement.dataset.playpilotOriginalTitle = injection.title_details?.original_title
-    linkElement.target = '_blank'
-    linkElement.rel = 'noopener nofollow noreferrer'
+          replacementIndex = match.index
+          hasBeenReplaced = true
+        }
+      }
+    }
 
-    linkWrapperElement.insertAdjacentElement('beforeend', linkElement)
+    // !! Option 3 - Replace by title only, taking previous injections into account
+    // If no occurances were found previously, we check the element from start to finish only checking for the title,
+    // without considering phrase_before and phrase_after
+    if (replacementIndex === -1 && nodeContainingText?.nodeValue) {
+      // Start searching for injection from either the value or the sentence. This prevents injecting into
+      // text in an element earlier than the sentence started. A element might contain many sentences, after all.
+      const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
+      const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
 
-    // Start searching for injection from either the value or the sentence. This prevents injecting into
-    // text in an element earlier than the sentence started. A element might contain many sentences, after all.
-    const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
-    const sentenceIndex = element.innerHTML.indexOf(injection.sentence)
-    const highestIndex = Math.max(valueIndex, sentenceIndex, 0)
+      replacementIndex = Math.max(valueIndex, sentenceIndex, 0)
+    }
 
-    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, highestIndex)
+    if (replacementIndex === -1) continue
+    if (hasBeenReplaced) continue
+
+    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, injectionElement.outerHTML, replacementIndex)
   }
 
   addLinkInjectionEventListeners(validInjections)
@@ -194,6 +230,23 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   })
 }
 
+function createLinkInjectionElement(injection: LinkInjection): { injectionElement: HTMLSpanElement, linkElement: HTMLAnchorElement } {
+  // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
+  // so that it is not directly inside of the link.
+  const injectionElement = document.createElement('span')
+  injectionElement.dataset.playpilotInjectionKey = injection.key
+
+  const linkElement = document.createElement('a')
+  linkElement.innerText = injection.title
+  linkElement.href = injection.playpilot_url
+  linkElement.target = '_blank'
+  linkElement.rel = 'noopener nofollow noreferrer'
+
+  injectionElement.insertAdjacentElement('beforeend', linkElement)
+
+  return { injectionElement, linkElement }
+}
+
 /**
  * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
  * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
@@ -363,7 +416,7 @@ function clearAfterArticlePlaylinks(): void {
  */
 export function clearLinkInjections(): void {
   const elements = document.querySelectorAll(keySelector)
-  elements.forEach((element) => element.outerHTML = element.textContent || '')
+  elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
   destroyLinkModal(false)
@@ -376,7 +429,10 @@ export function clearLinkInjections(): void {
  */
 export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
-  if (element) element.outerHTML = element.textContent || ''
+  if (!element) return
+
+  const linkContent = element.querySelector('a')?.innerHTML
+  element.outerHTML = linkContent || ''
 }
 
 /**

package/src/lib/selection.ts

@@ -0,0 +1,31 @@
+/**
+ * Get the index of the selection. The returned index will be exclusing any leading or trailing spaces. We contain it to actual phrases.
+ */
+export function getIndexOfSelection(selection: Selection, node: Node | null = selection.anchorNode): { start: number, end: number } {
+  if (!selection.anchorNode || !node) return { start: -1, end: -1 }
+
+  const trimmedSelection = selection.toString().trim()
+  const preceedingSpaces = selection.toString().search(/\S/)
+
+  // If node is a text node we can simply use it's anchorOffset and focusOffset
+  if (selection.anchorNode === node && node.nodeType === Node.TEXT_NODE) {
+    const start = Math.min(selection.anchorOffset, selection.focusOffset) + preceedingSpaces
+
+    return { start, end: start + trimmedSelection.length }
+  }
+
+  // If node is an element (meaning the text alone was not enough for text, and we grabbed a parent with enough text content)
+  // Here we use the range to get the text before the selection and use it's length as the index.
+  const range = selection.getRangeAt(0)
+  const clonedRange = range.cloneRange()
+
+  clonedRange.selectNodeContents(node)
+  clonedRange.setEnd(range.startContainer, range.startOffset)
+
+  const fullTextBefore = clonedRange.toString()
+
+  const start = fullTextBefore.length + preceedingSpaces
+  const end = start + trimmedSelection.length
+
+  return { start, end }
+}

package/src/lib/text.ts

@@ -49,6 +49,10 @@ export function replaceStartingFrom(text: string, search: string, replacement: s
   return before + updatedAfter
 }
 
+export function replaceBetween(text: string, replacement: string, startIndex: number, endIndex: number): string {
+  return text.substring(0, startIndex) + replacement + text.substring(endIndex)
+}
+
 /**
  * Returns a string for most consistent string comparisons, decoding Html symbols and removing spaces.
  */
@@ -79,3 +83,98 @@ export function truncateAroundPhrase(sentence: string, phrase: string, maxLength
 
   return result
 }
+
+/**
+ * Find phrases surrounding in a parentNode's text content around a given start and end index.
+ * For instance in "Some example text", if the startIndex and endIndex match the start and end of "example",
+ * the phrases "Some" and "text" will be returned.
+ */
+export function findSurroundingPhrases(parentNode: Node, startIndex: number, endIndex: number): { before: string, after: string } {
+  const sentenceNode = parentNode.nodeType === Node.TEXT_NODE && parentNode.parentNode ? parentNode.parentElement : (parentNode as HTMLElement)
+  if (!sentenceNode || !parentNode.textContent) return { before: '', after: '' }
+
+  // Include the index of where the text is contained, as parentNode might start later within the sentenceNode
+  const parentNodeStartIndex = sentenceNode.innerText.indexOf(parentNode.textContent)
+
+  const stringBefore = reverseString(sentenceNode.innerText.slice(0, startIndex + parentNodeStartIndex))
+  const stringAfter = sentenceNode.innerText.slice(endIndex + parentNodeStartIndex)
+
+  const firstPhraseBefore = reverseString(getFirstNumberOfWordsInString(stringBefore, 2))
+  const firstPhraseAfter = getFirstNumberOfWordsInString(stringAfter, 2)
+
+  return { before: firstPhraseBefore, after: firstPhraseAfter }
+}
+
+export function reverseString(string: string): string {
+  return string.split('').reverse().join('')
+}
+
+/**
+ * Get the first x words in a string. Only returning full words, but can contain special characters like &, commas, period, etc.
+ */
+export function getFirstNumberOfWordsInString(sentence: string, numberOfWords = 1): string {
+  const match = sentence.match(/[^\s]+/g)
+  return match ? match.slice(0, numberOfWords).join(' ').replace(/[.,!?;:]+$/u, '') : ''
+}
+
+export function findNumberOfMatchesInString(text: string, phrase: string): number {
+  let count = 0
+  let index = 0
+
+  while ((index = text.indexOf(phrase, index)) !== -1) {
+    count++
+    index += phrase.length
+  }
+
+  return count
+}
+
+/**
+ * Finds all matches between two phrases. For example "A sentence with a start and end phrase". Is "start" and "end" are given
+ * as the `start` and `end` properties, this will match on ` and `. This does not currently account for multiple occurences
+ * of the end phrase. For example "A sentence with a start and end phrase and another end" will only return 1 value, despite
+ * there being 2 end phrases with content between. While that might make sense, we don't currently need that as we always
+ * filter by the shortest length anyway.
+ */
+export function findAllMatchesBetweenPhrases(text: string, start: string, end: string): { match: string, index: number }[] {
+  const matches: { match: string; index: number }[] = []
+
+  let currentIndex = 0
+  while (currentIndex <= text.length) {
+    const startIndex = start ? text.indexOf(start, currentIndex) : currentIndex
+
+    if (startIndex === -1 && start) break
+
+    const matchStart = start ? startIndex + start.length : startIndex
+    const endIndex = end ? text.indexOf(end, matchStart) : text.length
+
+    if (end && endIndex === -1) break
+
+    const match = text.slice(matchStart, endIndex)
+    matches.push({ match, index: matchStart })
+
+    currentIndex = end ? endIndex + end.length : text.length + 1
+  }
+
+  return matches
+}
+
+export function findShortestMatchBetweenPhrases(text: string, phrase: string, start: string, end: string): { match: string, index: number } | null {
+  const matches = findAllMatchesBetweenPhrases(text, start, end)
+  const matchesContainingPhrase = matches.filter(({ match }) => decodeHtmlEntities(match).includes(phrase))
+
+  if (!matchesContainingPhrase.length) return null
+
+  const shortestMatch = matchesContainingPhrase.reduce((shortest, current) =>
+    !shortest || current.match.length < shortest.match.length ? current : shortest,
+  )
+
+  return shortestMatch
+}
+
+export function getNumberOfLeadingAndTrailingSpaces(text: string): { leadingSpaces: number, trailingSpaces: number } {
+  return {
+    leadingSpaces: text.match(/^\s*/)?.[0].length || 0,
+    trailingSpaces: text.match(/\s*$/)?.[0].length || 0
+  }
+}

package/src/lib/types/injection.d.ts

@@ -7,6 +7,8 @@ export type LinkInjection = {
   playpilot_url: string
   key: string
   title_details?: TitleData
+  phrase_before?: string | null
+  phrase_after?: string | null
   inactive?: boolean
   failed?: boolean
   failed_message?: string

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -11,7 +11,8 @@
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
-  import { cleanPhrase } from '$lib/text'
+  import { findSurroundingPhrases, cleanPhrase } from '$lib/text'
+  import { getIndexOfSelection } from '$lib/selection'
 
   interface Props {
     pageText: string
@@ -25,6 +26,8 @@
   let currentSelection = $state('')
   let selectionSentence = $state('')
   let selectedTitle: TitleData | null = $state(null)
+  let phraseAfter = $state('')
+  let phraseBefore = $state('')
   let error = $state('')
   let query = $state('')
 
@@ -49,13 +52,27 @@
     // Check if the selection contains more than 1 element with non-empty content.
     const fragment = selection.getRangeAt(0).cloneContents()
     const selectionNodesWithContent = Array.from(fragment.childNodes).filter(n => n.textContent?.trim())
-    if (selectionNodesWithContent.length > 1) {
-      error = 'Selection contains multiple items. Selection may not contain a mix of styled and non styled text. Please select the text more directly.'
+
+    if (selectionNodesWithContent.find(node => node.nodeName === 'A' || (node as HTMLElement).querySelector?.('a'))) {
+      error = 'Selection is or contains a link. Injections can not be created around already existing links.'
       return
     }
 
     query = currentSelection
-    selectionSentence = findSentenceForSelection(selection, selectionText)
+
+    const { node: parentNode, sentence } = findSentenceForSelection(selection, selectionText)
+    if (!parentNode) return
+
+    selectionSentence = sentence
+
+    const { start, end } = getIndexOfSelection(selection, parentNode)
+
+    ;({ before: phraseBefore, after: phraseAfter } = findSurroundingPhrases(parentNode, start, end))
+
+    // Remove phrases if they were outside of the sentence. This can happen when a node contains more than
+    // one sentence and match was found before or after the sentence the selection was in.
+    if (!sentence.includes(phraseBefore)) phraseBefore = ''
+    if (!sentence.includes(phraseAfter)) phraseAfter = ''
 
     const nodeContent = selection.getRangeAt(0).commonAncestorContainer.textContent
     const documentTextContent = cleanPhrase(pageText)
@@ -67,7 +84,7 @@
   /**
    * Find the sentence that the given selected phrase is in. This is limited by the node that the text is in.
    */
-  function findSentenceForSelection(selection: Selection, selectionText: string): string {
+  function findSentenceForSelection(selection: Selection, selectionText: string): { node: Node | null, sentence: string } {
     const range = selection.getRangeAt(0)
 
     // Get the node the text is in. If the content of the node is very short we use the parent node instead.
@@ -78,7 +95,7 @@
       node = node.parentNode
     }
 
-    if (!node || !node.textContent) return ''
+    if (!node || !node.textContent) return { node: null, sentence: '' }
 
     const fullText = node.textContent
 
@@ -92,8 +109,9 @@
 
     const sentenceStart = before === -1 ? 0 : before + 1
     const sentenceEnd = after
+    const sentence = fullText.slice(sentenceStart, sentenceEnd + 1).trim()
 
-    return fullText.slice(sentenceStart, sentenceEnd + 1).trim()
+    return { node, sentence }
   }
 
   /**
@@ -144,6 +162,8 @@
       sid: selectedTitle.sid,
       title: currentSelection,
       sentence: selectionSentence,
+      phrase_before: phraseBefore,
+      phrase_after: phraseAfter,
       playpilot_url: url,
       key: generateInjectionKey(selectedTitle.sid),
       title_details: selectedTitle,

package/src/routes/components/Editorial/TextInput.svelte

@@ -10,7 +10,7 @@
   let { value = $bindable(), label = '', name = '', readonly = false, oninput = () => null }: Props = $props()
 </script>
 
-<input type="text" bind:value {name} aria-label={label} placeholder={label} {readonly} {oninput} />
+<input type="text" bind:value {name} aria-label={label} placeholder={label} {readonly} {oninput} autocomplete="off" />
 
 <style lang="scss">
   input {

package/src/routes/components/Title.svelte

@@ -21,7 +21,7 @@
   let useBackgroundFallback = $state(false)
 </script>
 
-<div class="content" class:small class:compact data-playpilot-link-injections-title data-playpilot-original-title={title.original_title}>
+<div class="content" class:small class:compact data-playpilot-link-injections-title>
   <div class="header">
     {#if !compact}
       <div class="top">

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

@@ -71,13 +71,9 @@ describe('linkInjection.js', () => {
 
       expect(links[0].innerText).toBe(linkInjections[0].title)
       expect(links[0].href).toBe(linkInjections[0].playpilot_url)
-      /** @ts-ignore It is defined */
-      expect(links[0].dataset.playpilotOriginalTitle).toBe(linkInjections[0].title_details.original_title)
 
       expect(links[1].innerText).toBe(linkInjections[1].title)
       expect(links[1].href).toBe(linkInjections[1].playpilot_url)
-      /** @ts-ignore It is defined */
-      expect(links[1].dataset.playpilotOriginalTitle).toBe(linkInjections[1].title_details.original_title)
     })
 
     it('Should ignore injections that are marked as inactive', () => {
@@ -618,11 +614,61 @@ describe('linkInjection.js', () => {
 
       expect(document.querySelectorAll('a')).toHaveLength(4)
     })
+
+    it('Should properly inject into titles that are split up by multiple elements when phrase_before and phrase_after are given', () => {
+      document.body.innerHTML = '<section>Some text with a <strong>phra</strong><strong>se</strong> in it</section>'
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injection = generateInjection('Some text with a phrase in it', 'phrase')
+      injection.phrase_before = 'with a'
+      injection.phrase_after = 'in it'
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: [injection] })
+
+      expect(document.querySelector('a')?.innerText).toBe(injection.title)
+    })
+
+    it('Should properly inject into titles that are split up by multiple elements when only phrase_before is given', () => {
+      document.body.innerHTML = '<section>Some text with a <strong>phra</strong><strong>se</strong></section>'
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injection = generateInjection('Some text with a phrase', 'phrase')
+      injection.phrase_before = 'with a'
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: [injection] })
+
+      expect(document.querySelector('a')?.innerText).toBe(injection.title)
+    })
+
+    it('Should properly inject into titles that are split up by multiple elements when only phrase_after is given', () => {
+      document.body.innerHTML = '<section><strong>phra</strong><strong>se</strong> in it</section>'
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injection = generateInjection('phrase in it', 'phrase')
+      injection.phrase_after = 'in it'
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: [injection] })
+
+      expect(document.querySelector('a')?.innerText).toBe(injection.title)
+    })
+
+    it('Should properly inject into titles if phrase_before or phrase_after are nonsense, but title can be matched simply', () => {
+      document.body.innerHTML = '<section>Some text with a phrase in it</section>'
+
+      const elements = getLinkInjectionElements(/** @type {HTMLElement} */ (document.querySelector('section')))
+      const injection = generateInjection('Some text with a phrase in it', 'phrase')
+      injection.phrase_before = 'random'
+      injection.phrase_after = 'crap'
+
+      injectLinksInDocument(elements, { aiInjections: [], manualInjections: [injection] })
+
+      expect(document.querySelector('a')?.innerText).toBe(injection.title)
+    })
   })
 
   describe('clearLinkInjections', () => {
     it('Should remove injected links from the page', () => {
-      document.body.innerHTML = '<p><a data-playpilot-injection-key>Some link</a></p>'
+      document.body.innerHTML = '<p><span data-playpilot-injection-key><a>Some link</a></span></p>'
       clearLinkInjections()
 
       expect(document.body.innerHTML).toBe('<p>Some link</p>')
@@ -638,17 +684,17 @@ describe('linkInjection.js', () => {
 
   describe('clearLinkInjection', () => {
     it('Should remove injected link from the page', () => {
-      document.body.innerHTML = '<p><a data-playpilot-injection-key="a">Some link</a></p>'
+      document.body.innerHTML = '<p><span data-playpilot-injection-key="a"><a>Some link</a></span></p>'
       clearLinkInjection('a')
 
       expect(document.body.innerHTML).toBe('<p>Some link</p>')
     })
 
     it('Should keep other keys intact', () => {
-      document.body.innerHTML = '<p><a data-playpilot-injection-key="b">Some link</a></p>'
+      document.body.innerHTML = '<p><span data-playpilot-injection-key="b"><a>Some link</a></span></p>'
       clearLinkInjection('a')
 
-      expect(document.body.innerHTML).toBe('<p><a data-playpilot-injection-key="b">Some link</a></p>')
+      expect(document.body.innerHTML).toBe('<p><span data-playpilot-injection-key="b"><a>Some link</a></span></p>')
     })
   })