Preview images on editor

browser/components/CodeEditor.js

@@ -217,6 +217,9 @@ export default class CodeEditor extends React.Component {
     if (needRefresh) {
       this.editor.refresh()
     }
+    if (this.props.previewImage) {
+      setTimeout(this.previewImage(this.editor, this.props), 500)
+    }
   }
 
   setMode (mode) {
@@ -232,6 +235,9 @@ export default class CodeEditor extends React.Component {
     if (this.props.onChange) {
       this.props.onChange(e)
     }
+    if (this.props.previewImage) {
+      setTimeout(this.previewImage(this.editor, this.props), 500)
+    }
   }
 
   moveCursorTo (row, col) {
@@ -277,6 +283,9 @@ export default class CodeEditor extends React.Component {
 
   insertImageMd (imageMd) {
     this.editor.replaceSelection(imageMd)
+    if (this.props.previewImage) {
+      setTimeout(this.previewImage(this.editor, this.props), 500)
+    }
   }
 
   handlePaste (editor, e) {
@@ -343,6 +352,48 @@ export default class CodeEditor extends React.Component {
     })
   }
 
+  previewImage (editor, props) {
+    editor.operation(function () {
+      const storagePath = findStorage(props.storageKey).path
+      const lastline = editor.lineCount()
+      for (let i = 0; i < lastline; ++i) {
+        const lineValue = editor.getLine(i)
+        var imageMdRe = /\!\[.+\]\(\\:storage\\(.+?)\)/g
+        var imageMd = imageMdRe.exec(lineValue)
+        if (!imageMd) {
+          editor.lineInfo(i).handle.widgets = null
+          continue
+        }
+
+        var div = document.createElement('div')
+        var img = div.appendChild(document.createElement('img'))
+        const imageDir = `${path.join(storagePath, 'images', path.basename(imageMd[1]))}`
+        img.setAttribute('src', imageDir)
+        img.setAttribute('style', 'max-width:100%')
+        div.className = 'inline-image'
+        var widgetNode
+        try {
+          widgetNode = editor.lineInfo(i).handle.widgets[0].node
+        } catch (e) {
+          widgetNode = undefined
+        }
+        if (typeof widgetNode !== 'undefined') {
+          var widgetSrc = widgetNode.childNodes[0].getAttribute('src')
+          if (widgetSrc !== imageDir) {
+            editor.lineInfo(i).handle.widgets = null
+            editor.addLineWidget(i, div, {coverGutter: false, noHScroll: true})
+          }
+        } else {
+          editor.addLineWidget(i, div, {coverGutter: false, noHScroll: true})
+          var evt = document.createEvent('UIEvent')
+          evt.initUIEvent('resize', true, true, window, 1)
+          document.dispatchEvent(evt)
+        }
+        editor.refresh()
+      }
+    })
+  }
+
   decodeResponse (response) {
     const headers = response.headers
     const _charset = headers.has('content-type')

browser/components/MarkdownEditor.js

@@ -262,6 +262,7 @@ class MarkdownEditor extends React.Component {
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           fetchUrlTitle={config.editor.fetchUrlTitle}
+          previewImage={config.editor.previewImage}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />

browser/components/MarkdownSplitEditor.js

@@ -112,6 +112,7 @@ class MarkdownSplitEditor extends React.Component {
           indentSize={editorIndentSize}
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}
+          previewImage={config.editor.previewImage}
           storageKey={storageKey}
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}

browser/main/Detail/SnippetNoteDetail.js

@@ -573,6 +573,7 @@ class SnippetNoteDetail extends React.Component {
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
             fetchUrlTitle={config.editor.fetchUrlTitle}
+            previewImage={config.editor.previewImage}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />

browser/main/lib/ConfigManager.js

@@ -37,7 +37,8 @@ export const DEFAULT_CONFIG = {
     switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
     scrollPastEnd: false,
     type: 'SPLIT',
-    fetchUrlTitle: true
+    fetchUrlTitle: true,
+    previewImage: true
   },
   preview: {
     fontSize: '14',

browser/main/modals/PreferencesModal/UiTab.js

@@ -77,7 +77,8 @@ class UiTab extends React.Component {
         switchPreview: this.refs.editorSwitchPreview.value,
         keyMap: this.refs.editorKeyMap.value,
         scrollPastEnd: this.refs.scrollPastEnd.checked,
-        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked
+        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
+        previewImage: this.refs.editorPreviewImage.checked
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -341,6 +342,17 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.previewImage}
+                ref='editorPreviewImage'
+                type='checkbox'
+              />&nbsp;
+              Preview images on editor
+            </label>
+          </div>
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>