fix read only mode glitches

app/components/SimpleEditor/Editor.js

@@ -185,14 +185,19 @@ class Editor extends ProseEditor {
 
   _renderToolbarLeft ($$) {
     let commandStates = this.commandManager.getCommandStates()
-    return $$('div').addClass('se-toolbar-wrapper').append(
-    $$(Toolbar, {
-      commandStates: commandStates,
-      trackChanges: this.props.trackChanges,
-      trackChangesView: this.state.trackChangesView,
-      toolGroups: ['text']
-    }).ref('toolbarLeft')
-  )
+
+    return $$('div')
+      .addClass('se-toolbar-wrapper')
+      .append(
+        $$(Toolbar, {
+          commandStates: commandStates,
+          trackChanges: this.props.trackChanges,
+          trackChangesView: this.state.trackChangesView,
+          toolGroups: ['text']
+        }
+      )
+      .ref('toolbarLeft')
+    )
   }
 
   _renderEditor ($$) {

app/components/SimpleEditor/elements/left_switch_text_type/LeftSwitchTextTypeTool.js

@@ -34,8 +34,10 @@ class LeftSwitchTextTypeTool extends Tool {
       el.append(item)
     }.bind(this))
 
-    if (this.props.currentTextType &&
-        this.props.currentTextType.name === 'container-selection') {
+    if ((this.props.currentTextType &&
+        this.props.currentTextType.name === 'container-selection') ||
+        this.isReadOnlyMode()
+       ) {
       el.addClass('sm-disabled')
     }
 
@@ -50,9 +52,21 @@ class LeftSwitchTextTypeTool extends Tool {
 
   handleClick (e) {
     e.preventDefault()
+    if (this.isReadOnlyMode()) return
     this.executeCommand(e.currentTarget.dataset.type)
   }
 
+  getSurface () {
+    return this.context.surfaceManager.getSurface('body')
+  }
+
+  // TODO -- review how the side toolbar gets disabled
+  isReadOnlyMode () {
+    const surface = this.getSurface()
+    if (!surface) return true         // HACK
+
+    return surface.isReadOnlyMode()
+  }
 }
 
 LeftSwitchTextTypeTool.command = 'switch-text-type'

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

@@ -4,9 +4,8 @@ class NoteTool extends AnnotationTool {
   renderButton ($$) {
     const el = super.renderButton($$)
 
-    // TODO -- either delete or re-introduce
-    // const readOnly = this.isSurfaceReadOnly()
-    // if (readOnly === true) el.attr('disabled', 'true')
+    const readOnly = this.isSurfaceReadOnly()
+    if (readOnly === true) el.attr('disabled', 'true')
 
     return el
   }