truncate long table cell text with ellipsis at 192px max width

Author: dukenv0307

src/components/HTMLEngineProvider/HTMLRenderers/TableCellRenderer.tsx

@@ -52,7 +52,10 @@ function TableCellRenderer({tnode}: CustomRendererProps<TBlock>) {
 
     return (
         <View style={[styles.htmlTableCell, cellAlignmentStyle]}>
-            <Text style={[isHeaderCell ? styles.htmlTableHeaderCellText : styles.htmlTableCellText, textAlignmentStyle]}>
+            <Text
+                numberOfLines={1}
+                style={[isHeaderCell ? styles.htmlTableHeaderCellText : styles.htmlTableCellText, textAlignmentStyle]}
+            >
                 <TNodeChildrenRenderer tnode={tnode} />
             </Text>
         </View>

src/styles/index.ts

@@ -2732,6 +2732,7 @@ const staticStyles = (theme: ThemeColors) =>
         htmlTableCell: {
             flex: 1,
             minWidth: variables.htmlTableColumnMinWidth,
+            maxWidth: variables.htmlTableColumnMaxWidth,
             paddingEnd: 8,
         },
 

src/styles/variables.ts

@@ -138,6 +138,7 @@ export default {
     htmlTableRowMinHeight: 40,
     htmlTableHeaderRowMinHeight: 30,
     htmlTableColumnMinWidth: 120,
+    htmlTableColumnMaxWidth: 192,
     tableGroupRowPaddingVertical: 4,
     tableGroupRowHeight: 36,
     tableCheckboxColumnWidth: 20,