mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Added link selector to markdown editor
This commit is contained in:
parent
5b64358ef1
commit
23e014cb25
@ -271,8 +271,6 @@ module.exports = function (ngApp, events) {
|
|||||||
scope.mdModel = content;
|
scope.mdModel = content;
|
||||||
scope.mdChange(markdown(content));
|
scope.mdChange(markdown(content));
|
||||||
|
|
||||||
console.log('test');
|
|
||||||
|
|
||||||
element.on('change input', (event) => {
|
element.on('change input', (event) => {
|
||||||
content = element.val();
|
content = element.val();
|
||||||
$timeout(() => {
|
$timeout(() => {
|
||||||
@ -304,6 +302,7 @@ module.exports = function (ngApp, events) {
|
|||||||
const input = element.find('[markdown-input] textarea').first();
|
const input = element.find('[markdown-input] textarea').first();
|
||||||
const display = element.find('.markdown-display').first();
|
const display = element.find('.markdown-display').first();
|
||||||
const insertImage = element.find('button[data-action="insertImage"]');
|
const insertImage = element.find('button[data-action="insertImage"]');
|
||||||
|
const insertEntityLink = element.find('button[data-action="insertEntityLink"]')
|
||||||
|
|
||||||
let currentCaretPos = 0;
|
let currentCaretPos = 0;
|
||||||
|
|
||||||
@ -355,6 +354,13 @@ module.exports = function (ngApp, events) {
|
|||||||
input[0].selectionEnd = caretPos + ('![](http://'.length);
|
input[0].selectionEnd = caretPos + ('![](http://'.length);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Insert entity link shortcut
|
||||||
|
if (event.which === 75 && event.ctrlKey && event.shiftKey) {
|
||||||
|
showLinkSelector();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Pass key presses to controller via event
|
// Pass key presses to controller via event
|
||||||
scope.$emit('editor-keydown', 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);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
@ -140,6 +140,11 @@ $(function () {
|
|||||||
$(this).fadeOut(240);
|
$(this).fadeOut(240);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.markdown-display').on('click', 'a', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
window.open($(this).attr('href'));
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Page specific items
|
// Page specific items
|
||||||
|
@ -19,22 +19,9 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
|
@include('partials/image-manager', ['imageType' => 'gallery', 'uploaded_to' => $page->id])
|
||||||
|
@include('partials/entity-selector-popup')
|
||||||
<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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
|
@ -73,6 +73,8 @@
|
|||||||
<span class="float left">Editor</span>
|
<span class="float left">Editor</span>
|
||||||
<div class="float right buttons">
|
<div class="float right buttons">
|
||||||
<button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
|
<button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
|
||||||
|
|
|
||||||
|
<button class="text-button" type="button" data-action="insertEntityLink"><i class="zmdi zmdi-link"></i>Insert Entity Link</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
14
resources/views/partials/entity-selector-popup.blade.php
Normal file
14
resources/views/partials/entity-selector-popup.blade.php
Normal 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>
|
Loading…
Reference in New Issue
Block a user