Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-02 15:44:28 -06:00
Code Issues Releases Wiki Activity

fix cursor preceise positioning when content with images are loaded into editor, show preview only for images on separate lines (not inlines)

Browse Source
This commit is contained in:
Ivan Borshchov 2020-10-08 12:19:11 +03:00
parent 23c17b88b4
commit dba3201c79
2 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/easymde.css
View File

@ -374,7 +374,7 @@
display: block; display: block;
} }
span[data-img-src]::before{ span[data-img-src]::after{
content: ''; content: '';
background-image: var(--bg-image); background-image: var(--bg-image);
display: block; display: block;

60
src/js/easymde.js
View File

@ -2084,11 +2084,6 @@ EasyMDE.prototype.render = function (el) {
}); });
} }
function handleImages() {
if (!options.previewImagesInEditor) {
return;
}
function calcHeight(naturalWidth, naturalHeight) { function calcHeight(naturalWidth, naturalHeight) {
var height; var height;
var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', ''); var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', '');
@ -2099,26 +2094,51 @@ EasyMDE.prototype.render = function (el) {
} }
return height; return height;
} }
easyMDEContainer.querySelectorAll('.cm-formatting-image').forEach(function(e) {
var _vm = this;
function assignImageBlockAttributes(parentEl, img) {
parentEl.setAttribute('data-img-src', img.url);
parentEl.setAttribute('style', '--bg-image:url('+img.url+');--width:'+img.naturalWidth+'px;--height:'+calcHeight(img.naturalWidth, img.naturalHeight));
_vm.codemirror.setSize();
}
function handleImages() {
if (options.previewImagesInEditor === false) {
return;
}
easyMDEContainer.querySelectorAll('.cm-image-marker').forEach(function(e) {
var parentEl = e.parentElement; var parentEl = e.parentElement;
if (!parentEl.innerText.match(/^!\[.*?\]\(.*\)/g)) {
// if img pasted on the same line with other text, don't preview, preview only images on separate line
return;
}
if (!parentEl.hasAttribute('data-img-src')) { if (!parentEl.hasAttribute('data-img-src')) {
var srcAttr = parentEl.innerText.match('\\((.*)\\)'); // might require better parsing according to markdown spec var srcAttr = parentEl.innerText.match('\\((.*)\\)'); // might require better parsing according to markdown spec
if (!window.EMDEimagesCache) {
window.EMDEimagesCache = {};
}
if (srcAttr && srcAttr.length >= 2) { if (srcAttr && srcAttr.length >= 2) {
var keySrc = srcAttr[1];
if (! window.EMDEimagesCache[keySrc]) {
var img = document.createElement('img'); var img = document.createElement('img');
img.onload = function() { img.onload = function() {
parentEl.setAttribute('data-img-src', srcAttr[1]); window.EMDEimagesCache[keySrc] = {
parentEl.setAttribute('data-img-width', img.naturalWidth); naturalWidth: img.naturalWidth,
parentEl.setAttribute('data-img-height', img.naturalHeight); naturalHeight: img.naturalHeight,
parentEl.setAttribute('style', '--bg-image:url('+srcAttr[1]+');--width:'+img.naturalWidth+'px;--height:'+calcHeight(img.naturalWidth, img.naturalHeight)); url: keySrc,
}; };
img.src = srcAttr[1]; assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]);
} };
img.src = keySrc;
} else { } else {
// handle resizes case assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]);
var src = parentEl.getAttribute('data-img-src'); }
var naturalWidth = +parentEl.getAttribute('data-img-width'); }
var naturalHeight = +parentEl.getAttribute('data-img-height');
parentEl.setAttribute('style', '--bg-image:url('+src+');--width:'+naturalWidth+'px;--height:'+calcHeight(naturalWidth, naturalHeight));
} }
}); });
} }
@ -2126,12 +2146,6 @@ EasyMDE.prototype.render = function (el) {
handleImages(); handleImages();
}); });
this.onWindowResize = function() {
handleImages();
};
window.addEventListener('resize', this.onWindowResize, true);
this.gui.sideBySide = this.createSideBySide(); this.gui.sideBySide = this.createSideBySide();
this._rendered = this.element; this._rendered = this.element;