diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 8f4cc2bc..d32d3240 100644 --- a/browser/components/CodeEditor.js +++ b/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) }) } diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 78b0f2f0..a0fd3cbd 100644 --- a/browser/components/MarkdownEditor.js +++ b/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 (
this.handlePreviewMouseUp(e)} onMouseDown={(e) => this.handlePreviewMouseDown(e)} onCheckboxClick={(e) => this.handleCheckboxClick(e)} + storagePath={storage.path} />
) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 4b90104c..a06d04e3 100644 --- a/browser/components/MarkdownPreview.js +++ b/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 } diff --git a/browser/main/lib/dataApi/copyImage.js b/browser/main/lib/dataApi/copyImage.js index d31bd6d6..a9d9b638 100644 --- a/browser/main/lib/dataApi/copyImage.js +++ b/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) }