Merge pull request #2294 from ecency/nt/table-inline-header

Nt/table inline header

src/components/postHtmlRenderer/postHtmlRenderer.tsx

@@ -9,6 +9,7 @@ import WebView from 'react-native-webview';
 import { VideoPlayer } from '..';
 import { useHtmlTableProps } from '@native-html/table-plugin';
 import { ScrollView } from 'react-native-gesture-handler';
+import { prependChild, removeElement } from 'htmlparser2/node_modules/domutils';
 
 interface PostHtmlRendererProps {
   contentWidth: number;
@@ -142,12 +143,49 @@ export const PostHtmlRenderer = memo(
     };
 
 
+
+    //Does some needed dom modifications for proper rendering
     const _onElement = (element: Element) => {
       if (element.tagName === 'img' && element.attribs.src) {
         const imgUrl = element.attribs.src;
         console.log('img element detected', imgUrl);
         onElementIsImage(imgUrl);
       }
+
+      
+      //this avoids invalid rendering of first element of table pushing rest of columsn to extreme right.
+      if(element.tagName === 'table'){
+        console.log('table detected')
+
+        element.children.forEach((child)=>{
+          if(child.name === 'tr'){
+            let headerIndex = -1;
+            let colIndex = -1;
+            
+            child.children.forEach((gChild, index) => {
+              //check if element of row in table is not a column while it's other siblings are columns
+              if(gChild.type === 'tag'){
+                if(gChild.name !== 'td' && headerIndex === -1){
+                  headerIndex = index;
+                }else if(colIndex === -1){
+                  colIndex = index
+                }
+              }
+            })
+
+            //if row contans a header with column siblings
+            //remove first child and place it as first separate row in table
+            if(headerIndex !== -1 && colIndex !== -1 && headerIndex < colIndex){
+              console.log("time to do some switching", headerIndex, colIndex);
+              const header = child.children[headerIndex];
+              const headerRow = new Element('tr', {}, [header]);
+
+              removeElement(header);
+              prependChild(element, headerRow);
+            }
+          }
+        })
+      }
     };
 
 
@@ -244,16 +282,21 @@ export const PostHtmlRenderer = memo(
 
 
     //based on number of columns a table have, sets scroll enabled or disable, also adjust table full width
-    const _tableRenderer = ({ TDefaultRenderer, ...props }: CustomRendererProps<TNode>) => {
-      const tableProps = useHtmlTableProps(props);
+    const _tableRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<TNode>) => {
+      // const tableProps = useHtmlTableProps(props);
 
-      const isScrollable = tableProps.numOfColumns > 3;
-      const _tableWidth = isScrollable ? tableProps.numOfColumns * _minTableColWidth : contentWidth;
+      let maxColumns = 0;
+      props.tnode.children.forEach((child)=>
+        maxColumns = child.children.length > maxColumns ? child.children.length : maxColumns
+      )
+
+      const isScrollable = maxColumns > 3;
+      const _tableWidth = isScrollable ? maxColumns * _minTableColWidth : contentWidth;
       props.style = { width: _tableWidth };
 
       return (
         <ScrollView horizontal={true} scrollEnabled={isScrollable}>
-          <TDefaultRenderer {...props} />
+          <InternalRenderer {...props} />
         </ScrollView>
       )
     }
@@ -308,6 +351,7 @@ export const PostHtmlRenderer = memo(
           code: styles.code,
           li: styles.li,
           p: styles.p,
+          h6: styles.h6
         }}
         domVisitors={{
           onElement: _onElement,

src/components/postHtmlRenderer/postHtmlRendererStyles.ts

@@ -22,6 +22,9 @@ export default EStyleSheet.create({
     alignItems:'center',
     flexWrap:'wrap'
   } as TextStyle,
+  h6:{
+    fontSize:14,
+  } as TextStyle,
   pLi:{
     marginTop:0,
     marginBottom:0
@@ -33,7 +36,8 @@ export default EStyleSheet.create({
     width: '100%',
     alignSelf:'center',
     marginTop:4,
-    marginBottom:4
+    marginBottom:4,
+    backgroundColor:'red'
   } as ImageStyle,
   th:{
     flex: 1,
@@ -55,6 +59,7 @@ export default EStyleSheet.create({
     borderColor: '$tableBorderColor',
     backgroundColor: '$tableTrColor',
     alignItems:'center',
+    justifyContent:'center',
   } as ViewStyle,
   table:{
       width: '100%',
@@ -79,9 +84,7 @@ export default EStyleSheet.create({
     justifyContent: 'center',
   } as TextStyle,
   phishy:{
-    color:'red',
-    flexDirection:'row', 
-    flexWrap:'wrap'
+    color:'$primaryRed',
   } as TextStyle,
   textJustify:{
     textAlign: Platform.select({ios:'justify', android:'auto'}), //justify with selectable on android causes ends of text getting clipped,