npm - @playpilot/tpi - Versions diffs - 3.7.2 → 3.8.0 - Mend

@playpilot/tpi 3.7.2 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +32 -38
package/dist/link-injections.js +9 -9
package/index.html +1 -1
package/package.json +1 -1
package/src/lib/linkInjection.ts +34 -28
package/src/lib/session.ts +7 -7
package/src/lib/types/config.d.ts +25 -0
package/src/lib/types/global.d.ts +6 -9
package/src/lib/types/script.d.ts +10 -0
package/src/{main.js → main.ts} +3 -5
package/src/routes/+layout.svelte +99 -47
package/src/routes/+page.svelte +11 -7
package/src/routes/components/Editorial/Editor.svelte +1 -4
package/src/routes/components/Editorial/ManualInjection.svelte +3 -3
package/src/routes/components/Modal.svelte +0 -3
package/src/routes/components/Popover.svelte +0 -3
package/src/tests/lib/linkInjection.test.js +70 -3
package/src/tests/routes/+page.test.js +2 -12
package/static/favicon.png +0 -0

package/index.html CHANGED Viewed

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/package.json CHANGED Viewed

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

package/src/lib/linkInjection.ts CHANGED Viewed

@@ -3,8 +3,7 @@ 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 { getLargestValueInArray } from './array'
-import type { LinkInjection, LinkInjectionTypes, LinkInjectionRanges } from './types/injection'
+import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
@@ -19,9 +18,11 @@ let activeModalInsertedComponent: object | null = null
 /**
  * Return a list of all valid text containing elements that may get injected into.
  * This excludes duplicates, empty elements, links, buttons, and header tags.
- * @returns A list of all HTMLElements that contain text, without repeating the same text in
+ *
+ * Elements can additionally be excluded via the excludeElementsSelector attribute.
+ * This will exclude any element that matches or is in that selector.
  */
-export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElement[] {
+export function getLinkInjectionElements(parentElement: HTMLElement, excludeElementsSelector: string = ''): HTMLElement[] {
   const validElements: HTMLElement[] = []
   const remainingChildren = [parentElement]
@@ -29,11 +30,19 @@ export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElemen
     const element = remainingChildren.pop() as HTMLElement
     if (validElements.includes(element)) continue
+    if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
     // Ignore links, buttons, and headers
     if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|H1)$/.test(element.tagName)) continue
-    // Check if this element has a direct text node
+    // Ignore elements that are visibly hidden as they are likely only for screen readers.
+    // These elements can be hidden via display: none or via a tiny width or perhaps even a clip path.
+    // Checking by their offsetWidth seems like the surest way to ignore these elements.
+    // We continue regardless of whether this is true or not, as we'd otherwise loop through children
+    // which are also hidden because of their parent.
+    // We always do it when running tests, as offsetWidth can't be reliably tested.
+    if (process.env.NODE_ENV !== 'test' && element.offsetWidth <= 1) continue
     const hasTextNode = Array.from(element.childNodes).some(
       node => node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim() !== '',
     )
@@ -53,13 +62,18 @@ export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElemen
       continue
     }
+    // Some wysiwyg editors wrap contents of a paragraph in `span` elements when they contain styling.
+    // This leads to broken up sentences which don't match correctly against the given sentence.
+    // `<p><span>Some text</span><span> <strong>with broken up</strong></span><span>elements</span></p>`
+    const isParagraphWithText = element.tagName === 'P' && !!element.textContent
     // If this element has a text node we add it to the valid elements and stop there
-    // Otherwise we add all children to be checked in this same loop.
-    if (hasTextNode) {
+    if (hasTextNode || isParagraphWithText) {
       validElements.push(element)
       continue
     }
+    // Add all children of the current element to be checked in this same loop.
     const children = Array.from(element.children) as HTMLElement[]
     for (let i = children.length - 1; i >= 0; i--) {
       remainingChildren.push(children[i] as HTMLElement)
@@ -107,7 +121,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     return fullText.includes(cleanPhrase(i.sentence))
   })
