2
0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-15 14:04:28 -06:00

Merge pull request #608 from mayraamaral/master

chore: adjust the regex for previewing images so that it only attempts to render if the image has a bracket immediately preceding the parentheses
This commit is contained in:
Jeroen Akkerman 2025-02-18 00:56:58 +01:00 committed by GitHub
commit 22ce228b07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 64 additions and 1 deletions

View File

@ -0,0 +1,43 @@
/// <reference types="cypress" />
describe('Image rendering', () => {
const imageUrl = 'https://picsum.photos/id/237/150';
beforeEach(() => {
cy.visit(__dirname + '/index.html');
cy.intercept('GET', imageUrl).as('image');
});
it('must render an image inside the editor', () => {
cy.get('.EasyMDEContainer').should('be.visible');
cy.get('#textarea').should('not.be.visible');
cy.get('.EasyMDEContainer .CodeMirror').type(imageUrl);
cy.get('.EasyMDEContainer .CodeMirror').type('{home}![Dog!]({end})');
cy.wait('@image');
cy.get(`.EasyMDEContainer [data-img-src="${imageUrl}"]`).should('be.visible');
cy.previewOn();
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', `<p><img src="${imageUrl}" alt="Dog!"></p>`);
});
it('must be able to handle parentheses inside image alt text', () => {
cy.get('.EasyMDEContainer').should('be.visible');
cy.get('#textarea').should('not.be.visible');
cy.get('.EasyMDEContainer .CodeMirror').type(imageUrl);
cy.get('.EasyMDEContainer .CodeMirror').type('{home}![Dog! (He\'s a good boy!)]({end})');
cy.wait('@image');
cy.get(`.EasyMDEContainer [data-img-src="${imageUrl}"]`).should('be.visible');
cy.previewOn();
cy.get('.EasyMDEContainer .editor-preview').should('contain.html', `<p><img src="${imageUrl}" alt="Dog! (He's a good boy!)"></p>`);
});
});

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default</title>
<link rel="stylesheet" href="../../../dist/easymde.min.css">
<script src="../../../dist/easymde.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>
<script>
const easyMDE = new EasyMDE({
previewImagesInEditor: true,
});
</script>
</body>
</html>

View File

@ -2251,7 +2251,7 @@ EasyMDE.prototype.render = function (el) {
return; 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) { if (!window.EMDEimagesCache) {
window.EMDEimagesCache = {}; window.EMDEimagesCache = {};
} }