Menu reference

This page lists the menu parts, rows, and rules. For the tasks, see Menus.

Menu configuration

Rows for registered slots take their label, icon, shortcut, enabled state, and action from the chrome registry, so a menu row and its toolbar twin cannot drift. A slot that collects a value (Insert > Shape, Insert > Line, Insert > Chart) opens a submenu of its choices.

The built-in menu bar

The built-in menu bar has these menus: File, Edit, View, Insert, Format, Arrange, and Slide Show, limited to the rows the engine has. Rows use common presentation editor words in sentence case, for example Slide background… and Play from current slide.

A named menu child changes its menu in place. Menu.Entry with another id adds your menu, after the built-in ones or after the menu its after names. Set preset={false} on one menu to render only your rows in it. preset={false} on the bar drops the built-in menus that you do not name. A named built-in menu still brings its rows, unless it also has preset={false}.

The canvas context menu

The canvas context menu has one arrangement for each target: shapes, pictures, one chart, one diagram, text being edited, a table cell, a table selected as an object, or empty slide area. The canvas around the slide counts as empty slide area.

• A right-click on a table cell puts the caret in that cell. A range of cells in that table stays selected. The table menu shows Cut, Copy, and Paste, then three submenus: Insert (Insert row above, Insert row below, Insert column left, Insert column right), Delete (Delete columns, Delete rows, Delete table), and Select (Select table, Select column, Select row), in the order of the toolbar. Then come Merge cells, Split cells, Font…, and Paragraph…. A right-click on a table that is selected as an object, or on the table's select handle, selects the table as an object. Its menu shows Cut, Copy, Paste, Duplicate, and Delete, then the Insert submenu, the order and group rows, and Edit alt text…. The rows act on the whole table: Insert row above adds a row at the top.
• The picture menu opens when every selected object is a picture. It adds Change picture…, Color, Transparency, Crop to shape, Fill, fit, and aspect ratio, Reset picture, and Format picture… to the shape rows. Format > Picture has the same picture rows.
• The chart menu opens when one chart is selected. It shows Edit chart… (chart.editData), which opens the Chart tab of the side panel, then the shape rows and Edit alt text….
• The diagram menu opens when one diagram is selected or a diagram shape holds the caret. It shows Add shape after, Add shape before, Add shape below, and Delete shape (diagram.*), then the shape rows and Edit alt text….
• On empty slide area or the canvas around the slide, the menu shows Paste, Format Background…, Layout (slide.layout), Edit layout, and New slide (slide.add). Edit layout (view.presentationView with the value slideMaster) opens the slide master view on the layout of the current slide. New slide adds a slide after the current slide, with the layout of the current slide. After a title slide, it uses the Title and Content layout of the same master. ContextMenu.Slot slotId="slide.add" hidden removes the row.
• The text, shape, picture, table, and table object menus show New comment (review.addComment) after the clipboard rows, while the comments pane is mounted or a side panel can show it. Without the pane and the review module, the row is not in the menu.
• A row that the selection cannot run stays in the menu, disabled with the engine's reason.

In your own rows, useContextMenuRequest() returns the open menu: its kind (CanvasMenuKind: shapes, picture, chart, diagram, text, table, tableFrame, or slide), at, owner, keyboard, and close. useContextMenuTarget() returns the element that the menu opened on, or null while no menu is open.

The slide and section menus

The slide menu of the slide rail and of the slide sorter is popups.railContextMenu. The section header menu of both is popups.sectionContextMenu (props: SectionContextMenuProps). A function replaces the menu, or renders the packaged RailContextMenu or SectionContextMenu with its props. false turns it off. The section and slide commands keep working from the API.

Rows for dialogs and popups

A row that opens a dialog or popup reads the popups registry on PptxEditor.Root. When its entry is false, the row stays in the menu, disabled with a reason, for example "This dialog is turned off in this editor". The operation keeps working from the API.

A row with the value dialog is a menu row that opens a dialog. dialog is not a value of the slot's command, so runToolbarCommand and useEditorValueCommand refuse it. To open these dialogs from your own code, call useEditorDialog('bulletsAndNumbering') or useEditorDialog('columns').

Menu-only slots

