Make image path relative

Author: asmsuechan

browser/components/CodeEditor.js

@@ -192,8 +192,8 @@ export default class CodeEditor extends React.Component {
     const imagePath = e.dataTransfer.files[0].path
     const filename = path.basename(imagePath)
 
-    copyImage(imagePath, this.props.storageKey).then((imagePathInTheStorage) => {
-      const imageMd = `![${filename}](${imagePathInTheStorage})`
+    copyImage(imagePath, this.props.storageKey).then((imagePath) => {
+      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
       this.insertImageMd(imageMd)
     })
   }

browser/components/MarkdownEditor.js

@@ -4,6 +4,7 @@ import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+const _ = require('lodash')
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -213,6 +214,11 @@ class MarkdownEditor extends React.Component {
     let previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
+    const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+    const storage = _.find(cachedStorageList, {key: storageKey})
+    if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+
     return (
       <div className={className == null
           ? 'MarkdownEditor'
@@ -260,6 +266,7 @@ class MarkdownEditor extends React.Component {
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
           onMouseDown={(e) => this.handlePreviewMouseDown(e)}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          storagePath={storage.path}
         />
       </div>
     )

browser/components/MarkdownPreview.js

@@ -255,7 +255,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.linkClickHandler)
     })
 
-    let { value, theme, indentSize, codeBlockTheme } = this.props
+    let { value, theme, indentSize, codeBlockTheme, storagePath } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
 
@@ -283,6 +283,11 @@ export default class MarkdownPreview extends React.Component {
       el.addEventListener('click', this.linkClickHandler)
     })
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
+      if (!/\/:storage/.test(el.src)) return
+      el.src = el.src.replace('/:storage', path.join(storagePath, 'images'))
+    })
+
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
@@ -412,5 +417,6 @@ MarkdownPreview.propTypes = {
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
   className: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  storagePath: PropTypes.string
 }

browser/main/lib/dataApi/copyImage.js

@@ -26,7 +26,7 @@ function copyImage (filePath, storageKey) {
       if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
       const outputImage = fs.createWriteStream(path.join(imageDir, basename))
       inputImage.pipe(outputImage)
-      resolve(`${targetStorage.path}/images/${basename}`)
+      resolve(basename)
     } catch (e) {
       return reject(e)
     }