lexical-grid

Grid plugin for Lexical @lexical/react

Example

How to use

Add nodes to the editor

const Nodes: Array<Klass<LexicalNode>> = [
    ..., // other nodes
    GridContainerNode,
    GridRowNode,
    GridColumnNode,
];

export default Nodes;

Add the plugin to the editor

return () => <GridPlugin />;

Add Styles (tailwindcss)

.Grid__container {
    @apply grid gap-2 p-1 my-2;
}
.Grid__row {
    @apply grid gap-2 grid-flow-col auto-cols-fr;
}
.Grid__column {
    @apply p-2 border border-gray-400 border-dashed rounded;
}

Example

return () => (
    <Button
        onClick={() => {
            showModal("Añadir grid", (onClose) => (
                <InsertGridDialog
                    activeEditor={activeEditor}
                    onClose={onClose}
                />
            ));
        }}
    >
        <PlusCircledIcon className="mr-2 h-5 w-5" />
        Add grid
    </Button>
);

GitHub

View Github