These slots belong to contextual groups that the toolbar does not show. Each one also has a named toolbar part.

The built-in menu bar places Insert > New slide (slide.add as a direct row, Ctrl+M, ⌃M on a Mac) and Slide Show > Hide slide (slide.hide, a check row). It does not place slide.layout and slide.reset. Add them with Menu.Item in the menu that you choose. The built-in menu bar places no section.* slot either (section.add, section.rename, section.remove, section.removeAll, section.collapseAll, section.expandAll). To offer Insert > Section, and Rename Section and Remove Section on a section, place them with Menu.Item.

slide.background is in the built-in Format menu. The slide rail's context menu (popups.railContextMenu) places New slide, Layout, Reset slide, and Hide slide. The canvas context menu places Layout, Edit layout, and New slide on empty slide area. The other slots in this table are in the built-in menu bar.

Clipboard rows

Cut and Copy write the system clipboard through the canvas's copy event, so Ctrl+V pastes what the menu copied. Where the browser refuses, shapes fall back to the editor's own clipboard. Paste of shapes from a menu row pastes the editor's last copy, because a browser lets a page read the system clipboard only from Ctrl+V. Paste into text reads the system clipboard where the browser allows it.

Copied shapes carry their pictures, media, charts, diagrams, and embedded objects. A paste gives each chart, diagram, and embedded object new parts, in the same presentation or in another one. An object with a copy in each branch of mc:AlternateContent, such as an equation, goes with all of its copies. A web link passes the link check again on paste. A link to a slide stays only in the presentation that it came from.

Layout rows

slide.add adds a slide with the picked layout. slide.layout changes the layout of the selected slides and marks the current one. The built-in Insert > New slide row and the New slide rows of the context menus add a slide at once. A Menu.Item slotId="slide.add" placed directly in Menu.Insert replaces that row and runs as it does. Set direct={false} for the gallery, or put the row in a Menu.Group to keep both rows.

Menu part options

Icons

A menu icon is icon content (an element) or the name of a packaged Material Symbol from ICON_PATHS, such as info. On Menu.Item and ContextMenu.Slot, it replaces the registry icon on every row kind. This includes a row that opens a submenu or a gallery. icon={null} removes the icon. A name that is not in ICON_PATHS draws nothing and prints a development warning.

Application row names and links

Use label for row text, disabledReason for its refusal message, and checked for its check mark.

A row's href opens in a new tab. Only relative links and http, https, mailto, tel, and ftp links pass sanitizeHref. Any other link disables the row. Use disabledReason to explain why a row is disabled.

Named rows

A named row is shorthand for one registry row. <PptxEditor.ContextMenu.Cut hidden /> is <PptxEditor.ContextMenu.Slot slotId="edit.cut" hidden />. A named row replaces its row in place, or removes it with hidden. In Vue, the same names are statics of PptxEditorContextMenu and PptxEditorMenu.

The tables of names are in core (MENU_NAMED_PARTS and CONTEXT_MENU_NAMED_PARTS), so React and Vue use the same names.

Keyboard and selection behavior

The menus manage keyboard navigation, Escape, dismissal, and selection protection. ArrowLeft and ArrowRight move between the menus of the bar. A disabled row stays focusable with aria-disabled, so a keyboard user can read why it is disabled. A custom row inside a menu keeps that behavior and closes the menu after it runs.

React and Vue reference

In Vue, PptxEditorMenu has the same parts as statics (PptxEditorMenu.File, PptxEditorMenu.Item, PptxEditorMenu.Row, PptxEditorMenu.Group, PptxEditorMenu.Entry, and the others). A row's onSelect is the select event. Each part takes className as in React (a host class also works). PptxEditorContextMenu (with Slot, Item, Group, Separator, and Submenu), RailContextMenu, SectionContextMenu, and the contextMenu, railContextMenu, and sectionContextMenu entries of popups work as in React. The two adapters read which rows and menus show from core (menu-arrangement.ts), so they cannot drift.

See also

• Menus
• CHROME_MENUS and CANVAS_CONTEXT_MENUS in chrome-menus.ts, for every built-in row
• @pptx-editor.dev/react API report, for the part types