Using HTML markup: TypeError cannot read properties of undefined (reading 'top')

Describe the bug I am using ckEditor to give users freedom to write and display the content on the pdf, i use the library react-pdf-html to help renderer. Sometimes users paste stuff like ltables from word and for the most part its ok. However when you paste 2 tables from either word or excel i get the above TypeError. This doesn't happen in libreOffice or wps which is even more confusing.

To Reproduce 1.well the best way to tell you is install react-pdf-html from (https://www.npmjs.com/package/react-pdf-html)

a code like .....

const styleSheet = {
table: {
  maxWidth: '100%',
  width: '100%',
  display: 'table',
  //flexDirection: 'column',
  marginHorizontal: 2,
  marginVertical: 5,
  lineHeight: 1,
  margin: 2,
  lineHeights: 1
},
tr: {
  display: 'table-row',
  justifyContent: 'flex-start',
  width: '100%',
  margin: 0,
  //lineHeight: 1,
  //lineHeights: 1,
  textAlign: 'left'
  // wordBreak: 'break-all'
},

td: {
  display: 'table-cell',
  borderColor: 'gray',
  borderWidth: 0.5,
  borderStyle: 'solid',
  justifyContent: 'flex-start',
  fontFamily: 'Georgia',
  fontWeight: 'normal',
  fontSize: 11,
  padding: '1px',
  wordBreak: 'break-all',
  //lineHeight: 1,
  // lineHeights: 1,
  textAlign: 'left',
  flex: 1
  // flexGrow: 1
},
th: {
  borderColor: 'gray',
  borderWidth: 1,
  borderStyle: 'solid',
  flex: 1,
  fontSize: 12,
  padding: 2,
  marginVertical: 1,
  fontFamily: 'Georgia_bold'
},....// style how you would normally style tables as well just watch out for tags like tbody,thead,  etc but thats the gist of it

...

<View wrap style={styles.container}> //style the container however you want shouldn't matter
 <Html stylesheet ={stylesheet}>{htmlData.replace(/<figure class="table"[^>]*>/g, '<div>')
            .replace(/<\/figure>/g, '</div>')
            .replace(/<figure[^>]*>/g, '<div>')
            .replace(/vertical-align:[^;]+;/g, 'display: inline-block;')
            .replace(/rowspan/g, 'rowSpan')
            .replace(/<i>[^<]*<strong>[^<]*<\/strong>[^<]*<\/i>/g, (match) => {
              // Replace the combination with the Text component and custom styles
              return `<em>${match.replace(/<\/?i>/g, '').replace(/<\/?strong>/g, '')}</em>`;
            })}}</Html>
            //you need all these because those styles will be incompatible with react-pdf/renderer as of version 3.0.1

</View>

create a on word should be a decent size try 4 x 5 use excel if you wish and format as table
you would ideally use a ckeditor the process for that is well documented if you want and paste the table on the editor and paste the same table or create another one in word or excel. or skip this and step 5 and just paste the text document content as the htmlDataat

const htmlData = 'contents of the below html markup pasted here' (its long, 2tablesinHTML.txt )

take the result of the onChange on the ckeditor component and make it the htmlData use usestate for simplicity sake Expected behaviour 2 tables that have just been pasted to appear on the pdf

Screenshots

Desktop (please complete the following information):

OS: Windows 10, office 2016
Browser Chrome and Firefox
React-pdf version v3.0.1

More info its not a windows thing when i test on local dev it works fine but on a neutral server where i use the same table and data the error occurs i don't understand how.

so I'm stuck on an error that keeps saying TypeError undefined 'Height' when on dev server apache but locally runs fine

i edited the node_module in the function getFurthestEnd which stopped the 'TypeError undefined 'Top''

var getFurthestEnd = function getFurthestEnd(elements) {
  return Math.max.apply(Math, elements.map(function (node) {
    var nodeHeight = node.box.height || 600;
    var nodeTop = node.box.top || 0;
    return nodeTop+ nodeHeight;
  }));
};

but now i can't solve the error stemming from

var nodeHeight = child.box.height ; keeps saying height is undefined but only from the server not locally. setting a default doesn't work and setting Height on the tag distorst the local and only reasonably works in dev

diegomura / react-pdf

Using HTML markup: TypeError cannot read properties of undefined (reading 'top') #2804