keep notes in read-only mode, but disable editing them

app/components/SimpleEditor/ContainerEditor.js

@@ -90,7 +90,7 @@ class ContainerEditor extends SubstanceContainerEditor {
     const commandStates = this.getCommandStates()
 
     each(keys(commandStates), key => {
-      const allowed = ['comment', 'save', 'undo', 'redo']
+      const allowed = ['comment', 'note', 'save', 'undo', 'redo']
       if (!includes(allowed, key)) commandStates[key].disabled = true
     })
   }

app/components/SimpleEditor/elements/note/EditNoteTool.js

@@ -9,20 +9,29 @@ class EditNoteTool extends Tool {
     const selected = this.getSelection()
     if (!selected.node) return el
 
+    const disabled = this.isEditorReadOnly()
+
     // TODO -- on this.getLabel add a label to package and call it save note
     const icon = $$(Icon, { icon: 'fa-save' })
       .addClass('sc-save-icon')
-    const save = $$('div').addClass('sc-save-area').append(icon).on('click', this.saveNote)
 
-    el.append(
-      $$('div').addClass('sc-edit-note-tool-container').append(
+    const save = $$('div')
+      .addClass('sc-save-area')
+      .append(icon)
+      .on('click', this.saveNote)
+
+    const noteTool = $$('div')
+      .addClass('sc-edit-note-tool-container')
+      .append(
         $$(PromptTextArea, {
+          disabled: disabled,
           path: [selected.node.id, 'note-content'],
           placeholder: 'Type your note here'
-        }),
-        save
+        })
       )
-    )
+    if (!disabled) noteTool.append(save)
+
+    el.append(noteTool)
 
     // to properly adjust text area height depending on text
     this.setTextAreaHeight()
@@ -86,6 +95,16 @@ class EditNoteTool extends Tool {
       }
     })
   }
+
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    return surfaceManager.getFocusedSurface()
+  }
+
+  isEditorReadOnly () {
+    const surface = this.getSurface()
+    return surface.isReadOnlyMode()
+  }
 }
 
 EditNoteTool.type = 'edit-note'

app/components/SimpleEditor/elements/note/PromptTextArea.js

@@ -4,20 +4,24 @@ import { Component } from 'substance'
 
 class TextArea extends Component {
   render ($$) {
+    const { disabled, path, placeholder, rows } = this.props
+
     const documentSession = this.context.documentSession
     const doc = documentSession.getDocument()
-    const val = doc.get(this.props.path)
+    const val = doc.get(path)
 
     const el = $$('textarea')
       .attr({
-        rows: this.props.rows || '1',
         // cols: this.props.columns || '40',
-        placeholder: this.props.placeholder || 'Type your text here'
+        placeholder: placeholder || 'Type your text here',
+        rows: rows || '1'
       })
       .addClass('se-note-textarea')
       .append(val)
       .on('keyup', this.textAreaAdjust)
 
+    if (disabled) el.attr('disabled', 'true')
+
     return el
   }
 

app/components/SimpleEditor/elements/note/note.scss

@@ -56,5 +56,9 @@ $red: #591818;
     overflow: hidden;
     resize: none;
     width: 310px;
+
+    &[disabled] {
+      border-right: 0;
+    }
   }
 }