diff --git a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx index 3b7168b3b95..c5044a49b78 100644 --- a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx @@ -42,6 +42,7 @@ import {INSERT_COLLAPSIBLE_COMMAND} from '../CollapsiblePlugin'; import {InsertEquationDialog} from '../EquationsPlugin'; import {INSERT_EXCALIDRAW_COMMAND} from '../ExcalidrawPlugin'; import {INSERT_IMAGE_COMMAND, InsertImageDialog} from '../ImagesPlugin'; +import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog'; import {INSERT_PAGE_BREAK} from '../PageBreakPlugin'; import {InsertPollDialog} from '../PollPlugin'; import {InsertNewTableDialog, InsertTableDialog} from '../TablePlugin'; @@ -300,6 +301,14 @@ function getBaseOptions(editor: LexicalEditor, showModal: ShowModal) { onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined), }), + new ComponentPickerOption('Columns Layout', { + icon: , + keywords: ['columns', 'layout', 'grid'], + onSelect: () => + showModal('Insert Columns Layout', (onClose) => ( + + )), + }), ...(['left', 'center', 'right', 'justify'] as const).map( (alignment) => new ComponentPickerOption(`Align ${alignment}`, {