Merge pull request #22 from nextcloud/simplemde

Switch editor from mdedit to simplemde

css/notes.css

@@ -103,28 +103,35 @@
 }
 
 /* special styling to make editor subtle and fit the window */
-#app-content pre {
-    display: block;
+.CodeMirror {
+    position: relative;
     min-height: 100%;
-    width: 100%;
     max-width: 47em;
     margin: 0 0 -50px;
-    padding: 30px 20px 90px 30px;
+    padding: 30px 0 90px;
+    border: none;
     font-size: 16px;
-    line-height: 170%;
-    background: none;
-    resize: none;
-    box-sizing: border-box;
-    font-family: inherit;
+    line-height: 1.5em;
+}
+
+.CodeMirror-scroll {
+    overflow-x: auto !important;
+}
+
+/* enable clickthrough for links */
+.CodeMirror-cursor {
+    pointer-events: none;
 }
 
 #app-content .note-meta {
+    position: relative;
     padding: 0 45px 30px 45px;
     margin: -10px 0 0;
     opacity: .2;
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
+    z-index: 5;
 }
 
 #app-content .saving {
@@ -137,74 +144,71 @@
 
 /* markdown styling */
 
-.mdedit .heading {
+.CodeMirror .CodeMirror-code .cm-header {
     /* break from core in using semibold, otherwise not emphasized in texts */
 	font-weight: 600;
 }
-.mdedit .heading.heading-1 {
+.CodeMirror .CodeMirror-code .cm-header-1 {
     font-size: 40px;
     margin: 50px 0 20px;
     line-height: 120%;
 }
-.mdedit .heading.heading-2 {
+.CodeMirror .CodeMirror-code .cm-header-2 {
 	font-size: 20px;
     margin-top: 12px;
     line-height: 150%;
 }
-.mdedit .heading.heading-3,
-.mdedit .heading.heading-4,
-.mdedit .heading.heading-5,
-.mdedit .heading.heading-6 {
+.CodeMirror .CodeMirror-code .cm-header-3,
+.CodeMirror .CodeMirror-code .cm-header-4,
+.CodeMirror .CodeMirror-code .cm-header-5,
+.CodeMirror .CodeMirror-code .cm-header-6 {
 	font-size: 16px;
     margin: 0;
     font-weight: 300;
 }
-.mdedit .heading.heading-3 {
+.CodeMirror .CodeMirror-code .cm-header-3 {
     font-weight: 600;
 }
 
-.mdedit .hr {
+.CodeMirror .CodeMirror-code .cm-hr {
     position: relative;
     display: inline-block;
     width: 100%;
-    margin: .5em 0;
 }
-.mdedit .hr-marker {
-    background-color: white;
-}
-.mdedit .hr-marker:last-child {
-    padding-right: 10px;
-}
-.mdedit .hr:before {
+
+.CodeMirror .CodeMirror-code .cm-hr:before {
     position: absolute;
     content: "";
     top: 50%;
     width: 100%;
     z-index: -1;
-    border-top: 1px solid rgba(120, 120, 120, 0.5);
+    border-top: 5px solid rgba(120, 120, 120, 0.2);
 }
 
 
 /* hanging punctuation */
-#app-content .mdedit {
+.CodeMirror .CodeMirror-code .CodeMirror-line {
     padding-left: 45px;
-    display: inline-block;
 }
-.mdedit > div > .token > .heading-hash,
-.mdedit > div > .token > .li > .list-item,
-.mdedit > div > .token > .quote-marker {
+
+.CodeMirror .CodeMirror-code .cm-formatting-header:not(:only-child),
+.CodeMirror .CodeMirror-code .cm-formatting-list,
+.CodeMirror .CodeMirror-code .cm-formatting-quote {
+    position: absolute;
+    display: inline-block;
     width: 90px;
+    margin-top: 0;
     margin-left: -90px;
-    display: inline-block;
     text-align: right;
     white-space: pre;
+    color: rgba(120, 120, 120, 0.5);
 }
 
 
 /* larger screen sizes */
 @media only screen and (min-width: 769px) {
     /* use slightly more space on the left so all # signs of h3–h6 show */
-    #app-content .mdedit,
+    .CodeMirror .CodeMirror-code .CodeMirror-line,
     #app-content .note-meta {
         padding-left: 90px;
     }

js/app/controllers/notecontroller.js

@@ -6,7 +6,7 @@
  */
 
 app.controller('NoteController', function($routeParams, $scope, NotesModel,
-                                          SaveQueue, note) {
+                                          SaveQueue, note, debounce) {
     'use strict';
 
     NotesModel.updateIfExists(note);
@@ -22,9 +22,9 @@ app.controller('NoteController', function($routeParams, $scope, NotesModel,
             t('notes', 'New note');
     };
 
-    $scope.save = function() {
+    $scope.save = debounce(function() {
         var note = $scope.note;
         SaveQueue.add(note);
-    };
+    }, 300);
 
 });

js/app/directives/editor.js

@@ -1,22 +1,40 @@
-/*global mdEdit*/
-app.directive('editor', ['$timeout', function ($timeout) {
+/*global SimpleMDE*/
+app.directive('editor', ['$timeout',
+                         'urlFinder',
+                         function ($timeout, urlFinder) {
 	'use strict';
 	return {
 		restrict: 'A',
 		link: function(scope, element) {
-			var editor = mdEdit(element[0], {change: function(value) {
-				$timeout(function(){
-					scope.$apply(function() {
-						scope.note.content = value;
+
+			var simplemde = new SimpleMDE({
+				element: element[0],
+				spellChecker: false,
+				autoDownloadFontAwesome: false,
+				toolbar: false,
+				status: false,
+				forceSync: true
+			});
+			var editorElement = $(simplemde.codemirror.getWrapperElement());
+
+			simplemde.value(scope.note.content);
+
+			simplemde.codemirror.on('change', function() {
+				$timeout(function() {
+					scope.$apply(function () {
+						scope.note.content = simplemde.value();
+						scope.save();
 						scope.updateTitle();
 					});
 				});
-			}});
-			editor.setValue(scope.note.content);
-			element.on('click', '.link', function(event) {
+			});
+
+			editorElement.on('click', '.cm-link, .cm-url', function(event) {
 				if(event.ctrlKey) {
-					var url = $(this).find('.link-params-inner').text();
-					window.open(url, '_blank');
+					var url = urlFinder(this);
+					if(angular.isDefined(url)) {
+						window.open(url, '_blank');
+					}
 				}
 			});
 		}

js/app/services/debounce.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2016, Hendrik Leppelsack
+ * This file is licensed under the Affero General Public License version 3 or
+ * later.
+ * See the COPYING file.
+ */
+
+app.factory('debounce', ['$timeout', function($timeout) {
+	'use strict';
+
+	return function debounce(func, delay) {
+		var timeout;
+
+		return function() {
+			var context = this, args = arguments;
+
+			if(timeout) {
+				$timeout.cancel(timeout);
+			}
+			timeout = $timeout(function() {
+				func.apply(context, args);
+			}, delay);
+		};
+	};
+}]);

js/app/services/urlFinder.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2016, Hendrik Leppelsack
+ * This file is licensed under the Affero General Public License version 3 or
+ * later.
+ * See the COPYING file.
+ */
+
+// finds the url which should be opened when a link is clicked
+// example: '[hello](http://example.com)'
+app.factory('urlFinder', [function() {
+	'use strict';
+
+	return function urlFinder(element) {
+		element = $(element);
+
+		// special case: click on ')'
+		if(element.is('.cm-url.cm-formatting')) {
+			if(element.prev().length !== 0) {
+				element = element.prev();
+			}
+		}
+
+		// skip '[hello]'
+		while(element.is('.cm-link')) {
+			element = element.next();
+		}
+
+		// skip '('
+		while(element.is('.cm-url.cm-formatting')) {
+			element = element.next();
+		}
+
+		// check if we actually have a cm-url
+		if(element.is('.cm-url:not(.cm-formatting)')) {
+			return element.text();
+		}
+
+		return undefined;
+	};
+}]);

js/bower.json

@@ -9,6 +9,6 @@
     "angular-mocks": "1.4.*",
     "angular-route": "1.4.*",
     "prism": "~1.0.1",
-    "mdEdit": "https://github.com/jbt/mdEdit.git#master"
+    "simplemde": "^1.11.2"
   }
 }

js/gulpfile.js

@@ -19,9 +19,9 @@ var sources = {
     config: ['karma.conf.js', 'gulpfile.js']
 };
 
-var wrappers = '(function(angular, $, requestToken, mdEdit, undefined){'+
+var wrappers = '(function(angular, $, requestToken, SimpleMDE, undefined){'+
     '\'use strict\';<%= contents %>' +
-    '})(angular, jQuery, oc_requesttoken, mdEdit);';
+    '})(angular, jQuery, oc_requesttoken, SimpleMDE);';
 
 
 /**

js/karma.conf.js

@@ -32,8 +32,7 @@ module.exports = function(config) {
         // list of files / patterns to load in the browser
         files: [
             'vendor/jquery/dist/jquery.js',
-            'vendor/prism/prism.js',
-            'vendor/mdEdit/mdedit.js',
+            'vendor/simplemde/dist/simplemde.min.js',
             'vendor/angular/angular.js',
             'vendor/underscore/underscore.js',
             'vendor/angular-route/angular-route.js',