onPluginEvent()

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;
        }
    }