fix: unmount component on destroy

app/assets/javascripts/components/ComponentView/index.tsx

@@ -32,13 +32,13 @@ const avoidFlickerTimeout = 7;
 
 export const ComponentView: FunctionalComponent<IProps> = observer(
   ({
-     application,
-     appState,
-     onLoad,
-     componentUuid,
-     templateComponent,
-     manualDealloc = false,
-   }) => {
+    application,
+    appState,
+    onLoad,
+    componentUuid,
+    templateComponent,
+    manualDealloc = false,
+  }) => {
     const liveComponentRef = useRef<LiveItem<SNComponent> | null>(null);
     const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -74,7 +74,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       }
 
       const offlineRestricted = component.offlineOnly && !isDesktopApplication();
-      const hasUrlError = function() {
+      const hasUrlError = function () {
         if (isDesktopApplication()) {
           return !component.local_url && !component.hasValidHostedUrl();
         } else {
@@ -121,7 +121,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
       }
     }, [isIssueOnLoading]);
 
-    const handleIframeLoadTimeout =useCallback(async () => {
+    const handleIframeLoadTimeout = useCallback(async () => {
       if (isLoading) {
         setIsLoading(false);
         setIsIssueOnLoading(true);

app/assets/javascripts/components/utils.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent, h, render } from 'preact';
+import { unmountComponentAtNode } from 'preact/compat';
 import { StateUpdater, useCallback, useState } from 'preact/hooks';
 import { useEffect } from 'react';
 
@@ -70,6 +71,9 @@ export function toDirective<Props>(
             $onChanges() {
               render(h(component, $scope), $element[0]);
             },
+            $onDestroy() {
+              unmountComponentAtNode($element[0]);
+            },
           };
         },
       ],

app/assets/javascripts/views/editor/editor_view.ts

@@ -314,7 +314,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   private async reloadEditor() {
-    const newEditor = this.application.componentManager!.editorForNote(
+    const newEditor = this.application.componentManager.editorForNote(
       this.note
     );
     /** Editors cannot interact with template notes so the note must be inserted */
@@ -334,7 +334,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
       });
       this.reloadFont();
     }
-    this.application.componentManager!.contextItemDidChangeInArea(
+    this.application.componentManager.contextItemDidChangeInArea(
       ComponentArea.Editor
     );
   }
@@ -718,7 +718,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
 
   registerComponentHandler() {
     this.unregisterComponent =
-      this.application.componentManager!.registerHandler({
+      this.application.componentManager.registerHandler({
         identifier: 'editor',
         areas: [ComponentArea.EditorStack, ComponentArea.Editor],
         contextRequestHandler: (componentUuid) => {
@@ -747,7 +747,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
     if (this.note) {
       for (const component of stackComponents) {
         if (component.active) {
-          this.application.componentManager!.setComponentHidden(
+          this.application.componentManager.setComponentHidden(
             component,
             !component.isExplicitlyEnabledForItem(this.note.uuid)
           );
@@ -755,7 +755,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
       }
     }
     await this.setState({ stackComponents });
-    this.application.componentManager!.contextItemDidChangeInArea(
+    this.application.componentManager.contextItemDidChangeInArea(
       ComponentArea.EditorStack
     );
   }
@@ -766,15 +766,15 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
 
   async toggleStackComponentForCurrentItem(component: SNComponent) {
     const hidden =
-      this.application.componentManager!.isComponentHidden(component);
+      this.application.componentManager.isComponentHidden(component);
     if (hidden || !component.active) {
-      this.application.componentManager!.setComponentHidden(component, false);
+      this.application.componentManager.setComponentHidden(component, false);
       await this.associateComponentWithCurrentNote(component);
-      this.application.componentManager!.contextItemDidChangeInArea(
+      this.application.componentManager.contextItemDidChangeInArea(
         ComponentArea.EditorStack
       );
     } else {
-      this.application.componentManager!.setComponentHidden(component, true);
+      this.application.componentManager.setComponentHidden(component, true);
       await this.disassociateComponentWithCurrentNote(component);
     }
     this.application.sync();