Merge pull request #2 from iamspark1e/feat-gallery_preview_insert

fix: add image from gallery now will insert at the cursor point & fix…

Author: iamspark1e

src/Control.js

@@ -7,7 +7,9 @@ export default class Control extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      mediaControlId: ""
+      mediaControlId: "",
+      insertPos: null,
+      editor: null
     }
   }
 
@@ -42,17 +44,30 @@ export default class Control extends React.Component {
     let path = nextProps.mediaPaths.get(this.state.mediaControlId)
     if (path && nextState.mediaControlId !== "") {
       var filename = path.replace(/^.*[\\\/]/, '').split('.')[0]
-      nextProps.onChange(nextProps.value + `![${filename || ""}](${path})`)
-      this.setState({
-        mediaControlId: ""
-      })
+      this.insertCustomMark(this.state.insertPos, `![${filename || ""}](${path})`)
     }
   }
 
-  handleAppendImage = () => {
+  insertCustomMark = (pos, mark) => {
+    if(!this.state.editor || !pos) return;
+    this.state.editor.setSelection(pos, pos)
+    this.state.editor.replaceSelection(mark)
+
+    this.setState({
+      editor: this.state.editor,
+      mediaControlId: "",
+      insertPos: null
+    })
+  }
+
+  handleAppendImage = (editor) => {
+    let cm = editor.codemirror
+    let pos = cm.getCursor()
     let newId = Date.now()
     this.setState({
       mediaControlId: newId,
+      insertPos: pos,
+      editor: cm
     }, () => {
       this.props.onOpenMediaLibrary({
         controlID: newId,

src/Preview.js

@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { marked } from 'marked';
 
-export default function Preview({ value }) {
+export default function Preview({ value, getAsset }) {
+  const previewRenderer = {
+    image(href, title, text) {
+      return `<img src="${getAsset(href)}" title="${title}" alt="${title || text || ''}" style="max-width:100%;display:block;" />`
+    }
+  }
+  
+  marked.use({renderer: previewRenderer})
   return <div className='markdown-body' dangerouslySetInnerHTML={{__html: marked.parse(value)}}></div>;
 }