mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
Added basic markdown scroll syncing
This commit is contained in:
parent
9d3f329bc9
commit
f602b088ac
@ -265,17 +265,48 @@ module.exports = function (ngApp, events) {
|
|||||||
link: function (scope, element, attrs) {
|
link: function (scope, element, attrs) {
|
||||||
|
|
||||||
// Elements
|
// Elements
|
||||||
var input = element.find('textarea[markdown-input]');
|
const input = element.find('textarea[markdown-input]');
|
||||||
var insertImage = element.find('button[data-action="insertImage"]');
|
const display = element.find('.markdown-display').first();
|
||||||
|
const insertImage = element.find('button[data-action="insertImage"]');
|
||||||
|
|
||||||
var currentCaretPos = 0;
|
let currentCaretPos = 0;
|
||||||
|
|
||||||
input.blur((event) => {
|
input.blur(event => {
|
||||||
currentCaretPos = input[0].selectionStart;
|
currentCaretPos = input[0].selectionStart;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Scroll sync
|
||||||
|
let inputScrollHeight,
|
||||||
|
inputHeight,
|
||||||
|
displayScrollHeight,
|
||||||
|
displayHeight;
|
||||||
|
|
||||||
|
function setScrollHeights() {
|
||||||
|
inputScrollHeight = input[0].scrollHeight;
|
||||||
|
inputHeight = input.height();
|
||||||
|
displayScrollHeight = display[0].scrollHeight;
|
||||||
|
displayHeight = display.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setScrollHeights();
|
||||||
|
}, 200);
|
||||||
|
window.addEventListener('resize', setScrollHeights);
|
||||||
|
let scrollDebounceTime = 800;
|
||||||
|
let lastScroll = 0;
|
||||||
|
input.on('scroll', event => {
|
||||||
|
let now = Date.now();
|
||||||
|
if (now - lastScroll > scrollDebounceTime) {
|
||||||
|
setScrollHeights()
|
||||||
|
}
|
||||||
|
let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight));
|
||||||
|
let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
|
||||||
|
display.scrollTop(displayScrollY);
|
||||||
|
lastScroll = now;
|
||||||
|
});
|
||||||
|
|
||||||
// Insert image shortcut
|
// Insert image shortcut
|
||||||
input.keydown((event) => {
|
input.keydown(event => {
|
||||||
if (event.which === 73 && event.ctrlKey && event.shiftKey) {
|
if (event.which === 73 && event.ctrlKey && event.shiftKey) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var caretPos = input[0].selectionStart;
|
var caretPos = input[0].selectionStart;
|
||||||
@ -289,8 +320,8 @@ module.exports = function (ngApp, events) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Insert image from image manager
|
// Insert image from image manager
|
||||||
insertImage.click((event) => {
|
insertImage.click(event => {
|
||||||
window.ImageManager.showExternal((image) => {
|
window.ImageManager.showExternal(image => {
|
||||||
var caretPos = currentCaretPos;
|
var caretPos = currentCaretPos;
|
||||||
var currentContent = input.val();
|
var currentContent = input.val();
|
||||||
var mdImageText = "![" + image.name + "](" + image.url + ")";
|
var mdImageText = "![" + image.name + "](" + image.url + ")";
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea markdown-input md-change="editorChange" md-model="editContent" name="markdown" rows="5"
|
<textarea markdown-input md-change="editorChange" id="markdown-editor-input" 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>
|
@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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user