From bda0bc06317a097577141a7a55538a7d05b6b7eb Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Tue, 7 Dec 2021 10:10:11 -0800
Subject: [PATCH] Always bring modified item to front in canvas

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
---
 ts/components/MediaEditor.tsx              | 7 ++-----
 ts/mediaEditor/MediaEditorFabricIText.ts   | 2 ++
 ts/mediaEditor/MediaEditorFabricSticker.ts | 2 ++
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
index 99a78c9a1..1c7ec570f 100644
--- a/ts/components/MediaEditor.tsx
+++ b/ts/components/MediaEditor.tsx
@@ -531,10 +531,6 @@ export const MediaEditor = ({
       return;
     }
 
-    if (editMode !== EditMode.Text) {
-      return;
-    }
-
     const obj = fabricCanvas.getActiveObject();
 
     if (!obj || !(obj instanceof MediaEditorFabricIText)) {
@@ -544,7 +540,7 @@ export const MediaEditor = ({
     obj.exitEditing();
     obj.set(getTextStyleAttributes(textStyle, sliderValue));
     fabricCanvas.requestRenderAll();
-  }, [editMode, fabricCanvas, sliderValue, textStyle]);
+  }, [fabricCanvas, sliderValue, textStyle]);
 
   // Create the CroppingRect
   useEffect(() => {
@@ -601,6 +597,7 @@ export const MediaEditor = ({
     setCanCrop(false);
   }, [editMode, fabricCanvas, imageState.height, imageState.width, zoom]);
 
+  // Create an IText node when edit mode changes to Text
   useEffect(() => {
     if (!fabricCanvas) {
       return;
diff --git a/ts/mediaEditor/MediaEditorFabricIText.ts b/ts/mediaEditor/MediaEditorFabricIText.ts
index a9db7f286..32a92704c 100644
--- a/ts/mediaEditor/MediaEditorFabricIText.ts
+++ b/ts/mediaEditor/MediaEditorFabricIText.ts
@@ -15,6 +15,8 @@ export class MediaEditorFabricIText extends fabric.IText {
       textAlign: 'center',
       ...options,
     });
+
+    this.on('modified', () => this.canvas?.bringToFront(this));
   }
 
   static override fromObject(
diff --git a/ts/mediaEditor/MediaEditorFabricSticker.ts b/ts/mediaEditor/MediaEditorFabricSticker.ts
index b5b442306..011160667 100644
--- a/ts/mediaEditor/MediaEditorFabricSticker.ts
+++ b/ts/mediaEditor/MediaEditorFabricSticker.ts
@@ -19,6 +19,8 @@ export class MediaEditorFabricSticker extends fabric.Image {
     }
 
     super(normalizedElement, options);
+
+    this.on('modified', () => this.canvas?.bringToFront(this));
   }
 
   static fromObject(