Merge pull request #106 from ContentSquare/fix/syllable-bug

fix(visual-engine): syllables alternations between nodes of text

Author: panzerdp

packages/visual-engine/src/adaptTextContent.ts

@@ -2,10 +2,17 @@ import { AnaliseTextFn, Liaison, Syllable } from '@readapt/text-engine'
 import { ColoredItem, Settings } from '@readapt/settings'
 import xor from 'lodash/xor'
 
+interface Context {
+  processedSyllables: number
+}
+
 const buildAdaptTextContentForText =
   (analyse: AnaliseTextFn) =>
   (htmlText: string, settings: Settings, liaisonsPhonemes: Set<string>): string => {
-    const adaptNodeForText = buildAdaptTextNodeForText(analyse, settings, liaisonsPhonemes)
+    const context: Context = {
+      processedSyllables: 0
+    }
+    const adaptNodeForText = buildAdaptTextNodeForText(analyse, settings, liaisonsPhonemes, context)
 
     return adaptNodeForText(htmlText)
   }
@@ -15,7 +22,7 @@ const buildAdaptTextContentForText =
  * adaptTextNode manipulates the DOM to add readapt styles and classes
  */
 const buildAdaptTextNodeForText =
-  (analyse: AnaliseTextFn, settings: Settings, liaisonsPhonemes: Set<string>) =>
+  (analyse: AnaliseTextFn, settings: Settings, liaisonsPhonemes: Set<string>, context: Context) =>
   (textToAdapt: string): string => {
     if (!hasTextRulesSettings(settings)) {
       return `${textToAdapt}`
@@ -26,7 +33,7 @@ const buildAdaptTextNodeForText =
       const classList = []
 
       if (settings.syllableActive) {
-        const syllable = isSyllable(textIndex, textEngineResult.syllables)
+        const syllable = isSyllable(textIndex, textEngineResult.syllables, context)
         if (syllable) {
           classList.push(syllable)
         }
@@ -74,6 +81,8 @@ const buildAdaptTextNodeForText =
       }
     })
 
+    context.processedSyllables += textEngineResult.syllables.length
+
     return `${textAdapted.join('')}`
   }
 
@@ -98,7 +107,10 @@ const buildAdaptTextContent =
         return NodeFilter.FILTER_ACCEPT
       }
     })
-    const adaptNode = buildAdaptTextNode(analyse, settings, liaisonsPhonemes)
+    const context: Context = {
+      processedSyllables: 0
+    }
+    const adaptNode = buildAdaptTextNode(analyse, settings, liaisonsPhonemes, context)
     let currentNode
     while ((currentNode = treeWalker.nextNode())) {
       try {
@@ -124,7 +136,7 @@ const hasTextRulesSettings = (settings: Settings): boolean => {
 
 const hasItemActive = (items: ColoredItem[]): boolean => items.some((item) => item.active)
 
-const isSyllable = (charIndex: number, syllables: Syllable[]): string | undefined => {
+const isSyllable = (charIndex: number, syllables: Syllable[], context: Context): string | undefined => {
   const indexSyllable = syllables.findIndex(([initPos, endPos]: Syllable) => {
     return charIndex >= initPos && charIndex <= endPos
   })
@@ -133,7 +145,7 @@ const isSyllable = (charIndex: number, syllables: Syllable[]): string | undefine
     return
   }
 
-  return indexSyllable % 2 ? 'readapt-syllable-2' : 'readapt-syllable-1'
+  return (indexSyllable + context.processedSyllables) % 2 ? 'readapt-syllable-2' : 'readapt-syllable-1'
 }
 
 const findLiaison = (index: number, liaisons: Liaison[]) => {
@@ -178,7 +190,7 @@ const adaptPhoneme = (settings: Settings, phoneme: number): string[] => {
  * adaptTextNode manipulates the DOM to add readapt styles and classes
  */
 const buildAdaptTextNode =
-  (analyse: AnaliseTextFn, settings: Settings, liaisonsPhonemes: Set<string>) =>
+  (analyse: AnaliseTextFn, settings: Settings, liaisonsPhonemes: Set<string>, context: Context) =>
   (textNode: Text): void => {
     const text = textNode.nodeValue
     if (!text) {
@@ -200,7 +212,7 @@ const buildAdaptTextNode =
       const classList = []
 
       if (settings.syllableActive) {
-        const syllable = isSyllable(textIndex, textEngineResult.syllables)
+        const syllable = isSyllable(textIndex, textEngineResult.syllables, context)
         if (syllable) {
           classList.push(syllable)
         }
@@ -258,6 +270,8 @@ const buildAdaptTextNode =
       }
     })
 
+    context.processedSyllables += textEngineResult.syllables.length
+
     // clean the node
     textNode.textContent = ''
   }

packages/visual-engine/tests/adaptHtmlElement.spec.ts

@@ -119,21 +119,58 @@ describe('visual engine tests', () => {
     expect(adaptedElement.innerHTML).toBe('<span class="readapt-content">save the w<span class="readapt-silent-letter">h</span>ale!</span>')
   })
 
-  it('should adapt syllables', () => {
-    const settings = buildDefaultSettings('en')
-    settings.syllableActive = true
-    settings.syllableColor1 = '#5fa2ce'
-    settings.syllableColor1 = '#59a14f'
-    const pElement = `<p>hello</p>`
-    document.body.innerHTML = `${pElement}`
-
-    adaptHtmlElement(document.body, settings, 'jsdom')
-
-    const adaptedElement = document.body.firstElementChild as HTMLElement
+  describe('syllables', () => {
+    it('should adapt syllables of one word', () => {
+      const settings = buildDefaultSettings('en')
+      settings.syllableActive = true
+      settings.syllableColor1 = '#5fa2ce'
+      settings.syllableColor2 = '#59a14f'
+      const pElement = `<p>hello</p>`
+      document.body.innerHTML = `${pElement}`
+
+      adaptHtmlElement(document.body, settings, 'jsdom')
+
+      const adaptedElement = document.body.firstElementChild as HTMLElement
+
+      expect(adaptedElement.innerHTML).toEqualIgnoringWhitespace(
+        `<span class="readapt-content">
+          <span class="readapt-syllable-1">hel</span>
+          <span class="readapt-syllable-2">lo</span>
+        </span>`
+      )
+    })
 
-    expect(adaptedElement.innerHTML).toBe(
-      '<span class="readapt-content"><span class="readapt-syllable-1">hel</span><span class="readapt-syllable-2">lo</span></span>'
-    )
+    it('should alternate syllables between multiple elements', () => {
+      const settings = buildDefaultSettings('en')
+      settings.syllableActive = true
+      settings.syllableColor1 = '#5fa2ce'
+      settings.syllableColor2 = '#59a14f'
+      const pElement = `
+        <p>
+          <a href="http://example.com/path-a/">hi</a>
+          <a href="http://example.com/path-b/">hello</a>
+        </p>
+      `
+      document.body.innerHTML = pElement
+
+      adaptHtmlElement(document.body, settings, 'jsdom')
+
+      const adaptedElement = document.body.firstElementChild as HTMLElement
+
+      expect(adaptedElement.innerHTML).toEqualIgnoringWhitespace(
+        `
+        <a href="http://example.com/path-a/">
+          <span class="readapt-content">
+            <span class="readapt-syllable-1">hi</span>
+          </span>
+        </a>
+        <a href="http://example.com/path-b/">
+          <span class="readapt-content">
+            <span class="readapt-syllable-2">hel</span>
+            <span class="readapt-syllable-1">lo</span>
+          </span></a>`
+      )
+    })
   })
 
   it('should adapt letters', () => {