selection.registerOnChange
Registers a callback that runs when a user selects (or deselects) content within a design.
To learn more, see Selection API.
Usage
import { selection } from "@canva/design";await selection.registerOnChange({scope: "plaintext",onChange: (event) => {console.log(event);},});
Permissions
Before an app that uses this method can be submitted for review, the following permissions must be enabled via the Developer Portal:
canva:design:content:read
, if the app calls theread
methodcanva:design:content:write
, if the app calls thesave
method
To learn more, see Configuring permissions.
Parameters
options
object
The options for registering a selection callback.
options.scope
string
The type of content that should trigger a selection event.
The available options include:
"image"
"plaintext"
"richtext"
"video"
options.onChange
function
The callback that runs when a user selects or deselects the specified type of content.
options.onChange(event)
object
The selection event.
options.onChange(event.scope)
string
The type of content that's selected. This matches the value passed into the scope
property.
options.onChange(event.count)
number
The number of distinct pieces of content that are selected.
options.onChange(event.read())
function
Reads the selected content.
Returns
A Promise
that resolves with the selected content and a save
method for persisting changes to the content.
options.onChange(event.read().contents)
array
The selected content. Each distinct piece of content — for example, the content of two separate text elements — is a separate object. These objects have properties and methods for interacting with the content.
The available properties depend on the value of the scope
property.
Images
If the scope
is "image"
, each object has the following properties:
ref
string
An identifier that points to an image asset in Canva's backend.
Plaintext
If the scope
is "plaintext"
, each object has the following properties:
text
string
The text content, as plaintext.
Richtext
If the scope
is "richtext"
, each object is a RichtextRange
. This is the same object that's returned by the createRichtextRange
method.
Videos
If the scope
is "video"
, each object has the following properties:
ref
string
An identifier that points to a video asset in Canva's backend.
options.onChange(event.read().save())
function
Saves any changes made to the contents
array and updates the user's design to reflect those changes.