How co create table

1

Hi everyone. I’m new to prosemirror and never worked with text-editors logic, so I am confused. How can I create a table in prosemirror? I’m using a prosemirror-tables and there is no createTable command (for me it’s really weird, there are commands for a lot of stuff, but no for creating a table). I’ve researched a lot but still couldn’t find a good solution for that. I’ve looked up at tiptap source code (it’s an editor based on prosemirror, with tables), but there is a lot of stuff above prosemirror code, so I get confused more.

2

You just create the node directly (probably first creating the rows and columns you want) and insert it in the document via the regular transaction methods.

3

Ok. After a lot of research, I’ve come up with this. I hope it will help someone.

function insertTable() {
        return (
            state: EditorState,
            dispatch: (tr: Transaction) => void
        ): boolean => {
            const offset: number = state.tr.selection.anchor + 1;
            const transaction: Transaction = state.tr;
            const cell: Node = state.schema.nodes.table_cell.createAndFill();
            const node: Node = state.schema.nodes.table.create(
                null,
                Fragment.fromArray([
                    state.schema.nodes.table_row.create(
                        null,
                        Fragment.fromArray([cell, cell, cell])
                    ),
                    state.schema.nodes.table_row.create(
                        null,
                        Fragment.fromArray([cell, cell, cell])
                    )
                ])
            );

            if (dispatch) {
                dispatch(
                    transaction
                        .replaceSelectionWith(node)
                        .scrollIntoView()
                        .setSelection(
                            TextSelection.near(
                                transaction.doc.resolve(offset)
                            )
                        )
                );
            }

            return true;
        };
    }

Then we can bind this to button, and add this button to menu with dropdown from prosemirror-tables:

const menu = buildMenuItems(schema).fullMenu;
function item(label: string, cmd: (p: EditorState<any>) => boolean) {
    return new MenuItem({ label, select: cmd, run: cmd });
}

    menu.push([
        new MenuItem({
            label: 'Add table',
            title: 'Insert table',
            class: 'ProseMirror-icon', // Здесь можно добавить класс
            run: insertTable()
        }),
        new Dropdown(
            [
                item('Insert column before', addColumnBefore),
                item('Insert column after', addColumnAfter),
                item('Delete column', deleteColumn),
                item('Insert row before', addRowBefore),
                item('Insert row after', addRowAfter),
                item('Delete row', deleteRow),
                item('Delete table', deleteTable),
                item('Merge cells', mergeCells),
                item('Split cell', splitCell),
                item('Toggle header column', toggleHeaderColumn),
                item('Toggle header row', toggleHeaderRow),
                item('Toggle header cells', toggleHeaderCell)
            ],
            { label: 'Edit table' }
        )
    ]);
3 Likes