Canvas Menu

Rearrange Components#

There are 6 APIs for getting, setting, updating, removing, and inserting 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 all 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']);

Update Components#

updateCanvasMenuOrderComponent(
  matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>,
  update: CanvasMenuComponentId | Partial<OrderComponent<CanvasMenuComponentId>> | ((component: OrderComponent<CanvasMenuComponentId>) => Partial<OrderComponent<CanvasMenuComponentId>>),
  orderContext?: OrderContext
)

Updates existing components in the canvas menu. The matcher can be:

A component ID string
A partial object describing the component to match
A function that receives the component and index, returning true if it matches

The update can be:

A new component ID string
A partial object with updated properties
A function that receives the current component and returns the updated one

Returns an object with the number of updated components and the updated order array.

// Replace the duplicate button with a custom duplicate component
cesdk.ui.updateCanvasMenuOrderComponent(
  'ly.img.duplicate.canvasMenu',
  'my-custom-duplicate-component'
);

// Replace text edit controls with simplified versions for basic users
cesdk.ui.updateCanvasMenuOrderComponent(
  (component) => component.id === 'ly.img.text.edit.canvasMenu',
  'my-simple-text-edit-component'
);

Remove Components#

removeCanvasMenuOrderComponent(
  matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>,
  orderContext?: OrderContext
)

Removes components from the canvas menu. The matcher can be:

A component ID string
A partial object describing the component to match
A function that receives the component and index, returning true if it matches

Returns an object with the number of removed components and the updated order array.

// Remove placeholder controls for simplified interface
cesdk.ui.removeCanvasMenuOrderComponent('ly.img.placeholder.canvasMenu');

// Remove all text editing controls for basic users
cesdk.ui.removeCanvasMenuOrderComponent(
  (component) => component.id.includes('text')
);

// Remove group controls for single-element contexts
cesdk.ui.removeCanvasMenuOrderComponent({ id: 'ly.img.group.enter.canvasMenu' });

Insert Components#

insertCanvasMenuOrderComponent(
  matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>,
  component: CanvasMenuComponentId | OrderComponent<CanvasMenuComponentId>,
  location?: InsertOrderComponentLocation,
  orderContext?: OrderContext
)

Inserts new components into the canvas menu. The matcher can be:

A component ID string
A partial object describing the component to match
A function that receives the component and index, returning true if it matches

The location can be:

'before' - Insert before the matched component
'after' - Insert after the matched component (default)
'replace' - Replace the matched component
'asChild' - Insert as a child of the matched component

Returns the updated canvas menu order array.

// Add a custom action after the duplicate button
cesdk.ui.insertCanvasMenuOrderComponent(
  'ly.img.duplicate.canvasMenu',
  'my-custom-action-component'
);

// Add a separator before the delete button for better organization
cesdk.ui.insertCanvasMenuOrderComponent(
  'ly.img.delete.canvasMenu',
  'ly.img.separator',
  'before'
);

// Replace the default replace button with a custom one
cesdk.ui.insertCanvasMenuOrderComponent(
  'ly.img.replace.canvasMenu',
  'my-custom-replace-component',
  'replace'
);

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',
];