Use medium-editor to rich editor... And some css fixes..

css/style.css

@@ -30,6 +30,15 @@
    box-shadow: 0px 0px 6px #808080;
 }
 
+.quicknote ul {
+    list-style: initial;
+    margin-left: 20px;
+}
+
+.quicknote ol {
+    margin-left: 20px;
+}
+
 .note-active {
   z-index: 10;
   height: 100%;
@@ -37,7 +46,7 @@
 }
 
 .note-active #content-editable {
-    margin-bottom: 60px;
+/*    margin-bottom: 60px;*/
 }
 
 .save-button #unshare-button {
@@ -86,7 +95,7 @@
 }
 
 .note-toolbar {
-   float:left;
+   /*float:left;*/
    padding-bottom: 3px;
 }
 
@@ -121,7 +130,7 @@
 
 .modal-note-background {
     position: fixed; /* Stay in place */
-    z-index: 10000; /* Sit on top */
+    z-index: 200; /* Sit on top */
     padding-top: 100px; /* Location of the box */
     left: 0;
     top: 0;
@@ -147,7 +156,7 @@
 }
 
 .note-options {
-    position: absolute;
+/*    position: absolute;*/
     bottom: 0;
     padding: 5px;
 }

js/script.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Matias De lellis <mati86dl@gmail.com>
- * @copyright Matias De lellis 2016
+ * @copyright Matias De lellis 2016-2017
  */
 
 (function (OC, window, $, undefined) {
@@ -242,6 +242,37 @@ View.prototype = {
         modalcontent.html(content);
         modalnote.css("background-color", color);
 
+        var autolist = new AutoList();
+        var editor = new MediumEditor(modalcontent, {
+            toolbar: {
+                buttons: [
+                    'bold',
+                    'italic',
+                    {
+                        name: 'h1',
+                        action: 'append-h2',
+                        aria: 'header type 1',
+                        tagNames: ['h2'],
+                        contentDefault: '<h2>H</h2>',
+                        attrs: {
+                            'data-custom-attr': 'attr-value-h1'
+                        }
+                    },
+                    'justifyLeft', 'justifyCenter', 'justifyRight',
+                    'unorderedlist','orderedlist',
+                    'quote'
+               ]
+            },
+            autoLink: true,
+            paste: {
+                forcePlainText: false,
+                cleanPastedHTML: false
+            },
+            extensions: {
+                'autolist': autolist
+            }
+        });
+
         /* Positioning the modal to the original size */
         $(".modal-content").css({
             "position" : "absolute",

templates/main.php

@@ -1,6 +1,12 @@
 <?php
 vendor_script('quicknotes', 'handlebars');
 vendor_script('quicknotes', 'isotope.pkgd');
+vendor_script('core', 'select2/select2');
+vendor_style('core', 'select2/select2');
+vendor_script('quicknotes', 'medium-editor');
+vendor_style('quicknotes', 'medium-editor');
+vendor_style('quicknotes', 'beagle');
+vendor_script('quicknotes', 'autolist');
 script('quicknotes', 'script');
 style('quicknotes', 'style');
 ?>