Breaks on colwidths

[thijsvaniersel-cellsignal]

Hi. I am working with the JSON RTE field. I want to use it to create tables. We have a NUXt application that fetches the data. To show the JSON as HTML, we use this package. When I use a table, the page breaks. After investigation, I see this is because of a typo in the colwidth attribute on the table type.

This is the response I get from ContentStack in the JSON

          ....
          type: 'table',
          attrs: { rows: 1, cols: 2, colwidths: [250, 500] },
          ....

In the package, you are looking for the camel case attribute name for colWidths:

      if (jsonValue['type'] === 'table') {
            let colWidths = jsonValue.attrs.colWidths;

If I map the data to use the camel case notation 'colWidths', the page works and I see the table in the HTML.

I have the 2.0.9 version of the package.

[Jayesh2812]

Hey @thijsvaniersel-cellsignal, the JSON ( excluding uid and attrs keys ) generated from the JSON RTE table looks as follows.

{
    "type": "doc",
    "children": [
        {
            "type": "p",
            "children": [
                {
                    "text": ""
                }
            ]
        },
        {
            "type": "table",
            "attrs": {
                "rows": 3,
                "cols": 2,
                "colWidths": [
                    134,
                    139
                ]
            },
            "children": [
                {
                    "type": "tbody",
                    "children": [
                        {
                            "type": "tr",
                            "children": [
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "1"
                                                }
                                            ],
                                        }
                                    ],
                                },
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "2"
                                                }
                                            ],
                                        }
                                    ],
                                }
                            ],
                        },
                        {
                            "type": "tr",
                            "children": [
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "3"
                                                }
                                            ],
                                        }
                                    ],
                                },
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "4"
                                                }
                                            ],
                                        }
                                    ],
                                }
                            ],
                        },
                        {
                            "type": "tr",
                            "children": [
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "5"
                                                }
                                            ],
                                        }
                                    ],
                                },
                                {
                                    "type": "td",
                                    "children": [
                                        {
                                            "type": "p",
                                            "children": [
                                                {
                                                    "text": "6"
                                                }
                                            ],
                                        }
                                    ],
                                }
                            ]
                        }
                    ],
                }
            ]
        },
        {
            "type": "p",
            "children": [
                {
                    "text": " "
                }
            ]
        }
    ],
    "_version": 5
}

The key is named colWidths instead of colwidths in the camel case.

Can you once re-check and confirm the source of the generated JSON?

[thijsvaniersel-cellsignal]

Hi Jayesh, sorry for not responding. That's not fair when creating a ticket. Thanks for checking, I see it is indeed camelCase now.