-  const ranges: LinkInjectionRanges = {}
   const failedMessages: Record<string, string> = {}
   for (const injection of foundInjections) {
@@ -144,25 +157,13 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     linkWrapperElement.insertAdjacentElement('beforeend', linkElement)
-    // Replace starting from the end of the previously injected link, making sure injections with the same or overlapping
-    // phrases can still be injected. Additionally we check the index of where the node value starts. This can differentiate from
-    // the actual start if it was partially matched with manual injections. If that martial match contains a phrase that also
-    // occurs in the full sentence before it, it would incorrectly match against that. If that happens to be a link already,
-    // it would break that link with newly inserted HTML.
-    const startingIndex = getLargestValueInArray(Object.values(ranges).filter(r => r.elementIndex === elementIndex).map(r => r.to))
+    // 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(startingIndex, valueIndex, sentenceIndex, 0)
+    const highestIndex = Math.max(valueIndex, sentenceIndex, 0)
     element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, highestIndex)
-    const from = element.innerHTML.indexOf(linkWrapperElement.outerHTML)
-    ranges[injection.key] = {
-      elementIndex,
-      from,
-      to: from + linkWrapperElement.outerHTML.length,
-    }
   }
   addLinkInjectionEventListeners(validInjections)
@@ -177,10 +178,11 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
     const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.after_article && !matchingElement
+    const containsSentence = !!elements.find(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
     const failedMessage =
       !failed ? '' :
         failedMessages[injection.key] ||
-        (!fullText.includes(cleanPhrase(injection.sentence)) ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
+        (!containsSentence ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
     return {
       ...injection,
@@ -265,8 +267,9 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     if (!injection) return
-    // @ts-ignore
-    injectionElement.addEventListener('mouseenter', (event) => openLinkPopover(event, injection))
+    injectionElement.addEventListener('mouseenter', (event) => {
+      if (!activePopoverInsertedComponent) openLinkPopover(event, injection)
+    })
     injectionElement.addEventListener('mouseleave', () => currentlyHoveredInjection = null)
   })
 }
@@ -281,7 +284,7 @@ function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
   event.preventDefault()
-  activeModalInsertedComponent = mount(TitleModal, { target: document.body, props: { title: injection.title_details!, onclose: destroyLinkModal } })
+  activeModalInsertedComponent = mount(TitleModal, { target: getPlayPilotWrapperElement(), props: { title: injection.title_details!, onclose: destroyLinkModal } })
 }
 /**
@@ -311,7 +314,7 @@ function openLinkPopover(event: MouseEvent, injection: LinkInjection): void {
   setTimeout(() => {
     if (currentlyHoveredInjection !== target) return // User is no longer hovering this link
-    activePopoverInsertedComponent = mount(TitlePopover, { target: document.body, props: { event, title: injection.title_details! } })
+    activePopoverInsertedComponent = mount(TitlePopover, { target: getPlayPilotWrapperElement(), props: { event, title: injection.title_details! } })
   }, 100)
 }
@@ -451,3 +454,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
+function getPlayPilotWrapperElement(): Element {
+  return document.querySelector('[data-playpilot-link-injections]') || document.body
+}

package/src/lib/session.ts CHANGED Viewed

@@ -11,10 +11,10 @@ export const sessionPeriodMilliseconds = sessionPollPeriodMilliseconds * 2
  * where we save the session.
  * Along with that, we also return automation_enabled and injections_enabled as they are used to update the state of
  * the current editing session.
- * @param html Despite not being used, the request still requires a valid html string
+ * @param pageText Despite not being used, the request still requires a valid pageText string
  */
