comments can now be used normally in read-only mode

app/components/SimpleEditor/ContainerEditor.js

+import { each, keys, includes } from 'lodash'
 import {
   ContainerEditor as SubstanceContainerEditor,
   Surface,
@@ -31,11 +32,18 @@ class ContainerEditor extends SubstanceContainerEditor {
     }
 
     // open for editing
+    // TODO -- should maybe change to isEditable ?
     if (!this.props.disabled) {
       el.addClass('sm-enabled')
       el.setAttribute('contenteditable', true)
     }
 
+    // editing locked, selection open (for comments)
+    if (this.isReadOnlyMode()) {
+      const documentSession = this.getDocumentSession()
+      documentSession.on('didUpdate', this.disableToolbar, this)
+    }
+
     return el
   }
 
@@ -43,6 +51,8 @@ class ContainerEditor extends SubstanceContainerEditor {
     Surface.prototype.didMount.apply(this, arguments)
     this.container.on('nodes:changed', this.onContainerChange, this)
     if (this.isEmpty()) this.createText()
+
+    if (this.isReadOnlyMode()) this.links()
   }
 
   // create an empty paragraph with an empty node
@@ -73,6 +83,33 @@ class ContainerEditor extends SubstanceContainerEditor {
     this.rerender()
     this.setSelection(newSel)
   }
+
+  // only runs if editor is in read-only mode
+  // disables all tools, apart from comments
+  disableToolbar () {
+    const commandStates = this.getCommandStates()
+
+    each(keys(commandStates), key => {
+      const allowed = ['comment', 'save', 'undo', 'redo']
+      if (!includes(allowed, key)) commandStates[key].disabled = true
+    })
+  }
+
+  getCommandStates () {
+    const commandManager = this.context.commandManager
+    return commandManager.getCommandStates()
+  }
+
+  isReadOnlyMode () {
+    return !this.isEditable() && this.isSelectable()
+  }
+
+  links () {
+    const allLinks = this.el.findAll('a')
+    each(allLinks, link =>
+      link.attr('target', '_blank')
+    )
+  }
 }
 
 export default ContainerEditor

