Add Columns Layout to Typeahead menu (#5136)

facebook · Oct 19, 2023 · a02164b · a02164b · vercel · Oct 19, 2023
1 parent dfa24df
commit a02164b
Showing 1 changed file with 9 additions and 0 deletions.
diff --git 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: <i className="icon columns" />,
+      keywords: ['columns', 'layout', 'grid'],
+      onSelect: () =>
+        showModal('Insert Columns Layout', (onClose) => (
+          <InsertLayoutDialog activeEditor={editor} onClose={onClose} />
+        )),
+    }),
     ...(['left', 'center', 'right', 'justify'] as const).map(
       (alignment) =>
         new ComponentPickerOption(`Align ${alignment}`, {