Image

image:ai-empty#

Emitted when AI image insertion receives no images. (AI plugins)

Type: signal.

Payload: none.

Example:

app.on('image:ai-empty', () => {
  // react to the signal
});

image:alignment#

Emitted when image alignment changes (Email plugin).

Type: signal.

Payload:

Example:

app.on('image:alignment', ({ align }) => {
  updateEmailPreviewAlignment(align);
});

image:before:change#

Hook emitted before image block data is updated. Handlers may return a modified payload.

Type: hook (handler may return a value).

Payload:

• block — block instance
• data — image fields to apply (src, alt, caption, srcset, …)
• event — native DOM or input event (user-driven actions) (optional)

Example:

app.on('image:before:change', ({ block, data, event }) => {
  return { block, data: { ...data, alt: data.alt || '' }, event };
});

image:before:drop#

Hook emitted before image files are dropped onto the editor. Set cancel: true on the payload to abort.

Type: hook (handler may return a value).

Payload:

• event — native DOM or input event (user-driven actions)
• files — FileList or file array from drop/paste
• targetBlock — block under the drop target, if any (optional)
• replace — boolean — whether an existing image block is replaced
• cancel — boolean — set to true in the handler to abort the drop

Example:

app.on('image:before:drop', (payload) => {
  if (payload.files.length > 5) payload.cancel = true;
});

image:center#

Emitted when an image is aligned to the center.

Type: signal.

Payload: none.

Example:

app.on('image:center', () => {
  // react to the signal
});

image:change#

Emitted after image block data is updated.

Type: signal.

Payload:

• block — block instance
• data — applied image fields
• event — native DOM or input event (user-driven actions) (optional)

Example:

app.on('image:change', ({ block, data }) => {
  cacheThumbnail(block.getEl(), data.src);
});

image:dimensions#

Emitted when image width/height change on the block.

Type: signal.

Payload:

• block — image block instance

Example:

app.on('image:dimensions', ({ block }) => {
  syncResizeHandles(block.getEl());
});

image:dnd:leave#

Emitted when dragged files leave an image drop target.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)

Example:

app.on('image:dnd:leave', ({ event }) => {
  console.log('image:dnd:leave', { event });
});

image:dnd:over#

Emitted while dragging files over an image drop target.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• files — FileList or file array from drop/paste
• targetBlock — block under the drop target, if any
• replace — boolean — whether an existing image block is replaced

Example:

app.on('image:dnd:over', ({ event, files, targetBlock, replace }) => {
  console.log('image:dnd:over', { event, files, targetBlock, replace });
});

image:drop#

Emitted when image files are dropped into the editor.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• files — FileList or file array from drop/paste
• targetBlock — block under the drop target, if any
• replace — boolean — whether an existing image block is replaced

Example:

app.on('image:drop', ({ event, files, targetBlock, replace }) => {
  console.log('image:drop', { event, files, targetBlock, replace });
});

image:insert#

Emitted when an image block is inserted.

Type: signal.

Payload: none.

Example:

app.on('image:insert', () => {
  // react to the signal
});

image:left#

Emitted when an image is aligned to the left.

Type: signal.

Payload: none.

Example:

app.on('image:left', () => {
  // react to the signal
});

image:outset#

Emitted when image outset mode is toggled.

Type: signal.

Payload: none.

Example:

app.on('image:outset', () => {
  // react to the signal
});

image:paste#

Emitted when image files are pasted from the clipboard.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• files — FileList or file array from drop/paste
• source — string — source identifier (e.g. clipboard, html)

Example:

app.on('image:paste', ({ event, files, source }) => {
  console.log('image:paste', { event, files, source });
});

image:paste:html#

Emitted when pasted HTML contains images to process.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• html — HTML string
• prepared — prepared paste HTML
• source — string — source identifier (e.g. clipboard, html)

Example:

app.on('image:paste:html', ({ html }) => {
  console.log(html.length);
});

image:resize:start#

Emitted when image resize drag starts.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• e — event-specific value
• block — block instance
• blockEl — image block root element
• imageEl — <img> element inside the block

Example:

app.on('image:resize:start', ({ block }) => {
  console.log(block.getType());
});

image:resize:stop#

Emitted when image resize drag ends.

Type: signal.

Payload:

• event — native DOM or input event (user-driven actions)
• e — event-specific value
• block — block instance
• blockEl — image block root element
• imageEl — <img> element inside the block

Example:

app.on('image:resize:stop', ({ block }) => {
  console.log(block.getType());
});

image:right#

Emitted when an image is aligned to the right.

Type: signal.

Payload: none.

Example:

app.on('image:right', () => {
  // react to the signal
});

image:save#

Emitted when image settings are saved from the image dropdown.

Type: signal.

Payload:

• block — image block instance
• data — saved image fields from the dropdown form

Example:

app.on('image:save', ({ block, data }) => {
  persistImageMeta(block, data);
});

image:upload#

Emitted when an uploaded image is applied to a block.

Type: signal.

Payload:

• block — image block instance
• data — processed upload fields (src, srcset, …)
• event — native event from file input or drop (optional)

Example:

app.on('image:upload', ({ block, data }) => {
  registerUploadedAsset(data.src);
});

image:upload:error#

Emitted when image upload fails.

Type: signal.

Payload:

• response — server or transport response

Example:

app.on('image:upload:error', ({ response }) => {
  console.log('image:upload:error', { response });
});

image:wrap#

Emitted when text wrap is toggled for an image.

Type: signal.

Payload: none.

Example:

app.on('image:wrap', () => {
  // react to the signal
});