caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes for new editor

Browse Source
This commit is contained in:
benweet 2014-03-19 00:33:57 +00:00
parent 400d416e3c
commit 8cb7c307ee
9 changed files with 328 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/res/core.js
View File

@ -519,6 +519,7 @@ define([
// If the editor is already created
$editorElt.val(initDocumentContent);
aceEditor && aceEditor.selection.setSelectionRange(fileDesc.editorSelectRange);
aceEditor || pagedownEditor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
aceEditor ? aceEditor.focus() : $editorElt.focus();
//pagedownEditor.refreshPreview();
return;

376
public/res/editor.js
View File

@ -60,23 +60,27 @@ define([
});
var previousTextContent;
function onInputChange() {
function onInputContentChange() {
selectionStart = inputElt.selectionStart;
selectionEnd = inputElt.selectionEnd;
var currentTextContent = inputElt.textContent;
if(!/\n$/.test(currentTextContent)) {
currentTextContent += '\n';
}
if(fileChanged === false) {
fileDesc.editorStart = selectionStart;
fileDesc.editorEnd = selectionEnd;
if(currentTextContent == previousTextContent) {
return;
}
if(!/\n$/.test(currentTextContent)) {
currentTextContent += '\n';
}
fileDesc.content = currentTextContent;
eventMgr.onContentChanged(fileDesc);
}
else {
if(!/\n$/.test(currentTextContent)) {
currentTextContent += '\n';
fileDesc.content = currentTextContent;
}
eventMgr.onFileOpen(fileDesc);
previewElt.scrollTop = fileDesc.previewScrollTop;
selectionStart = fileDesc.editorStart;
@ -88,6 +92,58 @@ define([
previousTextContent = currentTextContent;
}
function adjustCursorPosition() {
setTimeout(function() {
selectionStart = inputElt.selectionStart;
selectionEnd = inputElt.selectionEnd;
var backwards = false;
var selection = window.getSelection();
if (!selection.isCollapsed) {
var range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
backwards = range.collapsed;
range.detach();
}
var selectionRange = selection.getRangeAt(0);
var container = backwards ? selectionRange.startContainer : selectionRange.endContainer;
var cursorY;
if(container.textContent == '\n') {
cursorY = container.parentNode.offsetTop + container.parentNode.offsetHeight / 2 - inputElt.scrollTop;
}
else {
if(selectionStart === selectionEnd) {
var selectedChar = inputElt.textContent[selectionStart];
if(selectedChar === undefined || selectedChar == '\n') {
selectionRange = createRange(selectionStart - 1, selectionEnd);
}
else {
selectionRange = createRange(selectionStart, selectionEnd + 1);
}
}
var selectionRect = selectionRange.getBoundingClientRect();
cursorY = selectionRect.top + selectionRect.height / 2 - inputElt.offsetTop;
selectionRange.detach();
}
var adjust = inputElt.offsetHeight / 2;
if(adjust > 130) {
adjust = 130;
}
var cursorMinY = adjust;
var cursorMaxY = inputElt.offsetHeight - adjust;
if(cursorY < cursorMinY) {
inputElt.scrollTop += cursorY - cursorMinY;
}
else if(cursorY > cursorMaxY) {
inputElt.scrollTop += cursorY - cursorMaxY;
}
}, 0);
}
eventMgr.addListener('onLayoutResize', adjustCursorPosition);
editor.init = function(elt1, elt2) {
inputElt = elt1;
previewElt = elt2;
@ -103,7 +159,7 @@ define([
if(fileChanged === false) {
fileDesc.editorScrollTop = scrollTop;
}
}).bind("keyup mouseup", onInputChange);
}).bind("keyup mouseup", onInputContentChange);
$(previewElt).scroll(function() {
if(fileChanged === false) {
fileDesc.previewScrollTop = previewElt.scrollTop;
@ -151,10 +207,10 @@ define([
var replacementText = value.substring(startIndex, value.length - endIndex + 1);
endIndex = currentValue.length - endIndex + 1;
var range = createRange(inputElt, startIndex, endIndex);
var range = createRange(startIndex, endIndex);
range.deleteContents();
range.insertNode(document.createTextNode(replacementText));
onInputChange();
onInputContentChange();
}
});
@ -213,87 +269,10 @@ define([
configurable: true
});
function findOffset(root, ss) {
if (!root) {
return null;
}
var offset = 0,
element = root,
container;
do {
container = element;
element = element.firstChild;
if (element) {
do {
var len = element.textContent.length;
if (offset <= ss && offset + len > ss) {
break;
}
offset += len;
} while (element = element.nextSibling);
}
if (!element) {
// It's the container's lastChild
break;
}
} while (element && element.hasChildNodes() && element.nodeType != 3);
if (element) {
return {
element: element,
offset: ss - offset
};
} else if (container) {
element = container;
while (element && element.lastChild) {
element = element.lastChild;
}
if (element.nodeType === 3) {
return {
element: element,
offset: element.textContent.length
};
} else {
return {
element: element,
offset: 0
};
}
}
return {
element: root,
offset: 0,
error: true
};
}
function createRange(root, ss, se) {
var range = document.createRange(),
offset = findOffset(root, ss);
range.setStart(offset.element, offset.offset);
if (se && se != ss) {
offset = findOffset(root, se);
}
range.setEnd(offset.element, offset.offset);
return range;
}
inputElt.setSelectionRange = function (ss, se) {
selectionStart = ss;
selectionEnd = se;
var range = createRange(editor.contentElt, ss, se);
var range = createRange(ss, se);
var selection = window.getSelection();
selection.removeAllRanges();
@ -303,6 +282,10 @@ define([
editor.$contentElt.on('keydown', function (evt) {
var cmdOrCtrl = evt.metaKey || evt.ctrlKey;
if(!cmdOrCtrl && !event.altKey && !event.shiftKey) {
adjustCursorPosition();
}
switch (evt.keyCode) {
case 9: // Tab
if (!cmdOrCtrl) {
@ -330,14 +313,14 @@ define([
editor.$contentElt.on('paste', function () {
pagedownEditor.undoManager.setMode("paste");
setTimeout(function() {
onInputChange();
onInputContentChange();
}, 0);
});
editor.$contentElt.on('cut', function () {
pagedownEditor.undoManager.setMode("cut");
setTimeout(function() {
onInputChange();
onInputContentChange();
}, 0);
});
@ -403,94 +386,13 @@ define([
pagedownEditor.undoManager.setMode("newlines");
state.before += '\n'// + indent;
state.before += '\n' + indent;
state.selection = '';
state.ss += indent.length + 1;
state.se = state.ss;
},
comment: function (state) {
var textAction;
var open = '<!--',
close = '-->';
var start = state.before.lastIndexOf(open),
end = state.after.indexOf(close),
closeBefore = state.before.lastIndexOf(close),
openAfter = state.after.indexOf(start);
pagedownEditor.undoManager.setMode("typing");
if (start > -1 && end > -1 && (start > closeBefore || closeBefore === -1) && (end < openAfter || openAfter === -1)) {
// Uncomment
state.before = state.before.splice(start, open.length);
state.after = state.after.splice(end, close.length);
textAction = [{
add: '',
del: open,
start: start
}, {
add: '',
del: close,
start: state.before.length + state.selection.length + end
}];
state.ss -= open.length;
state.se -= open.length;
return textAction;
} else {
// Comment
if (state.selection) {
// Comment selection
state.selection = open + state.selection + close;
textAction = [{
add: open,
del: '',
start: state.ss
}, {
add: close,
del: '',
start: open.length + state.se
}];
} else {
// Comment whole line
start = state.before.lastIndexOf('\n') + 1;
end = state.after.indexOf('\n');
if (end === -1) {
end = state.after.length;
}
while (/\s/.test(state.before.charAt(start))) {
start++;
}
state.before = state.before.splice(start, 0, open);
state.after = state.after.splice(end, 0, close);
textAction = [{
add: open,
del: '',
start: start
}, {
add: close,
del: '',
start: state.before.length + end
}];
}
state.ss += open.length;
state.se += open.length;
return textAction;
}
}
};
};
@ -516,7 +418,12 @@ define([
// Find modified section starting from top
var leftIndex = sectionList.length;
_.some(sectionList, function(section, index) {
if(index >= newSectionList.length || section.text != newSectionList[index].text) {
var newSection = newSectionList[index];
if(index >= newSectionList.length ||
// Check modified
section.textWithFrontMatter != newSection.textWithFrontMatter ||
// Check that section has not been detached from the DOM with backspace
!section.highlightedContent.parentNode) {
leftIndex = index;
return true;
}
@ -525,9 +432,14 @@ define([
// Find modified section starting from bottom
var rightIndex = -sectionList.length;
_.some(sectionList.slice().reverse(), function(section, index) {
var newSectionText = newSectionList[newSectionList.length - index - 1].text;
// Check also the content of the node since new lines can be added just at the beggining
if(index >= newSectionList.length || section.text != newSectionText || section.highlightedContent.textContent != newSectionText) {
var newSection = newSectionList[newSectionList.length - index - 1];
if(index >= newSectionList.length ||
// Check modified
section.textWithFrontMatter != newSection.textWithFrontMatter ||
// Check that section has not been detached from the DOM with backspace
!section.highlightedContent.parentNode ||
// Check also the content of the node since new lines can be added just at the beggining
section.highlightedContent.textContent != newSection.textWithFrontMatter) {
rightIndex = -index;
return true;
}
@ -577,8 +489,6 @@ define([
editor.contentElt.appendChild(newSectionEltList);
}
//var dummyTextNode = document.createTextNode('\n');
//editor.contentElt.appendChild(dummyTextNode);
inputElt.setSelectionRange(selectionStart, selectionEnd);
// Remove textNodes created outside sections
@ -592,49 +502,9 @@ define([
}
}
}
/*
function asyncHighlightSections() {
var startTime = Date.now();
var deferredList = [];
modifiedSections.forEach(function(section) {
var deferred = $.Deferred();
setTimeout(function() {
highlight(section);
deferred.resolve();
}, 0);
deferredList.push(deferred);
});
$.when.apply($, deferredList).then(function() {
var text = _.reduce(sectionList, function(text, section) {
return text + section.text;
}, '');
// Check that the editor has the actual value
if(inputElt.textContent == text) {
selectionStart = inputElt.selectionStart;
selectionEnd = inputElt.selectionEnd;
var newSectionEltList = document.createDocumentFragment();
modifiedSections.forEach(function(section) {
newSectionEltList.appendChild(section.highlightedContent);
});
if(insertBeforeSection !== undefined) {
var insertBeforeElt = document.getElementById("wmd-input-section-" + insertBeforeSection.id);
editor.$contentElt[0].insertBefore(newSectionEltList, insertBeforeElt);
}
else {
editor.$contentElt[0].appendChild(newSectionEltList);
}
inputElt.setSelectionRange(selectionStart, selectionEnd);
elapsedTime = Date.now() - startTime;
}
});
}
*/
function highlight(section) {
var text = section.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
var text = section.textWithFrontMatter.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
var sectionElt = crel('span', {
id: 'wmd-input-section-' + section.id,
class: 'wmd-input-section'
@ -643,5 +513,79 @@ define([
section.highlightedContent = sectionElt;
}
function createRange(ss, se) {
function findOffset(ss) {
var offset = 0,
element = editor.contentElt,
container;
do {
container = element;
element = element.firstChild;
if (element) {
do {
var len = element.textContent.length;
if (offset <= ss && offset + len > ss) {
break;
}
offset += len;
} while (element = element.nextSibling);
}
if (!element) {
// It's the container's lastChild
break;
}
} while (element && element.hasChildNodes() && element.nodeType != 3);
if (element) {
return {
element: element,
offset: ss - offset
};
} else if (container) {
element = container;
while (element && element.lastChild) {
element = element.lastChild;
}
if (element.nodeType === 3) {
return {
element: element,
offset: element.textContent.length
};
} else {
return {
element: element,
offset: 0
};
}
}
return {
element: editor.contentElt,
offset: 0,
error: true
};
}
var range = document.createRange(),
offset = findOffset(ss);
range.setStart(offset.element, offset.offset);
if (se && se != ss) {
offset = findOffset(se);
}
range.setEnd(offset.element, offset.offset);
return range;
}
return editor;
});

3
public/res/extensions/buttonFocusMode.js
View File

@ -43,7 +43,8 @@ define([
var cursorMinY = coef*editorHeight;
var cursorMaxY = (1-coef)*editorHeight;
var cursorY = $editorElt.caret('offset').top - $editorElt.offset().top;
console.log($editorElt.caret('offset'));
//console.log($editorElt.find('.pre-content').caret('offset'));
//console.log(window.getSelection().getRangeAt(0).getBoundingClientRect());
//$positionHelper.detach();
//parentNode.normalize();
/*

7
public/res/extensions/markdownSectionParser.js
View File

@ -40,7 +40,7 @@ define([
});
};
var trimLen;
var trimLen = 0;
markdownSectionParser.onMarkdownTrim = function(len) {
trimLen = len;
};
@ -48,13 +48,16 @@ define([
var sectionCounter = 0;
function parseFileContent(fileDesc) {
var text = fileDesc.content.substring(trimLen);
var frontMatter = fileDesc.content.substring(0, trimLen);
var tmpText = text + "\n\n";
function addSection(startOffset, endOffset) {
var sectionText = tmpText.substring(offset, endOffset);
sectionList.push({
id: ++sectionCounter,
text: sectionText
text: sectionText,
textWithFrontMatter: frontMatter + sectionText
});
frontMatter = '';
}
sectionList = [];
var offset = 0;

67
public/res/extensions/scrollLink.js
View File

@ -161,8 +161,8 @@ define([
lastPreviewScrollTop = previewScrollTop;
return;
}
$previewElt.stop('scrollLinkFx', true).animate({
scrollTop: destScrollTop
scrollingHelper.stop('scrollLinkFx', true).css('value', 0).animate({
value: destScrollTop - previewScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
@ -170,13 +170,15 @@ define([
step: function(now) {
isPreviewMoving = true;
lastPreviewScrollTop = previewScrollTop + now;
$previewElt.scrollTop(lastPreviewScrollTop);
},
done: function() {
setTimeout(function() {
_.defer(function() {
isPreviewMoving = false;
}, 100);
});
},
}).dequeue('scrollLinkFx');
}
else if(isScrollPreview === true) {
if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
@ -205,43 +207,28 @@ define([
lastEditorScrollTop = editorScrollTop;
return;
}
if(window.lightMode) {
$editorElt.stop('scrollLinkFx', true).animate({
scrollTop: destScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
queue: 'scrollLinkFx',
step: function(now) {
isEditorMoving = true;
lastEditorScrollTop = editorScrollTop + now;
},
done: function() {
setTimeout(function() {
isEditorMoving = false;
}, 100);
},
}).dequeue('scrollLinkFx');
}
else {
scrollingHelper.stop('scrollLinkFx', true).css('value', 0).animate({
value: destScrollTop - editorScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
queue: 'scrollLinkFx',
step: function(now) {
isEditorMoving = true;
lastEditorScrollTop = editorScrollTop + now;
scrollingHelper.stop('scrollLinkFx', true).css('value', 0).animate({
value: destScrollTop - editorScrollTop
}, {
easing: 'easeOutSine',
duration: 200,
queue: 'scrollLinkFx',
step: function(now) {
isEditorMoving = true;
lastEditorScrollTop = editorScrollTop + now;
if(window.lightMode) {
$editorElt.scrollTop(lastEditorScrollTop);
}
else {
aceEditor.session.setScrollTop(lastEditorScrollTop);
},
done: function() {
_.defer(function() {
isEditorMoving = false;
});
},
}).dequeue('scrollLinkFx');
}
}
},
done: function() {
_.defer(function() {
isEditorMoving = false;
});
},
}).dequeue('scrollLinkFx');
}
}, 100);

10
public/res/extensions/yamlFrontMatterParser.js
View File

@ -17,7 +17,8 @@ define([
};
var regex = /^(\s*-{3}\s*\n([\w\W]+?)\n\s*-{3}\s*\n)?([\w\W]*)$/;
yamlFrontMatterParser.onContentChanged = function(fileDesc) {
function parseFrontMatter(fileDesc) {
var text = fileDesc.content;
var results = regex.exec(text);
var yaml = results[2];
@ -34,11 +35,14 @@ define([
}
catch (e) {
eventMgr.onMarkdownTrim(0);
return text;
return;
}
}
eventMgr.onMarkdownTrim((results[1] || '').length);
};
}
yamlFrontMatterParser.onFileOpen = parseFrontMatter;
yamlFrontMatterParser.onContentChanged = parseFrontMatter;
return yamlFrontMatterParser;
});

32
public/res/html/bodyIndex.html
View File

@ -123,6 +123,22 @@
</div>
<div class=dropdown-header>IMPORT</div>
<div class="list-group">
<a class="list-group-item action-sync-import-dropbox" href="#"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-dropbox"></i> Open from
Dropbox</a>
<a href="#" class="list-group-item submenu-sync-gdrive action-sync-import-gdrive"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Open from
Google Drive</a>
<a href="#" class="list-group-item submenu-sync-gdrivesec action-sync-import-gdrivesec"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Open from
Google Drive <small>(2nd account)</small></a>
<a href="#" class="list-group-item submenu-sync-gdriveter action-sync-import-gdriveter"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Open from
Google Drive <small>(3rd account)</small></a>
<a data-toggle="modal"
data-target=".modal-import-harddrive-markdown"
class="list-group-item action-reset-input" href="#"><i
@ -134,22 +150,6 @@
data-target=".modal-import-harddrive-html"
class="list-group-item action-reset-input" href="#"><i
class="icon-code"></i> Convert HTML to Markdown</a>
<a class="list-group-item action-sync-import-dropbox" href="#"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-dropbox"></i> Import from
Dropbox</a>
<a href="#" class="list-group-item submenu-sync-gdrive action-sync-import-gdrive"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Import from
Google Drive</a>
<a href="#" class="list-group-item submenu-sync-gdrivesec action-sync-import-gdrivesec"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Import from
Google Drive <small>(2nd account)</small></a>
<a href="#" class="list-group-item submenu-sync-gdriveter action-sync-import-gdriveter"
data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Import from
Google Drive <small>(3rd account)</small></a>
</div>
<ul class="nav">
<li><a href="#" data-toggle="modal"

1
public/res/libs/prism-markdown.js
View File

@ -106,6 +106,7 @@ Prism.languages.md = (function() {
'md md-toc': /^\s*\[(toc|TOC)\]\s*$/g
}
};
md.br = /^\n$/gm;
md.img = {
pattern: /!\[[^\]]*\]\([^\)]+\)/g,
inside: {

2
public/res/styles/main.less
View File

@ -1252,7 +1252,7 @@ a {
word-break: break-word;
> div {
margin: 0 auto;
padding: 10px 0 230px;
padding-bottom: 230px;
}
}