refactor: rename note controller to note view controller

app/assets/javascripts/views/application/application-view.pug

@@ -10,7 +10,7 @@
       application='self.application'
       app-state='self.appState'
     )
-    editor-group-view.flex-grow(application='self.application')
+    note-group-view.flex-grow(application='self.application')
 
   footer-view(
     ng-if='!self.state.needsUnlock && self.state.launched'

app/assets/javascripts/views/index.ts

@@ -1,8 +1,8 @@
 export { PureViewCtrl } from './abstract/pure_view_ctrl';
 export { ApplicationGroupView } from './application_group/application_group_view';
 export { ApplicationView } from './application/application_view';
-export { EditorGroupView } from './editor_group/editor_group_view';
-export { EditorView } from './editor/editor_view';
+export { NoteGroupViewDirective } from './note_group_view/note_group_view';
+export { NoteViewDirective } from './note_view/note_view';
 export { FooterView } from './footer/footer_view';
 export { TagsView } from './tags/tags_view';
 export { ChallengeModal } from './challenge_modal/challenge_modal';

app/assets/javascripts/views/note_group_view/note-group-view.pug

@@ -8,7 +8,7 @@
     ng-if='!self.state.showMultipleSelectedNotes'
     ng-repeat='controller in self.controllers'
   )
