Create additional popover options

apps/web/src/components/ui/report/config/addMenuItems.tsx

@@ -4,7 +4,12 @@ import { KEYS } from 'platejs';
 import type { PlateEditor } from 'platejs/react';
 import type * as React from 'react';
 import { Minus } from '@/components/ui/icons';
-import { insertBlock, insertInlineElement } from '../elements/transforms';
+import {
+  ACTION_THREE_COLUMNS,
+  ACTION_TWO_COLUMNS,
+  insertBlock,
+  insertInlineElement,
+} from '../elements/transforms';
 import { NodeTypeIcons } from './icons';
 import { CUSTOM_KEYS } from './keys';
 import { MenuGroupLabels, NodeTypeLabels } from './labels';
@@ -70,12 +75,12 @@ export const menuGroups: MenuGroup[] = [
         label: NodeTypeLabels.h3.label,
         value: 'h3',
       },
-      {
-        icon: <NodeTypeIcons.table />,
-        keywords: NodeTypeLabels.table.keywords,
-        label: NodeTypeLabels.table.label,
-        value: KEYS.table,
-      },
+      // {
+      //   icon: <NodeTypeIcons.table />,
+      //   keywords: NodeTypeLabels.table.keywords,
+      //   label: NodeTypeLabels.table.label,
+      //   value: KEYS.table,
+      // },
       {
         icon: <NodeTypeIcons.code />,
         keywords: NodeTypeLabels.codeBlock.keywords,
@@ -186,11 +191,17 @@ export const menuGroups: MenuGroup[] = [
         label: NodeTypeLabels.tableOfContents.label,
         value: KEYS.toc,
       },
+      {
+        icon: <NodeTypeIcons.columnsTwo />,
+        keywords: NodeTypeLabels.columnsTwo.keywords,
+        label: NodeTypeLabels.columnsTwo.label,
+        value: ACTION_TWO_COLUMNS,
+      },
       {
         icon: <NodeTypeIcons.columnsThree />,
         keywords: NodeTypeLabels.columnsThree.keywords,
         label: NodeTypeLabels.columnsThree.label,
-        value: 'action_three_columns',
+        value: ACTION_THREE_COLUMNS,
       },
       // {
       //   focusEditor: false,

apps/web/src/components/ui/report/config/icons.tsx

@@ -144,6 +144,7 @@ export const NodeTypeIcons = {
   paragraph: TypeScape,
   quote: Quote,
   toggle: ChevronRight,
+  columnsTwo: GridLayoutCols3,
   columnsThree: GridLayoutCols3,
 
   // Table

apps/web/src/components/ui/report/config/labels.tsx

@@ -70,10 +70,15 @@ export const NodeTypeLabels = {
     keyboard: undefined,
     keywords: ['citation', 'blockquote', '>'],
   },
+  columnsTwo: {
+    label: '2 columns',
+    keyboard: undefined,
+    keywords: ['two', '2', 'columns', '2 columns'],
+  },
   columnsThree: {
     label: '3 columns',
     keyboard: undefined,
-    keywords: ['three', '3', 'columns'],
+    keywords: ['three', '3', 'columns', '3 columns'],
   },
 
   // Text formatting

apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx

@@ -30,7 +30,7 @@ const turnIntoItems = [
   createMenuItem('toggleList', KEYS.toggle, <NodeTypeIcons.toggle />),
   createMenuItem('codeBlock', KEYS.codeBlock, <NodeTypeIcons.codeBlock />),
   createMenuItem('blockquote', KEYS.blockquote, <NodeTypeIcons.quote />),
-  createMenuItem('columnsThree', 'action_three_columns', <NodeTypeIcons.columnsThree />),
+  // createMenuItem('columnsThree', 'action_three_columns', <NodeTypeIcons.columnsThree />),
 ];
 
 export function TurnIntoToolbarButton(props: DropdownMenuProps) {

apps/web/src/components/ui/report/elements/transforms.ts

@@ -2,23 +2,20 @@ import { insertCallout } from '@platejs/callout';
 import { insertCodeBlock } from '@platejs/code-block';
 import { insertDate } from '@platejs/date';
 import { insertColumnGroup, toggleColumnGroup } from '@platejs/layout';
-import { triggerFloatingLink } from '@platejs/link/react';
-import { insertEquation, insertInlineEquation } from '@platejs/math';
 import {
   insertAudioPlaceholder,
   insertFilePlaceholder,
-  insertImagePlaceholder,
   insertVideoPlaceholder,
 } from '@platejs/media';
 import { SuggestionPlugin } from '@platejs/suggestion/react';
-import { TablePlugin } from '@platejs/table/react';
 import { insertToc } from '@platejs/toc';
 import { KEYS, type NodeEntry, type Path, PathApi, type TElement } from 'platejs';
 import type { PlateEditor } from 'platejs/react';
 import { CUSTOM_KEYS } from '../config/keys';
 import { insertMetric } from '../plugins/metric-kit';
 
-const ACTION_THREE_COLUMNS = 'action_three_columns';
+export const ACTION_TWO_COLUMNS = 'action_two_columns';
+export const ACTION_THREE_COLUMNS = 'action_three_columns';
 
 const insertList = (editor: PlateEditor, type: string) => {
   editor.tf.insertNodes(
@@ -34,6 +31,7 @@ const insertBlockMap: Record<string, (editor: PlateEditor, type: string) => void
   [KEYS.listTodo]: insertList,
   [KEYS.ol]: insertList,
   [KEYS.ul]: insertList,
+  [ACTION_TWO_COLUMNS]: (editor) => insertColumnGroup(editor, { columns: 2, select: true }),
   [ACTION_THREE_COLUMNS]: (editor) => insertColumnGroup(editor, { columns: 3, select: true }),
   [KEYS.audio]: (editor) => insertAudioPlaceholder(editor, { select: true }),
   [KEYS.callout]: (editor) => insertCallout(editor, { select: true }),