Show read-only editor in versions (not actually versioning yet)

src/app/components/components.module.ts

@@ -31,6 +31,8 @@ import {MarkdownComponent as MarkdownEditorComponent} from './nodes/markdown/mar
 import {DirectivesModule} from '../directives/directives.module';
 import {MarkdownModule} from 'ngx-markdown';
 import {VersionModalComponent} from './version-modal/version-modal.component';
+import {EditorPageRoutingModule} from '../pages/editor/editor-routing.module';
+import {EditorPage} from '../pages/editor/editor.page';
 
 @NgModule({
   declarations: [
@@ -58,6 +60,7 @@ import {VersionModalComponent} from './version-modal/version-modal.component';
     NormComponent,
     MarkdownEditorComponent,
     VersionModalComponent,
+    EditorPage,
   ],
   imports: [
       CommonModule,
@@ -69,6 +72,7 @@ import {VersionModalComponent} from './version-modal/version-modal.component';
       MonacoEditorModule,
       DirectivesModule,
       MarkdownModule,
+      EditorPageRoutingModule,
   ],
   entryComponents: [
     NodePickerComponent,
@@ -95,6 +99,7 @@ import {VersionModalComponent} from './version-modal/version-modal.component';
     NormComponent,
     MarkdownEditorComponent,
     VersionModalComponent,
+    EditorPage,
   ],
   exports: [
     NodePickerComponent,
@@ -121,6 +126,7 @@ import {VersionModalComponent} from './version-modal/version-modal.component';
     NormComponent,
     MarkdownEditorComponent,
     VersionModalComponent,
+    EditorPage,
   ]
 })
 export class ComponentsModule {}

src/app/components/version-modal/version-modal.component.html

@@ -19,7 +19,7 @@
             </ion-item>
         </ion-list>
         <div class="preview">
-            Page preview will be here.
+            <app-editor [pageId]="pageId" *ngIf="selectedVersion" [hosted]="true" [readonly]="true" #editor></app-editor>
         </div>
     </div>
 </div>

src/app/components/version-modal/version-modal.component.scss

@@ -23,7 +23,7 @@
 
   .contents {
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: hidden;
     display: flex;
     flex-direction: row;
 
@@ -35,6 +35,8 @@
 
     .preview {
       flex: 1;
+      height: 100%;
+      overflow-y: scroll;
     }
 
     .version-date {

src/app/components/version-modal/version-modal.component.ts

@@ -1,7 +1,8 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {AlertController, ModalController} from '@ionic/angular';
 import {EditorService} from '../../service/editor.service';
 import {PageVersionRecord} from '../../structures/PageRecord';
+import {EditorPage} from '../../pages/editor/editor.page';
 
 @Component({
     selector: 'app-version-modal',
@@ -10,6 +11,8 @@ import {PageVersionRecord} from '../../structures/PageRecord';
 })
 export class VersionModalComponent implements OnInit {
     @Input() pageId: string;
+    @ViewChild('editor') editor: EditorPage;
+
     public pageVersions: PageVersionRecord[] = [];
     public selectedVersion?: PageVersionRecord;
 
@@ -23,7 +26,10 @@ export class VersionModalComponent implements OnInit {
 
     async ngOnInit() {
         this.pageVersions = await this.editorService.loadPageVersions(this.pageId);
-        await this.onVersionClick(this.pageVersions[0]);
+        this.selectedVersion = this.pageVersions[0];
+        setTimeout(() => {
+            this.onVersionClick(this.pageVersions[0]);
+        }, 100);
     }
 
     dismiss() {
@@ -32,5 +38,8 @@ export class VersionModalComponent implements OnInit {
 
     async onVersionClick(version: PageVersionRecord) {
         this.selectedVersion = version;
+        if ( this.editor ) {
+            this.editor.ionViewDidEnter();
+        }
     }
 }