From 071ccac058a0d0e009c467b8a4e936dc90fedea5 Mon Sep 17 00:00:00 2001
From: iandebruin98 <ian@draad.nl>
Date: Thu, 10 Oct 2024 10:08:49 +0200
Subject: [PATCH] feat: Separate the functions truncateNode and elipsizeHTML

---
 packages/lib/ui-helpers.tsx | 75 +++++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/lib/ui-helpers.tsx b/packages/lib/ui-helpers.tsx
index 7a4298dbb..3abeb1823 100644
--- a/packages/lib/ui-helpers.tsx
+++ b/packages/lib/ui-helpers.tsx
@@ -5,45 +5,54 @@ export function elipsize(value: string, maxLength: number) {
   return value;
 }
 
-export function elipsizeHTML(value: string, maxLength: number) {
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = value;
-
-  let currentLength = 0;
+function truncateNode(
+  node: Node,
+  maxLength: number,
+  currentLength: { value: number }
+): string {
   let truncatedHTML = '';
 
-  function truncateNode(node: any) {
-    if (node.nodeType === Node.TEXT_NODE) {
-      const text = node.nodeValue || '';
-      if (currentLength + text.length > maxLength) {
-        truncatedHTML += text.substring(0, maxLength - currentLength) + '...';
-        currentLength = maxLength;
-      } else {
-        truncatedHTML += text;
-        currentLength += text.length;
-      }
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      const tagName = node.nodeName.toLowerCase();
-      truncatedHTML += `<${tagName}`;
-
-      for (let i = 0; i < node.attributes.length; i++) {
-        const attr = node.attributes[i];
-        truncatedHTML += ` ${attr.name}="${attr.value}"`;
-      }
-      truncatedHTML += '>';
-
-      for (let i = 0; i < node.childNodes.length; i++) {
-        if (currentLength >= maxLength) break;
-        truncateNode(node.childNodes[i]);
-      }
-
-      truncatedHTML += `</${tagName}>`;
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.nodeValue || '';
+    if (currentLength.value + text.length > maxLength) {
+      truncatedHTML += text.substring(0, maxLength - currentLength.value) + '...';
+      currentLength.value = maxLength;
+    } else {
+      truncatedHTML += text;
+      currentLength.value += text.length;
+    }
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
+    const element = node as Element;
+    const tagName = element.nodeName.toLowerCase();
+    truncatedHTML += `<${tagName}`;
+
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      truncatedHTML += ` ${attr.name}="${attr.value}"`;
+    }
+    truncatedHTML += '>';
+
+    for (let i = 0; i < element.childNodes.length; i++) {
+      if (currentLength.value >= maxLength) break;
+      truncatedHTML += truncateNode(element.childNodes[i], maxLength, currentLength);
     }
+
+    truncatedHTML += `</${tagName}>`;
   }
 
+  return truncatedHTML;
+}
+
+export function elipsizeHTML(value: string, maxLength: number): string {
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = value;
+
+  let currentLength = { value: 0 };
+  let truncatedHTML = '';
+
   for (let i = 0; i < tempDiv.childNodes.length; i++) {
-    if (currentLength >= maxLength) break;
-    truncateNode(tempDiv.childNodes[i]);
+    if (currentLength.value >= maxLength) break;
+    truncatedHTML += truncateNode(tempDiv.childNodes[i], maxLength, currentLength);
   }
 
   return truncatedHTML;