Merge pull request #84 from ssddanbrown/markdown_editor

Initial implementation of a markdown editor. Closes #57.
BookStackApp · Mar 29, 2016 · e7d8a04 · e7d8a04
2 parents ef87471 + dc29788
commit e7d8a04
Show file tree

Hide file tree

Showing 21 changed files with 391 additions and 35 deletions.
diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
@@ -164,6 +164,7 @@ public function edit($bookSlug, $pageSlug)
             $draft = $this->pageRepo->getUserPageDraft($page, $this->currentUser->id);
             $page->name = $draft->name;
             $page->html = $draft->html;
+            $page->markdown = $draft->markdown;
             $page->isDraft = true;
             $warnings [] = $this->pageRepo->getUserPageDraftMessage($draft);
         }
@@ -204,9 +205,9 @@ public function saveDraft(Request $request, $pageId)
         $page = $this->pageRepo->getById($pageId, true);
         $this->checkOwnablePermission('page-update', $page);
         if ($page->draft) {
-            $draft = $this->pageRepo->updateDraftPage($page, $request->only(['name', 'html']));
+            $draft = $this->pageRepo->updateDraftPage($page, $request->only(['name', 'html', 'markdown']));
         } else {
-            $draft = $this->pageRepo->saveUpdateDraft($page, $request->only(['name', 'html']));
+            $draft = $this->pageRepo->saveUpdateDraft($page, $request->only(['name', 'html', 'markdown']));
         }
         $updateTime = $draft->updated_at->format('H:i');
         return response()->json(['status' => 'success', 'message' => 'Draft saved at ' . $updateTime]);

