Added a markdown editor

app/Http/Controllers/PageController.php

@@ -164,6 +164,7 @@ class PageController extends Controller
             $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 @@ class PageController extends Controller
         $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]);

app/Page.php

@@ -6,7 +6,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class Page extends Entity
 {
-    protected $fillable = ['name', 'html', 'priority'];
+    protected $fillable = ['name', 'html', 'priority', 'markdown'];
 
     protected $simpleAttributes = ['name', 'id', 'slug'];
 

app/PageRevision.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class PageRevision extends Model
 {
-    protected $fillable = ['name', 'html', 'text'];
+    protected $fillable = ['name', 'html', 'text', 'markdown'];
 
     /**
      * Get the user that created the page revision

config/app.php

@@ -5,6 +5,8 @@ return [
 
     'env' => env('APP_ENV', 'production'),
 
+    'editor' => env('APP_EDITOR', 'html'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Debug Mode

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');
+        });
+
+        Schema::table('page_revisions', function (Blueprint $table) {
+            $table->longText('markdown');
+        });
+    }
+
+    /**
+     * 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');
+        });
+    }
+}

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"
   }
 }

readme.md

@@ -176,3 +176,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)

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,7 +249,14 @@ 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);
+            }
+        }
 
         /**
          * Start the AutoSave loop, Checks for content change
@@ -253,17 +264,18 @@ module.exports = function (ngApp, events) {
          */
         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 +284,24 @@ module.exports = function (ngApp, events) {
          * @param title
          * @param html
          */
-        function saveDraft(title, html) {
+        function saveDraft() {
-            $http.put('/ajax/page/' + pageId + '/save-draft', {
+            var data = {
-                name: title,
+                name: $('#name').val(),
-                html: html
+                html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent
-            }).then((responseData) => {
+            };
+
+            if (isMarkdown) data.markdown = $scope.editContent;
+
+            console.log(data.markdown);
+
+            $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();
+            saveDraft();
-            var newHtml = $scope.editorHtml;
-            saveDraft(newTitle, newHtml);
         };
 
         /**
@@ -298,6 +314,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();

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');
@@ -202,5 +203,36 @@ module.exports = function (ngApp, events) {
         }
     }])
 
+    ngApp.directive('markdownEditor', ['$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));
+                });
+
+            }
+        }
+    }])
 
 };

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+ */
 }

resources/assets/sass/_forms.scss

@@ -26,6 +26,58 @@
   display: none;
 }
 
+#markdown-editor {
+  position: relative;
+  z-index: 5;
+  textarea {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    padding: $-xs $-m;
+    color: #444;
+    border-radius: 0;
+    max-height: 100%;
+    flex: 1;
+    border: 0;
+    &:focus {
+      outline: 0;
+    }
+  }
+  .markdown-display, .markdown-editor-wrap {
+    flex: 1;
+    padding-top: 28px;
+    position: relative;
+    border: 1px solid #DDD;
+    &:before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      padding: $-xs $-m;
+      font-family: 'Roboto Mono';
+      font-size: 11px;
+      line-height: 1;
+      border-bottom: 1px solid #DDD;
+      background-color: #EEE;
+    }
+  }
+  .markdown-editor-wrap {
+    display: flex;
+    &:before {
+      content: 'Editor';
+    }
+  }
+  .markdown-display {
+    padding: 0 $-m;
+    padding-top: 28px;
+    margin-left: -1px;
+    &:before {
+      content: 'Preview';
+    }
+  }
+}
+
 label {
   display: block;
   line-height: 1.4em;
@@ -160,6 +212,10 @@ input:checked + .toggle-switch {
   width: 100%;
 }
 
+div[editor-type="markdown"] .title-input.page-title input[type="text"] {
+  max-width: 100%;
+}
+
 .search-box {
   max-width: 100%;
   position: relative;

resources/assets/sass/_text.scss

@@ -157,6 +157,12 @@ span.code {
   @extend .code-base;
   padding: 1px $-xs;
 }
+
+pre code {
+  background-color: transparent;
+  border: 0;
+  font-size: 1em;
+}
 /*
  * Text colors
  */

resources/views/pages/form.blade.php

@@ -1,5 +1,5 @@
 
-<div class="page-editor flex-fill flex" ng-controller="PageEditController" page-id="{{ $model->id or 0 }}" page-new-draft="{{ $model->draft or 0 }}" page-update-draft="{{ $model->isDraft or 0 }}">
+<div class="page-editor flex-fill flex" ng-controller="PageEditController" editor-type="{{ config('app.editor') }}" page-id="{{ $model->id or 0 }}" page-new-draft="{{ $model->draft or 0 }}" page-update-draft="{{ $model->isDraft or 0 }}">
 
     {{ csrf_field() }}
     <div class="faded-small toolbar">
@@ -42,10 +42,31 @@
         </div>
     </div>
     <div class="edit-area flex-fill flex">
-        <textarea id="html-editor" tinymce="editorOptions" mce-change="editorChange" mce-model="editorHtml"  name="html" rows="5"
+        @if(config('app.editor') === 'html')
-                  @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
+            <textarea id="html-editor" tinymce="editorOptions" mce-change="editorChange" mce-model="editContent"  name="html" rows="5"
-        @if($errors->has('html'))
+                      @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
-            <div class="text-neg text-small">{{ $errors->first('html') }}</div>
+            @if($errors->has('html'))
+                <div class="text-neg text-small">{{ $errors->first('html') }}</div>
+            @endif
+        @endif
+
+        @if(config('app.editor') === 'markdown')
+            <div id="markdown-editor" class="flex-fill flex">
+
+                <div class="markdown-editor-wrap">
+                    <textarea markdown-editor md-change="editorChange" md-model="editContent"  name="markdown" rows="5"
+                              @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
+                </div>
+
+                <div class="markdown-display page-content" ng-bind-html="displayContent"></div>
+            </div>
+
+            <input type="hidden" name="html" ng-value="displayContent">
+
+            @if($errors->has('markdown'))
+                <div class="text-neg text-small">{{ $errors->first('markdown') }}</div>
+            @endif
+
         @endif
     </div>
 </div>