mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Added a markdown editor
This commit is contained in:
parent
491f73e0cd
commit
26965fa08f
@ -164,6 +164,7 @@ class PageController extends Controller
|
|||||||
$draft = $this->pageRepo->getUserPageDraft($page, $this->currentUser->id);
|
$draft = $this->pageRepo->getUserPageDraft($page, $this->currentUser->id);
|
||||||
$page->name = $draft->name;
|
$page->name = $draft->name;
|
||||||
$page->html = $draft->html;
|
$page->html = $draft->html;
|
||||||
|
$page->markdown = $draft->markdown;
|
||||||
$page->isDraft = true;
|
$page->isDraft = true;
|
||||||
$warnings [] = $this->pageRepo->getUserPageDraftMessage($draft);
|
$warnings [] = $this->pageRepo->getUserPageDraftMessage($draft);
|
||||||
}
|
}
|
||||||
@ -204,9 +205,9 @@ class PageController extends Controller
|
|||||||
$page = $this->pageRepo->getById($pageId, true);
|
$page = $this->pageRepo->getById($pageId, true);
|
||||||
$this->checkOwnablePermission('page-update', $page);
|
$this->checkOwnablePermission('page-update', $page);
|
||||||
if ($page->draft) {
|
if ($page->draft) {
|
||||||
$draft = $this->pageRepo->updateDraftPage($page, $request->only(['name', 'html']));
|
$draft = $this->pageRepo->updateDraftPage($page, $request->only(['name', 'html', 'markdown']));
|
||||||
} else {
|
} 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');
|
$updateTime = $draft->updated_at->format('H:i');
|
||||||
return response()->json(['status' => 'success', 'message' => 'Draft saved at ' . $updateTime]);
|
return response()->json(['status' => 'success', 'message' => 'Draft saved at ' . $updateTime]);
|
||||||
|
@ -6,7 +6,7 @@ use Illuminate\Database\Eloquent\Model;
|
|||||||
|
|
||||||
class Page extends Entity
|
class Page extends Entity
|
||||||
{
|
{
|
||||||
protected $fillable = ['name', 'html', 'priority'];
|
protected $fillable = ['name', 'html', 'priority', 'markdown'];
|
||||||
|
|
||||||
protected $simpleAttributes = ['name', 'id', 'slug'];
|
protected $simpleAttributes = ['name', 'id', 'slug'];
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ use Illuminate\Database\Eloquent\Model;
|
|||||||
|
|
||||||
class PageRevision extends Model
|
class PageRevision extends Model
|
||||||
{
|
{
|
||||||
protected $fillable = ['name', 'html', 'text'];
|
protected $fillable = ['name', 'html', 'text', 'markdown'];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the user that created the page revision
|
* Get the user that created the page revision
|
||||||
|
@ -5,6 +5,8 @@ return [
|
|||||||
|
|
||||||
'env' => env('APP_ENV', 'production'),
|
'env' => env('APP_ENV', 'production'),
|
||||||
|
|
||||||
|
'editor' => env('APP_EDITOR', 'html'),
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
| Application Debug Mode
|
| Application Debug Mode
|
||||||
|
@ -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');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -12,6 +12,7 @@
|
|||||||
"bootstrap-sass": "^3.0.0",
|
"bootstrap-sass": "^3.0.0",
|
||||||
"dropzone": "^4.0.1",
|
"dropzone": "^4.0.1",
|
||||||
"laravel-elixir": "^3.4.0",
|
"laravel-elixir": "^3.4.0",
|
||||||
|
"marked": "^0.3.5",
|
||||||
"zeroclipboard": "^2.2.0"
|
"zeroclipboard": "^2.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
BIN
public/fonts/roboto-mono-v4-latin-regular.woff
Normal file
BIN
public/fonts/roboto-mono-v4-latin-regular.woff
Normal file
Binary file not shown.
BIN
public/fonts/roboto-mono-v4-latin-regular.woff2
Normal file
BIN
public/fonts/roboto-mono-v4-latin-regular.woff2
Normal file
Binary file not shown.
@ -176,3 +176,4 @@ These are the great projects used to help build BookStack:
|
|||||||
* [Dropzone.js](http://www.dropzonejs.com/)
|
* [Dropzone.js](http://www.dropzonejs.com/)
|
||||||
* [ZeroClipboard](http://zeroclipboard.org/)
|
* [ZeroClipboard](http://zeroclipboard.org/)
|
||||||
* [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
|
* [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
|
||||||
|
* [Marked](https://github.com/chjj/marked)
|
||||||
|
@ -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.editorOptions = require('./pages/page-form');
|
||||||
$scope.editorHtml = '';
|
$scope.editContent = '';
|
||||||
$scope.draftText = '';
|
$scope.draftText = '';
|
||||||
var pageId = Number($attrs.pageId);
|
var pageId = Number($attrs.pageId);
|
||||||
var isEdit = pageId !== 0;
|
var isEdit = pageId !== 0;
|
||||||
var autosaveFrequency = 30; // AutoSave interval in seconds.
|
var autosaveFrequency = 30; // AutoSave interval in seconds.
|
||||||
|
var isMarkdown = $attrs.editorType === 'markdown';
|
||||||
$scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
|
$scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
|
||||||
$scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
|
$scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
|
||||||
|
|
||||||
|
// Set inital header draft text
|
||||||
if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
|
if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
|
||||||
$scope.draftText = 'Editing Draft'
|
$scope.draftText = 'Editing Draft'
|
||||||
} else {
|
} else {
|
||||||
@ -245,7 +249,14 @@ module.exports = function (ngApp, events) {
|
|||||||
}, 1000);
|
}, 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
|
* Start the AutoSave loop, Checks for content change
|
||||||
@ -253,17 +264,18 @@ module.exports = function (ngApp, events) {
|
|||||||
*/
|
*/
|
||||||
function startAutoSave() {
|
function startAutoSave() {
|
||||||
currentContent.title = $('#name').val();
|
currentContent.title = $('#name').val();
|
||||||
currentContent.html = $scope.editorHtml;
|
currentContent.html = $scope.editContent;
|
||||||
|
|
||||||
autoSave = $interval(() => {
|
autoSave = $interval(() => {
|
||||||
var newTitle = $('#name').val();
|
var newTitle = $('#name').val();
|
||||||
var newHtml = $scope.editorHtml;
|
var newHtml = $scope.editContent;
|
||||||
|
|
||||||
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
|
||||||
currentContent.html = newHtml;
|
currentContent.html = newHtml;
|
||||||
currentContent.title = newTitle;
|
currentContent.title = newTitle;
|
||||||
saveDraft(newTitle, newHtml);
|
saveDraft();
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 1000 * autosaveFrequency);
|
}, 1000 * autosaveFrequency);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -272,20 +284,24 @@ module.exports = function (ngApp, events) {
|
|||||||
* @param title
|
* @param title
|
||||||
* @param html
|
* @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;
|
$scope.draftText = responseData.data.message;
|
||||||
if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
|
if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.forceDraftSave = function() {
|
$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.draftText = 'Editing Page';
|
||||||
$scope.isUpdateDraft = false;
|
$scope.isUpdateDraft = false;
|
||||||
$scope.$broadcast('html-update', responseData.data.html);
|
$scope.$broadcast('html-update', responseData.data.html);
|
||||||
|
$scope.$broadcast('markdown-update', responseData.data.markdown || responseData.data.html);
|
||||||
$('#name').val(responseData.data.name);
|
$('#name').val(responseData.data.name);
|
||||||
$timeout(() => {
|
$timeout(() => {
|
||||||
startAutoSave();
|
startAutoSave();
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
var DropZone = require('dropzone');
|
var DropZone = require('dropzone');
|
||||||
|
var markdown = require( "marked" );
|
||||||
|
|
||||||
var toggleSwitchTemplate = require('./components/toggle-switch.html');
|
var toggleSwitchTemplate = require('./components/toggle-switch.html');
|
||||||
var imagePickerTemplate = require('./components/image-picker.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));
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}])
|
||||||
|
|
||||||
};
|
};
|
@ -94,3 +94,14 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: 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+ */
|
||||||
|
}
|
@ -26,6 +26,58 @@
|
|||||||
display: none;
|
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 {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
@ -160,6 +212,10 @@ input:checked + .toggle-switch {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -157,6 +157,12 @@ span.code {
|
|||||||
@extend .code-base;
|
@extend .code-base;
|
||||||
padding: 1px $-xs;
|
padding: 1px $-xs;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
* Text colors
|
* Text colors
|
||||||
*/
|
*/
|
||||||
|
@ -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() }}
|
{{ csrf_field() }}
|
||||||
<div class="faded-small toolbar">
|
<div class="faded-small toolbar">
|
||||||
@ -42,10 +42,31 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="edit-area flex-fill flex">
|
<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')
|
||||||
|
<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')) class="neg" @endif>@if(isset($model) || old('html')){{htmlspecialchars( old('html') ? old('html') : $model->html)}}@endif</textarea>
|
||||||
@if($errors->has('html'))
|
@if($errors->has('html'))
|
||||||
<div class="text-neg text-small">{{ $errors->first('html') }}</div>
|
<div class="text-neg text-small">{{ $errors->first('html') }}</div>
|
||||||
@endif
|
@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>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue
Block a user