app/components/SimpleEditor/Editor.js

 import {
   ProseEditor,
+  ProseEditorOverlayTools,
   ScrollPane,
   SplitPane,
   TOCProvider
@@ -8,7 +9,7 @@ import {
 import Comments from './panes/Comments/CommentBoxList'
 import CommentsProvider from './panes/Comments/CommentsProvider'
 import ContainerEditor from './ContainerEditor'
-import Overlay from './Overlay'
+// import Overlay from './Overlay'
 import Notes from './panes/Notes/Notes'
 import NotesProvider from './panes/Notes/NotesProvider'
 import TableOfContents from './panes/TableOfContents/TableOfContents'
@@ -69,7 +70,7 @@ class Editor extends ProseEditor {
 
     var contentPanel = $$(ScrollPane, {
       scrollbarPosition: 'right',
-      overlay: Overlay
+      overlay: ProseEditorOverlayTools
     })
     .append(editorWithComments)
     .attr('id', 'content-panel')
@@ -132,20 +133,19 @@ class Editor extends ProseEditor {
   }
 
   getChildContext () {
-    var doc = this.doc
-    // TODO -- check whether this is correct
-    var oldContext = super.getChildContext()
+    const oldContext = super.getChildContext()
+    const doc = this.doc
 
     // toc provider
-    var tocProvider = new TOCProvider(doc, {
+    const tocProvider = new TOCProvider(doc, {
       containerId: 'body'
     })
 
     // // notes provider
-    var notesProvider = new NotesProvider(doc)
+    const notesProvider = new NotesProvider(doc)
 
     // // comments provider
-    var commentsProvider = new CommentsProvider(doc, {
+    const commentsProvider = new CommentsProvider(doc, {
       commandManager: this.commandManager,
       comments: this.props.fragment.comments,
       containerId: this.props.containerId,
@@ -156,10 +156,11 @@ class Editor extends ProseEditor {
     })
 
     // attach all to context
-    return { ...oldContext,
-      tocProvider: tocProvider,
-      notesProvider: notesProvider,
-      commentsProvider: commentsProvider
+    return {
+      ...oldContext,
+      tocProvider,
+      notesProvider,
+      commentsProvider
     }
   }
 }

app/components/SimpleEditor/Overlay.js

-import { ProseEditorOverlayTools } from 'substance'
-import { each, includes, keys } from 'lodash'
-
-class Overlay extends ProseEditorOverlayTools {
-  getActiveTools () {
-    const surface = this.getSurface()
-    if (!surface) return []
-
-    const activeTools = super.getActiveTools()
-
-    if (!surface.isEditable() && surface.isSelectable()) {
-      const commandStates = this.getCommandStates()
-
-      each(keys(commandStates), key => {
-        const allowed = ['comment', 'save']
-        if (!includes(allowed, key)) commandStates[key].disabled = true
-      })
-
-      console.log('filter it', activeTools)
-    }
-
-    return activeTools
-  }
-
-  getCommandStates () {
-    const commandManager = this.context.commandManager
-    return commandManager.getCommandStates()
-  }
-
-  getContainerId () {
-    const editor = this.getEditor()
-    return editor.props.containerId
-  }
-
-  getEditor () {
-    return this.context.controller
-  }
-
-  getSurface () {
-    const containerId = this.getContainerId()
-    const surfaceManager = this.context.surfaceManager
-
-    return surfaceManager.getSurface(containerId)
-  }
-}
-
-export default Overlay

app/components/SimpleEditor/SimpleEditor.jsx

@@ -104,7 +104,7 @@ export default class SimpleEditor extends React.Component {
     let viewMode = !canEdit
     ? (
       <Alert bsStyle='warning' className='view-mode'>
-        <span>Editor is in View Mode</span>
+        <span>Editor is in Read-Only Mode</span>
       </Alert>
     )
     : null

app/components/SimpleEditor/SimpleEditor.scss

@@ -14,6 +14,7 @@ $primary: #eee;
 $ultra-light-gray: #fafafa;
 
 $black: #000;
+$shadow: rgba(0, 0, 0, .05);
 $teal: #46b9ba;
 $toolbar-active-bg: rgba(204, 204, 204, .75);
 $transparent-black: rgba(0, 0, 0, .75);
@@ -24,9 +25,6 @@ $white: #fff;
   position: relative;
 
   .view-mode {
-    // background-color: $primary;
-    // border-bottom: 1px solid $border;
-    // border-top: 1px solid $border;
     height: 44px;
     position: fixed;
     right: 0;
@@ -53,7 +51,6 @@ $white: #fff;
     background-color: $primary;
     border: 1px solid $border;
     border-right: 0;
-    // padding: 1px;
     padding-left: 0;
 
     button {
@@ -114,7 +111,7 @@ $white: #fff;
 
   .sc-switch-text-type {
     margin-left: 1px;
-    width: 150px !important;
+    width: 150px;
 
     .se-toggle {
       background: transparent;
@@ -203,7 +200,7 @@ $white: #fff;
   .se-context-section {
     background-color: $ultra-light-gray;
     border-left: 1px solid $light-gray;
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
+    box-shadow: inset 0 0 10px $shadow;
   }
 
   .sc-comments-pane {

app/components/SimpleEditor/elements/comment/CommentBubble.js

@@ -7,12 +7,11 @@ import {
 
 class CommentBubble extends Tool {
   render ($$) {
+    const mode = this.getMode()
     const title = 'Create a new comment'
-    let commands = this.getCommentState()
 
-    if (commands.mode !== 'create') return $$('div')
-    commands.active = true
-    this.setBubblePosition()
+    if (mode !== 'create') return $$('div')
+
     const icon = $$(Icon, { icon: 'fa-comment' })
         .addClass('sc-comment-icon')
 
@@ -31,18 +30,23 @@ class CommentBubble extends Tool {
   // calculated relative to the overlay container, which gets positioned
   // wrong on resize (substance bug -- TODO)
   didMount () {
+    this.position()
     DefaultDOMElement.getBrowserWindow().on('resize', this.didUpdate, this)
   }
 
   didUpdate () {
-    if (this.el.getChildCount() === 0) return
-    this.setBubblePosition()
+    this.position()
   }
 
   dispose () {
     DefaultDOMElement.getBrowserWindow().off(this)
   }
 
+  position () {
+    if (this.el.getChildCount() === 0) return
+    this.setBubblePosition()
+  }
+
   setBubblePosition () {
     // without this check, the editor will break on first load
     const surface = this.getSurface()