New editor block: table

[tbeseda]

It would be helpful to be able to add a table in the editor. Not the easiest UI to implement, I'm sure 😅

I tried pasting a Markdown table but no luck.

Thanks

[areknawo]

Yup. Table itself is simple but I wanted the UI to be good. This is definitely in the pipeline.

[areknawo]

@tbeseda Tables are now available, along with other improvements to Markdown content, shortcuts, and pasting (v2023.6.22). You can enable them in the Editing Experience section of the settings. You'll also have to update the SDKs for transformers to handle the new content.

[tbeseda]

Nice work! The table editor is very nice to use.

I updated the @vrite/sdk to 2023.6.27-beta but my tables aren't rendering correctly with htmlTransformer. The rest of the content renders correctly still.

My tables as seen in the editor

The rendered HTML

The JSON I get from the Vrite API looks correct (just the test table):

{
  "type": "table",
  "content": [
    {
      "type": "tableRow",
      "content": [
        {
          "type": "tableHeader",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "test"
                }
              ]
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableHeader",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "table"
                }
              ]
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableHeader",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "foo"
                }
              ]
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        }
      ]
    },
    {
      "type": "tableRow",
      "content": [
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "bar"
                }
              ]
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph"
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph"
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        }
      ]
    },
    {
      "type": "tableRow",
      "content": [
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "text": "baz"
                }
              ]
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph"
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        },
        {
          "type": "tableCell",
          "content": [
            {
              "type": "paragraph"
            }
          ],
          "attrs": {
            "colspan": 1,
            "rowspan": 1
          }
        }
      ]
    }
  ]
},

[tbeseda]

If it helps I have a live example here with a minimal table https://tbeseda.com/articles/vrite/Drafts/649e103b186b5c05fefdca6d

The Vrite content id is in the path

[areknawo]

Should be fixed now in @vrite/sdk@2023.6.30-beta. Update, try again and let me know if it helps.

[tbeseda]

Works as expected with the update. Thanks again @areknawo