Merged in always-active-comments (pull request #1)

Always active comments

app/components/SimpleEditor/ContainerEditor.js

@@ -34,6 +34,16 @@ 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()
+        }
+      })
+      el.addEventListener('contextmenu', event => event.preventDefault())
+    }
 
     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/Overlay.js

+import { ProseEditorOverlayTools, documentHelpers } from 'substance'
+import { each, includes, keys } from 'lodash'
+
+class Overlay extends ProseEditorOverlayTools {
+  render ($$) {
+    const surface = this.getSurface()
+    const session = this.context.documentSession
+    const sel = session.getSelection()
+    const comment = documentHelpers.getPropertyAnnotationsForSelection(
+      session.getDocument(),
+      sel,
+      { type: 'commnent' }
+    )
+
+    if (surface && surface.props.canNotEdit && typeof comment[0] === 'undefined') {
+      const commandStates = this.context.commandManager.getCommandStates()
+      each(keys(commandStates), (key) => {
+        const allowed = ['comment', 'save']
+        if (!includes(allowed, key)) commandStates[key].disabled = true
+      })
+    }
+
+    let el = $$('div').addClass(this.getClassNames())
+    let activeTools = this.getActiveTools()
+
+    if (activeTools.length > 0) {
+      let toolsEl = $$('div').addClass('se-active-tools')
+      activeTools.forEach(tool => {
+        toolsEl.append(
+          $$(tool.Class, tool.toolProps).ref(tool.toolProps.name)
+        )
+      })
+      el.append(toolsEl)
+    }
+    return el
+  }
+
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    return surfaceManager.getSurface('body')
+  }
+
+  getClassNames () {
+    return 'sc-prose-editor-overlay-tools'
+  }
+}
+
+export default Overlay

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()