BoostIO · ehhc · Apr 18, 2018 · Apr 21, 2018 · Apr 24, 2018
diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
@@ -3,12 +3,10 @@ import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
-import path from 'path'
-import copyImage from 'browser/main/lib/dataApi/copyImage'
-import { findStorage } from 'browser/lib/findStorage'
-import fs from 'fs'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
+
 const { ipcRenderer } = require('electron')
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
@@ -275,23 +273,13 @@ export default class CodeEditor extends React.Component {
     this.editor.setCursor(cursor)
   }
 
-  handleDropImage (e) {
-    e.preventDefault()
-    const ValidImageTypes = ['image/gif', 'image/jpeg', 'image/png']
-
-    const file = e.dataTransfer.files[0]
-    const filePath = file.path
-    const filename = path.basename(filePath)
-    const fileType = file['type']
-
-    copyImage(filePath, this.props.storageKey).then((imagePath) => {
-      var showPreview = ValidImageTypes.indexOf(fileType) > 0
-      const imageMd = `${showPreview ? '!' : ''}[${filename}](${path.join('/:storage', imagePath)})`
-      this.insertImageMd(imageMd)
-    })
+  handleDropImage (dropEvent) {
+    dropEvent.preventDefault()
+    const {storageKey, noteKey} = this.props
+    attachmentManagement.handleAttachmentDrop(this, storageKey, noteKey, dropEvent)
   }
 
-  insertImageMd (imageMd) {
+  insertAttachmentMd (imageMd) {
     this.editor.replaceSelection(imageMd)
   }
 
@@ -317,24 +305,8 @@ export default class CodeEditor extends React.Component {
       return prevChar === '](' && nextChar === ')'
     }
     if (dataTransferItem.type.match('image')) {
-      const blob = dataTransferItem.getAsFile()
-      const reader = new FileReader()
-      let base64data
-
-      reader.readAsDataURL(blob)
-      reader.onloadend = () => {
-        base64data = reader.result.replace(/^data:image\/png;base64,/, '')
-        base64data += base64data.replace('+', ' ')
-        const binaryData = new Buffer(base64data, 'base64').toString('binary')
-        const imageName = Math.random().toString(36).slice(-16)
-        const storagePath = findStorage(this.props.storageKey).path
-        const imageDir = path.join(storagePath, 'images')
-        if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
-        const imagePath = path.join(imageDir, `${imageName}.png`)
-        fs.writeFile(imagePath, binaryData, 'binary')
-        const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
-        this.insertImageMd(imageMd)
-      }
+      const {storageKey, noteKey} = this.props
+      attachmentManagement.handlePastImageEvent(this, storageKey, noteKey, dataTransferItem)
     } else if (this.props.fetchUrlTitle && isURL(pastedTxt) && !isInLinkTag(editor)) {
       this.handlePasteUrl(e, editor, pastedTxt)
     }

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
@@ -5,7 +5,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'
-import {findStorage} from 'browser/lib/findStorage'
+import { findStorage } from 'browser/lib/findStorage'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -223,7 +223,7 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    const { className, value, config, storageKey } = this.props
+    const {className, value, config, storageKey, noteKey} = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -249,50 +249,52 @@ class MarkdownEditor extends React.Component {
             ? 'codeEditor'
             : 'codeEditor--hide'
           }
-          ref='code'
-          mode='GitHub Flavored Markdown'
-          value={value}
-          theme={config.editor.theme}
-          keyMap={config.editor.keyMap}
-          fontFamily={config.editor.fontFamily}
-          fontSize={editorFontSize}
-          indentType={config.editor.indentType}
-          indentSize={editorIndentSize}
-          enableRulers={config.editor.enableRulers}
-          rulers={config.editor.rulers}
-          displayLineNumbers={config.editor.displayLineNumbers}
-          scrollPastEnd={config.editor.scrollPastEnd}
-          storageKey={storageKey}
-          fetchUrlTitle={config.editor.fetchUrlTitle}
-          onChange={(e) => this.handleChange(e)}
-          onBlur={(e) => this.handleBlur(e)}
+                    ref='code'
+                    mode='GitHub Flavored Markdown'
+                    value={value}
+                    theme={config.editor.theme}
+                    keyMap={config.editor.keyMap}
+                    fontFamily={config.editor.fontFamily}
+                    fontSize={editorFontSize}
+                    indentType={config.editor.indentType}
+                    indentSize={editorIndentSize}
+                    enableRulers={config.editor.enableRulers}
+                    rulers={config.editor.rulers}
+                    displayLineNumbers={config.editor.displayLineNumbers}
+                    scrollPastEnd={config.editor.scrollPastEnd}
+                    storageKey={storageKey}
+                    noteKey={noteKey}
+                    fetchUrlTitle={config.editor.fetchUrlTitle}
+                    onChange={(e) => this.handleChange(e)}
+                    onBlur={(e) => this.handleBlur(e)}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
             : 'preview--hide'
           }
-          style={previewStyle}
-          theme={config.ui.theme}
-          keyMap={config.editor.keyMap}
-          fontSize={config.preview.fontSize}
-          fontFamily={config.preview.fontFamily}
-          codeBlockTheme={config.preview.codeBlockTheme}
-          codeBlockFontFamily={config.editor.fontFamily}
-          lineNumber={config.preview.lineNumber}
-          indentSize={editorIndentSize}
-          scrollPastEnd={config.preview.scrollPastEnd}
-          smartQuotes={config.preview.smartQuotes}
-          sanitize={config.preview.sanitize}
-          ref='preview'
-          onContextMenu={(e) => this.handleContextMenu(e)}
-          onDoubleClick={(e) => this.handleDoubleClick(e)}
-          tabIndex='0'
-          value={this.state.renderValue}
-          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
-          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
-          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
-          showCopyNotification={config.ui.showCopyNotification}
-          storagePath={storage.path}
+                         style={previewStyle}
+                         theme={config.ui.theme}
+                         keyMap={config.editor.keyMap}
+                         fontSize={config.preview.fontSize}
+                         fontFamily={config.preview.fontFamily}
+                         codeBlockTheme={config.preview.codeBlockTheme}
+                         codeBlockFontFamily={config.editor.fontFamily}
+                         lineNumber={config.preview.lineNumber}
+                         indentSize={editorIndentSize}
+                         scrollPastEnd={config.preview.scrollPastEnd}
+                         smartQuotes={config.preview.smartQuotes}
+                         sanitize={config.preview.sanitize}
+                         ref='preview'
+                         onContextMenu={(e) => this.handleContextMenu(e)}
+                         onDoubleClick={(e) => this.handleDoubleClick(e)}
+                         tabIndex='0'
+                         value={this.state.renderValue}
+                         onMouseUp={(e) => this.handlePreviewMouseUp(e)}
+                         onMouseDown={(e) => this.handlePreviewMouseDown(e)}
+                         onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+                         showCopyNotification={config.ui.showCopyNotification}
+                         storagePath={storage.path}
+                         noteKey={noteKey}
         />
       </div>
     )

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
@@ -13,9 +13,11 @@ import htmlTextHelper from 'browser/lib/htmlTextHelper'
 import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
