Added a markdown editor

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index e2b10d3d3965396acdd0f4b610d306d0ecea9401..c3d8e396c388cd45fab39082475202c2b7a87052 100644 (file)
--- a/app/Http/Controllers/PageController.php
+++ b/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]);

diff --git a/app/Page.php b/app/Page.php
index 84e37d5194f9a09cb9f96f2b0924117650e337e6..d2a303f619662cfd2fcbd197c05e510f288b24aa 100644 (file)
--- a/app/Page.php
+++ b/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'];
 

diff --git a/app/PageRevision.php b/app/PageRevision.php
index f1b4bc5870575492e43f4268e805e86c05deefb6..c258913ff23e6cb102e8549404bdcef32bfc48b1 100644 (file)
--- a/app/PageRevision.php
+++ b/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

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

diff --git a/database/migrations/2016_03_25_123157_add_markdown_support.php b/database/migrations/2016_03_25_123157_add_markdown_support.php
new file mode 100644 (file)
index 0000000..45efe5a
--- /dev/null
+++ 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');
+        });
+
+        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');
+        });
+    }
+}

diff --git a/package.json b/package.json
index a1fb06b1cd4bd032c73b56b45128409110751120..7d1aa1a6a2b1716dbb4f86dae26f29a086315260 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..8cb9e6f
Binary files /dev/null and b/public/fonts/roboto-mono-v4-latin-regular.woff differ

diff --git a/public/fonts/roboto-mono-v4-latin-regular.woff2 b/public/fonts/roboto-mono-v4-latin-regular.woff2
new file mode 100644 (file)
index 0000000..1f65981
Binary files /dev/null and b/public/fonts/roboto-mono-v4-latin-regular.woff2 differ

diff --git a/readme.md b/readme.md
index 0730e3de3f8b2ca85e4f9bf2dfc88f46e8fa6ec3..93296767f0e767bc266626c61f29afe5b3c56030 100644 (file)
--- a/readme.md
+++ b/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)

diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 29a448265299c46292f0e48dedc462892cd18454..09187c0c259654061ce818632fe544725d1d38d9 100644 (file)
--- 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,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) {
-            $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;
+
+            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();
-            var newHtml = $scope.editorHtml;
-            saveDraft(newTitle, newHtml);
+            saveDraft();
         };
 
         /**
@@ -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();

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 71b35fb42efde3c6d4e4820623c8132a9d14e609..316e5dcb4e4b7c822c18d78b9e8668d6fcd490df 100644 (file)
--- 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');
@@ -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));
+                });
+
+            }
+        }
+    }])
 
 };
\ No newline at end of file

diff --git a/resources/assets/sass/_fonts.scss b/resources/assets/sass/_fonts.scss
index 0dc8c95b2cd162d45fcd7c5f5abfad8b4bbf9e95..8cf677779160597d7e4ce1a9ee070d6b16a4b761 100644 (file)
--- 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+ */
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 037dad94a4d73755e8d38d8b72edc19ec27c7bc2..5351f06e7ec4607192a3504752f909373a8a0d0f 100644 (file)
--- a/resources/assets/sass/_forms.scss
+++ b/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;

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 721eeb2382145297772dff530d6f0863c44d7b83..1a55cf86818ff41b90d81420c4f23b21b4ef86ae 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/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
  */

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index d8dc19ec2cafbdd9063317240809d2c4efb52601..2118d23b2b29321bf4328efeb5d975d6fce824b1 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/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($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
-        @if($errors->has('html'))
-            <div class="text-neg text-small">{{ $errors->first('html') }}</div>
+        @if(config('app.editor') === 'html')
+            <textarea id="html-editor" tinymce="editorOptions" mce-change="editorChange" mce-model="editContent"  name="html" rows="5"
+                      @if($errors->has('html')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
+            @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>
\ No newline at end of file