fix: added strip html tags for calculating width of line

[aabilesh]

Overview
This PR introduces enhancements to the measureWidth function within text truncation component. Previously, the presence of HTML tags in the text could disrupt the accurate measurement of text width, leading to issues such as excess whitespace in lines or incorrect truncation points. To address this, we've implemented a robust method to ignore HTML tags during width calculation, ensuring a more accurate and visually consistent rendering of text.

Changes
Stripping HTML Tags: We have added the stripHtmlTags function to effectively remove all HTML tags from the text before its width is measured. This function uses a regex pattern to search and replace HTML tags with a single space, preventing them from influencing the width calculation.

stripHtmlTags = (str) => {
  return str.replace(/<[^>]*>/g, " ");
}

Width Measurement Enhancement: The measureWidth function has been updated to utilize stripHtmlTags to preprocess the text. This ensures that the text width is calculated without the inclusion of HTML tags, providing a cleaner and more accurate measurement. This is crucial for maintaining the integrity of line breaks and truncation logic in our component.

measureWidth = (text) => {
  return this.canvasContext.measureText(this.stripHtmlTags(text)).width;
};

Impact
Enhanced Accuracy: By ensuring that HTML tags do not interfere with text width measurements, the component can now handle texts containing HTML more reliably. This results in better-aligned text and a more visually appealing layout.
Reduced Whitespace Issues: The updated logic helps in minimizing unexpected whitespace within lines, which was previously caused by unaccounted HTML tags in the width calculations.

Example

Before:

After: