mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-13 14:44:43 -04:00
Marked as 0.2.8
This commit is contained in:
Wu Cheng-Han
parent
2d36d7ce84
commit
4e64583a0b
96 changed files with 3281 additions and 22102 deletions
327
public/js/syncscroll.js
Normal file
327
public/js/syncscroll.js
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
//
|
||||
// Inject line numbers for sync scroll. Notes:
|
||||
//
|
||||
// - We track only headings and paragraphs on first level. That's enougth.
|
||||
// - Footnotes content causes jumps. Level limit filter it automatically.
|
||||
//
|
||||
md.renderer.rules.blockquote_open = function (tokens, idx /*, options, env */ ) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<blockquote class="part" data-startline="' + startline + '" data-endline="' + endline + '">\n';
|
||||
}
|
||||
return '<blockquote>\n';
|
||||
};
|
||||
|
||||
md.renderer.rules.table_open = function (tokens, idx /*, options, env */ ) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<table class="part" data-startline="' + startline + '" data-endline="' + endline + '">\n';
|
||||
}
|
||||
return '<table>\n';
|
||||
};
|
||||
|
||||
md.renderer.rules.bullet_list_open = function (tokens, idx /*, options, env */ ) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<ul class="part" data-startline="' + startline + '" data-endline="' + endline + '">\n';
|
||||
}
|
||||
return '<ul>\n';
|
||||
};
|
||||
|
||||
md.renderer.rules.ordered_list_open = function (tokens, idx /*, options, env */ ) {
|
||||
var token = tokens[idx];
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<ol class="part" data-startline="' + startline + '" data-endline="' + endline + '"' + (token.order > 1 ? ' start="' + token.order + '"' : '') + '>\n';
|
||||
}
|
||||
return '<ol' + (token.order > 1 ? ' start="' + token.order + '"' : '') + '>\n';
|
||||
};
|
||||
|
||||
md.renderer.rules.link_open = function (tokens, idx /*, options, env */ ) {
|
||||
var title = tokens[idx].title ? (' title="' + Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(tokens[idx].title)) + '"') : '';
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<a class="part" data-startline="' + startline + '" data-endline="' + endline + '" href="' + Remarkable.utils.escapeHtml(tokens[idx].href) + '"' + title + '>';
|
||||
}
|
||||
return '<a href="' + Remarkable.utils.escapeHtml(tokens[idx].href) + '"' + title + '>';
|
||||
};
|
||||
|
||||
md.renderer.rules.paragraph_open = function (tokens, idx) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<p class="part" data-startline="' + startline + '" data-endline="' + endline + '">';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
md.renderer.rules.heading_open = function (tokens, idx) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<h' + tokens[idx].hLevel + ' class="part" data-startline="' + startline + '" data-endline="' + endline + '">';
|
||||
}
|
||||
return '<h' + tokens[idx].hLevel + '>';
|
||||
};
|
||||
|
||||
md.renderer.rules.image = function (tokens, idx, options /*, env */ ) {
|
||||
var src = ' src="' + Remarkable.utils.escapeHtml(tokens[idx].src) + '"';
|
||||
var title = tokens[idx].title ? (' title="' + Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(tokens[idx].title)) + '"') : '';
|
||||
var alt = ' alt="' + (tokens[idx].alt ? Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(tokens[idx].alt)) : '') + '"';
|
||||
var suffix = options.xhtmlOut ? ' /' : '';
|
||||
var image = $('<img' + src + alt + title + suffix + '>');
|
||||
image[0].onload = function (e) {
|
||||
if (viewAjaxCallback)
|
||||
viewAjaxCallback();
|
||||
};
|
||||
return image[0].outerHTML;
|
||||
};
|
||||
|
||||
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
|
||||
var token = tokens[idx];
|
||||
var langClass = '';
|
||||
var langPrefix = options.langPrefix;
|
||||
var langName = '',
|
||||
fenceName;
|
||||
var highlighted;
|
||||
|
||||
if (token.params) {
|
||||
|
||||
//
|
||||
// ```foo bar
|
||||
//
|
||||
// Try custom renderer "foo" first. That will simplify overwrite
|
||||
// for diagrams, latex, and any other fenced block with custom look
|
||||
//
|
||||
|
||||
fenceName = token.params.split(/\s+/g)[0];
|
||||
|
||||
if (Remarkable.utils.has(self.rules.fence_custom, fenceName)) {
|
||||
return self.rules.fence_custom[fenceName](tokens, idx, options, env, self);
|
||||
}
|
||||
|
||||
langName = Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(Remarkable.utils.unescapeMd(fenceName)));
|
||||
langClass = ' class="' + langPrefix + langName + '"';
|
||||
}
|
||||
|
||||
if (options.highlight) {
|
||||
highlighted = options.highlight(token.content, langName) || Remarkable.utils.escapeHtml(token.content);
|
||||
} else {
|
||||
highlighted = Remarkable.utils.escapeHtml(token.content);
|
||||
}
|
||||
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<pre class="part" data-startline="' + startline + '" data-endline="' + endline + '"><code' + langClass + '>' + highlighted + '</code></pre>' + md.renderer.getBreak(tokens, idx);
|
||||
}
|
||||
|
||||
return '<pre><code' + langClass + '>' + highlighted + '</code></pre>' + md.renderer.getBreak(tokens, idx);
|
||||
};
|
||||
|
||||
md.renderer.rules.code = function (tokens, idx /*, options, env */ ) {
|
||||
if (tokens[idx].block) {
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<pre class="part" data-startline="' + startline + '" data-endline="' + endline + '"><code>' + Remarkable.utils.escapeHtml(tokens[idx].content) + '</code></pre>' + md.renderer.getBreak(tokens, idx);
|
||||
}
|
||||
|
||||
return '<pre><code>' + Remarkable.utils.escapeHtml(tokens[idx].content) + '</code></pre>' + md.renderer.getBreak(tokens, idx);
|
||||
}
|
||||
|
||||
if (tokens[idx].lines && tokens[idx].level === 0) {
|
||||
var startline = tokens[idx].lines[0] + 1;
|
||||
var endline = tokens[idx].lines[1];
|
||||
return '<code class="part" data-startline="' + startline + '" data-endline="' + endline + '">' + Remarkable.utils.escapeHtml(tokens[idx].content) + '</code>';
|
||||
}
|
||||
|
||||
return '<code>' + Remarkable.utils.escapeHtml(tokens[idx].content) + '</code>';
|
||||
};
|
||||
|
||||
var viewScrolling = false;
|
||||
var viewScrollingDelay = 200;
|
||||
var viewScrollingTimer = null;
|
||||
|
||||
editor.on('scroll', syncScrollToView);
|
||||
ui.area.view.on('scroll', function () {
|
||||
viewScrolling = true;
|
||||
clearTimeout(viewScrollingTimer);
|
||||
viewScrollingTimer = setTimeout(function () {
|
||||
viewScrolling = false;
|
||||
}, viewScrollingDelay);
|
||||
});
|
||||
//editor.on('scroll', _.debounce(syncScrollToView, syncScrollDelay));
|
||||
//ui.area.view.on('scroll', _.debounce(syncScrollToEdit, 50));
|
||||
|
||||
var scrollMap, lineHeightMap;
|
||||
|
||||
viewAjaxCallback = clearMap;
|
||||
|
||||
function clearMap() {
|
||||
scrollMap = null;
|
||||
lineHeightMap = null;
|
||||
}
|
||||
|
||||
// Build offsets for each line (lines can be wrapped)
|
||||
// That's a bit dirty to process each line everytime, but ok for demo.
|
||||
// Optimizations are required only for big texts.
|
||||
function buildMap() {
|
||||
var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount,
|
||||
acc, sourceLikeDiv, textarea = ui.area.codemirror,
|
||||
wrap = $('.CodeMirror-wrap pre'),
|
||||
_scrollMap;
|
||||
|
||||
sourceLikeDiv = $('<div />').css({
|
||||
position: 'absolute',
|
||||
visibility: 'hidden',
|
||||
height: 'auto',
|
||||
width: wrap.width(),
|
||||
padding: wrap.css('padding'),
|
||||
margin: wrap.css('margin'),
|
||||
'font-size': textarea.css('font-size'),
|
||||
'font-family': textarea.css('font-family'),
|
||||
'line-height': textarea.css('line-height'),
|
||||
'word-wrap': wrap.css('word-wrap'),
|
||||
'white-space': wrap.css('white-space'),
|
||||
'word-break': wrap.css('word-break')
|
||||
}).appendTo('body');
|
||||
|
||||
offset = ui.area.view.scrollTop() - ui.area.view.offset().top;
|
||||
_scrollMap = [];
|
||||
nonEmptyList = [];
|
||||
_lineHeightMap = [];
|
||||
|
||||
acc = 0;
|
||||
editor.getValue().split('\n').forEach(function (str) {
|
||||
var h, lh;
|
||||
|
||||
_lineHeightMap.push(acc);
|
||||
|
||||
if (str.length === 0) {
|
||||
acc++;
|
||||
return;
|
||||
}
|
||||
|
||||
sourceLikeDiv.text(str);
|
||||
h = parseFloat(sourceLikeDiv.css('height'));
|
||||
lh = parseFloat(sourceLikeDiv.css('line-height'));
|
||||
acc += Math.round(h / lh);
|
||||
});
|
||||
sourceLikeDiv.remove();
|
||||
_lineHeightMap.push(acc);
|
||||
linesCount = acc;
|
||||
|
||||
for (i = 0; i < linesCount; i++) {
|
||||
_scrollMap.push(-1);
|
||||
}
|
||||
|
||||
nonEmptyList.push(0);
|
||||
_scrollMap[0] = 0;
|
||||
|
||||
ui.area.markdown.find('.part').each(function (n, el) {
|
||||
var $el = $(el),
|
||||
t = $el.data('startline') - 1;
|
||||
if (t === '') {
|
||||
return;
|
||||
}
|
||||
t = _lineHeightMap[t];
|
||||
if (t !== 0) {
|
||||
nonEmptyList.push(t);
|
||||
}
|
||||
_scrollMap[t] = Math.round($el.offset().top + offset);
|
||||
});
|
||||
|
||||
nonEmptyList.push(linesCount);
|
||||
_scrollMap[linesCount] = ui.area.view[0].scrollHeight;
|
||||
|
||||
pos = 0;
|
||||
for (i = 1; i < linesCount; i++) {
|
||||
if (_scrollMap[i] !== -1) {
|
||||
pos++;
|
||||
continue;
|
||||
}
|
||||
|
||||
a = nonEmptyList[pos];
|
||||
b = nonEmptyList[pos + 1];
|
||||
_scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a));
|
||||
}
|
||||
|
||||
_scrollMap[0] = 0;
|
||||
|
||||
scrollMap = _scrollMap;
|
||||
lineHeightMap = _lineHeightMap;
|
||||
}
|
||||
|
||||
function getPartByEditorLineNo(lineNo) {
|
||||
var part = null;
|
||||
ui.area.markdown.find('.part').each(function (n, el) {
|
||||
if (part) return;
|
||||
var $el = $(el),
|
||||
t = $el.data('startline') - 1,
|
||||
f = $el.data('endline') - 1;
|
||||
if (t === '' || f === '') {
|
||||
return;
|
||||
}
|
||||
if (lineNo >= t && lineNo <= f) {
|
||||
part = $el;
|
||||
}
|
||||
});
|
||||
if (part)
|
||||
return {
|
||||
startline: part.data('startline') - 1,
|
||||
endline: part.data('endline') - 1,
|
||||
linediff: Math.abs(part.data('endline') - part.data('startline')) + 1,
|
||||
element: part
|
||||
};
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
function getEditorLineNoByTop(top) {
|
||||
for (var i = 0; i < lineHeightMap.length; i++)
|
||||
if (lineHeightMap[i] * editor.defaultTextHeight() > top)
|
||||
return i;
|
||||
return null;
|
||||
}
|
||||
|
||||
function syncScrollToView(_lineNo) {
|
||||
var lineNo, posTo;
|
||||
var scrollInfo = editor.getScrollInfo();
|
||||
if (!scrollMap || !lineHeightMap) {
|
||||
buildMap();
|
||||
}
|
||||
if (typeof _lineNo != "number") {
|
||||
var topDiffPercent, posToNextDiff;
|
||||
var textHeight = editor.defaultTextHeight();
|
||||
lineNo = Math.floor(scrollInfo.top / textHeight);
|
||||
var lineCount = editor.lineCount();
|
||||
var lastLineHeight = editor.getLineHandle(lineCount - 1).height;
|
||||
//if reach last line, then scroll to end
|
||||
if (scrollInfo.top + scrollInfo.clientHeight >= scrollInfo.height - lastLineHeight) {
|
||||
posTo = ui.area.view[0].scrollHeight - ui.area.view.height();
|
||||
} else {
|
||||
topDiffPercent = (scrollInfo.top % textHeight) / textHeight;
|
||||
posTo = scrollMap[lineNo];
|
||||
posToNextDiff = (scrollMap[lineNo + 1] - posTo) * topDiffPercent;
|
||||
posTo += Math.floor(posToNextDiff);
|
||||
}
|
||||
} else {
|
||||
if (viewScrolling) return;
|
||||
posTo = scrollMap[lineHeightMap[_lineNo]];
|
||||
}
|
||||
var posDiff = Math.abs(ui.area.view.scrollTop() - posTo);
|
||||
if (posDiff > scrollInfo.clientHeight / 5) {
|
||||
var duration = posDiff / 50;
|
||||
ui.area.view.stop(true).animate({
|
||||
scrollTop: posTo
|
||||
}, duration >= 50 ? duration : 100, "linear");
|
||||
} else {
|
||||
ui.area.view.stop(true).scrollTop(posTo);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue