in packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts [179:247]
onPluginEvent(e: PluginEvent) {
switch (e.eventType) {
case PluginEventType.MouseDown:
this.setEditingImage(null);
break;
case PluginEventType.MouseUp:
const target = e.rawEvent.target;
if (
e.isClicking &&
e.rawEvent.button == 0 &&
safeInstanceOf(target, 'HTMLImageElement') &&
target.isContentEditable &&
matchesSelector(target, this.options.imageSelector)
) {
this.setEditingImage(target, ImageEditOperation.ResizeAndRotate);
}
break;
case PluginEventType.KeyDown:
const key = e.rawEvent.which;
if (key == Keys.DELETE || key == Keys.BACKSPACE) {
// Set current editing image to null and select the image if any, and do not prevent default of the event
// so that browser will delete the selected image for us
this.setEditingImage(null, true /*selectImage*/);
} else if (key == Keys.ESCAPE && this.image) {
// Press ESC should cancel current editing operation, resume back to original edit info
this.editInfo = getEditInfoFromImage(this.image);
this.setEditingImage(null);
e.rawEvent.preventDefault();
} else if (key != SHIFT_KEYCODE && key != CTRL_KEYCODE && key != ALT_KEYCODE) {
// For other key, just unselect current image and select it. If this is an input key, the image will be replaced
this.setEditingImage(null, true /*selectImage*/);
}
break;
case PluginEventType.ContentChanged:
if (
e.source != ChangeSource.InsertEntity ||
(<Entity>e.data).type != IMAGE_EDIT_WRAPPER_ENTITY_TYPE
) {
// After contentChanged event, the current image wrapper may not be valid any more, remove all of them if any
this.editor.queryElements(
getEntitySelector(IMAGE_EDIT_WRAPPER_ENTITY_TYPE),
this.removeWrapper
);
}
break;
case PluginEventType.EntityOperation:
if (e.entity.type == IMAGE_EDIT_WRAPPER_ENTITY_TYPE) {
if (e.operation == EntityOperation.ReplaceTemporaryContent) {
this.removeWrapper(e.entity.wrapper);
} else if (e.operation == EntityOperation.Click) {
e.rawEvent.preventDefault();
}
}
break;
case PluginEventType.ExtractContentWithDom:
// When extract content, remove all image info since they may not be valid when load the content again
toArray(e.clonedRoot.querySelectorAll(this.options.imageSelector)).forEach(img => {
deleteEditInfo(img as HTMLImageElement);
});
break;
}
}