Canvas Menu

There are 2 APIs for getting and setting the order of components in the Canvas Menu.

The content of the Canvas Menu changes based on the current edit mode ('Transform' (the default), 'Text', 'Crop', 'Trim', or a custom value), so both APIs accept an orderContext argument to specify the mode.

For example usage of these APIs, see also Moving Existing Buttons or Adding New Buttons in the Guides section.

Get the Current Order

cesdk.ui.getCanvasMenuOrder(
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order for the 'Transform' edit mode is returned, e.g.

cesdk.ui.getCanvasMenuOrder();
// => [
// {id: 'ly.img.group.enter.canvasMenu'},
// {id: 'ly.img.group.select.canvasMenu'},
// ...
// ]

Set a new Order

setCanvasMenuOrder(
  canvasMenuOrder: (CanvasMenuComponentId | OrderComponent)[],
  orderContext: OrderContext = { editMode: 'Transform' }
)

When omitting the orderContext parameter, the order is set for the default edit mode ('Transform'), e.g.:

// Sets the order for transform mode by default
cesdk.ui.setCanvasMenuOrder(['my.component.for.transform.mode']);

The following lists the default Canvas Menu components available within CE.SDK.

Take special note of the “Feature ID” column. Most components can be hidden/disabled by disabling the corresponding feature using the Feature API.

Also note that many components are only rendered for the block types listed in the “Renders for” column, because their associated controls (e.g. font size) are only meaningful for specific kinds of blocks (e.g. text).

Layout Helpers

Component ID Description

ly.img.separator Adds a vertical separator (<hr> element) in the Canvas Menu.
Separators follow some special layouting rules:
- If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered.
- Separators that end up being the first or last element in the Canvas Menu will not be rendered.
- Separators directly adjacent to the left side of a spacer (see below) will not be rendered.

Component ID	Description
`ly.img.separator`	Adds a vertical separator (`<hr>` element) in the Canvas Menu. Separators follow some special layouting rules: - If 2 or more separators end up next to each other (e.g. due to other components not rendering), only 1 separator will be rendered. - Separators that end up being the first or last element in the Canvas Menu will not be rendered. - Separators directly adjacent to the left side of a spacer (see below) will not be rendered.

Common Controls

These components are useful for editing various different block types.

Component ID	Description	Feature ID	Renders for
`ly.img.replace.canvasMenu`	Replace button: Opens the “Replace” Panel offering to replace the current image or video fill.	`ly.img.replace`	Images, Videos
`ly.img.placeholder.canvasMenu`	Placeholder button: Opens the “Placeholder” panel, allowing the user to toggle specific constraints on the selected block.	`ly.img.placeholder`	Every block
`ly.img.duplicate.canvasMenu`	Duplicate button: Duplicates the selected elements when pressed.	`ly.img.duplicate`	Every block
`ly.img.delete.canvasMenu`	Delete button: Deletes the selected elements when pressed.	`ly.img.delete`	Every block

Text

These components are relevant for editing text blocks, and will only render when a text block is selected.

Component ID	Description	Feature ID
`ly.img.text.edit.canvasMenu`	Edit button: Switches to text edit mode when pressed.	`ly.img.text.edit`
`ly.img.text.color.canvasMenu`	Color swatch button: Opens the Color Panel, where the user can set the color for the currently selected text run.	`ly.img.fill`
`ly.img.text.bold.canvasMenu`	Bold toggle: Toggles the bold cut (if available) for the currently selected text run.	`ly.img.text.edit`
`ly.img.text.italic.canvasMenu`	Italic toggle: Toggles the italic cut (if available) for the currently selected text run.	`ly.img.text.edit`
`ly.img.text.variables.canvasMenu`	Insert Variable button: Opens a dropdown containing the selection of available text variables.

Groups

These controls will only render when a group or an element of a group is selected.

Component ID	Description	Feature ID	Renders for
`ly.img.group.enter.canvasMenu`	Enter group button: Moves selection to the first element of the group when pressed.	`ly.img.group`	Groups
`ly.img.group.select.canvasMenu`	Select group button: Moves selection to the parent group of the currently selected element when pressed.	`ly.img.group`	Elements within groups

Page

These controls will only render when a page is selected.

Component ID	Description	Feature ID
`ly.img.page.moveUp.canvasMenu`	Move Up/Left button: Moves the current page closer to the start of a multi-page document.	`ly.img.page.move`
`ly.img.page.moveDown.canvasMenu`	Move Down/Right button: Moves the current page closer to the end of a multi-page document.	`ly.img.page.move`

Default Order

The default order of the Canvas Menu is the following:

Transform Mode

[
  'ly.img.group.enter.canvasMenu',
  'ly.img.group.select.canvasMenu',

  'ly.img.page.moveUp.canvasMenu',
  'ly.img.page.moveDown.canvasMenu',

  'ly.img.separator',

  'ly.img.text.edit.canvasMenu',
  'ly.img.replace.canvasMenu',

  'ly.img.separator',

  'ly.img.placeholder.canvasMenu',

  'ly.img.separator',

  'ly.img.duplicate.canvasMenu',
  'ly.img.delete.canvasMenu',
];

Text Mode

[
  'ly.img.text.color.canvasMenu',

  'ly.img.separator',

  'ly.img.text.bold.canvasMenu',
  'ly.img.text.italic.canvasMenu',

  'ly.img.separator',

  'ly.img.text.variables.canvasMenu',
];