Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-17 00:32:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added link selector to markdown editor

Browse Source
This commit is contained in:
Dan Brown 2016-09-02 18:54:26 +01:00
parent 5b64358ef1
commit 23e014cb25
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -271,8 +271,6 @@ module.exports = function (ngApp, events) {
scope.mdModel = content;
scope.mdChange(markdown(content));
console.log('test');
element.on('change input', (event) => {
content = element.val();
$timeout(() => {
@ -304,6 +302,7 @@ module.exports = function (ngApp, events) {
const input = element.find('[markdown-input] textarea').first();
const display = element.find('.markdown-display').first();
const insertImage = element.find('button[data-action="insertImage"]');
const insertEntityLink = element.find('button[data-action="insertEntityLink"]')
let currentCaretPos = 0;
@ -355,6 +354,13 @@ module.exports = function (ngApp, events) {
input[0].selectionEnd = caretPos + ('![](http://'.length);
return;
}
// Insert entity link shortcut
if (event.which === 75 && event.ctrlKey && event.shiftKey) {
showLinkSelector();
return;
}
// Pass key presses to controller via event
scope.$emit('editor-keydown', event);
});
@ -370,6 +376,26 @@ module.exports = function (ngApp, events) {
});
});
function showLinkSelector() {
window.showEntityLinkSelector((entity) => {
let selectionStart = currentCaretPos;
let selectionEnd = input[0].selectionEnd;
let textSelected = (selectionEnd !== selectionStart);
let currentContent = input.val();
if (textSelected) {
let selectedText = currentContent.substring(selectionStart, selectionEnd);
let linkText = `[${selectedText}](${entity.link})`;
input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionEnd));
} else {
let linkText = ` [${entity.name}](${entity.link}) `;
input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionStart))
}
input.change();
});
}
insertEntityLink.click(showLinkSelector);
}
}
}]);

5
resources/assets/js/global.js
View File

@ -140,6 +140,11 @@ $(function () {
$(this).fadeOut(240);
});
$('.markdown-display').on('click', 'a', function(event) {
event.preventDefault();
window.open($(this).attr('href'));
});
});
// Page specific items

17
resources/views/pages/edit.blade.php
View File

@ -19,22 +19,9 @@
</div>
@include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
<div id="entity-selector-wrap">
<div class="overlay" entity-link-selector>
<div class="popup-body small flex-child">
<div class="popup-header primary-background">
<div class="popup-title">Entity Select</div>
<button type="button" class="corner-button neg button">x</button>
</div>
@include('partials/entity-selector', ['name' => 'entity-selector'])
<div class="popup-footer">
<button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">Select</button>
</div>
</div>
</div>
</div>
@include('partials/entity-selector-popup')
<script>
(function() {

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

@ -73,6 +73,8 @@
<span class="float left">Editor</span>
<div class="float right buttons">
<button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
&nbsp;|&nbsp;
<button class="text-button" type="button" data-action="insertEntityLink"><i class="zmdi zmdi-link"></i>Insert Entity Link</button>
</div>
</div>

14
resources/views/partials/entity-selector-popup.blade.php Normal file
View File

@ -0,0 +1,14 @@
<div id="entity-selector-wrap">
<div class="overlay" entity-link-selector>
<div class="popup-body small flex-child">
<div class="popup-header primary-background">
<div class="popup-title">Entity Select</div>
<button type="button" class="corner-button neg button popup-close">x</button>
</div>
@include('partials/entity-selector', ['name' => 'entity-selector'])
<div class="popup-footer">
<button type="button" disabled="true" class="button entity-link-selector-confirm pos corner-button">Select</button>
</div>
</div>
</div>
</div>