diff --git a/app/Page.php b/app/Page.php
@@ -6,7 +6,7 @@
 
 class Page extends Entity
 {
-    protected $fillable = ['name', 'html', 'priority'];
+    protected $fillable = ['name', 'html', 'priority', 'markdown'];
 
     protected $simpleAttributes = ['name', 'id', 'slug'];
 

diff --git a/app/PageRevision.php b/app/PageRevision.php
@@ -4,7 +4,7 @@
 
 class PageRevision extends Model
 {
-    protected $fillable = ['name', 'html', 'text'];
+    protected $fillable = ['name', 'html', 'text', 'markdown'];
 
     /**
      * Get the user that created the page revision

diff --git a/app/Repos/PageRepo.php b/app/Repos/PageRepo.php
@@ -312,6 +312,7 @@ public function updatePage(Page $page, $book_id, $input)
         $page->fill($input);
         $page->html = $this->formatHtml($input['html']);
         $page->text = strip_tags($page->html);
+        if (setting('app-editor') !== 'markdown') $page->markdown = '';
         $page->updated_by = $userId;
         $page->save();
 
@@ -348,6 +349,7 @@ public function restoreRevision(Page $page, Book $book, $revisionId)
     public function saveRevision(Page $page)
     {
         $revision = $this->pageRevision->fill($page->toArray());
+        if (setting('app-editor') !== 'markdown') $revision->markdown = '';
         $revision->page_id = $page->id;
         $revision->slug = $page->slug;
         $revision->book_slug = $page->book->slug;
@@ -386,6 +388,8 @@ public function saveUpdateDraft(Page $page, $data = [])
         }
 
         $draft->fill($data);
+        if (setting('app-editor') !== 'markdown') $draft->markdown = '';
+
         $draft->save();
         return $draft;
     }

diff --git a/app/Services/SettingService.php b/app/Services/SettingService.php
@@ -44,28 +44,39 @@ public function get($key, $default = false)
 
     /**
      * Gets a setting value from the cache or database.
+     * Looks at the system defaults if not cached or in database.
      * @param $key
      * @param $default
      * @return mixed
      */
     protected function getValueFromStore($key, $default)
     {
+        // Check for an overriding value
         $overrideValue = $this->getOverrideValue($key);
         if ($overrideValue !== null) return $overrideValue;
 
+        // Check the cache
         $cacheKey = $this->cachePrefix . $key;
         if ($this->cache->has($cacheKey)) {
             return $this->cache->get($cacheKey);
         }
 
+        // Check the database
         $settingObject = $this->getSettingObjectByKey($key);
-
         if ($settingObject !== null) {
             $value = $settingObject->value;
             $this->cache->forever($cacheKey, $value);
             return $value;
         }
 
+        // Check the defaults set in the app config.
+        $configPrefix = 'setting-defaults.' . $key;
+        if (config()->has($configPrefix)) {
+            $value = config($configPrefix);
+            $this->cache->forever($cacheKey, $value);
+            return $value;
+        }
+
         return $default;
     }
 

diff --git a/config/app.php b/config/app.php
@@ -5,6 +5,8 @@
 
     'env' => env('APP_ENV', 'production'),
 
+    'editor' => env('APP_EDITOR', 'html'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Debug Mode

diff --git a/config/setting-defaults.php b/config/setting-defaults.php
@@ -0,0 +1,10 @@
+<?php
+
+/**
+ * The defaults for the system settings that are saved in the database.
+ */
+return [
+
+    'app-editor' => 'wysiwyg'
+
+];
diff --git a/database/migrations/2016_03_25_123157_add_markdown_support.php b/database/migrations/2016_03_25_123157_add_markdown_support.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddMarkdownSupport extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('pages', function (Blueprint $table) {
+            $table->longText('markdown')->default('');
+        });
+
+        Schema::table('page_revisions', function (Blueprint $table) {
+            $table->longText('markdown')->default('');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('pages', function (Blueprint $table) {
+            $table->dropColumn('markdown');
+        });
+
+        Schema::table('page_revisions', function (Blueprint $table) {
+            $table->dropColumn('markdown');
+        });
+    }
+}
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "bootstrap-sass": "^3.0.0",
     "dropzone": "^4.0.1",
     "laravel-elixir": "^3.4.0",
+    "marked": "^0.3.5",
     "zeroclipboard": "^2.2.0"
   }
 }
diff --git a/public/fonts/roboto-mono-v4-latin-regular.woff b/public/fonts/roboto-mono-v4-latin-regular.woff
diff --git a/public/fonts/roboto-mono-v4-latin-regular.woff2 b/public/fonts/roboto-mono-v4-latin-regular.woff2
diff --git a/readme.md b/readme.md
@@ -45,3 +45,4 @@ These are the great projects used to help build BookStack:
 * [Dropzone.js](http://www.dropzonejs.com/)
 * [ZeroClipboard](http://zeroclipboard.org/)
 * [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
+* [Marked](https://github.com/chjj/marked)
diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
@@ -216,16 +216,20 @@ module.exports = function (ngApp, events) {
     }]);
 
 
-    ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', function ($scope, $http, $attrs, $interval, $timeout) {
+    ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce',
+        function ($scope, $http, $attrs, $interval, $timeout, $sce) {
 
         $scope.editorOptions = require('./pages/page-form');
-        $scope.editorHtml = '';
+        $scope.editContent = '';
         $scope.draftText = '';
         var pageId = Number($attrs.pageId);
         var isEdit = pageId !== 0;
         var autosaveFrequency = 30; // AutoSave interval in seconds.
+        var isMarkdown = $attrs.editorType === 'markdown';
         $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
         $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
+
+        // Set inital header draft text
         if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
             $scope.draftText = 'Editing Draft'
         } else {
@@ -245,25 +249,37 @@ module.exports = function (ngApp, events) {
             }, 1000);
         }
 
-        $scope.editorChange = function () {}
+        // Actions specifically for the markdown editor
+        if (isMarkdown) {
+            $scope.displayContent = '';
+            // Editor change event
+            $scope.editorChange = function (content) {
+                $scope.displayContent = $sce.trustAsHtml(content);
+            }
+        }
+
+        if (!isMarkdown) {
+            $scope.editorChange = function() {};
+        }
 
         /**
          * Start the AutoSave loop, Checks for content change
          * before performing the costly AJAX request.
          */
         function startAutoSave() {
             currentContent.title = $('#name').val();
-            currentContent.html = $scope.editorHtml;
+            currentContent.html = $scope.editContent;
 
             autoSave = $interval(() => {
                 var newTitle = $('#name').val();
-                var newHtml = $scope.editorHtml;
+                var newHtml = $scope.editContent;
 
                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
                     currentContent.html = newHtml;
                     currentContent.title = newTitle;
-                    saveDraft(newTitle, newHtml);
+                    saveDraft();
                 }
+
             }, 1000 * autosaveFrequency);
         }
 
@@ -272,20 +288,22 @@ module.exports = function (ngApp, events) {
          * @param title
          * @param html
          */
-        function saveDraft(title, html) {
-            $http.put('/ajax/page/' + pageId + '/save-draft', {
-                name: title,
-                html: html
-            }).then((responseData) => {
+        function saveDraft() {
+            var data = {
+                name: $('#name').val(),
+                html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent
+            };
+
+            if (isMarkdown) data.markdown = $scope.editContent;
+
+            $http.put('/ajax/page/' + pageId + '/save-draft', data).then((responseData) => {
                 $scope.draftText = responseData.data.message;
                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
             });
         }
 
         $scope.forceDraftSave = function() {
-            var newTitle = $('#name').val();
-            var newHtml = $scope.editorHtml;
-            saveDraft(newTitle, newHtml);
+            saveDraft();
         };
 
         /**
@@ -298,6 +316,7 @@ module.exports = function (ngApp, events) {
                 $scope.draftText = 'Editing Page';
                 $scope.isUpdateDraft = false;
                 $scope.$broadcast('html-update', responseData.data.html);
+                $scope.$broadcast('markdown-update', responseData.data.markdown || responseData.data.html);
                 $('#name').val(responseData.data.name);
                 $timeout(() => {
                     startAutoSave();

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
@@ -1,5 +1,6 @@
 "use strict";
 var DropZone = require('dropzone');
+var markdown = require('marked');
 
 var toggleSwitchTemplate = require('./components/toggle-switch.html');
 var imagePickerTemplate = require('./components/image-picker.html');
@@ -200,7 +201,82 @@ module.exports = function (ngApp, events) {
                 tinymce.init(scope.tinymce);
             }
         }
-    }])
+    }]);
+
+    ngApp.directive('markdownInput', ['$timeout', function($timeout) {
+        return {
+            restrict: 'A',
+            scope: {
+                mdModel: '=',
+                mdChange: '='
+            },
+            link: function (scope, element, attrs) {
+
+                // Set initial model content
+                var content = element.val();
+                scope.mdModel = content;
+                scope.mdChange(markdown(content));
+
+                element.on('change input', (e) => {
+                    content = element.val();
+                    $timeout(() => {
+                        scope.mdModel = content;
+                        scope.mdChange(markdown(content));
+                    });
+                });
+
+                scope.$on('markdown-update', (event, value) => {
+                    element.val(value);
+                    scope.mdModel= value;
+                    scope.mdChange(markdown(value));
+                });
+
+            }
+        }
+    }]);
 
+    ngApp.directive('markdownEditor', ['$timeout', function($timeout) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs) {
+
+                // Elements
+                var input = element.find('textarea[markdown-input]');
+                var insertImage = element.find('button[data-action="insertImage"]');
+
+                var currentCaretPos = 0;
+
+                input.blur((event) => {
+                    currentCaretPos = input[0].selectionStart;
+                });
+
+                // Insert image shortcut
+                input.keydown((event) => {
+                    if (event.which === 73 && event.ctrlKey && event.shiftKey) {
+                        event.preventDefault();
+                        var caretPos = input[0].selectionStart;
+                        var currentContent = input.val();
+                        var mdImageText = "![](http://)";
+                        input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
+                        input.focus();
+                        input[0].selectionStart = caretPos + ("![](".length);
+                        input[0].selectionEnd = caretPos + ('![](http://'.length);
+                    }
+                });
+
+                // Insert image from image manager
+                insertImage.click((event) => {
+                    window.ImageManager.showExternal((image) => {
+                        var caretPos = currentCaretPos;
+                        var currentContent = input.val();
+                        var mdImageText = "![" + image.name + "](" + image.url + ")";
+                        input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
+                        input.change();
+                    });
+                });
+
+            }
+        }
+    }])
 
 };
diff --git a/resources/assets/sass/_fonts.scss b/resources/assets/sass/_fonts.scss
@@ -93,4 +93,15 @@
   url('/fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
   font-weight: normal;
   font-style: normal;
+}
+
+/* roboto-mono-regular - latin */
+// https://google-webfonts-helper.herokuapp.com
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+  url('/fonts/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('/fonts/roboto-mono-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }