From 638f65e4eae7b192202bc81dacf109ea5bc068b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20H=C3=A4usler?= <hfelix@protonmail.ch>
Date: Sun, 9 Dec 2018 17:27:02 +0100
Subject: [PATCH] Respect existing image title if no source is specified (#599)

---
 .github/CHANGELOG.md                    |  2 ++
 src/muya/lib/contentState/formatCtrl.js | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 6a906f1a3..235a0eb22 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 **:butterfly:Optimization**
 
+- Respect existing image title if no source is specified (#562)
+
 **:beetle:Bug fix**
 
 - Fix dark preview box background color (#587)
diff --git a/src/muya/lib/contentState/formatCtrl.js b/src/muya/lib/contentState/formatCtrl.js
index f22325445..ee86c2955 100644
--- a/src/muya/lib/contentState/formatCtrl.js
+++ b/src/muya/lib/contentState/formatCtrl.js
@@ -176,6 +176,7 @@ const formatCtrl = ContentState => {
 
   ContentState.prototype.insertImage = function (url) {
     const title = /\/?([^./]+)\.[a-z]+$/.exec(url)[1] || ''
+    const encodeUrl = encodeURI(url)
     const { start, end } = this.cursor
     const { formats } = this.selectionFormats({ start, end })
     const { key, offset: startOffset } = start
@@ -185,29 +186,38 @@ const formatCtrl = ContentState => {
     const imageFormat = formats.filter(f => f.type === 'image')
 
     if (imageFormat.length === 1) {
-      // replace pre image
+      // Replace already existing image
+      let imageTitle = title
+
+      // Extract title from image if there isn't an image source already (GH#562). E.g: ![old-title]()
+      if (imageFormat[0].alt && !imageFormat[0].src) {
+        imageTitle = imageFormat[0].alt
+      }
+
       const { start, end } = imageFormat[0].range
       block.text = text.substring(0, start) +
-        `![${title}](${url})` +
+        `![${imageTitle}](${encodeUrl})` +
         text.substring(end)
 
       this.cursor = {
         start: { key, offset: start + 2 },
-        end: { key, offset: start + 2 + title.length }
+        end: { key, offset: start + 2 + imageTitle.length }
       }
     } else if (key !== end.key) {
+      // Replace multi-line text
       const endBlock = this.getBlock(end.key)
       const { text } = endBlock
-      endBlock.text = text.substring(0, endOffset) + `![${title}](${url})` + text.substring(endOffset)
+      endBlock.text = text.substring(0, endOffset) + `![${title}](${encodeUrl})` + text.substring(endOffset)
       const offset = endOffset + 2
       this.cursor = {
         start: { key: end.key, offset },
         end: { key: end.key, offset: offset + title.length }
       }
     } else {
+      // Replace single-line text
       const imageTitle = startOffset !== endOffset ? text.substring(startOffset, endOffset) : title
       block.text = text.substring(0, start.offset) +
-        `![${imageTitle}](${url})` +
+        `![${imageTitle}](${encodeUrl})` +
         text.substring(end.offset)
 
       this.cursor = {