Toolbar reference

This page lists the toolbar identifiers and rules. For the tasks, see Toolbar.

Registered groups and slots

These identifiers come from the shared chrome registry (CHROME_GROUPS). A registered operation can stay disabled with the engine's refusal reason. The preset toolbar never shows the slots marked with an asterisk (*); see Place the shape format controls. The contextual groups (view, file, edit, slide, and section) belong to the menus, the slide rail, and the slide sorter. A named part or Toolbar.Slot can still place one of their slots.

The toolbar shows only the groups that act on the selection:

Hiding a group never turns off its commands: menus, shortcuts, and the ribbon still run them. Insert > Table in the menu bar places table.insert.

• A Toolbar.Slot or named part for a slot of these groups changes that control. It shows while its group shows.
• A Toolbar.Slot for a slot that no context shows, such as a slot marked with an asterisk, goes after the groups and shows for every selection.
• An application group with after follows its anchor. When the selection does not show the anchor, the group follows the nearest shown group before the anchor, in this order: history, font, text, script, paragraph, list, insert, image, chart, diagram, shape, format, arrange, more, slide, find, table. With contextual={false}, it follows the order of that bar: its groups, then image, chart, diagram, and table.
• Set contextual={false} to show every group for every selection. The controls that cannot run are disabled with the engine's reason, and the image, chart, diagram, and table groups join after the other groups. The slots marked with an asterisk stay off the bar in both modes.
• A preset={false} bar shows the slots you place for every selection.

Named parts

Pickers

Pickers take className and hidden: Toolbar.FontFamily, Toolbar.FontSize, Toolbar.CharacterSpacing, Toolbar.ChangeCase, Toolbar.Alignment, Toolbar.TextDirection, Toolbar.VerticalAlignment, Toolbar.BulletStyle, Toolbar.NumberStyle, Toolbar.LineSpacing, Toolbar.Columns, Toolbar.Line, Toolbar.Shapes, Toolbar.LineWidth, Toolbar.LineStart, Toolbar.LineEnd, Toolbar.LineDash, Toolbar.ShapeStyles, Toolbar.ShapeEffects, Toolbar.TextEffects, Toolbar.Order, Toolbar.AlignObjects, and Toolbar.Rotate. The color split controls (Toolbar.FontColor, Toolbar.Highlight, Toolbar.ShapeFill, Toolbar.LineColor) also take icon, the glyph over the color bar. A picker has no single element, so asChild on a picker slot prints a development warning and does nothing.

Parts the bar does not show

A named part for a slot that the toolbar does not show, such as Toolbar.SmartGuides, Toolbar.Cut, Toolbar.Font, or Toolbar.Paragraph, goes after the groups. text.dialog and paragraph.dialog are contextual: the bar has no dialog launcher, so it does not show them. Format > Font… and Character Spacing > More Spacing… open the Font dialog. Format > Paragraph… and Line Spacing Options… open the Paragraph dialog.

In a preset bar, an image part replaces that control in the picture group. That group shows only while every selected element is a picture. In a preset={false} bar, the part stays in place, disabled with the reason, such as "Select a picture", until a picture is selected.

Toolbar.Separator draws a rule between controls in a preset={false} bar.

Section parts

Toolbar.AddSection and Toolbar.RenameSection open the section name field in a mounted slide rail (PptxEditor.SlideRail) or slide sorter (PptxEditor.SlideSorter). Without one, Toolbar.RenameSection is off with the reason disabled.noSectionPane, and Toolbar.AddSection adds the section without the name field. To start a rename from your own chrome, call requestSectionRename(editor, sectionId) from @pptx-editor.dev/react or @pptx-editor.dev/vue. It also needs a mounted rail or sorter.

Group options

Overflow order

When the toolbar runs out of width, a whole group moves into the More menu. A built-in group's priority is its place in TOOLBAR_COLLAPSE_ORDER, in steps of 10: view is 10 and history is 180. The view, file, Find, clipboard, and slide groups move first. The arrange, format, shape, and script groups move next. The insert group (text box, line, shape, picture) moves after them, then the list and paragraph groups. The table group, which shows only while the selection is in a table, moves after those. The font, text, and history groups stay longest, on the toolbar and on every ribbon tab.

The contextual image group's priority is 190, so it stays longest, because the selection asked for it. A group without a priority moves first.

Action options

