Notes in progress

app/components/SimpleEditor/ContainerEditor.js

@@ -10,6 +10,7 @@ import {
 class ContainerEditor extends SubstanceContainerEditor {
   render ($$) {
     let el = super.render($$)
+    el.addClass('my-custom-class')
     // native spellcheck
     el.attr('spellcheck', this.props.spellcheck === 'native')
     // var doc = this.getDocument()

app/components/SimpleEditor/Editor.js

@@ -5,11 +5,11 @@ import {
   TOCProvider
 } from 'substance'
 
-import Comments from './panes/Comments/CommentBoxList'
-import CommentsProvider from './panes/Comments/CommentsProvider'
+// import Comments from './panes/Comments/CommentBoxList'
+// import CommentsProvider from './panes/Comments/CommentsProvider'
 import ContainerEditor from './ContainerEditor'
-// import Notes from './panes/Notes/Notes'
-// import NotesProvider from './panes/Notes/NotesProvider'
+import Notes from './panes/Notes/Notes'
+import NotesProvider from './panes/Notes/NotesProvider'
 import TableOfContents from './panes/TableOfContents/TableOfContents'
 // import TrackChangesProvider from './elements/track_change/TrackChangesProvider'
 
@@ -74,8 +74,7 @@ class Editor extends ProseEditor {
     let ContextMenu = this.componentRegistry.get('context-menu') // new what does it do?
     let Dropzones = this.componentRegistry.get('dropzones') // new what does it do?
 
-    // var footerNotes = $$(Notes)
-    const footerNotes = $$('div')
+    const footerNotes = $$(Notes)
 
     const toc = $$(TableOfContents)
 
@@ -204,8 +203,8 @@ class Editor extends ProseEditor {
       props: props
     })
 
-    // // notes provider
-    // const notesProvider = new NotesProvider(doc)
+    // notes provider
+    const notesProvider = new NotesProvider(doc)
 
     // // comments provider
     // const commentsProvider = new CommentsProvider(doc, {
@@ -234,8 +233,8 @@ class Editor extends ProseEditor {
     // attach all to context
     return {
       ...oldContext,
-      tocProvider
-      // notesProvider,
+      tocProvider,
+      notesProvider
       // commentsProvider,
       // trackChangesProvider
     }

app/components/SimpleEditor/SimpleEditor.scss

@@ -226,10 +226,16 @@ $active-blue: #4a90e2;
   }
 
 
-  .se-content {
+  div.se-content {
     color: $transparent-black;
     font-family: 'Fira Sans';
     word-wrap: break-word;
+    background-color: $white;
+    box-shadow: 0 0 8px $dark-gray;
+    margin: 1.5% 14% 7%;
+    min-height: 100vh;
+    padding: 3% 4% 1%;
+    transition: .3s;
 
     ::selection {
       background: $light-gray;
@@ -243,15 +249,6 @@ $active-blue: #4a90e2;
       background: none;
     }
 
-    &:first-child {
-      background-color: $white;
-      box-shadow: 0 0 8px $dark-gray;
-      margin: 1.5% 14% 7%;
-      min-height: 100vh;
-      padding: 3% 4% 1%;
-      transition: .3s;
-    }
-
     .sc-split-pane {
       position: relative;
     }

app/components/SimpleEditor/config.js

@@ -20,7 +20,7 @@ import {
 // import CodeblockPackage from './elements/codeblock/CodeblockPackage'
 // import CommentPackage from './elements/comment/CommentPackage'
 // import ExtractPackage from './elements/extract/ExtractPackage'
-// import NotePackage from './elements/note/NotePackage'
+import NotePackage from './elements/note/NotePackage'
 // import SourceNotePackage from './elements/source_note/SourceNotePackage'
 // import ImagePackage from './elements/images/ImagePackage'
 //
@@ -59,7 +59,7 @@ let config = {
     // config.import(CodeblockPackage)
     // // config.import(DialoguePackage)
     // config.import(ExtractPackage)
-    // config.import(NotePackage)
+    config.import(NotePackage)
     // config.import(SourceNotePackage)
     // config.import(CommentPackage)
     // config.import(ImagePackage)

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

@@ -42,9 +42,9 @@ class EditNoteTool extends Tool {
   saveNote (event) {
     const selected = this.getSelection()
     const noteContent = this.el.find('textarea').val()
-    const documentSession = this.context.documentSession
+    const editorSession = this.context.editorSession
 
-    documentSession.transaction(function (tx, args) {
+    editorSession.transaction(function (tx, args) {
       const path = [selected.node.id, 'note-content']
       tx.set(path, noteContent)
     })
@@ -55,10 +55,10 @@ class EditNoteTool extends Tool {
     const surface = this.context.surfaceManager.getFocusedSurface()
     if (!surface) return {}
 
-    const commandStates = this.context.commandManager.getCommandStates()
-    const session = this.context.documentSession
+    const commandStates = this.context.commandManager.commandStates
+    const session = this.context.editorSession
     const sel = session.getSelection()
-
+    console.log('this', this)
     const note = documentHelpers.getPropertyAnnotationsForSelection(
       session.getDocument(),
       sel,
@@ -66,10 +66,11 @@ class EditNoteTool extends Tool {
     )
 
     // disable when larger selection that just includes a note as well
-    const selectionLength = (sel.endOffset - sel.startOffset === 1)
+    const selectionLength = (sel.end.offset - sel.start.offset === 1)
 
     if (typeof note[0] !== 'undefined' && selectionLength) {
       // disable commands that don't make sense on a note
+      console.log('commandStates', commandStates)
       each(keys(commandStates), (key) => {
         const allowed = ['comment', 'redo', 'save', 'switch-text-type', 'undo']
         if (!includes(allowed, key)) commandStates[key].disabled = true

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

@@ -6,7 +6,7 @@ Note.define({
   'type': 'note',
   'note-content': {
     type: 'string',
-    default: ''
+    optional: true
   }
 })
 

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

@@ -12,11 +12,9 @@ export default {
 
     config.addComponent(Note.type, NoteComponent)
     config.addConverter('html', NoteHTMLConverter)
-
     config.addCommand(Note.type, NoteCommand, { nodeType: Note.type })
-    config.addTool('note', NoteTool, { target: 'insert' })
-    config.addTool('note', EditNoteTool, { target: 'overlay' })
-
+    config.addTool('note', NoteTool, { toolGroup: 'annotations' })
+    config.addTool('note', EditNoteTool, { toolGroup: 'overlay' })
     config.addIcon('note', { 'fontawesome': 'fa-bookmark' })
     config.addLabel('note', {
       en: 'Note'

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

@@ -4,14 +4,13 @@ class NoteTool extends AnnotationTool {
   renderButton ($$) {
     const el = super.renderButton($$)
     const readOnly = this.isSurfaceReadOnly()
-
     if (readOnly === true) el.attr('disabled', 'true')
     return el
   }
 
   getSurface () {
     const surfaceManager = this.context.surfaceManager
-    const containerId = this.context.controller.props.containerId
+    const containerId = this.context.editor.props.containerId
 
     return surfaceManager.getSurface(containerId)
   }

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

@@ -6,8 +6,8 @@ class TextArea extends Component {
   render ($$) {
     const { disabled, path, placeholder, rows } = this.props
 
-    const documentSession = this.context.documentSession
-    const doc = documentSession.getDocument()
+    const editorSession = this.context.editorSession
+    const doc = editorSession.getDocument()
     const val = doc.get(path)
 
     const el = $$('textarea')

app/components/SimpleEditor/panes/Notes/NotesProvider.js

@@ -28,7 +28,7 @@ class NotesProvider extends TOCProvider {
     notes = _.map(notes, function (note) {
       const blockId = note.path[0]
       const blockPosition = container.getPosition(blockId)
-      const nodePosition = note.startOffset
+      const nodePosition = note.start.offset
 
       return {
         id: note.id,