AngularJS Markdown Notes App

angularjs-markdown-notes-app.markdown

AngularJS Markdown Notes App

I use notes apps like Google Keep and Apple Notes all the time, but I wish I could use Markdown in them, so I built this.

Issues/Todo: If anyone has an elegant way of links in the contenteditable div being clickable I'd love to hear it. Tried this method but doesn't provide a great user experience.

A Pen by Nick Moreton on CodePen.

License.

index.html

<h1 class="header">AngularJS Markdown Notes</h1>
<div ng-app="notesApp" class="app">
  <div ng-controller="notesController">
  
    <span class="icons">
    <i class="fa fa-plus-circle fa-2x" ng-click="addNote()"></i>
      </span>
    <div class="note" ng-repeat="note in notes | orderBy:'createdOn':true track by $index">
      <span class="date">{{note.createdOn | date:"EEEE dd MMMM, yyyy 'at' h:mma"}}</span>
      <span class="icons">
      <i class="fa fa-check fa-lg" ng-if="note.edit == false"></i>
      <i class="fa fa-pencil fa-lg" ng-if="note.edit == true"></i>
      <i class="fa fa-trash-o fa-lg" ng-click="delete(notes.length - $index - 1)"></i></span>
      
      <div class="markdown-body" ng-model="note.text" ng-change="update(notes.length - $index - 1,note.text)" ng-focus="note.edit = true" ng-blur="note.edit = false" markdown-editable contenteditable="true">{{ note.text }}</div>
    </div>
  </div>
</div>

script.js

(function(){

  var app = angular.module('notesApp',['angular-markdown-editable']);
  
  app.controller('notesController', function($scope){
    
    // Initial Data
  	$scope.notes = [{
      createdOn:1428237500771,
      edit:false,
      text:"#Hello, World!\n\nThis is your first Angular Markdown note. You can:\n\n* Click/Focus to edit\n\n* Click off/Blur to save\n\n* Add a new note  by clicking the plus sign above.\n\n* Delete this note\n\nMarkdown compiled using the fantastic [angular-markdown-editable](http://projects.quiver.is/angular-markdown-editable/) directive."
    }];
    
    // Add New Note
    $scope.addNote = function(){
      $scope.newNote = {};
      $scope.newNote.createdOn = Date.now();
      $scope.newNote.text = ' ';
      $scope.newNote.edit = true;
      $scope.notes.push($scope.newNote);
      $scope.newNote = {};
    };
    
    // Delete Note
    $scope.delete = function (i) {
      var r = confirm("Are you sure you want to delete this note?");
      if (r == true) 
        $scope.notes.splice(i, 1);
		};
    
    // Update Note
    $scope.update = function(i, note) {
      $scope.notes[i].text = note;
      $scope.notes[i].edit = false;
    };
  
  // End Controller
  });
  
// End Function  
})();

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/110131/angular-markdown-editable.js"></script>

style.less

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);

* {
  box-sizing:border-box;
}

body {
  max-width:580px;
  margin:auto;
  padding:10px;
  position:relative;
  background: #fdfdfd;
}

img {
  max-width:100%;
  height:auto;
}

div[contenteditable] {
  font-size:1.2em;
  font-family: 'Source Sans Pro', sans-serif;
  border:none;
  box-shadow:none;
  margin:0;
  width:100%;
  padding:10px 20px 10px;
  min-height:300px;
  background:#f9f9f9;
  
  pre, code {
    background:#ededed;
  }
}

div[contenteditable]:focus{
 font-family: 'Source Code Pro', courier, monospace;
  font-size:1em;
}

.header {
  margin:5px 10px 0;
  color:#d46e58;
  display:inline-block;
}

.note {
  background: #eee;
  box-shadow:#999 1px 1px 3px;
  margin:30px 0;
  padding-top:40px;
  min-height:200px;
  width:100%;
  display:block;
  position:relative;
  overflow:hidden;
}

.date {
  position:absolute;
  top:0;
  left:0;
  padding:15px;
  font-size:0.7em;
  font-style: italic;
  color:#71CBD0;
}

.icons {
  position:absolute;
  right:0;
  top:0;
  padding:10px;
}

.fa-trash-o, .fa-plus-circle {
  cursor:pointer;
}

.fa-check {
  color:#92D788;
}

.fa-trash-o {
  color:#C2474B;
  
  &:hover {
    color:darken(#C2474B,20);
  }
}

.fa-pencil {
  color:#DBC394;
}

.fa-plus-circle {
  color:#71CBD0;
  
  &:hover {
    color:darken(#71CBD0,20);
  }
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/githubmd.css" rel="stylesheet" />