Toolbar.Action gives your operation the toolbar's button styling, state attributes, keyboard behavior, and selection protection.

Keyboard and focus behavior

The toolbar is an ARIA toolbar with one Tab stop. The control that last had focus keeps the Tab stop. ArrowLeft, ArrowRight, Home, and End move between the controls. A right-to-left interface swaps the arrows. The Font size field keeps Home and End, and keeps each arrow until the caret reaches that end of its text.

A disabled control carries aria-disabled="true" instead of the native disabled attribute. It stays in the arrow order, runs nothing, and gives its reason to assistive technology. Your own buttons, inputs, and links inside the toolbar join the arrow order. Use aria-disabled on them too: a native disabled control leaves the order.

Command state from useEditorCommand

useEditorCommand(slotId) returns isEnabled, isActive, disabledReason, value, and execute. A slot that opens a surface (a dialog, find, or the slide show) runs through PptxEditor.Root, as a menu row does. Outside a root, that slot is disabled with the disabled.noRoot reason. When the popups entry of its surface is false, the slot is disabled with the reason that the surface is turned off. find.find and find.replace are also disabled with find.noBar while no PptxEditor.FindBar is mounted. In the slide sorter, they are disabled with disabled.findSorter, because the slide sorter shows no slide canvas. In the slide master view, they are disabled with disabled.slideMaster, because the view shows layouts, not slides.

disabledReason is a catalog key, such as disabled.noSelection, or the engine's own text. Translate it before you show it with translateKeyOrText(t, reason) from @pptx-editor.dev/core/editor, with t from useTranslation(). See Build a control from a command. The packaged controls translate it for you.

text.link is the exception: it stays enabled in both cases, because hiding the popup never turns off links. useEditorCommand('text.link').execute(url) always sets a link, and execute(null) removes it. The engine can still refuse the link: with only a caret outside a link (disabled.selectText), or for an unsafe address (errors.unsafeLink). execute() with no value opens the link popup, and prints a development warning when no popup can open.

In Vue, useEditorCommand follows the same rules through PptxEditorRoot. It starts the slide show, and opens the find bar (disabled with find.noBar while no PptxEditorFindBar is mounted). It also opens the link popup that the root hosts.

Theme fonts

To apply a theme font, pass its reference: execute('+mj-lt') for the headings font, and execute('+mn-lt') for the body font. The text then keeps the theme reference and follows a theme change (ECMA-376 Part 1, 20.1.4.1.17 latin). To mark the theme row as current, read snapshot().format?.fontFamilyTheme (a SelectionFormat field). It is major for the headings font, minor for the body font, and absent for a literal family. value is the theme's family name in both cases.

React and Vue reference

The Vue toolbar draws the same controls as the React toolbar, with the same markup, classes, and ARIA. This includes the pickers, the font size stepper, the value menus, the color splits, the galleries, and the table grid. It also includes the link control, Find and Replace, the slide show buttons, and the dialog and file picker buttons. Groups that do not fit the width move into the More menu. overflow, priority, pinned, and overflowContent work as in React.

Vue provides the same customization levels:

• className (or a host class) on PptxEditorToolbar.Slot or on a named part goes on the control. This applies to every Vue part whose React twin takes className.
• The icon prop (or the icon slot) replaces the registry icon of a button or of the main half of a color split.
• as-child renders the control as the one element in the default slot. It gets the label, the state attributes, and the click handler. An element that is not a button also gets role="button", a tab stop, and Enter and Space.
• Without as-child, default slot content of PptxEditorToolbar.Slot replaces the control. The default slot of a named button part (PptxEditorToolbar.Bold) is its icon.
• PptxEditorToolbar.Action, PptxEditorToolbar.Slot, and the named button parts take as-child.
• A picker refuses icon and as-child with a development warning, as in React.
• Any other attribute on a slot part, such as style, id, or data-*, never reaches the control and prints a development warning. A class or icon on a slot with its own content also warns, because no control renders to take it.

LayoutGallery takes the same props in Vue, and emits change with the picked layout's id. className (or a host class) goes on the gallery. ShapeStyleGallery and ShapeGrid take onPick as a prop, as in React. MenuTableGrid takes onPick and onInserted as props, as in React, because they change what a pick does.

See also

• Toolbar
• CHROME_GROUPS in chrome-controls.ts, for every control's label, icon, and state
• @pptx-editor.dev/react API report, for the part types