From 483c5f276032fd09427cf66ed226202fb064987c Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Wed, 11 May 2022 14:07:05 +0500
Subject: [PATCH] adjust table rows if row contains an inline header with
 column siblings

---
 .../postHtmlRenderer/postHtmlRenderer.tsx     | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx
index a7da786d4..1041f5d09 100644
--- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx
+++ b/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);
+            }
+          }
+        })
+      }
     };