Open notes in new window

browser/components/CodeEditor.js

@@ -54,19 +54,24 @@ export default class CodeEditor extends React.Component {
       leading: false,
       trailing: true
     })
+    this.state = {
+      editorFocused: false
+    }
     this.changeHandler = (editor, changeObject) =>
       this.handleChange(editor, changeObject)
     this.highlightHandler = (editor, changeObject) =>
       this.handleHighlight(editor, changeObject)
     this.focusHandler = () => {
       ipcRenderer.send('editor:focused', true)
+      this.setState({ editorFocused: true })
     }
     const debouncedDeletionOfAttachments = _.debounce(
       attachmentManagement.deleteAttachmentsNotPresentInNote,
       30000
     )
     this.blurHandler = (editor, e) => {
       ipcRenderer.send('editor:focused', false)
+      this.setState({ editorFocused: false })
       if (e == null) return null
       let el = e.relatedTarget
       while (el != null) {
@@ -580,6 +585,11 @@ export default class CodeEditor extends React.Component {
     if (prevProps.keyMap !== this.props.keyMap) {
       needRefresh = true
     }
+    const { editorFocused } = this.state
+    const { value } = this.props
+    if (prevProps.value !== value && !editorFocused) {
+      this.editor.setValue(this.props.value)
+    }
     if (prevProps.RTL !== this.props.RTL) {
       this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr')
       this.editor.setOption('rtlMoveVisually', this.props.RTL)

browser/components/MarkdownPreview.js

@@ -1224,9 +1224,4 @@ MarkdownPreview.propTypes = {
   breaks: PropTypes.bool
 }
 
-export default connect(
-  null,
-  null,
-  null,
-  { forwardRef: true }
-)(MarkdownPreview)
+export default connect(null, null, null, { forwardRef: true })(MarkdownPreview)

browser/lib/markdown.js

@@ -278,9 +278,7 @@ class Markdown {
         flowchart: token => {
           return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
-          <div class="flowchart" data-height="${token.parameters.height}">${
-            token.content
-          }</div>
+          <div class="flowchart" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
         },
         gallery: token => {
@@ -299,25 +297,19 @@ class Markdown {
 
           return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
-          <div class="gallery" data-autoplay="${
-            token.parameters.autoplay
-          }" data-height="${token.parameters.height}">${content}</div>
+          <div class="gallery" data-autoplay="${token.parameters.autoplay}" data-height="${token.parameters.height}">${content}</div>
         </pre>`
         },
         mermaid: token => {
           return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
-          <div class="mermaid" data-height="${token.parameters.height}">${
-            token.content
-          }</div>
+          <div class="mermaid" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
         },
         sequence: token => {
           return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
-          <div class="sequence" data-height="${token.parameters.height}">${
-            token.content
-          }</div>
+          <div class="sequence" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
         }
       },

browser/main/Detail/MarkdownNoteDetail.js

@@ -32,6 +32,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import markdownToc from 'browser/lib/markdown-toc-generator'
 import queryString from 'query-string'
 import { replace } from 'connected-react-router'
+import { ipcRenderer } from 'electron'
 import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'
 
 class MarkdownNoteDetail extends React.Component {
@@ -58,6 +59,15 @@ class MarkdownNoteDetail extends React.Component {
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
+    const { showFullScreen } = this.props.data
+
+    if (showFullScreen !== false) {
+      // Main window, check for updates from children
+      ipcRenderer.on('update-note-state', (_, noteData) => {
+        const { note } = this.state
+        if (noteData.key === note.key) this.setState({ note: noteData })
+      })
+    }
     this.generateToc = this.handleGenerateToc.bind(this)
     this.handleUpdateContent = this.handleUpdateContent.bind(this)
   }
@@ -163,6 +173,11 @@ class MarkdownNoteDetail extends React.Component {
         type: 'UPDATE_NOTE',
         note: note
       })
+      const { showFullScreen } = this.props.data
+      if (showFullScreen === false) {
+        // Window is not main window, send update event to main window
+        ipcRenderer.send('update-note-state', note)
+      }
       AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
     })
   }
@@ -470,6 +485,12 @@ class MarkdownNoteDetail extends React.Component {
     const storageKey = note.storage
     const folderKey = note.folder
 
+    let renderFullScreenButton = true
+    const { showFullScreen } = this.props.data
+    if (showFullScreen === false) {
+      renderFullScreenButton = false
+    }
+
     const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach(folder => {
@@ -578,7 +599,9 @@ class MarkdownNoteDetail extends React.Component {
             return this.state.isLockButtonShown ? lockButtonComponent : ''
           })()}
 
-          <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
+          {renderFullScreenButton ? (
+            <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
+          ) : null}
 
           <TrashButton onClick={e => this.handleTrashButtonClick(e)} />
 

browser/main/Detail/SnippetNoteDetail.js

@@ -34,6 +34,7 @@ import { replace } from 'connected-react-router'
 
 const electron = require('electron')
 const { remote } = electron
+const { ipcRenderer } = electron
 const { dialog } = remote
 
 class SnippetNoteDetail extends React.Component {
@@ -61,6 +62,16 @@ class SnippetNoteDetail extends React.Component {
 
     this.scrollToNextTabThreshold = 0.7
     this.generateToc = () => this.handleGenerateToc()
+
+    const { showFullScreen } = this.props.data
+
+    if (showFullScreen !== false) {
+      // Main window, check for updates from children
+      ipcRenderer.on('update-note-state', (_, noteData) => {
+        const { note } = this.state
+        if (noteData.key === note.key) this.setState({ note: noteData })
+      })
+    }
   }
 
   componentDidMount() {
@@ -162,6 +173,11 @@ class SnippetNoteDetail extends React.Component {
         type: 'UPDATE_NOTE',
         note: note
       })
+      const { showFullScreen } = this.props.data
+      if (showFullScreen === false) {
+        // Window is not main window, send update event to main window
+        ipcRenderer.send('update-note-state', note)
+      }
       AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
     })
   }
@@ -796,6 +812,12 @@ class SnippetNoteDetail extends React.Component {
     const storageKey = note.storage
     const folderKey = note.folder
 
+    let renderFullScreenButton = true
+    const { showFullScreen } = this.props.data
+    if (showFullScreen === false) {
+      renderFullScreenButton = false
+    }
+
     const autoDetect = config.editor.snippetDefaultLanguage === 'Auto Detect'
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
@@ -950,7 +972,9 @@ class SnippetNoteDetail extends React.Component {
             isActive={note.isStarred}
           />
 
-          <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
+          {renderFullScreenButton ? (
+            <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
+          ) : null}
 
           <TrashButton onClick={e => this.handleTrashButtonClick(e)} />
 

browser/main/Main.js

@@ -21,7 +21,7 @@ import { push } from 'connected-react-router'
 
 const path = require('path')
 const electron = require('electron')
-const { remote } = electron
+const { remote, ipcRenderer } = electron
 
 class Main extends React.Component {
   constructor(props) {
@@ -40,9 +40,15 @@ class Main extends React.Component {
       isLeftSliderFocused: false,
       fullScreen: false,
       noteDetailWidth: 0,
-      mainBodyWidth: 0
+      mainBodyWidth: 0,
+      isMainWindow: true
     }
 
+    ipcRenderer.on('set-current-note', (_, result) => {
+      this.setState({ isMainWindow: false })
+      this.setState({ currentNoteKey: result.key })
+    })
+
     this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
@@ -320,7 +326,26 @@ class Main extends React.Component {
 
   render() {
     const { config } = this.props
-
+    if (!this.state.isMainWindow) {
+      const detailProps = _.pick(this.props, [
+        'dispatch',
+        'data',
+        'config',
+        'match',
+        'location'
+      ])
+
+      detailProps.location.search = `?key=${this.state.currentNoteKey}`
+      detailProps.data.showFullScreen = false
+
+      return (
+        <Detail
+          style={{ left: 0 }}
+          {...detailProps}
+          ignorePreviewPointerEvents={this.state.isRightSliderFocused}
+        />
+      )
+    }
     // the width of the navigation bar when it is folded/collapsed
     const foldedNavigationWidth = 44
 

browser/main/NoteList/index.js

@@ -22,10 +22,12 @@ import i18n from 'browser/lib/i18n'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import context from 'browser/lib/context'
 import queryString from 'query-string'
+import { ipcRenderer } from 'electron'
 
 const { remote } = require('electron')
 const { dialog } = remote
 const WP_POST_PATH = '/wp/v2/posts'
+const singleNoteWindow = require('../../../lib/note-window')
 
 const regexMatchStartingTitleNumber = new RegExp('^([0-9]*.?[0-9]+).*$')
 
@@ -654,6 +656,7 @@ class NoteList extends React.Component {
     const publishLabel = i18n.__('Publish Blog')
     const updateLabel = i18n.__('Update Blog')
     const openBlogLabel = i18n.__('Open Blog')
+    const openInNewWindow = i18n.__('Open in new window')
 
     const templates = []
 
@@ -675,6 +678,7 @@ class NoteList extends React.Component {
           click: this.pinToTop
         })
       }
+
       templates.push(
         {
           label: deleteLabel,
@@ -687,8 +691,13 @@ class NoteList extends React.Component {
         {
           label: copyNoteLink,
           click: this.copyNoteLink.bind(this, note)
+        },
+        {
+          label: openInNewWindow,
+          click: this.openInNewWindow.bind(this, note)
         }
       )
+
       if (note.type === 'MARKDOWN_NOTE') {
         if (note.blog && note.blog.blogLink && note.blog.blogId) {
           templates.push(
@@ -712,6 +721,17 @@ class NoteList extends React.Component {
     context.popup(templates)
   }
 
+  openInNewWindow(note) {
+    const { dispatch } = this.props
+    singleNoteWindow.createNewWindow(window.boostnoteBasePath, note)
+    ipcRenderer.on('update-note-state', (_, noteData) => {
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: noteData
+      })
+    })
+  }
+
   updateSelectedNotes(updateFunc, cleanSelection = true) {
     const { selectedNoteKeys } = this.state
     const { dispatch } = this.props

browser/main/store.js

@@ -480,10 +480,7 @@ const store = createStore(
   reducer,
   undefined,
   process.env.NODE_ENV === 'development'
-    ? compose(
-        applyMiddleware(routerMiddleware(history)),
-        DevTools.instrument()
-      )
+    ? compose(applyMiddleware(routerMiddleware(history)), DevTools.instrument())
     : applyMiddleware(routerMiddleware(history))
 )
 

lib/main-window.js

@@ -1,6 +1,7 @@
 const electron = require('electron')
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
+const { ipcMain } = electron
 const path = require('path')
 const Config = require('electron-config')
 const config = new Config()
@@ -63,6 +64,9 @@ const url = path.resolve(
 
 mainWindow.loadURL('file://' + url)
 mainWindow.setMenuBarVisibility(false)
+mainWindow.webContents.executeJavaScript(
+  `window.boostnoteBasePath = '${__dirname}';`
+)
 
 mainWindow.webContents.on('new-window', function(e) {
   e.preventDefault()
@@ -108,6 +112,10 @@ function storeWindowSize() {
   }
 }
 
+ipcMain.on('update-note-state', (_, currentNote) => {
+  mainWindow.webContents.send('update-note-state', currentNote)
+})
+
 app.on('activate', function() {
   if (mainWindow == null) return null
   mainWindow.show()