diff --git a/src/css/easymde.css b/src/css/easymde.css index ddd3c00..355a487 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -374,7 +374,7 @@ display: block; } -span[data-img-src]::before{ +span[data-img-src]::after{ content: ''; background-image: var(--bg-image); display: block; diff --git a/src/js/easymde.js b/src/js/easymde.js index 12fd370..3cbac68 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -2084,54 +2084,68 @@ EasyMDE.prototype.render = function (el) { }); } + function calcHeight(naturalWidth, naturalHeight) { + var height; + var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', ''); + if (naturalWidth < viewportWidth) { + height = naturalHeight + 'px'; + } else { + height = (naturalHeight / naturalWidth * 100) + '%'; + } + return height; + } + + 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) { + if (options.previewImagesInEditor === false) { return; } - function calcHeight(naturalWidth, naturalHeight) { - var height; - var viewportWidth = window.getComputedStyle(document.querySelector('.CodeMirror-sizer')).width.replace('px', ''); - if (naturalWidth < viewportWidth) { - height = naturalHeight + 'px'; - } else { - height = (naturalHeight / naturalWidth * 100) + '%'; - } - return height; - } - easyMDEContainer.querySelectorAll('.cm-formatting-image').forEach(function(e) { + easyMDEContainer.querySelectorAll('.cm-image-marker').forEach(function(e) { 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')) { var srcAttr = parentEl.innerText.match('\\((.*)\\)'); // might require better parsing according to markdown spec + if (!window.EMDEimagesCache) { + window.EMDEimagesCache = {}; + } + if (srcAttr && srcAttr.length >= 2) { - var img = document.createElement('img'); - img.onload = function() { - parentEl.setAttribute('data-img-src', srcAttr[1]); - parentEl.setAttribute('data-img-width', img.naturalWidth); - parentEl.setAttribute('data-img-height', img.naturalHeight); - parentEl.setAttribute('style', '--bg-image:url('+srcAttr[1]+');--width:'+img.naturalWidth+'px;--height:'+calcHeight(img.naturalWidth, img.naturalHeight)); - }; - img.src = srcAttr[1]; + var keySrc = srcAttr[1]; + + if (! window.EMDEimagesCache[keySrc]) { + var img = document.createElement('img'); + img.onload = function() { + window.EMDEimagesCache[keySrc] = { + naturalWidth: img.naturalWidth, + naturalHeight: img.naturalHeight, + url: keySrc, + }; + assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]); + }; + img.src = keySrc; + } else { + assignImageBlockAttributes(parentEl, window.EMDEimagesCache[keySrc]); + } } - } else { - // handle resizes case - 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)); - } + } }); } this.codemirror.on('update', function () { handleImages(); }); - this.onWindowResize = function() { - handleImages(); - }; - - window.addEventListener('resize', this.onWindowResize, true); - this.gui.sideBySide = this.createSideBySide(); this._rendered = this.element;