comments stay always active when you have only view permissions

app/components/SimpleEditor/ContainerEditor.js

@@ -34,6 +34,15 @@ class ContainerEditor extends SubstanceContainerEditor {
       el.addClass('sm-enabled')
       el.setAttribute('contenteditable', true)
     }
+    if (this.props.canNotEdit) {
+      el.addEventListener('keydown', function (e) {
+        e.preventDefault()
+        if (e.keyCode === 13 || e.keyCode === 32) {
+          const documentSession = this.context.documentSession
+          documentSession.undo()
+        }
+      })
+    }
 
     return el
   }

app/components/SimpleEditor/Editor.js

 import {
   ProseEditor,
-  ProseEditorOverlayTools,
+  // ProseEditorOverlayTools,
   ScrollPane,
   SplitPane,
   TOCProvider
@@ -9,6 +9,7 @@ import {
 import Comments from './panes/Comments/CommentBoxList'
 import CommentsProvider from './panes/Comments/CommentsProvider'
 import ContainerEditor from './ContainerEditor'
+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: ProseEditorOverlayTools
+      overlay: Overlay
     })
     .append(editorWithComments)
     .attr('id', 'content-panel')
@@ -95,7 +96,7 @@ class Editor extends ProseEditor {
   _renderEditor ($$) {
     var configurator = this.props.configurator
     return $$(ContainerEditor, {
-      disabled: this.props.disabled,
+      canNotEdit: this.props.disabled,
       documentSession: this.documentSession,
       commands: configurator.getSurfaceCommandNames(),
       containerId: 'body',

app/components/SimpleEditor/SimpleEditor.jsx

@@ -103,14 +103,14 @@ export default class SimpleEditor extends React.Component {
     const { canEdit } = this.props
     let viewMode = !canEdit
     ? (
-      <Alert bsStyle="warning" className="view-mode">
-        Editor is in View Mode
+      <Alert bsStyle='warning' className='view-mode'>
+        <span>Editor is in View Mode</span>
       </Alert>
     )
     : null
 
     return (
-      <div className="editor-wrapper">
+      <div className='editor-wrapper'>
         {viewMode}
       </div>
     )

app/components/SimpleEditor/SimpleEditor.scss

@@ -24,13 +24,14 @@ $white: #fff;
   position: relative;
 
   .view-mode {
-    background-color: $primary;
-    border-bottom: 1px solid $border;
-    border-top: 1px solid $border;
+    // background-color: $primary;
+    // border-bottom: 1px solid $border;
+    // border-top: 1px solid $border;
     height: 44px;
     position: fixed;
+    right: 0;
     text-align: center;
-    width: 100%;
+    width: 20%;
     z-index: 9999;
 
     span {

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

@@ -7,9 +7,9 @@ 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()