plone / blocks-conversion-tool

A tool to convert HTML (as used in Plone Classic) to Blocks (as used on Volto)
7 stars 5 forks source link

Conversion creates broken tables #31

Closed pbauer closed 1 year ago

pbauer commented 1 year ago

Converting tables with bold text or with line-breaks creates tables that look ok but cannot be edited.

<table class="plain">
  <tbody>
    <tr><td><b>Text1</b></td></tr>
  </tbody>
</table>

creates

{
  '@type': 'slateTable',
  table: {
    basic: false,
    celled: true,
    compact: false,
    fixed: true,
    inverted: false,
    rows: [
      {
        key: '82dl4',
        cells: [
          {
            key: 'd74tq',
            type: 'data',
            value: [
              { type: 'strong', children: [ { text: 'Text1' } ] }
            ]
          }
        ]
      }
    ],
    striped: false
  }
}

This cell renders ok and seems editable because you can click in it but on entering any character it is emptied.

<table class="plain">
  <tbody>
    <tr><td><br/>Text</td></tr>
  </tbody>
</table>
{
  '@type': 'slateTable',
  table: {
    basic: false,
    celled: true,
    compact: false,
    fixed: true,
    inverted: false,
    rows: [
      {
        key: '7c9fn',
        cells: [
          {
            key: 'lkg0',
            type: 'data',
            value: [ { text: '\nText' } ]
          }
        ]
      }
    ],
    striped: false
  }
}

This cell renders ok but upon clicking in it when editing it throws: this.props.value[0].children is undefined

pbauer commented 1 year ago

The values are miss-formed. When I create the same manually the correct values seems to be:

For the first case the p around the strong is missing:

'value': [
{
 'type': 'p',
 'children': [
  {
   'type': 'strong',
   'children': [
    {
     'text': 'Text'
    }
   ]
  }
 ]

The second is only data instead of a p with children:

'value': [
{
 'type': 'p',
 'children': [
  {
   'text': ''
  }
 ]
},
{
 'type': 'p',
 'children': [
  {
   'text': 'Text'
  }
 ]
}
]
pbauer commented 1 year ago

Here is a complete config with 2 broken and 2 ok tables prepared to be manually pasted into the respective schema-fields:

blocks:

{
 "6069c003-923f-49a4-a947-46709dd612e1": {
  "@type": "title"
 },
 "d8e990c6-05f9-4b64-a398-e08e33e726c4": {
  "@type": "slateTable",
  "table": {
   "basic": false,
   "celled": true,
   "compact": false,
   "fixed": true,
   "inverted": false,
   "rows": [
    {
     "key": "82dl4",
     "cells": [
      {
       "key": "d74tq",
       "type": "data",
       "value": [
        {
         "type": "strong",
         "children": [
          {
           "text": "Text1 broken"
          }
         ]
        }
       ]
      }
     ]
    }
   ],
   "striped": false
  }
 },
 "db76c67a-1deb-45ff-ac7a-14033b1f9d1a": {
  "@type": "slateTable",
  "table": {
   "basic": false,
   "celled": true,
   "compact": false,
   "fixed": true,
   "inverted": false,
   "rows": [
    {
     "key": "7c9fn",
     "cells": [
      {
       "key": "lkg0",
       "type": "data",
       "value": [
        {
         "text": "\nText2 broken"
        }
       ]
      }
     ]
    }
   ],
   "striped": false
  }
 },
 "faf49c27-953d-499f-91a7-d01a26341017": {
  "@type": "slateTable",
  "table": {
   "basic": false,
   "celled": true,
   "compact": false,
   "fixed": true,
   "inverted": false,
   "rows": [
    {
     "key": "82dl4",
     "cells": [
      {
       "key": "d74tq",
       "type": "data",
       "value": [
        {
         "type": "p",
         "children": [
          {
           "type": "strong",
           "children": [
            {
             "text": "Text3 ok"
            }
           ]
          }
         ]
        }
       ]
      }
     ],
     "striped": false
    }
   ]
  }
 },
 "faf49c27-953d-499f-91a7-d01a26341018": {
  "@type": "slateTable",
  "table": {
   "basic": false,
   "celled": true,
   "compact": false,
   "fixed": true,
   "inverted": false,
   "rows": [
    {
     "key": "7c9fn",
     "cells": [
      {
       "key": "lkg0",
       "type": "data",
       "value": [
        {
         "type": "p",
         "children": [
          {
           "text": ""
          }
         ]
        },
        {
         "type": "p",
         "children": [
          {
           "text": "Text4 ok"
          }
         ]
        }
       ]
      }
     ]
    }
   ],
   "striped": false
  }
 }
}

blocks_layout:

{
 "items": [
  "6069c003-923f-49a4-a947-46709dd612e1",
  "d8e990c6-05f9-4b64-a398-e08e33e726c4",
  "db76c67a-1deb-45ff-ac7a-14033b1f9d1a",
  "faf49c27-953d-499f-91a7-d01a26341017",
  "faf49c27-953d-499f-91a7-d01a26341018"
 ]
}