fix(text): varying styles for text runs

singerla · singerla · commit 99e5219492e3 · 2025-08-28T14:47:57.000+02:00
diff --git a/__tests__/replace-multi-text-html.test.ts b/__tests__/replace-multi-text-html.test.ts
@@ -8,23 +8,24 @@ test('create presentation, replace multi text from HTML string.', async () => {
 
   const pres = automizer.loadRoot(`RootTemplate.pptx`).load(`TextReplace.pptx`);
 
-  const html =
-    '<html><body>\n' +
-    '<p><span style="font-size: 24px;">Testing layouts and exporting them.</span></p>\n' +
+  const html = '<html><body><p>First Line 14pt</p>\n' +
+    '<p><span style="font-size: 12px;">2nd line 12pt <strong>bold</strong> <em>italics</em></span></p>\n' +
     '<ul>\n' +
-    '<li>level 1 - 1</li>\n' +
-    '<li>level 1 - 2</li>\n' +
+    '<li><span style="font-size: 14px;">bullet 1 level 1</span></li>\n' +
     '<ul>\n' +
-    '<li>level 1-2-1 <em>italics</em></li>\n' +
+    '<li><span style="font-size: 14px;">bullet 1 level 2</span></li>\n' +
     '</ul>\n' +
-    '<li>level 1 - 3</li>\n' +
+    '<li><span style="font-size: 14px;">bullet 2 level 1</span></li>\n' +
     '<ul>\n' +
-    '<li>level 1 - 3 - 1</li>\n' +
+    '<li><span style="font-size: 14px;">bullet 2 level 2</span></li>\n' +
+    '<ul>\n' +
+    '<li><span style="font-size: 14px;">bullet 2 level 3</span></li>\n' +
+    '</ul>\n' +
+    '<li><span style="font-size: 14px;">bullet 2 level 2</span></li>\n' +
+    '<li><span style="font-size: 14px;"><ins>bullet</ins> <em>mixed</em> <strong><em>formatting</em></strong></span></li>\n' +
     '</ul>\n' +
     '</ul>\n' +
-    '<p>Testing testing testing</p>\n' +
-    '<p><strong>bold text</strong></p>\n' +
-    '</body></html>\n';
+    '<p><span style="font-size: 14px;"><strong><em>Text </em></strong>after bullet list</span></p></body></html>\n'
 
   await pres
     .addSlide('TextReplace.pptx', 1, (slide) => {
diff --git a/src/helper/html-to-multitext-helper.ts b/src/helper/html-to-multitext-helper.ts
@@ -134,9 +134,11 @@ export class HtmlToMultiTextHelper {
         return;
       }
 
-      const run = this.processTextNode(child);
-      if (run.text) {
-        textRuns.push(run);
+      const result = this.processTextNode(child);
+      if (Array.isArray(result)) {
+        textRuns.push(...result.filter((run) => run.text));
+      } else if (result.text) {
+        textRuns.push(result);
       }
     });
 
@@ -176,22 +178,31 @@ export class HtmlToMultiTextHelper {
     // Process all child nodes to create text runs
     // Using Array.from to convert NodeList to array that has forEach
     Array.from(node.childNodes).forEach((child) => {
-      const run = this.processTextNode(child);
-      if (run.text) {
-        textRuns.push(run);
+      const result = this.processTextNode(child);
+      if (Array.isArray(result)) {
+        textRuns.push(...result.filter((run) => run.text));
+      } else if (result.text) {
+        textRuns.push(result);
       }
     });
 
     return textRuns;
   }
 
   /**
-   * Processes a text node and creates a TextRun
+   * Processes a text node and creates a TextRun or array of TextRuns
    */
-  private processTextNode(node: ChildNode, style: TextStyle = {}): TextRun {
+  private processTextNode(
+    node: ChildNode,
+    style: TextStyle = {},
+  ): TextRun | TextRun[] {
     // If this is a text node, return its content
     if (node.nodeType === Node.TEXT_NODE) {
-      return { text: node.textContent || '', style };
+      const text = node.textContent || '';
+      if (text.trim() === '') {
+        return { text: text, style };
+      }
+      return { text, style };
     }
 
     // If this is an element, handle specific styling
@@ -260,25 +271,20 @@ export class HtmlToMultiTextHelper {
   private processElementWithChildren(
     element: Element,
     style: TextStyle,
-  ): TextRun {
+  ): TextRun[] {
     const runs: TextRun[] = [];
 
     Array.from(element.childNodes).forEach((child) => {
       const childRun = this.processTextNode(child, style);
-      if (childRun.text) {
+      if (Array.isArray(childRun)) {
+        // If the result is an array of runs, add them all
+        runs.push(...childRun.filter((run) => run.text));
+      } else if (childRun.text) {
+        // If it's a single run, add it
         runs.push(childRun);
       }
     });
 
-    // If we have a single run, return it directly
-    if (runs.length === 1) {
-      return runs[0];
-    }
-
-    // If we have multiple runs, concatenate the text
-    return {
-      text: runs.map((run) => run.text).join(''),
-      style,
-    };
+    return runs;
   }
 }
