Merge pull request #608 from mayraamaral/master

Ionaru · web-flow · commit 22ce228b079a · 2025-02-18T00:56:58.000+01:00
chore: adjust the regex for previewing images so that it only attempts to render if the image has a bracket immediately preceding the parentheses
diff --git a/cypress/e2e/4.image-rendering/image-rendering.cy.js b/cypress/e2e/4.image-rendering/image-rendering.cy.js
@@ -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>`);
+    });
+});
diff --git a/cypress/e2e/4.image-rendering/index.html b/cypress/e2e/4.image-rendering/index.html
@@ -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>
diff --git a/src/js/easymde.js b/src/js/easymde.js
@@ -2251,7 +2251,7 @@ EasyMDE.prototype.render = function (el) {
                 return;
             }
             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 = {};
                 }

Original file line number	Diff line number	Diff line change
`@@ -2251,7 +2251,7 @@ EasyMDE.prototype.render = function (el) {`
`2251`	`2251`	`return;`
`2252`	`2252`	`}`
`2253`	`2253`	`if (!parentEl.hasAttribute('data-img-src')) {`
`2254`		`- var srcAttr = parentEl.innerText.match('\\((.*)\\)'); // might require better parsing according to markdown spec`
	`2254`	`+ var srcAttr = parentEl.innerText.match(/!\[.?\]\((.?)\)/); // might require better parsing according to markdown spec`
`2255`	`2255`	`if (!window.EMDEimagesCache) {`
`2256`	`2256`	`window.EMDEimagesCache = {};`
`2257`	`2257`	`}`