import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'plaintext',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();
      // Do something with the selected text, e.g. `draft.contents[0].text`
    }
  }
});

TYPESCRIPT

Handling image selection

import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'image',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();
      // Do something with the selected image ref, e.g. `draft.contents[0].ref`
    }
  }
});

TYPESCRIPT

Handling video selection

import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'video',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();
      // Do something with the selected video ref, e.g. `draft.contents[0].ref`
    }
  }
});

TYPESCRIPT

Handling richtext selection

import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'richtext',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();
      const range = draft.contents[0];
      // Do something with the selected richtext, e.g. `range.readPlaintext()`
    }
  }
});

TYPESCRIPT

Parameters

optsobject

Required

Options for configuring the content selection callback.

scopeScope

Required

The type of content that triggers a selection change event.

Available values:

"plaintext"
"image"
"video"
"richtext"

onChangefunction

Required

The callback to run when the selected content changes.

Parameters

eventSelectionEvent<Scope>

Required

Information about the selection change event.

scopeScopeRead-only

Required

The type of content that's selected.

Available values:

"plaintext"
"image"
"video"
"richtext"

countnumberRead-only

Required

The number of selected elements.

readfunction

Required

Returns a snapshot of the content in the user's selection.

The snapshot is known as the draft.

Returns

A snapshot of content from a user's design. This is a Promise that resolves with the following object:

contentsSelectionValue<Scope>[]Read-only

The individual content items that exist within the snapshot.

Any changes made to this array won't be reflected in the user's design until the save method is called.

savefunction

Saves changes made to the content items in the contents array.

Once this method is called:

Any changes the app has made to to the content will be reflected in the user's design.
Any changes the user has made to the content since the snapshot was created may be overwritten.
Only properties that are different from the original state will be written to the design.

Returns

Promise<void>

Examples

Save changes to selected text

import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'plaintext',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();

      // Make changes to the content
      for (const content of draft.contents) {
        content.text = content.text.toUpperCase();
      }

      // Save the changes to the design
      await draft.save();
    }
  }
});

TYPESCRIPT

Modify then save rich text content

import { selection } from "@canva/design";

selection.registerOnChange({
  scope: 'richtext',
  onChange: async (event) => {
    if (event.count > 0) {
      const draft = await event.read();
      const range = draft.contents[0];

      // Get the plain text
      const text = range.readPlaintext();

      // Apply formatting to the entire text
      range.formatText(
        { index: 0, length: text.length },
        { fontWeight: 'bold', color: '#0066CC' }
      );

      // Save the formatted text back to the design
      await draft.save();
    }
  }
});

TYPESCRIPT

Returns

void

Returns

() => void