fix: the wrong text is inserted after uploading an image

Ionaru · Feb 16, 2024 · d8e8fdb · d8e8fdb
1 parent f039bae
commit d8e8fdb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/cypress/e2e/4-image-upload/index.html b/cypress/e2e/4-image-upload/index.html
@@ -0,0 +1,24 @@
+<!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({
+            uploadImage: true,
+            showIcons: ["upload-image"],
+            imageUploadFunction: (file, onSuccess) => {
+                onSuccess('https://test.com/test.jpg')
+            }
+        });
+    </script>
+</body>
+
+</html>
diff --git a/cypress/e2e/4-image-upload/upload.cy.js b/cypress/e2e/4-image-upload/upload.cy.js
@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+describe('Upload', () => {
+    beforeEach(() => {
+        cy.visit(__dirname + '/index.html');
+    });
+
+    it('upload an image should insert a mock image url', () => {
+        cy.get('.EasyMDEContainer button.upload-image').click();
+        cy.get('.EasyMDEContainer input[type=file]').selectFile({
+            contents: Cypress.Buffer.from('', 'utf-8'),
+            fileName: 'test.jpg',
+            mimeType: 'image/jpeg'
+        }, {
+            action: 'drag-drop',
+            force: true
+        });
+        cy.get('.EasyMDEContainer .CodeMirror').contains('![test.jpg](https://test.com/test.jpg)');
+    });
+});
diff --git a/src/js/easymde.js b/src/js/easymde.js
@@ -878,18 +878,10 @@ function afterImageUploaded(editor, url) {
     var cm = editor.codemirror;
     var stat = getState(cm);
     var options = editor.options;
+    // TODO: Get the image name from the original file name
     var imageName = url.substr(url.lastIndexOf('/') + 1);
-    var ext = imageName.substring(imageName.lastIndexOf('.') + 1).replace(/\?.*$/, '').toLowerCase();
-
-    // Check if media is an image
-    if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'apng', 'avif', 'webp'].includes(ext)) {
-        _replaceSelection(cm, stat.image, options.insertTexts.uploadedImage, url);
-    } else {
-        var text_link = options.insertTexts.link;
-        text_link[0] = '[' + imageName;
-        _replaceSelection(cm, stat.link, text_link, url);
-    }
-
+    var text_link = [`${options.insertTexts.image[0]}${imageName}`, options.insertTexts.image[1]];
+    _replaceSelection(cm, stat.image, text_link, url);
     // show uploaded image filename for 1000ms
     editor.updateStatusBar('upload-image', editor.options.imageTexts.sbOnUploaded.replace('#image_name#', imageName));
     setTimeout(function () {