Merge branch 'notes-selection' into 'staging'

selection around notes does not open tooltip

See merge request !25

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

 import { each, includes, keys } from 'lodash'
-import { documentHelpers, Tool, ProseEditorConfigurator as Configurator,
-  EditorSession } from 'substance'
+import {
+  documentHelpers,
+  EditorSession,
+  ProseEditorConfigurator as Configurator,
+  Tool
+} from 'substance'
 
 import MiniEditor from '../../miniEditor/miniEditor'
 import config from '../../miniEditor/config'
@@ -8,7 +12,6 @@ import Importer from '../../SimpleEditorImporter'
 import SimpleExporter from '../../SimpleEditorExporter'
 
 class EditNoteTool extends Tool {
-
   constructor (props) {
     super(props)
     this.saveNote = this.saveNote.bind(this)
@@ -16,12 +19,16 @@ class EditNoteTool extends Tool {
 
   render ($$) {
     const miniEditorSession = this._initMiniEditor()
-    let el = $$('div').addClass('sc-edit-note-tool')
     const selected = this.getSelection()
+
+    let el = $$('div').addClass('sc-edit-note-tool')
+
     if (!selected.node) return el
+
     el.append($$(MiniEditor, {
       editorSession: miniEditorSession
     }))
+
     return el
   }
 
@@ -87,18 +94,29 @@ class EditNoteTool extends Tool {
     const session = this.context.editorSession
     const sel = session.getSelection()
 
-    const note = documentHelpers.getPropertyAnnotationsForSelection(
+    const notes = documentHelpers.getPropertyAnnotationsForSelection(
       session.getDocument(),
       sel,
       { type: 'note' }
     )
 
+    const note = notes[0]
+    let show = false
+
+    if (typeof note !== 'undefined') {
+      if ((sel.start.offset === note.start.offset &&
+        sel.end.offset === note.end.offset)) {
+        show = true
+      }
+    }
+
     // disable when larger selection that just includes a note as well
-    const selectionLength = (sel.end.offset - sel.start.offset === 1)
+    // const selectionLength = (sel.end.offset - sel.start.offset === 1)
+    // if (sel.end.offset - sel.)
 
-    if (typeof note[0] !== 'undefined' && selectionLength) {
+    if (show) {
       return {
-        node: note[0]
+        node: note
       }
     } else {
       return {

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

 $gray: #eee;
 $red: #591818;
-// .hidden {
-//   display: none;
-// }
+
 .sc-prose-editor {
   counter-reset: note;
 
+  .sm-note {
+    display: inline-block;
+  }
+
   .sc-note {
     color: $red;
-    display: inline-block; // TODO -- is this correct?
+    display: block;
     font-weight: bold;
+    user-select: initial;
   }
 
   .sc-note::after {