How to add table to the rich text ? data format for value is different

[renyuzh]

No description provided.

[jay-shah]

@renyuzh you can do it in the same way as shown in the Slate docs

For example:

let value = Value.fromJSON({
    document: {
        nodes: [
            {
            object: 'block',
            type: 'table',
            nodes: [
                {
                    object: 'block',
                    type: 'table_row',
                    nodes: [
                        {
                            object: 'block',
                            type: 'table_cell',
                            nodes: [
                                {
                                    object: 'block',
                                    type: 'paragraph',
                                    nodes: [
                                        {
                                            object: 'text',
                                            leaves: [{ text: '1' }]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            object: 'block',
                            type: 'table_cell',
                            nodes: [
                                {
                                    object: 'block',
                                    type: 'paragraph',
                                    nodes: [
                                        {
                                            object: 'text',
                                            leaves: [{ text: '2' }]
                                        }
                                    ]
                                }
                            ]
                        },
                       
                    ]
                },
                {
                    object: 'block',
                    type: 'table_row',
                    nodes: [
                        {
                            object: 'block',
                            type: 'table_cell',
                            nodes: [
                                {
                                    object: 'block',
                                    type: 'paragraph',
                                    nodes: [
                                        {
                                            object: 'text',
                                            leaves: [{ text: '1' }]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            object: 'block',
                            type: 'table_cell',
                            nodes: [
                                {
                                    object: 'block',
                                    type: 'paragraph',
                                    nodes: [
                                        {
                                            object: 'text',
                                            leaves: [{ text: '2' }]
                                        }
                                    ]
                                }
                            ]
                        },
                    ]
                }
            ]
        }]

    }
})

You will have to add to your render node method:

renderNode = (props) => {
    const { node, attributes, children } = props

    switch (node.type) {
        case 'table':
            return (
                <table>
                    <tbody {...attributes}>{children}</tbody>
                </table>
            )
        case 'table_row':
            return <tr {...attributes}>{children}</tr>
        case 'table_cell':
            return <td {...attributes}>{children}</td>

        default:
            return <p {...attributes}> {children} </p>
    }
}

This would create a table as:

Also be sure to include

const tablePlugin = EditTable({
    typeTable: 'table',
    typeRow: 'table_row',
    typeCell: 'table_cell',
    typeContent: 'paragraph'

})

const plugins = [tablePlugin]; 

render() {
    const { value } = this.state;
    return (
            <Editor
                value={value}
                onChange={this.onChange}
                renderNode={this.renderNode}
                plugins={plugins}
            />
    )
}

into your code.