Image upload

main/create-window.js → main/actions/create-window.js

@@ -1,24 +1,12 @@
-const { app, BrowserWindow } = require('electron')
+const { BrowserWindow } = require('electron')
 const { resolve } = require('app-root-path')
 const dev = require('electron-is-dev')
 
-const startServer = require('./server')
-const setMenu = require('./menu')
-const setIPCEvents = require('./ipc-events')
-
-async function createWindow () {
-  let server
-
-  try {
-    // when starting the window run the server
-    server = await startServer()
-  } catch (error) {
-    console.error(error)
-    app.exit(error)
-  }
+const setMenu = require('../menu')
 
+async function createWindow (_windows) {
   // after the server starts create the electron browser window
-  global.win = new BrowserWindow({
+  let win = new BrowserWindow({
     title: 'Pulse',
     backgroundColor: '#058ecd',
     height: 768,
@@ -32,32 +20,33 @@ async function createWindow () {
       textAreasAreResizable: false
     }
   })
+  const id = win.id
 
   // open our server URL or the build directory in production
-  global.win.loadURL(dev ? 'http://localhost:8000' : `file://${resolve('./build')}/index.html`)
+  win.loadURL(dev ? 'http://localhost:8000' : `file://${resolve('./build')}/index.html`)
 
   // in development open devtools
   if (dev) {
-    global.win.webContents.openDevTools()
+    win.webContents.openDevTools()
   }
 
-  global.win.once('ready-to-show', () => {
-    global.win.show()
+  win.once('ready-to-show', () => {
+    win.show()
   })
 
-  global.win.on('close', () => {
-    global.win = null
-    if (server) server.close()
+  win.on('closed', () => {
+    _windows.delete(id)
   })
 
-  setIPCEvents()
   setMenu()
 
   // TODO: implement a way to get the Markdown data
   // protocol.registerHttpProtocol('pulse', (request, callback) => {
   //   const url = request.url.substr(8)
   //   console.log(url)
   // })
+  _windows.set(id, win)
+  return win
 }
 
 module.exports = createWindow

main/index.js

@@ -1,17 +1,45 @@
+const WindowManager = require('./window-manager')
 const { app } = require('electron')
 
-const createWindow = require('./create-window')
+const dev = require('electron-is-dev')
+const startServer = require('./server')
+const setIPCEvents = require('./ipc-events')
 
-app.on('ready', createWindow)
+class Main {
+  constructor () {
+    this.server = null
+    this._windowManager = new WindowManager()
+  }
+  get windowManager () {
+    return this._windowManager
+  }
 
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
+  async onReady () {
+    if (dev) {
+      try {
+        this.server = await startServer()
+      } catch (error) {
+        console.error(error)
+        app.exit(error)
+      }
+    }
+    this._windowManager.createNewWindow()
+  }
+
+  onWindowAllClosed () {
     app.quit()
   }
+}
+const main = new Main()
+
+app.once('ready', () => {
+  main.onReady()
+  setIPCEvents()
 })
 
-app.on('activate', () => {
-  if (!global.win) {
-    createWindow()
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    main.onWindowAllClosed()
   }
+  if (this.server) this.server.close()
 })

main/menu.js

@@ -16,6 +16,16 @@ const template = [
           }
         }
       },
+      {
+        label: 'New window',
+        accelerator: 'CmdOrCtrl+Alt+N',
+        click () {
+          const webContent = webContents.getFocusedWebContents()
+          if (webContent) {
+            webContent.send('shortcut-press')
+          }
+        }
+      },
       {
         label: 'Open...',
         accelerator: 'CmdOrCtrl+O',
@@ -29,7 +39,7 @@ const template = [
       {
         label: 'Save file',
         accelerator: 'CmdOrCtrl+S',
-        click() {
+        click () {
           const webContent = webContents.getFocusedWebContents()
           if (webContent) {
             webContent.send('trying-to-save')

main/window-manager.js

@@ -0,0 +1,27 @@
+const { ipcMain, BrowserWindow } = require('electron')
+const createWindow = require('./actions/create-window')
+
+class WindowManager {
+  constructor () {
+    this._windows = new Map()
+    ipcMain.on('create-new-window', this._onRequestCreateNewWindow.bind(this))
+  }
+
+  reload () {
+    const w = BrowserWindow.getFocusedWindow()
+    if (w) {
+      w.reload()
+    }
+  }
+
+  createNewWindow (value = '', fileName = undefined) {
+    createWindow(this._windows, value, fileName)
+  }
+
+  _onRequestCreateNewWindow (event) {
+    this.createNewWindow()
+    event.sender.send('created-new-window')
+  }
+}
+
+module.exports = WindowManager

renderer/components/image-drop.js

@@ -0,0 +1,57 @@
+//  validate file format with a list of format supports imgur
+let validateFile = (file) => {
+  let imageFormat = ['jpeg', 'png', 'gif', 'peg', 'apng', 'tiff', 'pdf', 'xcf']
+  return imageFormat.filter((kind) => {
+    let res = new RegExp("\\b(" + kind + ")\\b")
+    return res.test(file.type)
+  })
+}
+
+//  send file via XMLHTTP
+let sendData = (_this, file) => {
+  let fd = new FormData()
+  fd.append('image', file)
+  let xhttp = new XMLHttpRequest()
+  xhttp.open('POST', 'https://api.imgur.com/3/image', true)
+  xhttp.setRequestHeader('Authorization', `Client-ID e3f6a51d5c12580`)
+  xhttp.onreadystatechange = function () {
+    let response = ''
+    let event = {}
+    if (this.readyState === 4) {
+      if (this.status >= 200 && this.status < 300) {
+        try {
+          response = JSON.parse(this.responseText)
+        } catch (err) {
+          response = this.responseText;
+        }
+        event.target = {
+          value: `${_this.editor.domField.value} ![${file.name}](${response.data.link})`
+        }
+        //  write response on editor
+        _this.editor.writeValue(event)
+      } else {
+        throw new Error(this.status + " - " + this.statusText)
+      }
+    }
+  }
+  xhttp.send(fd)
+  xhttp = null
+}
+
+let imageDrop = (e, _this) => {
+  // without 'preventDefault', when you drop the image, change the whole editor view
+  e.preventDefault()
+  let event = {}
+  let file = e.dataTransfer.files[0]
+  let valido = validateFile(file)
+  if (!!valido && valido.length !== 0) {
+    sendData(_this, file)
+  } else {
+    event.target = {
+      value: `${_this.editor.domField.value} ![Problem with the format file](url)`
+    }
+    // if file format doesn't support by imgur, advice the user
+    _this.editor.writeValue(event)
+  }
+}
+export default  imageDrop

renderer/components/window-button.js

@@ -0,0 +1,48 @@
+import { Component } from 'react'
+import { Base } from 'pulse-editor/buttons'
+import { ipcRenderer } from 'electron'
+import { func } from 'prop-types'
+import isMac from 'pulse-editor/built/utils/is-mac'
+import Icon from 'react-icons/lib/fa/plus-circle'
+
+export default class CreateButton extends Component {
+  static contextTypes = {
+    setShortcut: func.isRequired,
+    removeShortcut: func.isRequired,
+    writeValue: func.isRequired,
+    setFileName: func.isRequired
+  }
+
+  componentDidMount () {
+    ipcRenderer.on('shortcut-press', this.createWindow)
+    this.context.setShortcut({
+      ctrlKey: !isMac(),
+      metaKey: isMac(),
+      altKey: true,
+      shiftKey: false,
+      keyName: 'n',
+      updater: selected => selected,
+      handler: event => {
+        this.createWindow()
+        return event.selection
+      }
+    })
+  }
+
+  componentWillUnmount () {
+    this.context.removeShortcut({ keyName: 'n' })
+    ipcRenderer.removeListener('shortcut-press', this.createWindow)
+  }
+
+  createWindow = () => ipcRenderer.send('create-new-window')
+
+  handleClick = () => this.createWindow()
+
+  render = () => (
+    <Base onClick={this.handleClick} name='open'>
+      <span title='New Window [CMD+ALT+N]'>
+        <Icon /> New Window
+      </span>
+    </Base>
+  )
+}

renderer/pages/index.js

@@ -21,6 +21,8 @@ import Save from '../components/save-button'
 import Open from '../components/open-button'
 import New from '../components/new-button'
 import Export from '../components/export-button'
+import Create from '../components/window-button'
+import imageDrop from '../components/image-drop'
 
 import BoldIcon from 'react-icons/lib/fa/bold'
 import ItalicIcon from 'react-icons/lib/fa/italic'
@@ -50,12 +52,11 @@ export default class extends Component {
       setFileName: this.setFileName
     }
   }
-
   componentDidMount () {
     this.$preview = document.querySelector('.PulseEditor-preview')
     this.$preview.addEventListener('click', this.handlePreviewLinkClick)
   }
-
+  
   componentWillUnmount () {
     this.$preview.removeEventListener('click', this.handlePreviewLinkClick)
   }
@@ -70,7 +71,7 @@ export default class extends Component {
     )
   }
 
-  handleDrop = event => event.preventDefault()
+  handleDrop = e => imageDrop(e, this)
 
   handleChange= event => {
     if (event.markdown && this.state.fileName) {
@@ -149,6 +150,7 @@ export default class extends Component {
           </ButtonGroup>
 
           <ButtonGroup>
+            <Create />
             <New />
             <Open />
             <Save />