From 2ec6d86dba5d8d44731fff734d83948862451a81 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 9 Sep 2025 16:11:07 -0600 Subject: [PATCH] Create additional popover options --- .../ui/report/config/addMenuItems.tsx | 27 +++++++++++++------ .../src/components/ui/report/config/icons.tsx | 1 + .../components/ui/report/config/labels.tsx | 7 ++++- .../report/elements/TurnIntoToolbarButton.tsx | 2 +- .../ui/report/elements/transforms.ts | 8 +++--- 5 files changed, 30 insertions(+), 15 deletions(-) diff --git a/apps/web/src/components/ui/report/config/addMenuItems.tsx b/apps/web/src/components/ui/report/config/addMenuItems.tsx index 986fd4c69..c89dfc081 100644 --- a/apps/web/src/components/ui/report/config/addMenuItems.tsx +++ b/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: , - keywords: NodeTypeLabels.table.keywords, - label: NodeTypeLabels.table.label, - value: KEYS.table, - }, + // { + // icon: , + // keywords: NodeTypeLabels.table.keywords, + // label: NodeTypeLabels.table.label, + // value: KEYS.table, + // }, { icon: , keywords: NodeTypeLabels.codeBlock.keywords, @@ -186,11 +191,17 @@ export const menuGroups: MenuGroup[] = [ label: NodeTypeLabels.tableOfContents.label, value: KEYS.toc, }, + { + icon: , + keywords: NodeTypeLabels.columnsTwo.keywords, + label: NodeTypeLabels.columnsTwo.label, + value: ACTION_TWO_COLUMNS, + }, { icon: , keywords: NodeTypeLabels.columnsThree.keywords, label: NodeTypeLabels.columnsThree.label, - value: 'action_three_columns', + value: ACTION_THREE_COLUMNS, }, // { // focusEditor: false, diff --git a/apps/web/src/components/ui/report/config/icons.tsx b/apps/web/src/components/ui/report/config/icons.tsx index 7944d3173..08528eb08 100644 --- a/apps/web/src/components/ui/report/config/icons.tsx +++ b/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 diff --git a/apps/web/src/components/ui/report/config/labels.tsx b/apps/web/src/components/ui/report/config/labels.tsx index 13fe02d6a..84f36c929 100644 --- a/apps/web/src/components/ui/report/config/labels.tsx +++ b/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 diff --git a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx index 054b25b4d..67fd243c9 100644 --- a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx @@ -30,7 +30,7 @@ const turnIntoItems = [ createMenuItem('toggleList', KEYS.toggle, ), createMenuItem('codeBlock', KEYS.codeBlock, ), createMenuItem('blockquote', KEYS.blockquote, ), - createMenuItem('columnsThree', 'action_three_columns', ), + // createMenuItem('columnsThree', 'action_three_columns', ), ]; export function TurnIntoToolbarButton(props: DropdownMenuProps) { diff --git a/apps/web/src/components/ui/report/elements/transforms.ts b/apps/web/src/components/ui/report/elements/transforms.ts index 027ceb82b..0f40d4127 100644 --- a/apps/web/src/components/ui/report/elements/transforms.ts +++ b/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 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 }),