-import {escapeHtmlCharacters} from 'browser/lib/utils'
+import { escapeHtmlCharacters } from 'browser/lib/utils'
 
 const { remote } = require('electron')
+const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
+
 const { app } = remote
 const path = require('path')
 const dialog = remote.dialog
@@ -209,8 +211,9 @@ export default class MarkdownPreview extends React.Component {
       const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
 
       const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
-      const body = this.markdown.render(escapeHtmlCharacters(noteContent))
+      let body = this.markdown.render(escapeHtmlCharacters(noteContent))
       const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(noteContent, this.props.storagePath)
 
       files.forEach((file) => {
         file = file.replace('file://', '')
@@ -219,6 +222,13 @@ export default class MarkdownPreview extends React.Component {
           dst: 'css'
         })
       })
+      attachmentsAbsolutePaths.forEach((attachment) => {
+        exportTasks.push({
+          src: attachment,
+          dst: attachmentManagement.DESTINATION_FOLDER
+        })
+      })
+      body = attachmentManagement.removeStorageAndNoteReferences(body, this.props.noteKey)
 
       let styles = ''
       files.forEach((file) => {
@@ -391,13 +401,11 @@ export default class MarkdownPreview extends React.Component {
         value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
       })
     }
-    this.refs.root.contentWindow.document.body.innerHTML = this.markdown.render(value)
+    let renderedHTML = this.markdown.render(value)
+    this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(renderedHTML, storagePath)
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       this.fixDecodedURI(el)
-      el.href = this.markdown.normalizeLinkText(el.href)
-      if (!/\/:storage/.test(el.href)) return
-      el.href = `file:///${this.markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.href)))}`
       el.addEventListener('click', this.anchorClickHandler)
     })
 
@@ -409,12 +417,6 @@ export default class MarkdownPreview extends React.Component {
       el.addEventListener('click', this.linkClickHandler)
     })
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
-      el.src = this.markdown.normalizeLinkText(el.src)
-      if (!/\/:storage/.test(el.src)) return
-      el.src = `file:///${this.markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
-    })
-
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'

diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js
@@ -88,7 +88,7 @@ class MarkdownSplitEditor extends React.Component {
   }
 
   render () {
-    const { config, value, storageKey } = this.props
+    const {config, value, storageKey, noteKey} = this.props
     const storage = findStorage(storageKey)
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -115,6 +115,7 @@ class MarkdownSplitEditor extends React.Component {
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}
           storageKey={storageKey}
+          noteKey={noteKey}
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}
        />
@@ -138,6 +139,7 @@ class MarkdownSplitEditor extends React.Component {
           onScroll={this.handleScroll.bind(this)}
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
+          noteKey={noteKey}
        />
       </div>
     )

diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
@@ -5,7 +5,7 @@ import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
-import {lastFindInArray} from './utils'
+import { lastFindInArray } from './utils'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -234,10 +234,6 @@ class Markdown {
     if (!_.isString(content)) content = ''
     return this.md.render(content)
   }
-
-  normalizeLinkText (linkText) {
-    return this.md.normalizeLinkText(linkText)
-  }
 }
 
 export default Markdown

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
@@ -288,6 +288,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
+        noteKey={note.key}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
@@ -297,6 +298,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
+        noteKey={note.key}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />