colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a markdown editor

This commit is contained in:
Dan Brown 2016-03-25 14:41:15 +00:00
parent 491f73e0cd
commit 26965fa08f
15 changed files with 210 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Http/Controllers/PageController.php
View File

@ -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]);

2
app/Page.php
View File

@ -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'];

2
app/PageRevision.php
View File

@ -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

2
config/app.php
View File

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

39
database/migrations/2016_03_25_123157_add_markdown_support.php Normal file
View File

@ -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');
});
}
}

1
package.json
View File

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

BIN
public/fonts/roboto-mono-v4-latin-regular.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-mono-v4-latin-regular.woff2 Normal file
View File

Binary file not shown.

1
readme.md
View File

@ -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)

45
resources/assets/js/controllers.js
View File

@ -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();

32
resources/assets/js/directives.js
View File

@ -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));
});
}
}
}])
};

11
resources/assets/sass/_fonts.scss
View File

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

56
resources/assets/sass/_forms.scss
View File

@ -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;

6
resources/assets/sass/_text.scss
View File

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

31
resources/views/pages/form.blade.php
View File

@ -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>