HTML previews

app/assets/javascripts/app/app.js

@@ -2,7 +2,9 @@
 
 var SN = SN || {};
 
-angular.module('app', [])
+angular.module('app', [
+  'ngSanitize'
+])
 
 function getParameterByName(name, url) {
   name = name.replace(/[\[\]]/g, "\\$&");

app/assets/javascripts/app/controllers/editor.js

@@ -391,6 +391,12 @@ angular.module('app')
       this.changesMade({dontUpdateClientModified});
     }
 
+    this.toggleNotePreview = function() {
+      this.note.content.hidePreview = !this.note.content.hidePreview;
+      var dontUpdateClientModified = true;
+      this.changesMade({dontUpdateClientModified});
+    }
+
     this.toggleArchiveNote = function() {
       this.note.setAppDataItem("archived", !this.note.archived);
       this.changesMade({bypassDebouncer: true});

app/assets/stylesheets/app/_notes.scss

@@ -135,12 +135,25 @@
       margin-top: 1px;
       overflow: hidden;
       text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1; /* number of lines to show */
-      $line-height: 18px;
-      line-height: $line-height;        /* fallback */
-      max-height: calc(#{$line-height} * 1);       /* fallback */
+
+      .default-preview {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1; /* number of lines to show */
+        $line-height: 18px;
+        line-height: $line-height;        /* fallback */
+        max-height: calc(#{$line-height} * 1);       /* fallback */
+      }
+
+      .html-preview {
+        margin-top: 4px;
+      }
+    }
+
+    .preview-hidden {
+      font-size: 14px;
+      margin-top: 2px;
+      opacity: 0.6;
     }
 
     &.selected {

app/assets/templates/editor.html.haml

@@ -34,6 +34,7 @@
               %menu-row{"label" => "ctrl.note.pinned ? 'Unpin' : 'Pin'", "action" => "ctrl.selectedMenuItem(true); ctrl.togglePin()", "desc" => "'Pin or unpin a note from the top of your list'"}
               %menu-row{"label" => "ctrl.note.archived ? 'Unarchive' : 'Archive'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleArchiveNote()", "desc" => "'Archive or unarchive a note from your Archived system tag'"}
               %menu-row{"label" => "ctrl.note.locked ? 'Unlock' : 'Lock'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleLockNote()", "desc" => "'Locking notes prevents unintentional editing'"}
+              %menu-row{"label" => "ctrl.note.content.hidePreview ? 'Unhide Preview' : 'Hide Preview'", "action" => "ctrl.selectedMenuItem(true); ctrl.toggleNotePreview()", "desc" => "'Hide or unhide the note preview from the list of notes'"}
               %menu-row{"label" => "'Delete'", "action" => "ctrl.selectedMenuItem(); ctrl.deleteNote()", "desc" => "'Delete this note permanently from all your devices'"}
 
             .section

app/assets/templates/notes.html.haml

@@ -61,8 +61,15 @@
 
           .name{"ng-if" => "note.title"}
             {{note.title}}
-          .note-preview{"ng-if" => "!ctrl.hideNotePreview"}
-            {{note.text}}
+
+          .note-preview{"ng-if" => "!ctrl.hideNotePreview && !note.content.hidePreview"}
+            .html-preview{"ng-if" => "note.content.preview_html", "ng-bind-html" => "note.content.preview_html"}
+            .plain-preview{"ng-if" => "!note.content.preview_html && note.content.preview_plain"} {{note.content.preview_plain}}
+            .default-preview{"ng-if" => "!note.content.preview_html && !note.content.preview_plain"} {{note.text}}
+
+          .preview-hidden{"ng-if" => "note.content.hidePreview && !ctrl.hideNotePreview"}
+            %i Preview hidden
+
           .date.faded{"ng-if" => "!ctrl.hideDate"}
             %span{"ng-if" => "ctrl.sortBy == 'client_updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
             %span{"ng-if" => "ctrl.sortBy != 'client_updated_at'"} {{note.createdAtString() || 'Now'}}