diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts index 9d2e88e2d99..5a7d66935ea 100644 --- a/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts +++ b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts @@ -4,6 +4,7 @@ import DragAndDropContext, { DNDDirectionX, DnDDirectionY } from './types/DragAn import DragAndDropHandler from '../../pluginUtils/DragAndDropHandler'; import DragAndDropHelper from '../../pluginUtils/DragAndDropHelper'; import getGeneratedImageSize from './editInfoUtils/getGeneratedImageSize'; +import getLatestZIndex from './editInfoUtils/getLastZIndex'; import ImageEditInfo from './types/ImageEditInfo'; import ImageHtmlOptions from './types/ImageHtmlOptions'; import { Cropper, getCropHTML } from './imageEditors/Cropper'; @@ -374,7 +375,7 @@ export default class ImageEdit implements EditorPlugin { } }); - this.insertImageWrapper(this.image, this.wrapper, this.editor.getZoomScale()); + this.insertImageWrapper(this.editor, this.image, this.wrapper, this.editor.getZoomScale()); } private toggleImageVisibility(image: HTMLImageElement, showImage: boolean) { @@ -407,8 +408,14 @@ export default class ImageEdit implements EditorPlugin { return element; } - private insertImageWrapper(image: HTMLImageElement, wrapper: HTMLSpanElement, scale: number) { + private insertImageWrapper( + editor: IEditor, + image: HTMLImageElement, + wrapper: HTMLSpanElement, + scale: number + ) { this.zoomWrapper = this.copyImageSize(image, this.createZoomWrapper(wrapper, scale)); + this.zoomWrapper.style.zIndex = `${getLatestZIndex(editor.getScrollContainer()) + 1}`; this.editor.getDocument().body.appendChild(this.zoomWrapper); } diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts new file mode 100644 index 00000000000..20219efa39d --- /dev/null +++ b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts @@ -0,0 +1,19 @@ +import { getTagOfNode } from 'roosterjs-editor-dom'; + +/** + * @internal + * Search through from editor div to it's root for the latest z-index value + * @param editorDiv the editor div element + * @returns the z index value + */ +export default function getLatestZIndex(editorDiv: HTMLElement) { + let child: HTMLElement | null = editorDiv; + let zIndex = 0; + while (child && getTagOfNode(child) !== 'BODY') { + if (child.style.zIndex) { + zIndex = parseInt(child.style.zIndex); + } + child = child.parentElement; + } + return zIndex; +} diff --git a/packages/roosterjs-editor-plugins/test/imageEdit/getLastZIndexTest.ts b/packages/roosterjs-editor-plugins/test/imageEdit/getLastZIndexTest.ts new file mode 100644 index 00000000000..a477a4815c1 --- /dev/null +++ b/packages/roosterjs-editor-plugins/test/imageEdit/getLastZIndexTest.ts @@ -0,0 +1,36 @@ +import getLatestZIndex from '../../lib/plugins/ImageEdit/editInfoUtils/getLastZIndex'; + +describe('getLatestZIndex', () => { + function runTest(element: HTMLElement, expected: number) { + const result = getLatestZIndex(element); + expect(result).toBe(expected); + } + + it('should return parentNode zIndex', () => { + const div = document.createElement('div'); + div.style.zIndex = '20'; + const span = document.createElement('span'); + span.style.zIndex = '10'; + div.appendChild(span); + runTest(span, 20); + }); + + it('should return child zIndex', () => { + const div = document.createElement('div'); + const span = document.createElement('span'); + span.style.zIndex = '30'; + div.appendChild(span); + runTest(span, 30); + }); + + it('should return middle element zIndex', () => { + const div = document.createElement('div'); + const spanParent = document.createElement('div'); + spanParent.style.zIndex = '30'; + div.appendChild(spanParent); + const span = document.createElement('span'); + span.style.zIndex = '20'; + spanParent.appendChild(span); + runTest(span, 30); + }); +});