fix: render component view in revision preview

app/assets/javascripts/directives/views/componentView.ts

@@ -21,6 +21,7 @@ class ComponentViewCtrl implements ComponentViewScope {
   /** @scope */
   onLoad?: (component: SNComponent) => void
   componentUuid!: string
+  templateComponent!: SNComponent
   application!: WebApplication
   liveComponent!: LiveItem<SNComponent>
 
@@ -60,7 +61,12 @@ class ComponentViewCtrl implements ComponentViewScope {
     (this.unregisterComponentHandler as any) = undefined;
     this.unregisterDesktopObserver();
     (this.unregisterDesktopObserver as any) = undefined;
-    this.liveComponent.deinit();
+    if(this.liveComponent) {
+      this.liveComponent.deinit();
+    } else {
+      this.application.componentManager.removeTemporaryTemplateComponent(this.templateComponent);
+    }
+    (this.templateComponent as any) = undefined;
     (this.liveComponent as any) = undefined;
     (this.application as any) = undefined;
     (this.onVisibilityChange as any) = undefined;
@@ -72,13 +78,17 @@ class ComponentViewCtrl implements ComponentViewScope {
   }
 
   $onInit() {
-    this.liveComponent = new LiveItem(this.componentUuid, this.application);
+    if(this.componentUuid) {
+      this.liveComponent = new LiveItem(this.componentUuid, this.application);
+    } else {
+      this.application.componentManager.addTemporaryTemplateComponent(this.templateComponent);
+    }
     this.registerComponentHandlers();
     this.registerPackageUpdateObserver();
   }
 
   get component() {
-    return this.liveComponent?.item;
+    return this.templateComponent || this.liveComponent?.item;
   }
 
   public onIframeInit() {
@@ -97,7 +107,7 @@ class ComponentViewCtrl implements ComponentViewScope {
       throw Error('Component view component must be active');
     }
     const iframe = this.application.componentManager!.iframeForComponent(
-      this.componentUuid
+      this.component.uuid
     );
     if (!iframe) {
       return;
@@ -241,6 +251,7 @@ export class ComponentView extends WebDirective {
     this.template = template;
     this.scope = {
       componentUuid: '=',
+      templateComponent: '=?',
       onLoad: '=?',
       application: '='
     };

app/assets/javascripts/directives/views/revisionPreviewModal.ts

@@ -1,3 +1,4 @@
+import { PureViewCtrl } from './../../views/abstract/pure_view_ctrl';
 import { WebApplication } from '@/ui_models/application';
 import { WebDirective } from './../../types';
 import {
@@ -17,7 +18,7 @@ interface RevisionPreviewScope {
   application: WebApplication
 }
 
-class RevisionPreviewModalCtrl implements RevisionPreviewScope {
+class RevisionPreviewModalCtrl extends PureViewCtrl implements RevisionPreviewScope {
 
   $element: JQLite
   $timeout: ng.ITimeoutService
@@ -26,13 +27,13 @@ class RevisionPreviewModalCtrl implements RevisionPreviewScope {
   application!: WebApplication
   unregisterComponent?: any
   note!: SNNote
-  editor?: SNComponent
 
   /* @ngInject */
   constructor(
     $element: JQLite,
     $timeout: ng.ITimeoutService
   ) {
+    super($timeout);
     this.$element = $element;
     this.$timeout = $timeout;
   }
@@ -74,18 +75,18 @@ class RevisionPreviewModalCtrl implements RevisionPreviewScope {
         identifier: editorCopy.uuid,
         areas: [ComponentArea.Editor],
         contextRequestHandler: (componentUuid) => {
-          if (componentUuid === this.editor?.uuid) {
+          if (componentUuid === this.state.editor?.uuid) {
             return this.note;
           }
         },
         componentForSessionKeyHandler: (key) => {
-          if (key === this.componentManager.sessionKeyForComponent(this.editor!)) {
-            return this.editor;
+          if (key === this.componentManager.sessionKeyForComponent(this.state.editor!)) {
+            return this.state.editor;
           }
         }
       });
 
-      this.editor = editorCopy;
+      this.setState({editor: editorCopy});
     }
   }