focus working/ overlay working/ toolbar

app/components/SimpleEditor/ContainerEditor.js

@@ -41,7 +41,7 @@ class ContainerEditor extends SubstanceContainerEditor {
     super.didMount()
 
     if (this.isEmpty()) this.createText()
-    this.focus() // TODO notworking
+    this.el.focus() // TODO notworking
 
     // if (this.isReadOnlyMode()) {
     //   const documentSession = this.getDocumentSession()
@@ -165,12 +165,14 @@ class ContainerEditor extends SubstanceContainerEditor {
 
       newSel = tx.createSelection({
         type: 'property',
+        containerId: 'body',
+        surfaceId: 'body',
         path: [ node.id, 'content' ],
         startOffset: 0,
         endOffset: 0
       })
     }.bind(this))
-
+    console.log(newSel)
     this.rerender()
     this.editorSession.setSelection(newSel)
   }

app/components/SimpleEditor/Editor.js

@@ -2,16 +2,12 @@ import { includes, some } from 'lodash'
 
 import {
   ProseEditor,
-  ProseEditorOverlayTools,
-  ScrollPane,
-  SplitPane,
   TOCProvider
 } from 'substance'
 
 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'
@@ -24,10 +20,16 @@ class Editor extends ProseEditor {
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
-      'trackChangesUpdate': function () { this.updateTrackChange() }
+      'trackChangesUpdate': function () { this.updateTrackChange() },
+      'domSelectionRendered': function () { this.domSelectionRendered() }
     })
   }
 
+  domSelectionRendered () {
+    // TODO what to handle here????
+    console.log('rendered')
+  }
+
   updateTrackChange () {
     this.extendProps({
       trackChanges: !this.props.trackChanges
@@ -66,6 +68,12 @@ class Editor extends ProseEditor {
     var toolbar = this._renderToolbar($$)
     var editor = this._renderEditor($$)
 
+    let SplitPane = this.componentRegistry.get('split-pane')
+    let ScrollPane = this.componentRegistry.get('scroll-pane')
+    let Overlay = this.componentRegistry.get('overlay')
+    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')
 
@@ -94,10 +102,14 @@ class Editor extends ProseEditor {
       )
 
     var contentPanel = $$(ScrollPane, {
+      name: 'contentPanel',
+      // contextMenu: 'custom',
       scrollbarPosition: 'right',
-      overlay: ProseEditorOverlayTools
     })
-    .append(editorWithComments)
+    .append(editorWithComments,
+      $$(Overlay),
+      $$(ContextMenu),
+      $$(Dropzones))
     .attr('id', 'content-panel')
     .ref('contentPanel')
 

app/components/SimpleEditor/SimpleEditor.jsx

@@ -73,7 +73,6 @@ export default class SimpleEditor extends React.Component {
   save (source, changes, callback) {
     const { onSave } = this.props
     const config = this.state.config
-
     const exporter = new SimpleExporter(config)
     const convertedSource = exporter.exportDocument(source)
 

app/components/SimpleEditor/SimpleEditor.scss

@@ -64,12 +64,15 @@ $active-blue: #4a90e2;
   right: 0;
   top: 0;
 
-  .sc-toolbar {
+  .se-toolbar-wrapper .sc-toolbar {
     background-color: $primary;
     border: 1px solid $border;
     border-right: 0;
+    float: left;
+    max-width: 1920px;
     padding-left: 0;
     vertical-align: middle;
+    width: 100%;
     @-moz-document url-prefix() {
       .sc-tool-group > .sc-switch-text-type {
         margin: 0;

app/components/SimpleEditor/panes/TableOfContents/TableOfContents.js

@@ -15,7 +15,6 @@ class TableOfContents extends Toc {
   }
 
   render ($$) {
-    console.log('in renderrr')
     const provider = this.getProvider()
     const { book, fragment } = provider.config.props