Every editor page will instantiate its own editor service

src/app/components/editor/code/code.component.ts

@@ -11,6 +11,7 @@ import {EditorService} from '../../../service/editor.service';
 })
 export class CodeComponent extends EditorNodeContract implements OnInit {
     @Input() nodeId: string;
+    @Input() editorUUID?: string;
     public dirty = false;
     protected dbRecord: any = {};
     protected codeRefId!: string;
@@ -95,7 +96,7 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
     protected hadLoad = false;
 
     constructor(
-        public readonly editorService: EditorService,
+        public editorService: EditorService,
         public readonly api: ApiService,
     ) { super(); }
 
@@ -183,6 +184,7 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
     }
 
     ngOnInit() {
+        this.editorService = this.editorService.getEditor(this.editorUUID);
         this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
             this.editorOptions.readOnly = !this.editorService.canEdit();
         });

src/app/components/editor/database/database.component.ts

@@ -22,6 +22,7 @@ import {EditorService} from '../../../service/editor.service';
 })
 export class DatabaseComponent extends EditorNodeContract implements OnInit {
   @Input() nodeId: string;
+  @Input() editorUUID?: string;
   @ViewChild('agGridElement') agGridElement: AgGridAngular;
 
   public dbRecord: any;
@@ -41,7 +42,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
       protected modals: ModalController,
       protected alerts: AlertController,
       protected loader: LoadingController,
-      public readonly editorService: EditorService,
+      public editorService: EditorService,
   ) { super(); }
 
   title = 'app';
@@ -65,6 +66,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
   }
 
   ngOnInit() {
+    this.editorService = this.editorService.getEditor(this.editorUUID);
     this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
       console.log('database editor', this);
     });

src/app/components/editor/files/files.component.ts

@@ -12,6 +12,7 @@ import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 })
 export class FilesComponent extends EditorNodeContract implements OnInit {
   @Input() nodeId: string;
+  @Input() editorUUID: string;
   @ViewChild('uploadForm') uploadForm: ElementRef;
 
   public fileRecords: Array<any> = [];
@@ -26,7 +27,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
 
   constructor(
       protected api: ApiService,
-      public readonly editorService: EditorService,
+      public editorService: EditorService,
       @Inject(APP_BASE_HREF) private baseHref: string
   ) { super(); }
 
@@ -76,6 +77,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
   }
 
   ngOnInit() {
+    this.editorService = this.editorService.getEditor(this.editorUUID);
     this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
 
     });

src/app/components/nodes/markdown/markdown.component.ts

