From 0729aa692635fd30f7e8b8ab11c851064c204075 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 23 Mar 2022 10:28:39 -0500
Subject: [PATCH] fix: destroy editor component on show protected overlay

---
 .../components/NoteView/NoteView.tsx          | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
index 9b706d87c..637217d1f 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -244,6 +244,15 @@ export class NoteView extends PureComponent<Props, State> {
     }
   }
 
+  componentDidUpdate(_prevProps: Props, prevState: State): void {
+    if (
+      this.state.showProtectedWarning != undefined &&
+      prevState.showProtectedWarning !== this.state.showProtectedWarning
+    ) {
+      this.reloadEditorComponent();
+    }
+  }
+
   private onNoteInnerChange(note: SNNote, source: PayloadSource): void {
     if (note.uuid !== this.note.uuid) {
       throw Error('Editor received changes for non-current note');
@@ -465,7 +474,24 @@ export class NoteView extends PureComponent<Props, State> {
     this.reloadEditorComponent();
   }
 
+  private destroyCurrentEditorComponent() {
+    const currentComponentViewer = this.state.editorComponentViewer;
+    if (currentComponentViewer) {
+      this.application.componentManager.destroyComponentViewer(
+        currentComponentViewer
+      );
+      this.setState({
+        editorComponentViewer: undefined,
+      });
+    }
+  }
+
   private async reloadEditorComponent() {
+    if (this.state.showProtectedWarning) {
+      this.destroyCurrentEditorComponent();
+      return;
+    }
+
     const newEditor = this.application.componentManager.editorForNote(
       this.note
     );
@@ -478,15 +504,9 @@ export class NoteView extends PureComponent<Props, State> {
 
     if (currentComponentViewer?.componentUuid !== newEditor?.uuid) {
       if (currentComponentViewer) {
-        this.application.componentManager.destroyComponentViewer(
-          currentComponentViewer
-        );
-      }
-      if (currentComponentViewer) {
-        this.setState({
-          editorComponentViewer: undefined,
-        });
+        this.destroyCurrentEditorComponent();
       }
+
       if (newEditor) {
         this.setState({
           editorComponentViewer: this.createComponentViewer(newEditor),