Merge pull request #1437 from microsoft/u/juliaroldi/z-index

Get biggest z index of element
microsoft · Nov 30, 2022 · 2b379a7 · 2b379a7
2 parents e12834e + 0714059
commit 2b379a7
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
+    });
+});