@@ -11,6 +11,7 @@ import {v4} from 'uuid';
 export class MarkdownComponent extends EditorNodeContract implements OnInit {
     // @ViewChild('editable') editable;
     @Input() nodeId: string;
+    @Input() editorUUID?: string;
 
     // public isFocused = false;
     public initialValue = 'Click to edit...';
@@ -29,7 +30,7 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     };
 
     constructor(
-        public readonly editorService: EditorService,
+        public editorService: EditorService,
     ) {
         super();
         this.contents = this.initialValue;
@@ -37,6 +38,7 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     }
 
     ngOnInit() {
+        this.editorService = this.editorService.getEditor(this.editorUUID);
         this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
             if ( !this.node.Value ) {
                 this.node.Value = {};

src/app/components/nodes/norm/norm.component.ts

@@ -10,6 +10,7 @@ import {EditorService} from '../../../service/editor.service';
 export class NormComponent extends EditorNodeContract implements OnInit {
     @ViewChild('editable') editable;
     @Input() nodeId: string;
+    @Input() editorUUID?: string;
 
     public isFocused = false;
     public initialValue = 'Click to edit...';
@@ -19,7 +20,7 @@ export class NormComponent extends EditorNodeContract implements OnInit {
     protected hadOneFocusOut = false;
 
     constructor(
-        public readonly editorService: EditorService,
+        public editorService: EditorService,
     ) {
         super();
         this.contents = this.initialValue;
@@ -36,6 +37,7 @@ export class NormComponent extends EditorNodeContract implements OnInit {
     }
 
     ngOnInit() {
+        this.editorService = this.editorService.getEditor(this.editorUUID);
         this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
             if ( !this.node.Value ) {
                 this.node.Value = {};

src/app/pages/editor/editor.page.html

@@ -48,19 +48,19 @@
             </button>
           </div>
           <ng-container *ngIf="node.isNorm()">
-            <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
+            <editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-norm>
           </ng-container>
           <ng-container *ngIf="node.type === 'markdown'">
-            <editor-markdown style="flex: 1;" [nodeId]="node.UUID"></editor-markdown>
+            <editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-markdown>
           </ng-container>
           <ng-container *ngIf="node.type === 'database_ref'">
-            <editor-database style="flex: 1;" [nodeId]="node.UUID"></editor-database>
+            <editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-database>
           </ng-container>
           <ng-container *ngIf="node.type === 'code_ref'">
-            <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
+            <editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-code>
           </ng-container>
           <ng-container *ngIf="node.type === 'file_ref'">
-            <editor-files style="flex: 1;" [nodeId]="node.UUID"></editor-files>
+            <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-files>
           </ng-container>
         </div>
         <button class="host-add-button" (click)="onAddClick($event)">

src/app/pages/editor/editor.page.ts

@@ -7,7 +7,7 @@ import {HostOptionsComponent} from '../../components/editor/host-options/host-op
 import {EditorService} from '../../service/editor.service';
 import {NodeTypeIcons} from '../../structures/node-types';
 import {OptionMenuComponent} from '../../components/option-menu/option-menu.component';
-import {VersionModalComponent} from "../../components/version-modal/version-modal.component";
+import {VersionModalComponent} from '../../components/version-modal/version-modal.component';
 
 @Component({
   selector: 'app-editor',
@@ -30,6 +30,8 @@ export class EditorPage implements OnInit {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
     });
+
+    this.editorService = editorService.getEditor();
   }
 
   ngOnInit() {}

src/app/service/editor.service.ts

@@ -10,7 +10,7 @@ import {Page} from './db/Page';
 import {PageNode} from './db/PageNode';
 import {MenuItem} from './db/MenuItem';
 import {SessionService} from './session.service';
-import {debounce} from '../utility';
+import {debounce, uuid_v4} from '../utility';
 
 export class NoPageLoadedError extends Error {
     constructor(msg = 'There is no page open for editing.') {
@@ -22,6 +22,8 @@ export class NoPageLoadedError extends Error {
     providedIn: 'root'
 })
 export class EditorService {
+    private static instances: {[key: string]: EditorService} = {};
+
     protected currentPage?: PageRecord;
     protected currentNodes: HostRecord[] = [];
     protected nodeIdToEditorContract: { [key: string]: EditorNodeContract } = {};
@@ -31,6 +33,7 @@ export class EditorService {
     protected saving = false;
     protected saveTriggered = false;
     public notAvailable = false;
+    public readonly instanceUUID: string;
 
     protected privTriggerSave = debounce(() => {
         if ( this.saving ) {
@@ -42,6 +45,10 @@ export class EditorService {
         this.saveTriggered = false;
     }, 3000);
 
+    public static registerInstance(inst: EditorService) {
+        this.instances[inst.instanceUUID] = inst;
+    }
+
     public triggerSave() {
         this.saveTriggered = true;
         this.privTriggerSave();
@@ -87,7 +94,20 @@ export class EditorService {
         protected nav: NavigationService,
         protected db: DatabaseService,
         protected session: SessionService,
-    ) { }
+    ) {
+        this.instanceUUID = uuid_v4();
+        console.log('editor service', this);
+    }
+
+    getEditor(uuid?: string) {
+        if ( uuid ) {
+            return EditorService.instances[uuid];
+        }
+
+        const inst = new EditorService(this.api, this.nav, this.db, this.session);
+        EditorService.registerInstance(inst);
+        return inst;
+    }
 
     async startEditing(pageId: string) {
         if ( this.currentPage ) {