-    editor-view(
+    note-view(
       application='self.application'
       controller='controller'
     )

app/assets/javascripts/views/note_group_view/note_group_controller.ts

@@ -0,0 +1,84 @@
+import { removeFromArray, UuidString } from '@standardnotes/snjs';
+import { NoteViewController } from '@/views/note_view/note_view_controller';
+import { WebApplication } from '@/ui_models/application';
+
+type NoteControllerGroupChangeCallback = () => void;
+
+export class NoteGroupController {
+  public noteControllers: NoteViewController[] = [];
+  private application: WebApplication;
+  changeObservers: NoteControllerGroupChangeCallback[] = [];
+
+  constructor(application: WebApplication) {
+    this.application = application;
+  }
+
+  public deinit() {
+    (this.application as unknown) = undefined;
+    for (const controller of this.noteControllers) {
+      this.deleteNoteView(controller);
+    }
+  }
+
+  async createNoteView(
+    noteUuid?: string,
+    noteTitle?: string,
+    noteTag?: UuidString
+  ) {
+    const controller = new NoteViewController(
+      this.application,
+      noteUuid,
+      noteTitle,
+      noteTag
+    );
+    await controller.initialize();
+    this.noteControllers.push(controller);
+    this.notifyObservers();
+  }
+
+  deleteNoteView(controller: NoteViewController) {
+    controller.deinit();
+    removeFromArray(this.noteControllers, controller);
+  }
+
+  closeNoteView(controller: NoteViewController) {
+    this.deleteNoteView(controller);
+    this.notifyObservers();
+  }
+
+  closeActiveNoteView() {
+    const activeController = this.activeNoteViewController;
+    if (activeController) {
+      this.deleteNoteView(activeController);
+    }
+  }
+
+  closeAllNoteViews() {
+    for (const controller of this.noteControllers) {
+      this.deleteNoteView(controller);
+    }
+  }
+
+  get activeNoteViewController() {
+    return this.noteControllers[0];
+  }
+
+  /**
+   * Notifies observer when the active controller has changed.
+   */
+  public addChangeObserver(callback: NoteControllerGroupChangeCallback) {
+    this.changeObservers.push(callback);
+    if (this.activeNoteViewController) {
+      callback();
+    }
+    return () => {
+      removeFromArray(this.changeObservers, callback);
+    };
+  }
+
+  private notifyObservers() {
+    for (const observer of this.changeObservers) {
+      observer();
+    }
+  }
+}

app/assets/javascripts/views/note_group_view/note_group_view.ts

@@ -1,15 +1,15 @@
 import { WebDirective } from './../../types';
-import template from './editor-group-view.pug';
-import { NoteController } from '@/ui_models/note_controller';
+import template from './note-group-view.pug';
+import { NoteViewController } from '@/views/note_view/note_view_controller';
 import { PureViewCtrl } from '../abstract/pure_view_ctrl';
 
-class EditorGroupViewCtrl extends PureViewCtrl<
+class NoteGroupView extends PureViewCtrl<
   unknown,
   {
     showMultipleSelectedNotes: boolean;
   }
 > {
-  public controllers: NoteController[] = [];
+  public controllers: NoteViewController[] = [];
 
   /* @ngInject */
   constructor($timeout: ng.ITimeoutService) {
@@ -31,11 +31,11 @@ class EditorGroupViewCtrl extends PureViewCtrl<
   }
 }
 
-export class EditorGroupView extends WebDirective {
+export class NoteGroupViewDirective extends WebDirective {
   constructor() {
     super();
     this.template = template;
-    this.controller = EditorGroupViewCtrl;
+    this.controller = NoteGroupView;
     this.controllerAs = 'self';
     this.bindToController = true;
     this.scope = {

app/assets/javascripts/views/note_view/note_view.test.ts

@@ -2,19 +2,19 @@
  * @jest-environment jsdom
  */
 
-import { EditorViewCtrl } from '@Views/editor/editor_view';
+import { NoteView } from '@Views/note_view/note_view';
 import {
   ApplicationEvent,
   ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
 } from '@standardnotes/snjs/';
 
 describe('editor-view', () => {
-  let ctrl: EditorViewCtrl;
+  let ctrl: NoteView;
   let setShowProtectedWarningSpy: jest.SpyInstance;
 
   beforeEach(() => {
     const $timeout = {} as jest.Mocked<ng.ITimeoutService>;
-    ctrl = new EditorViewCtrl($timeout);
+    ctrl = new NoteView($timeout);
 
     setShowProtectedWarningSpy = jest.spyOn(ctrl, 'setShowProtectedOverlay');
 

app/assets/javascripts/views/note_view/note_view.ts

@@ -1,5 +1,5 @@
 import { STRING_SAVING_WHILE_DOCUMENT_HIDDEN } from './../../strings';
-import { NoteController } from '@/ui_models/note_controller';
+import { NoteViewController } from '@/views/note_view/note_view_controller';
 import { WebApplication } from '@/ui_models/application';
 import { PanelPuppet, WebDirective } from '@/types';
 import angular from 'angular';
@@ -23,7 +23,7 @@ import {
 } from '@standardnotes/snjs';
 import { debounce, isDesktopApplication } from '@/utils';
 import { KeyboardModifier, KeyboardKey } from '@/services/ioService';
-import template from './editor-view.pug';
+import template from './note-view.pug';
 import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
 import { EventSource } from '@/ui_models/app_state';
 import {
@@ -90,10 +90,10 @@ function sortAlphabetically(array: SNComponent[]): SNComponent[] {
   );
 }
 
-export class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
+export class NoteView extends PureViewCtrl<unknown, EditorState> {
   /** Passed through template */
   readonly application!: WebApplication;
-  readonly controller!: NoteController;
+  readonly controller!: NoteViewController;
 
   private leftPanelPuppet?: PanelPuppet;
   private rightPanelPuppet?: PanelPuppet;
@@ -1039,7 +1039,7 @@ export class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 }
 
-export class EditorView extends WebDirective {
+export class NoteViewDirective extends WebDirective {
   constructor() {
     super();
     this.restrict = 'E';
@@ -1049,7 +1049,7 @@ export class EditorView extends WebDirective {
     };
     this.template = template;
     this.replace = true;
-    this.controller = EditorViewCtrl;
+    this.controller = NoteView;
     this.controllerAs = 'self';
     this.bindToController = true;
   }

app/assets/javascripts/views/note_view/note_view_controller.ts

@@ -0,0 +1,95 @@
+import {
+  SNNote,
+  ContentType,
+  PayloadSource,
+  UuidString,
+  SNTag,
+} from '@standardnotes/snjs';
+import { WebApplication } from '@/ui_models/application';
+
+export class NoteViewController {
+  public note!: SNNote;
+  private application: WebApplication;
+  private onNoteValueChange?: (note: SNNote, source: PayloadSource) => void;
+  private removeStreamObserver?: () => void;
+  public isTemplateNote = false;
+
+  constructor(
+    application: WebApplication,
+    noteUuid: string | undefined,
+    private defaultTitle: string | undefined,
+    private defaultTag: UuidString | undefined
+  ) {
+    this.application = application;
+    if (noteUuid) {
+      this.note = application.findItem(noteUuid) as SNNote;
+    }
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.note) {
+      const note = (await this.application.createTemplateItem(
+        ContentType.Note,
+        {
+          text: '',
+          title: this.defaultTitle,
+          references: [],
+        }
+      )) as SNNote;
+      if (this.defaultTag) {
+        const tag = this.application.findItem(this.defaultTag) as SNTag;
+        await this.application.addTagHierarchyToNote(note, tag);
+      }
+      this.isTemplateNote = true;
+      this.note = note;
+      this.onNoteValueChange?.(this.note, this.note.payload.source);
+    }
+    this.streamItems();
+  }
+
+  private streamItems() {
+    this.removeStreamObserver = this.application.streamItems(
+      ContentType.Note,
+      (items, source) => {
+        this.handleNoteStream(items as SNNote[], source);
+      }
+    );
+  }
+
+  deinit() {
+    this.removeStreamObserver?.();
+    (this.removeStreamObserver as unknown) = undefined;
+    (this.application as unknown) = undefined;
+    this.onNoteValueChange = undefined;
+  }
+
+  private handleNoteStream(notes: SNNote[], source: PayloadSource) {
+    /** Update our note object reference whenever it changes */
+    const matchingNote = notes.find((item) => {
+      return item.uuid === this.note.uuid;
+    }) as SNNote;
+    if (matchingNote) {
+      this.isTemplateNote = false;
+      this.note = matchingNote;
+      this.onNoteValueChange?.(matchingNote, source);
+    }
+  }
+
+  insertTemplatedNote() {
+    this.isTemplateNote = false;
+    return this.application.insertItem(this.note);
+  }
+
+  /**
+   * Register to be notified when the controller's note's inner values change
+   * (and thus a new object reference is created)
+   */
+  public setOnNoteInnerValueChange(
+    callback: (note: SNNote, source: PayloadSource) => void
+  ) {
+    this.onNoteValueChange = callback;
+    if (this.note) {
+      this.onNoteValueChange(this.note, this.note.payload.source);
+    }
+  }
+}