-export async function fetchAsSession(html: string): Promise<SessionResponse> {
-  const { automation_enabled, injections_enabled, session_id, session_last_ping } = await fetchLinkInjections(html)
+export async function fetchAsSession(pageText: string): Promise<SessionResponse> {
+  const { automation_enabled, injections_enabled, session_id, session_last_ping } = await fetchLinkInjections(pageText)
   const isCurrentlyAllowToEdit = isAllowedToEdit(session_id || null, session_last_ping || null)
@@ -27,15 +27,15 @@ export async function fetchAsSession(html: string): Promise<SessionResponse> {
   if (!isCurrentlyAllowToEdit) return response
-  return await saveCurrentSession(html)
+  return await saveCurrentSession(pageText)
 }
 /**
  * Save the current users session id as the currently active session. This is always completed regardless of if the user
  * is the current owner of the session, so check that first if necessary!
- * @param html Despite not being used, the request still requires a valid html string
+ * @param pageText Despite not being used, the request still requires a valid pageText string
  */
-export async function saveCurrentSession(html: string): Promise<SessionResponse> {
+export async function saveCurrentSession(pageText: string): Promise<SessionResponse> {
   const sessionId = getSessionId()
   const now = new Date(Date.now()).toISOString()
@@ -44,7 +44,7 @@ export async function saveCurrentSession(html: string): Promise<SessionResponse>
     session_last_ping: now.toString(),
   }
-  const { automation_enabled, injections_enabled } = await fetchLinkInjections(html, { params })
+  const { automation_enabled, injections_enabled } = await fetchLinkInjections(pageText, { params })
   return {
     automation_enabled,

package/src/lib/types/config.d.ts CHANGED Viewed

@@ -1,5 +1,30 @@
 export type ConfigResponse = {
+  /**
+   * Used to exclude URL matching a regex pattern. If a url matches, nothing is executed beyond fetching the config.
+   * The url should never be indexed.
+   */
   exclude_urls_pattern?: string
+  /**
+   * Used to inject custom styling for the links, modal, and popover. All styling is done via CSS variables. The passed
+   * string should not contain a selector.
+   * For example:
+   * `--some-variable: some-value;`
+   *
+   * rather than:
+   * `body { --some-variable: some-value; }`
+   */
   custom_style?: string
+  /**
+   * The primary selector for the entire article from which text will be selected. Should contain as little content as
+   * possible. Should match all pages. May contain multiple selectors like `.article, .listicle`.
+   */
   html_selector?: string
+  /**
+   * Some pages contain elements that can't easily be excluded via the `html_selector`. These elements can instead be
+   * excluded via this property. May contain multiple selectors like `.footer, .ad`.
+   */
+  exclude_elements_selector?: string
 }

package/src/lib/types/global.d.ts CHANGED Viewed

@@ -1,14 +1,11 @@
+import type { ScriptConfig } from "./script"
 declare global {
   interface Window {
-    PlayPilotLinkInjections: {
-      token: string
-      editorial_token: string
-      selector: string
-      after_article_selector: string
-      after_article_insert_position: InsertPosition | ''
-      language: string | null
-      organization_sid: string | null
-      domain_sid: string | null
+    PlayPilotLinkInjections: ScriptConfig & {
+      app: any | null
+      initialize(config: ScriptConfig): void
+      destroy(): void
     }
   }
 }

package/src/lib/types/script.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export type ScriptConfig = {
+  token: string
+  editorial_token?: string
+  organization_sid?: string | null,
+  domain_sid?: string | null,
+  selector?: string
+  after_article_selector?: string
+  after_article_insert_position?: InsertPosition | ''
+  language?: string | null
+}

package/src/{main.js → main.ts} RENAMED Viewed

@@ -1,5 +1,3 @@
-// @ts-nocheck
 import { mount } from 'svelte'
 import App from './routes/+page.svelte'
 import { clearLinkInjections } from '$lib/linkInjection'
@@ -15,7 +13,7 @@ window.PlayPilotLinkInjections = {
   domain_sid: null,
   app: null,
-  initialize(config = { token: '', selector: '', after_article_selector: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }) {
+  initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
     if (!config.token) {
       console.error('An API token is required.')
       return
@@ -25,7 +23,7 @@ window.PlayPilotLinkInjections = {
     this.editorial_token = config.editorial_token
     this.selector = config.selector
     this.after_article_selector = config.after_article_selector
-    this.after_article_insert_position = config.after_article_insert_position
+    this.after_article_insert_position = config.after_article_insert_position as InsertPosition
     this.language = config.language
     this.organization_sid = config.organization_sid
     this.domain_sid = config.domain_sid
@@ -40,7 +38,7 @@ window.PlayPilotLinkInjections = {
     this.app = mount(App, { target })
   },
-  destroy() {
+  destroy(): void {
     if (!this.app) return
     this.app = null

package/src/routes/+layout.svelte CHANGED Viewed

@@ -1,75 +1,127 @@
 <script lang="ts">
   import { browser } from '$app/environment'
+  import { page } from '$app/state'
   /**
-   * This layout file is for development purposes only and will not be compiled with the final script.
+   * !! NOTE: This layout file is for development purposes only and will not be compiled with the final script.
    */
   const { children } = $props()
-  // This is used to remove the scoped classes in Svelte in order to prevent articles
-  // from having to be re-generated between different HMR builds.
-  // This is purely for development.
-  const noClass = (node: HTMLElement) => {
-    node.classList.forEach(e => {if (e.startsWith('s-')) node.classList.remove(e)})
-  }
   // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
   // @ts-ignore
   if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
 </script>
+<title>PlayPilot Link Injections</title>
 <meta property="article:modified_time" content="2025-05-16T20:00:00+00:00" />
-<div>
-  {#key Math.random()}
-    <article use:noClass>
-      <h1 use:noClass>Some heading</h1>
-      <time datetime="14:00">1 hour ago</time>
-      <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
-      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him Love Hurts in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
-      <h2 use:noClass>A smaller heading with an injection in it</h2>
-      <p use:noClass><strong use:noClass>Jason Momoa</strong> (”Aquaman”), <strong use:noClass>Jack Black</strong> (”Nacho Libre”) och <strong use:noClass>Jennifer Coolidge</strong> (”The White Lotus”) medverkar i den <strong use:noClass>Jared Hess</strong>-regisserade (”Napolen Dynamite”) filmen. Filmen följer fyra utbölingar som via en magisk portal sugs in i en värld där allt är kubformat. För att komma hem igen måste de övervinna den färgstarka världen.</p>
-      <p use:noClass>
-        Following their post-credits scene in <a use:noClass href="/">John Wick</a>, in a new John Wick spinoff.
-      </p>
-      <ul use:noClass>
-        <li use:noClass><strong use:noClass>Winner:</strong> The Zone of Interest</li>
-        <li use:noClass>Oppenheimer and Oppenheimer and Oppenheimer, and Oppenheimer</li>
-        <li use:noClass>Past Lives</li>
-        <li use:noClass>Anatomy of a Fall</li>
-        <li use:noClass>Killers of the Flower Moon</li>
-      </ul>
-    </article>
-    {#if browser}
-      {@render children()}
-    {/if}
-  {/key}
+<div class="main">
+  {#if page.error}
+    <div class="error">
+      <h3>Error {page.status}: {page.error.message}</h3>
+      {#if page.status === 404}
+        <p>You probably meant to stay on the root. There are no other pages.</p>
+        <a href="/">Go home</a>
+      {/if}
+    </div>
+  {:else}
+    {#key Math.random()}
+      <article>
+        <header>
+          <h1>The main title for this article</h1>
+          <time datetime="14:00">1 hour ago</time>
+        </header>
+        <p>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
+        <h2>A smaller heading, possibly with an injection in it</h2>
+        <p>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him Love Hurts in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+        <h2>Different languages</h2>
+        <p><strong>Jason Momoa</strong> (”Aquaman”), <strong>Jack Black</strong> (”Nacho Libre”) och <strong>Jennifer Coolidge</strong> (”The White Lotus”) medverkar i den <strong>Jared Hess</strong>-regisserade (”Napolen Dynamite”) filmen. Filmen följer fyra utbölingar som via en magisk portal sugs in i en värld där allt är kubformat. För att komma hem igen måste de övervinna den färgstarka världen.</p>
+        <p>De tre ’Jurassic World’-film kunne have givet indtryk af, at der ikke skal meget til, før dinosaurer igen ville kunne dominere kloden. Men det har vist sig ikke at holde stik.</p>
+        <p>Het komt elk jaar voor dat films met torenhoge budgetten flink floppen aan de box-office, ongeacht de kwaliteit van de film. Dit is het geval bij een aantal films die dit jaar zijn uitgekomen. Denk aan Mickey 17, Black Bag en de onlangs uitgebrachte animatiefilm Elio. In 2015 was de superheldenfilm Fantastic Four een van de grootste flops.</p>
+        <h2>A matching link is already present</h2>
+        <p>Following their post-credits scene in <a href="/">John Wick</a>, in a new John Wick spinoff.</p>
+        <h2>Mixed and breaking elements <small>(DigitalSpy.com tends to do this)</small></h2>
+        <p>The following bold word is broken by <strong>multi</strong><strong>ple</strong> elements, but visually looks like one. An element might also only be par<em>tially</em> styled. Or a full title like "The Lord of the Rings: <em>The Two Towers</em>" might only have part styled.</p>
+        <h2>Paragraph are broken up by many elements <small>(Exact example from TimeOut.com)</small></h2>
+        <!-- Svelte removes empty spaces inside of elements, it seems. We want to this to match TimeOut.com exactly. -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html '<p><span>Some of that dino-fatigue plays into the laborious opening stretches here. Big beasts shamble though the Big Apple and New Yorkers just beep their horns and grumble about the tails in their tailbacks. Happily, director Gareth Edwards (</span><em><span>The Creator, Godzilla</span></em><span>) OG screenwriter David Koepp (</span><em><span>Jurassic Park </span></em><span>and</span><em><span> The Lost World: Jurassic Park</span></em><span>) soon pivot back to where the humans-messing-with-nature premise works best: on a tropical island overrun with hungry prehistoric beasties.<br></span><span><br></span><span>That long-winded prelude does fill in the odd handy blank: to survive, the dinosaurs have mostly retreated to the jungles and seas near the equator, no-go areas for humans. There, a small group of adventurers must venture on the dime of Rupert Friend’s slimy exec. His pharma company is on the hunt for a potential cure for heart disease that’s carried in the blood of three dino species. Scarlett Johansson and Ali Mahershala’s guns for hire will provide security; Jonathan Bailey’s palaeontologist will point out the correct creatures to aim the dart gun at.&nbsp;</span></p>'}
+        <h2>Example for a list</h2>
+        <ul>
+          <li><strong>Winner:</strong> The Zone of Interest</li>
+          <li>Oppenheimer and Oppenheimer and Oppenheimer, and Oppenheimer</li>
+          <li>Past Lives</li>
+          <li>Anatomy of a Fall</li>
+          <li>Killers of the Flower Moon</li>
+        </ul>
+      </article>
+      {#if browser}
+        {@render children()}
+      {/if}
+    {/key}
+  {/if}
 </div>
 <style lang="scss">
-  div :global {
+  :global(body) {
+    margin: 0;
+  }
+  .main {
+    min-height: 100vh;
+    padding: margin(2);
+    background: #111;
+    color: lightgray;
+    font-family: 'Georgia', serif;
+    font-size: clamp(1rem, 3vw, 18px);
+    line-height: 1.8;
     article {
-      min-height: 100vh;
-      padding: margin(2);
-      background: #222;
+      margin: 0 auto;
+      max-width: 60rem;
+    }
+    header {
+      margin: 3rem 0;
+    }
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 8vw, 3rem);
       color: white;
-      font-family: sans-serif;
-      line-height: 1.4em;
+    }
-      > :first-child {
-        margin-top: 0;
-      }
+    h2 {
+      margin-top: 3rem;
+      font-size: 1.5rem;
+      color: white;
-      a {
-        color: hotpink;
+      small {
         font-style: italic;
+        color: gray;
+        font-weight: normal;
       }
     }
+    time {
+      font-style: italic;
+    }
+    :global(a) {
+      color: hotpink;
+      font-style: italic;
+    }
   }
 </style>

package/src/routes/+page.svelte CHANGED Viewed

@@ -58,7 +58,7 @@
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
-      setElements(config?.html_selector || '')
+      setElements(config?.html_selector || '', config?.exclude_elements_selector || '')
     } catch(error) {
       // We also return if the config did not get fetched properly, as we can't determine what should and should
       // get injected without it.
@@ -125,33 +125,34 @@
   // Set elements to be used by script, if a selector is passed from the config request we update
   // the selector on the window object.
-  function setElements(configSelector: string) {
+  // Additionally, a selector can be passed to exclude certain elements.
+  function setElements(configSelector: string, configExcludeElementsSelector: string): void {
     if (configSelector) window.PlayPilotLinkInjections.selector = configSelector
     parentElement = getLinkInjectionsParentElement()
-    elements = getLinkInjectionElements(parentElement)
+    elements = getLinkInjectionElements(parentElement, configExcludeElementsSelector)
   }
-  function openEditorialMode() {
+  function openEditorialMode(): void {
     isEditorialMode = true
     setEditorialParamInUrl()
     initialize()
   }
-  function insertCustomStyle(customStyleString: string) {
+  function insertCustomStyle(customStyleString: string): void {
     const id = 'playpilot-custom-style'
     const existingElement = document.getElementById(id)
     const styleElement = existingElement || document.createElement('style')
-    styleElement.textContent = `${window.PlayPilotLinkInjections?.selector || 'body'}, .modal, .popover { ${customStyleString} }`
+    styleElement.textContent = `[data-playpilot-link-injections] { ${customStyleString} }`
     styleElement.id = id
     if (!existingElement) document.body.appendChild(styleElement)
   }
 </script>
-<div class="playpilot-link-injections">
+<div class="playpilot-link-injections" data-playpilot-link-injections>
   {#if !isUrlExcluded && hasAuthToken && !isEditorialMode}
     <EditorTrigger
       onclick={openEditorialMode}
@@ -182,5 +183,8 @@
     :global(*) {
       box-sizing: border-box;
     }
+    @include reset-svg();
+    @include global-outlines();
   }
 </style>

package/src/routes/components/Editorial/Editor.svelte CHANGED Viewed

@@ -260,9 +260,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     line-height: normal;
-    @include reset-svg();
-    @include global-outlines();
   }
   .panel-open {
@@ -380,7 +377,7 @@
   }
   .alert {
-    margin: 0 margin(0.5) margin(0.5);
+    margin: margin(0.5) margin(0.5) 0;
   }
   .panel {

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

@@ -7,11 +7,11 @@
   import TitleSearch from './Search/TitleSearch.svelte'
   import { playPilotBaseUrl } from '$lib/constants'
   import { generateInjectionKey } from '$lib/api'
-  import { decodeHtmlEntities } from '$lib/html'
   import { getLinkInjectionsParentElement } from '$lib/linkInjection'
   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'
   interface Props {
     pageText: string
@@ -58,8 +58,8 @@
     selectionSentence = findSentenceForSelection(selection, selectionText)
     const nodeContent = selection.getRangeAt(0).commonAncestorContainer.textContent
-    const documentTextContent = decodeHtmlEntities(pageText)
-    if (!nodeContent || !documentTextContent.includes(nodeContent)) { // Selected content is not within the ALI selector
+    const documentTextContent = cleanPhrase(pageText)
+    if (!nodeContent || !documentTextContent.includes(cleanPhrase(nodeContent))) { // Selected content is not within the ALI selector
       error = 'Selection was not inside of given content'
     }
   }

package/src/routes/components/Modal.svelte CHANGED Viewed

@@ -64,9 +64,6 @@
     @media (min-width: 600px) {
       padding: margin(2);
     }
-    @include reset-svg();
-    @include global-outlines();
   }

package/src/routes/components/Popover.svelte CHANGED Viewed

@@ -76,9 +76,6 @@
     transform: translateY(calc(-100% + var(--offset)));
     z-index: 2147483647; // As high as she goes
-    @include reset-svg();
-    @include global-outlines();
     &.flip {
       top: auto;
       bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */