Table

    slateTable: {
        id: 'slateTable',
        title: 'Table',
        group: 'common',
        addMode: 'table',
        blockSchema: {
            properties: {
                table: {
                    widget: 'object',
                    schema: {
                        properties: {
                            rows: {
                                widget: 'object_list',
                                idField: 'key',
                                addMode: 'table',
                                schema: {
                                    properties: {
                                        cells: {
                                            widget: 'object_list',
                                            idField: 'key',
                                            schema: {
                                                properties: {
                                                    value: { title: 'Content', widget: 'slate' },
                                                },
                                            },
                                        },
                                    },
                                },
                            },
                        },
                    },
                },
            },
        },
    }

{
  "@type": "slateTable",
  "table": {
    "celled": true,
    "fixed": true,
    "rows": [
      {
        "cells": [
          {
            "type": "header",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "text": "Feature"
                  }
                ]
              }
            ],
            "key": "i-7"
          },
          {
            "type": "header",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "text": "Supported"
                  }
                ]
              }
            ],
            "key": "i-8"
          }
        ],
        "key": "i-6"
      },
      {
        "cells": [
          {
            "type": "data",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "type": "strong",
                    "children": [
                      {
                        "text": "Bold"
                      }
                    ]
                  },
                  {
                    "text": " and "
                  },
                  {
                    "type": "em",
                    "children": [
                      {
                        "text": "italic"
                      }
                    ]
                  },
                  {
                    "text": " text"
                  }
                ]
              }
            ],
            "key": "i-10"
          },
          {
            "type": "data",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "text": "Yes"
                  }
                ]
              }
            ],
            "key": "i-11"
          }
        ],
        "key": "i-9"
      },
      {
        "cells": [
          {
            "type": "data",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "text": "A "
                  },
                  {
                    "type": "link",
                    "data": {
                      "url": "./index.md"
                    },
                    "children": [
                      {
                        "text": "link"
                      }
                    ]
                  }
                ]
              }
            ],
            "key": "i-13"
          },
          {
            "type": "data",
            "value": [
              {
                "type": "p",
                "children": [
                  {
                    "text": "Yes"
                  }
                ]
              }
            ],
            "key": "i-14"
          }
        ],
        "key": "i-12"
      }
    ]
  }
}

function TableBlock({ block }) {
  const rows = block.table?.rows || [];
  return (
    <div data-block-uid={block['@uid']}>
      <table>
        <tbody>
          {rows.map(row => (
            <tr key={row.key} data-block-uid={row.key}>
              {row.cells.map(cell => (
                <td key={cell.key} data-block-uid={cell.key} data-edit-text="value">
                  {(cell.value || []).map((node, i) => (
                    <SlateNode key={i} node={node} />
                  ))}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

<template>
  <div :data-block-uid="block['@uid']">
    <table>
      <tbody>
        <tr v-for="row in block.table?.rows || []" :key="row.key" :data-block-uid="row.key">
          <td v-for="cell in row.cells" :key="cell.key" :data-block-uid="cell.key" data-edit-text="value">
            <SlateNode v-for="(node, i) in cell.value || []" :key="i" :node="node" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineProps({ block: Object });
</script>

<script>
  import SlateNode from './SlateNode.svelte';
  export let block;
</script>

<div data-block-uid={block['@uid']}>
  <table>
    <tbody>
      {#each block.table?.rows || [] as row (row.key)}
        <tr data-block-uid={row.key}>
          {#each row.cells as cell (cell.key)}
            <td data-block-uid={cell.key} data-edit-text="value">
              {#each cell.value || [] as node, i (i)}
                <SlateNode {node} />
              {/each}
            </td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>