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});
     }
   }
 

app/assets/templates/directives/component-view.pug

@@ -74,11 +74,11 @@
           | version of the app.
           | Ensure you are running at least version 2.1 on all platforms.
 iframe(
-  data-component-id='{{ctrl.componentUuid}}',
+  data-component-id='{{ctrl.component.uuid}}',
   frameborder='0',
   ng-init='ctrl.onIframeInit()'
-  ng-attr-id='component-iframe-{{ctrl.componentUuid}}',
-  ng-if='ctrl.componentUuid && !ctrl.reloading && ctrl.componentValid',
+  ng-attr-id='component-iframe-{{ctrl.component.uuid}}',
+  ng-if='ctrl.component.uuid && !ctrl.reloading && ctrl.componentValid',
   ng-src='{{ctrl.getUrl() | trusted}}',
   sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads'
   )

app/assets/templates/directives/revision-preview-modal.pug

@@ -16,15 +16,13 @@
               a.sk-a.info.close-button(
                 ng-click="ctrl.dismiss(); $event.stopPropagation()"
                 ) Close
-          .sk-panel-content.selectable
+          .sk-panel-content.selectable(ng-if="!ctrl.state.editor")
             .sk-h2 {{ctrl.content.title}}
             p.normal.sk-p(
               style="white-space: pre-wrap; font-size: 16px;"
               ) {{ctrl.content.text}}
-          //- FIXME(baptiste): Component preview doesn't work
-          //-
-          //- component-view.component-view(
-          //-   component-uuid="ctrl.editor.uuid"
-          //-   ng-if="ctrl.editor",
-          //-   application='ctrl.application'
-          //-   )
+          component-view.component-view(
+            ng-if="ctrl.state.editor",
+            template-component="ctrl.state.editor",
+            application='ctrl.application'
+            )

package-lock.json

@@ -10956,8 +10956,8 @@
       "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad"
     },
     "snjs": {
-      "version": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9",
-      "from": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9"
+      "version": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668",
+      "from": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668"
     },
     "sockjs": {
       "version": "0.3.20",

package.json

@@ -68,6 +68,6 @@
   },
   "dependencies": {
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#99d73922326b20e58f914ec9dd666efd6e5e4ac9"
+    "snjs": "github:standardnotes/snjs#51715bcd284bfb3be9cf9e7aa7f85377d9880668"
   }
 }