From de0b145d8aad760f57a108ba07832b5e1555b786 Mon Sep 17 00:00:00 2001
From: u-e <ugurerdal93@gmail.com>
Date: Thu, 20 Dec 2018 15:24:26 +0300
Subject: [PATCH] fixed image

---
 src/utils/markdownToHtml.js | 39 ++++++++++++++++++++++++++++---------
 src/utils/postParser.js     |  2 +-
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/utils/markdownToHtml.js b/src/utils/markdownToHtml.js
index 7c96af94c..fd3326f5d 100644
--- a/src/utils/markdownToHtml.js
+++ b/src/utils/markdownToHtml.js
@@ -16,6 +16,9 @@ const centerRegex = /(<center>)/g;
 const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))(.*)/gim;
 const pullRightLeftRegex = /(<div class="[^"]*?pull-[^"]*?">(.*?)(<[/]div>))/g;
 const linkRegex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
+const markdownImageRegex = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g;
+const urlRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gm;
+
 export const markDown2Html = (input) => {
   if (!input) {
     return '';
@@ -42,9 +45,9 @@ export const markDown2Html = (input) => {
     output = changePullRightLeft(output);
   }
 
-  if (imgRegex.test(output)) {
-    output = createImage(output);
-  }
+  // if (imgRegex.test(output)) {
+  //   output = createImage(output);
+  // }
 
   if (vimeoRegex.test(output)) {
     output = createVimeoIframe(output);
@@ -58,10 +61,6 @@ export const markDown2Html = (input) => {
     output = createCenterImage(output);
   }
 
-  if (onlyImageDoubleLinkRegex.test(output)) {
-    output = createFromDoubleImageLink(output);
-  }
-
   if (onlyImageLinkRegex.test(output)) {
     output = createImage(output);
   }
@@ -74,6 +73,14 @@ export const markDown2Html = (input) => {
     output = steemitUrlHandle(output);
   }
 
+  if (markdownImageRegex.test(output)) {
+    output = changeMarkdownImage(output);
+  }
+
+  // if (onlyImageDoubleLinkRegex.test(output)) {
+  //   output = createFromDoubleImageLink(output);
+  // }
+
   output = md.render(output);
 
   return output;
@@ -96,6 +103,17 @@ export const replaceTags = input => input.replace(tagsRegex, (tag) => {
 
 export const removeOnlyPTag = input => input;
 
+const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) => {
+  const markdownMatch = link.match(markdownImageRegex);
+  if (markdownMatch[0]) {
+    const firstMarkdownMatch = markdownMatch[0];
+    const _link = firstMarkdownMatch.match(urlRegex)[0];
+
+    return `<img data-href="${`https://img.esteem.app/500x0/${_link}`}" src="${`https://img.esteem.app/400x0/${_link}`}">`;
+  }
+  return link;
+});
+
 const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align:center;">');
 
 const createCenterImage = input => input.replace(imgCenterRegex, (link) => {
@@ -121,11 +139,14 @@ const steemitUrlHandle = input => input.replace(postRegex, (link) => {
   return `<a class="markdown-post-link" href="${permlink}" data_tag={${tag}} data_author="${author}">/${permlink}</a>`;
 });
 
-const createImage = input => input.replace(onlyImageLinkRegex, link => `<img data-href="${link}" src="${link}">`);
+const createImage = input => input.replace(
+  onlyImageLinkRegex,
+  link => `<img data-href="${`https://img.esteem.app/300x0/${link}`}" src="${`https://img.esteem.app/300x0/${link}`}">`,
+);
 
 const createFromDoubleImageLink = input => input.replace(onlyImageDoubleLinkRegex, (link) => {
   const _link = link.trim();
-  return `<img data-href="${_link}" src="${_link}">`;
+  return `<img data-href="https://img.esteem.app/300x0/${_link}" src="https://img.esteem.app/300x0/${_link}">`;
 });
 
 const createYoutubeIframe = input => input.replace(youTubeRegex, (link) => {
diff --git a/src/utils/postParser.js b/src/utils/postParser.js
index c74b26384..a5455948c 100644
--- a/src/utils/postParser.js
+++ b/src/utils/postParser.js
@@ -74,7 +74,7 @@ const postImage = (metaData, body) => {
   }
 
   if (imageLink) {
-    return `https://cdn.steemitimages.com/300x0/${imageLink}`;
+    return `https://img.esteem.app/300x0/${imageLink}`;
   }
   return '';
 };