UI fixes

app/assets/javascripts/controllers/editor.ts

@@ -13,7 +13,8 @@ import {
   Uuids,
   ComponentArea,
   ComponentAction,
-  WebPrefKey
+  WebPrefKey,
+  ComponentMutator
 } from 'snjs';
 import find from 'lodash/find';
 import { isDesktopApplication } from '@/utils';
@@ -31,7 +32,6 @@ import {
   StringEmptyTrash
 } from '@/strings';
 import { RawPayload } from '@/../../../../snjs/dist/@types/protocol/payloads/generator';
-import { ComponentMutator } from '@/../../../../snjs/dist/@types/models';
 
 const NOTE_PREVIEW_CHAR_LIMIT = 80;
 const MINIMUM_STATUS_DURATION = 400;
@@ -74,7 +74,7 @@ type EditorState = {
   tagsComponent?: SNComponent
   componentStack?: SNComponent[]
   /** Fields that can be directly mutated by the template */
-  mutable: { }
+  mutable: {}
 }
 
 type EditorValues = {
@@ -244,22 +244,26 @@ class EditorCtrl extends PureCtrl {
         if (!currentNote) {
           return;
         }
-        if (currentNote.deleted) {
-          await this.setState({
-            note: null,
-            noteReady: false
-          });
-          return;
-        }
-        if (!isPayloadSourceRetrieved(source!)) {
-          return;
-        }
         const matchingNote = items.find((item) => {
           return item.uuid === currentNote.uuid;
         }) as SNNote;
         if (!matchingNote) {
           return;
         }
+        if (matchingNote?.deleted) {
+          await this.setState({
+            note: undefined,
+            noteReady: false
+          });
+          return;
+        } else {
+          await this.setState({
+            note: matchingNote
+          });
+        }
+        if (!isPayloadSourceRetrieved(source!)) {
+          return;
+        }
         this.editorValues.title = matchingNote.title;
         this.editorValues.text = matchingNote.text;
         this.reloadTagsString();
@@ -314,13 +318,15 @@ class EditorCtrl extends PureCtrl {
   }
 
   async handleNoteSelectionChange(note: SNNote, previousNote?: SNNote) {
-    this.setState({
+    await this.setState({
-      note: this.application.getAppState().getSelectedNote(),
+      note: note,
       showExtensions: false,
       showOptionsMenu: false,
       altKeyDown: false,
       noteStatus: null
     });
+    this.editorValues.title = note.title;
+    this.editorValues.text = note.text;
     if (!note) {
       this.setState({
         noteReady: false
@@ -480,7 +486,7 @@ class EditorCtrl extends PureCtrl {
       noteMutator.title = this.editorValues.title!;
       noteMutator.text = this.editorValues.text!;
       if (!dontUpdatePreviews) {
-        const text = note.text || '';
+        const text = this.editorValues.text || '';
         const truncate = text.length > NOTE_PREVIEW_CHAR_LIMIT;
         const substring = text.substring(0, NOTE_PREVIEW_CHAR_LIMIT);
         const previewPlain = substring + (truncate ? STRING_ELLIPSES : '');

app/assets/javascripts/controllers/notes/notes.ts

@@ -18,7 +18,6 @@ type NotesState = {
   tag?: SNTag
   notes?: SNNote[]
   renderedNotes?: SNNote[]
-  selectedNote?: SNNote
   sortBy?: string
   sortReverse?: boolean
   showArchived?: boolean
@@ -136,12 +135,16 @@ class NotesCtrl extends PureCtrl {
     }
   }
 
+  get selectedNote() {
+    return this.appState.getSelectedNote();
+  }
+
   /** @override */
   async onAppEvent(eventName: ApplicationEvent) {
     if (eventName === ApplicationEvent.SignedIn) {
       /** Delete dummy note if applicable */
-      if (this.getState().selectedNote && this.getState().selectedNote!.dummy) {
+      if (this.selectedNote && this.selectedNote!.dummy) {
-        this.application!.deleteItemLocally(this.getState().selectedNote!);
+        this.application!.deleteItemLocally(this.selectedNote!);
         await this.selectNote(undefined);
         await this.reloadNotes();
       }
@@ -193,7 +196,7 @@ class NotesCtrl extends PureCtrl {
       [ContentType.Note, ContentType.Tag],
       async (items) => {
         await this.reloadNotes();
-        const selectedNote = this.getState().selectedNote;
+        const selectedNote = this.selectedNote;
         if (selectedNote) {
           const discarded = selectedNote.deleted || selectedNote.trashed;
           if (discarded) {
@@ -229,7 +232,7 @@ class NotesCtrl extends PureCtrl {
     if (this.isFiltering()) {
       title = this.getState().noteFilter.text;
       isDummyNote = false;
-    } else if (this.getState().selectedNote && this.getState().selectedNote!.dummy) {
+    } else if (this.selectedNote && this.selectedNote!.dummy) {
       return;
     } else {
       title = `Note ${this.getState().notes!.length + 1}`;
@@ -255,8 +258,8 @@ class NotesCtrl extends PureCtrl {
   }
 
   async handleTagChange(tag: SNTag, previousTag?: SNTag) {
-    if (this.getState().selectedNote && this.getState().selectedNote!.dummy) {
+    if (this.selectedNote && this.selectedNote!.dummy) {
-      await this.application!.deleteItemLocally(this.getState().selectedNote!);
+      await this.application!.deleteItemLocally(this.selectedNote!);
       await this.selectNote(undefined);
     }
     await this.setState({ tag: tag });
@@ -277,8 +280,8 @@ class NotesCtrl extends PureCtrl {
       if (!tag.isSmartTag() || tag.isAllTag) {
         this.createPlaceholderNote();
       } else if (
-        this.getState().selectedNote &&
+        this.selectedNote &&
-        !this.getState().notes!.includes(this.getState().selectedNote!)
+        !this.getState().notes!.includes(this.selectedNote!)
       ) {
         this.selectNote(undefined);
       }
@@ -344,7 +347,7 @@ class NotesCtrl extends PureCtrl {
   }
 
   async handleNoteSelection(note: SNNote) {
-    const previousNote = this.getState().selectedNote;
+    const previousNote = this.selectedNote;
     if (previousNote === note) {
       return;
     }
@@ -352,9 +355,6 @@ class NotesCtrl extends PureCtrl {
       await this.application!.deleteItemLocally(previousNote);
       this.removeNoteFromList(previousNote);
     }
-    await this.setState({
-      selectedNote: note
-    });
     if (!note) {
       return;
     }
@@ -584,7 +584,7 @@ class NotesCtrl extends PureCtrl {
   selectNextNote() {
     const displayableNotes = this.displayableNotes();
     const currentIndex = displayableNotes.findIndex((candidate) => {
-      return candidate.uuid === this.getState().selectedNote!.uuid
+      return candidate.uuid === this.selectedNote!.uuid
     });
     if (currentIndex + 1 < displayableNotes.length) {
       this.selectNote(displayableNotes[currentIndex + 1]);
@@ -604,7 +604,7 @@ class NotesCtrl extends PureCtrl {
 
   selectPreviousNote() {
     const displayableNotes = this.displayableNotes();
-    const currentIndex = displayableNotes.indexOf(this.getState().selectedNote!);
+    const currentIndex = displayableNotes.indexOf(this.selectedNote!);
     if (currentIndex - 1 >= 0) {
       this.selectNote(displayableNotes[currentIndex - 1]);
       return true;

app/assets/javascripts/directives/functional/selectOnClick.ts

@@ -3,9 +3,9 @@ export function selectOnClick($window: ng.IWindowService) {
   return {
     restrict: 'A',
     link: function(scope: ng.IScope, element: JQLite) {
-      element.on('focus', function() {
+      element.on('focus', () => {
         if (!$window.getSelection()!.toString()) {
-          const input = element as any;
+          const input = element[0] as HTMLInputElement;
           /** Required for mobile Safari */
           input.setSelectionRange(0, input.value.length);
         }

app/assets/javascripts/services/state.ts

@@ -190,7 +190,7 @@ export class AppState {
   /** Returns the tags that are referncing this note */
   getNoteTags(note: SNNote) {
     return this.application.referencingForItem(note).filter((ref) => {
-      return ref.content_type === note.content_type;
+      return ref.content_type === ContentType.Tag;
     }) as SNTag[]
   }
 

app/assets/templates/directives/editor-menu.pug

@@ -19,10 +19,10 @@
         label='editor.name', 
         )
         .sk-menu-panel-column(
-          ng-if='editor.content.conflict_of'
+          ng-if='editor.conflictOf'
           )
           .info(
-            ng-if='editor.content.conflict_of'
+            ng-if='editor.conflictOf'
             ) Conflicted copy
       a.no-decoration(
         href='https://standardnotes.org/extensions', 

app/assets/templates/editor.pug

@@ -81,7 +81,7 @@
                 action='self.selectedMenuItem(true); self.toggleProtectNote()', 
                 desc=`'Protecting a note will require credentials to view 
                       it (Manage Privileges via Account menu)'`, 
-                label="self.state.note.content.protected ? 'Unprotect' : 'Protect'"
+                label="self.state.note.protected ? 'Unprotect' : 'Protect'"
                 )
               menu-row(
                 action='self.selectedMenuItem(true); self.toggleNotePreview()', 
@@ -94,22 +94,22 @@
                 action='self.selectedMenuItem(); self.deleteNote()', 
                 desc="'Send this note to the trash'", 
                 label="'Move to Trash'", 
-                ng-show='!self.state.altKeyDown && !self.state.note.content.trashed && !self.state.note.errorDecrypting', 
+                ng-show='!self.state.altKeyDown && !self.state.note.trashed && !self.state.note.errorDecrypting', 
                 stylekit-class="'warning'"
                 )
               menu-row(
                 action='self.selectedMenuItem(); self.deleteNotePermanantely()', 
                 desc="'Delete this note permanently from all your devices'", 
                 label="'Delete Permanently'", 
-                ng-show='!self.state.note.content.trashed && self.state.note.errorDecrypting', 
+                ng-show='!self.state.note.trashed && self.state.note.errorDecrypting', 
                 stylekit-class="'danger'"
                 )
-            div(ng-if='self.state.note.content.trashed || self.state.altKeyDown')
+            div(ng-if='self.state.note.trashed || self.state.altKeyDown')
               menu-row(
                 action='self.selectedMenuItem(true); self.restoreTrashedNote()', 
                 desc="'Undelete this note and restore it back into your notes'", 
                 label="'Restore'", 
-                ng-show='self.state.note.content.trashed', 
+                ng-show='self.state.note.trashed', 
                 stylekit-class="'info'"
                 )
               menu-row(
@@ -122,7 +122,7 @@
                 action='self.selectedMenuItem(true); self.emptyTrash()',
                 desc="'Permanently delete all notes in the trash'", 
                 label="'Empty Trash'", 
-                ng-show='self.state.note.content.trashed || !self.state.altKeyDown', 
+                ng-show='self.state.note.trashed || !self.state.altKeyDown', 
                 stylekit-class="'danger'", 
                 subtitle="self.getTrashCount() + ' notes in trash'"
                 )

app/assets/templates/notes.pug

@@ -109,7 +109,7 @@
         )
         .note(
           ng-repeat='note in self.state.renderedNotes track by note.uuid'
-          ng-class="{'selected' : self.state.selectedNote == note}"
+          ng-class="{'selected' : self.selectedNote == note}"
           ng-click='self.selectNote(note, true)'
         )
           .note-flags(ng-show='self.noteFlags[note.uuid].length > 0')
@@ -124,14 +124,14 @@
               !note.protected`
             )
             .html-preview(
-              ng-bind-html='note.content.preview_html',
+              ng-bind-html='note.preview_html',
-              ng-show='note.content.preview_html'
+              ng-show='note.preview_html'
               )
             .plain-preview(
-              ng-show='!note.content.preview_html && note.content.preview_plain'
+              ng-show='!note.preview_html && note.preview_plain'
-              ) {{note.content.preview_plain}}
+              ) {{note.preview_plain}}
             .default-preview(
-              ng-show='!note.content.preview_html && !note.content.preview_plain'
+              ng-show='!note.preview_html && !note.preview_plain'
               ) {{note.text}}
           .date.faded(ng-show='!self.state.hideDate')
             span(ng-show="self.state.sortBy == 'client_updated_at'")

app/assets/templates/tags.pug

@@ -18,7 +18,7 @@
     .scrollable
       .infinite-scroll
         .tag(
-          ng-class="{'selected' : self.state.selectedTag == tag, 'faded' : !tag.content.isAllTag}", 
+          ng-class="{'selected' : self.state.selectedTag == tag, 'faded' : !tag.isAllTag}", 
           ng-click='self.selectTag(tag)', 
           ng-repeat='tag in self.state.smartTags track by tag.uuid'
           )
@@ -26,9 +26,9 @@
             input.title(
               ng-disabled='true', 
               ng-change='self.onTagTitleChange(tag)'
-              ng-model='self.titles[tag.uuid]'
+              ng-model='tag.title'
               )
-            .count(ng-show='tag.content.isAllTag') {{self.state.noteCounts[tag.uuid]}}
+            .count(ng-show='tag.isAllTag') {{self.state.noteCounts[tag.uuid]}}
         .tags-title-section.section-title-bar
           .section-title-bar-header
             .sk-h3.title
@@ -53,7 +53,7 @@
               spellcheck='false'
               )
             .count {{self.state.noteCounts[tag.uuid]}}
-          .danger.small-text.bold(ng-show='tag.content.conflict_of') Conflicted Copy
+          .danger.small-text.bold(ng-show='tag.conflictOf') Conflicted Copy
           .danger.small-text.bold(ng-show='tag.errorDecrypting && !tag.waitingForKey') Missing Keys
           .info.small-text.bold(ng-show='tag.errorDecrypting && tag.waitingForKey') Waiting For Keys
           .menu(ng-show='self.state.selectedTag == tag')