Merge branch 'substance-upgrade-beta6' into 'staging'

Substance upgrade beta6

See merge request !21

app/components/SimpleEditor/ContainerEditor.js

@@ -4,35 +4,22 @@ import {
   // deleteCharacter,
   // deleteSelection,
   keys as keyboardKeys,
-  Surface,
   uuid
 } from 'substance'
 
 class ContainerEditor extends SubstanceContainerEditor {
-  render ($$) {
-    // TODO -- call with super
-    var el = Surface.prototype.render.call(this, $$)
-
-    var doc = this.getDocument()
-    var containerId = this.getContainerId()
-    var containerNode = doc.get(containerId)
-
-    if (!containerNode) {
-      console.warn('No container node found for ', containerId)
-    }
+  constructor (...args) {
+    super(...args)
+    this.controlBackButton = this.controlBackButton.bind(this)
+  }
 
-    el.addClass('sc-container-editor container-node ' + containerId)
-      .attr({
-        spellCheck: false,
-        'data-id': containerId
-      })
+  render ($$) {
+    let el = super.render($$)
 
-    // if it IS empty, handle in didMount
-    if (!this.isEmpty()) {
-      containerNode.getNodes().forEach(function (node) {
-        el.append(this._renderNode($$, node).ref(node.id))
-      }.bind(this))
-    }
+    // native spellcheck
+    // TODO -- there is a hasNativeSpellcheck fn
+    const isSpellcheckNative = (this.props.spellcheck === 'native')
+    el.attr('spellcheck', isSpellcheckNative)
 
     // open for editing
     // TODO -- should maybe change to isEditable ?
@@ -49,14 +36,51 @@ class ContainerEditor extends SubstanceContainerEditor {
     super.didMount()
 
     if (this.isEmpty()) this.createText()
-    this.focus()
 
-    if (this.isReadOnlyMode()) {
-      const documentSession = this.getDocumentSession()
-      documentSession.on('didUpdate', this.disableToolbar, this)
+    // TODO -- why this and not this.focus ?
+    this.el.focus()
 
+    if (this.isReadOnlyMode()) {
+      this.editorSession.onUpdate('', this.disableToolbar, this)
       this.addTargetToLinks()
     }
+
+    this.props.history.listenBefore((location, callback) => {
+      const commandStates = this.getCommandStates()
+
+      if (commandStates['save'].disabled === false) {
+        const editor = this.getEditor()
+
+        editor.send('changesNotSaved')
+        editor.emit('send:route', location.pathname)
+
+        return callback(false)
+      }
+
+      return callback()
+    })
+
+    window.history.pushState(null, null, document.URL)
+    window.addEventListener('popstate', this.controlBackButton)
+  }
+
+  // TODO -- review // messes up browser history
+  controlBackButton () {
+    const commandStates = this.getCommandStates()
+    const url = '/books/' + this.props.book.id + '/book-builder'
+
+    window.removeEventListener('popstate', this.controlBackButton)
+
+    if (commandStates['save'].disabled === false) {
+      const editor = this.getEditor()
+
+      window.history.pushState(null, null, document.URL)
+
+      editor.send('changesNotSaved')
+      editor.emit('send:route', url)
+    } else {
+      this.props.history.push(url)
+    }
   }
 
   onTextInput (event) {
@@ -159,7 +183,7 @@ class ContainerEditor extends SubstanceContainerEditor {
   createText () {
     var newSel
 
-    this.transaction(function (tx) {
+    this.editorSession.transaction(function (tx) {
       var container = tx.get(this.props.containerId)
       var textType = tx.getSchema().getDefaultTextType()
 
@@ -173,6 +197,9 @@ class ContainerEditor extends SubstanceContainerEditor {
 
       newSel = tx.createSelection({
         type: 'property',
+        // TODO -- both id's ??
+        containerId: 'body',
+        surfaceId: 'body',
         path: [ node.id, 'content' ],
         startOffset: 0,
         endOffset: 0
@@ -180,7 +207,7 @@ class ContainerEditor extends SubstanceContainerEditor {
     }.bind(this))
 
     this.rerender()
-    this.setSelection(newSel)
+    this.editorSession.setSelection(newSel)
   }
 
   // only runs if editor is in read-only mode
@@ -209,6 +236,10 @@ class ContainerEditor extends SubstanceContainerEditor {
       link.attr('target', '_blank')
     )
   }
+
+  getEditor () {
+    return this.context.editor
+  }
 }
 
 export default ContainerEditor

app/components/SimpleEditor/Editor.js

@@ -2,20 +2,18 @@ import { includes, some } from 'lodash'
 
 import {
   ProseEditor,
-  ProseEditorOverlayTools,
-  ScrollPane,
-  SplitPane,
-  TOCProvider
+  TOCProvider,
+  Toolbar
 } 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'
 import TrackChangesProvider from './elements/track_change/TrackChangesProvider'
+import ModalWarning from './elements/modal_warning/ModalWarning'
 
 class Editor extends ProseEditor {
   constructor (parent, props) {
@@ -24,38 +22,38 @@ class Editor extends ProseEditor {
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
-      'trackChangesUpdate': function () { this.updateTrackChange() }
+
+      // TODO -- clean them up like changesNotSaved
+      'trackChangesUpdate': function () { this.updateTrackChange() },
+      'trackChangesViewToggle': function () { this.trackChangesViewToggle() },
+      // 'changesNotSaved': function () { this.changesNotSaved() }
+      'changesNotSaved': this.changesNotSaved
     })
   }
 
-  updateTrackChange () {
-    this.extendProps({
-      trackChanges: !this.props.trackChanges
+  changesNotSaved () {
+    this.extendState({ changesNotSaved: true })
+  }
+
+  trackChangesViewToggle () {
+    this.extendState({
+      trackChangesView: !this.state.trackChangesView
     })
+  }
 
+  updateTrackChange () {
+    // TODO -- clean up this.props and this.refs
+    this.extendProps({ trackChanges: !this.props.trackChanges })
     this.props.updateTrackChangesStatus(!this.props.trackChanges)
-
-    this.extendState({ trackChanges: !this.props.trackChanges })
+    this.refs.toolbar.extendProps({trackChanges: this.props.trackChanges})
   }
 
   willUpdateState () {}
 
   didMount () {
-    this.documentSession.on('didUpdate', this.documentSessionUpdated, this)
-    this.documentSession.on('fileUploadTrigger', this.handleUpload, this)
     this.extendState({ editorReady: true })
   }
 
-  handleUpload (file, callback) {
-    const { fileUpload } = this.props
-
-    // TODO -- then / catch
-    fileUpload(file).then((res, err) => {
-      if (err != null) callback(null, err)
-      return callback(res.file, null)
-    })
-  }
-
   render ($$) {
     const { trackChangesView } = this.state
     const canToggleTrackChanges = this.canToggleTrackChanges()
@@ -63,17 +61,26 @@ class Editor extends ProseEditor {
     const el = $$('div').addClass('sc-prose-editor')
 
     // left side: editor and toolbar
-    var toolbar = this._renderToolbar($$)
-    var editor = this._renderEditor($$)
+    let toolbar = this._renderToolbar($$)
+    let editor = this._renderEditor($$)
+
+    let SplitPane = this.componentRegistry.get('split-pane')
+    let ScrollPane = this.componentRegistry.get('scroll-pane')
+    let Overlay = this.componentRegistry.get('overlay')
 
-    var footerNotes = $$(Notes)
-    var props = {
+    // TODO -- unnecessary // posssibly breaks book builder dnd
+    let ContextMenu = this.componentRegistry.get('context-menu') // new what does it do?
+    let Dropzones = this.componentRegistry.get('dropzones') // new what does it do?
+
+    const footerNotes = $$(Notes)
+
+    const props = {
       book: this.props.book,
       fragment: this.props.fragment,
       history: this.props.history
     }
 
-    var toc = $$(TableOfContents, props)
+    const toc = $$(TableOfContents, props)
 
     var editorWithFooter = $$('div')
       .append(
@@ -98,10 +105,14 @@ class Editor extends ProseEditor {
       )
 
     var contentPanel = $$(ScrollPane, {
-      scrollbarPosition: 'right',
-      overlay: ProseEditorOverlayTools
+      name: 'contentPanel',
+      // contextMenu: 'custom',
+      scrollbarPosition: 'right'
     })
-    .append(editorWithComments)
+    .append(editorWithComments,
+      $$(Overlay),
+      $$(ContextMenu),
+      $$(Dropzones))
     .attr('id', 'content-panel')
     .ref('contentPanel')
 
@@ -123,13 +134,45 @@ class Editor extends ProseEditor {
       el.addClass('track-changes-mode')
     }
 
+    const modal = $$(ModalWarning, {
+      width: 'medium',
+      textAlign: 'center'
+    })
+
+    if (this.state.changesNotSaved) {
+      return el.append(modal)
+    }
+
     return el
   }
 
-  // TODO -- use this to insert read-only mode alert
+  // TODO -- leverage ProseEditor's this._renderToolbar maybe?
   _renderToolbar ($$) {
-    const toolbar = super._renderToolbar($$)
-    return toolbar
+    let viewMode = this.props.disabled ? $$('span')
+        .addClass('view-mode')
+        .append('Editor is in Read-Only mode')
+        : ''
+
+    let commandStates = this.commandManager.getCommandStates()
+
+    return $$('div')
+      .addClass('se-toolbar-wrapper')
+      .append(
+        $$(Toolbar, {
+          commandStates: commandStates,
+          trackChanges: this.props.trackChanges,
+          trackChangesView: this.state.trackChangesView,
+          toolGroups: [
+            'annotations',
+            'default',
+            'document',
+            'text',
+            'track-change-enable',
+            'track-change-toggle-view'
+          ]
+        }).ref('toolbar')
+      )
+      .append(viewMode)
   }
 
   _renderEditor ($$) {
@@ -137,19 +180,22 @@ class Editor extends ProseEditor {
     const editing = this.props.disabled ? 'selection' : 'full'
     return $$(ContainerEditor, {
       editing: editing,
-      documentSession: this.documentSession,
+      editorSession: this.editorSession,
       commands: configurator.getSurfaceCommandNames(),
       containerId: 'body',
+      spellcheck: 'native',
       textTypes: configurator.getTextTypes(),
       trackChanges: this.props.trackChanges,
-      updateTrackChangesStatus: this.props.updateTrackChangesStatus
+      updateTrackChangesStatus: this.props.updateTrackChangesStatus,
+      history: this.props.history,
+      book: this.props.book
     }).ref('body')
   }
 
   getInitialState () {
     return {
+      changesNotSaved: false,
       editorReady: false,
-      trackChanges: this.props.trackChanges,
       trackChangesView: true
     }
   }
@@ -189,16 +235,16 @@ class Editor extends ProseEditor {
       containerId: 'body'
     })
 
-    // // notes provider
+    // notes provider
     const notesProvider = new NotesProvider(doc)
 
-    // // comments provider
+    // comments provider
     const commentsProvider = new CommentsProvider(doc, {
       commandManager: this.commandManager,
       comments: this.props.fragment.comments,
       containerId: this.props.containerId,
       controller: this,
-      documentSession: this.documentSession,
+      editorSession: this.editorSession,
       fragment: this.props.fragment,
       surfaceManager: this.surfaceManager,
       toggleCommentsArea: this.toggleCommentsArea,
@@ -211,7 +257,7 @@ class Editor extends ProseEditor {
       commandManager: this.commandManager,
       containerId: this.props.containerId,
       controller: this,
-      documentSession: this.documentSession,
+      editorSession: this.editorSession,
       surfaceManager: this.surfaceManager,
       user: this.props.user
     })

app/components/SimpleEditor/SimpleEditor.jsx

 // import { get } from 'lodash'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Alert } from 'react-bootstrap'
 
 import {
   ProseEditorConfigurator as Configurator,
-  DocumentSession
+  EditorSession
 } from 'substance'
 
 import config from './config'
@@ -24,11 +23,6 @@ export default class SimpleEditor extends React.Component {
 
     this._releaseLock = this._releaseLock.bind(this)
     this._acquireLock = this._acquireLock.bind(this)
-
-    // TODO -- delete, along with Alert
-    this.state = {
-      canEdit: false
-    }
   }
 
   // TODO -- is this necessary?
@@ -50,15 +44,18 @@ export default class SimpleEditor extends React.Component {
 
     const importer = configurator.createImporter('html')
     const doc = importer.importDocument(source)
-    const documentSession = new DocumentSession(doc)
+    const editorSession = new EditorSession(doc, {
+      configurator: configurator
+    })
 
-    documentSession.setSaveHandler({
-      saveDocument: this.save
+    editorSession.setSaveHandler({
+      saveDocument: this.save,
+      uploadFile: this.props.fileUpload
     })
 
     return {
       configurator: configurator,
-      documentSession: documentSession
+      editorSession: editorSession
     }
   }
 
@@ -71,11 +68,10 @@ 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)
 
-    onSave(convertedSource, callback)
+    return onSave(convertedSource)
   }
 
   // NOTE -- Theoretically, we shouldn't lock when the editor is in read only
@@ -139,8 +135,8 @@ export default class SimpleEditor extends React.Component {
   componentDidMount () {
     const el = ReactDOM.findDOMNode(this)
 
-    const { book, fileUpload, fragment, history, onSave, update, user } = this.props
-    const { configurator, documentSession } = this.createSession()
+    const { book, fragment, history, onSave, update, user } = this.props
+    const { configurator, editorSession } = this.createSession()
 
     if (!fragment) return
 
@@ -161,8 +157,7 @@ export default class SimpleEditor extends React.Component {
       configurator,
       containerId,
       disabled,
-      documentSession,
-      fileUpload,
+      editorSession,
       fragment,
       history,
       onSave,
@@ -207,19 +202,8 @@ export default class SimpleEditor extends React.Component {
 
   // TODO -- do I even need a render here?
   render () {
-    // TODO -- DELETE THIS !!!!!
-    let viewMode = !this.state.canEdit
-    ? (
-      <Alert bsStyle='warning' className='view-mode'>
-        <span>Editor is in Read-Only Mode</span>
-      </Alert>
-    )
-    : null
-
     return (
-      <div className='editor-wrapper'>
-        {viewMode}
-      </div>
+      <div className='editor-wrapper' />
     )
   }
 }

app/components/SimpleEditor/SimpleEditor.scss

@@ -27,23 +27,19 @@ $active-blue: #4a90e2;
   height: 90vh;
   position: relative;
 
+  // move to a new file toolbar.scss ??
   .view-mode {
-    height: 44px;
-    position: fixed;
+    font-size: 14px;
+    position: absolute;
     right: 0;
     text-align: center;
+    top: 10px;
     width: 20%;
     z-index: 9999;
-
-    span {
-      font-size: 14px;
-      position: relative;
-      top: 10px;
-    }
   }
 
   .track-changes-mode {
-    .se-content:first-child {
+    div.se-content {
       line-height: 38px;
     }
 
@@ -54,6 +50,9 @@ $active-blue: #4a90e2;
     .sc-comment-pane-list li .comment-list .single-comment-row {
       padding: 3px 12px;
     }
+    .sc-overlay .se-active-tools .sc-overlay-bubble .sc-comment-icon {
+      top: 0;
+    }
   }
 }
 
@@ -64,12 +63,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;
@@ -113,12 +115,12 @@ $active-blue: #4a90e2;
     } // end dropdown
 
     .sm-target-track-change-enable {
-      border-right: 1px solid $border;
 
       button {
         background-color: $inactive-grey;
         border-radius: 0;
         color: $white;
+        line-height: 0;
         // cursor: pointer;
         padding: 0 19px;
         position: relative;
@@ -149,6 +151,7 @@ $active-blue: #4a90e2;
         cursor: pointer;
         padding: 0 19px;
         position: relative;
+        line-height: 0;
       }
 
       button::after {
@@ -168,14 +171,14 @@ $active-blue: #4a90e2;
       border-left: 1px solid $border;
     }
 
-    .sm-target-track-change-enable,
-    .sm-target-track-change-toggle-view {
+    .sm-target-track-change-enable {
       padding: 0 9px;
     }
 
     .sm-target-document,
     .sm-target-annotations,
-    .sm-target-insert {
+    .sm-target-insert,
+    .sm-target-default {
       border-right: 1px solid $border;
       padding: 0px 9px;
 
@@ -204,7 +207,7 @@ $active-blue: #4a90e2;
       padding: 0;
 
       &:after {
-        bottom: 17px;
+        bottom: 8px;
         color: $black;
         content: 'x';
         font-size: 8px;
@@ -223,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;
@@ -240,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;
     }
@@ -257,26 +257,35 @@ $active-blue: #4a90e2;
       outline: none;
     }
 
-    .sc-prose-editor-overlay-tools {
+    .sc-overlay {
       .se-active-tools {
         background: transparent;
         border: 0;
+        border-radius: 0;
         padding: 0;
       }
     }
 
-    .sc-prose-editor-overlay-tools::before {
+    .sc-overlay.sm-theme-dark::before {
       border-style: none;
       border-width: 0;
-  }
+    }
+
+    .sc-list-ul {
+      list-style-type: disc;
+      padding-left: 19px;
+    }
+
+    .sc-list-ol {
+      list-style-type: decimal;
+      padding-left: 19px;
+    }
 } // end sc-content
 
   .sc-has-comments {
-    .se-content {
-      &:first-child {
+    div.se-content {
         margin: 1.5% 27% 5% 1%;
         transition: .3s;
-      }
     }
   }
 

app/components/SimpleEditor/SimpleEditorExporter.js

@@ -34,11 +34,11 @@ class SimpleExporter extends HTMLExporter {
       throw new Error('Illegal arguments: container is mandatory.')
     }
 
-    var doc = container.getDocument()
+    var doc = container.editorSession.getDocument()
     this.state.doc = doc
     var elements = []
 
-    container.data.nodes.body.nodes.forEach(function (id) {
+    container.editorSession.document.data.nodes.body.nodes.forEach(function (id) {
       var node = doc.get(id)
       var nodeEl = this.convertNode(node)
       elements.push(nodeEl)

app/components/SimpleEditor/SimpleEditorImporter.js

@@ -27,6 +27,8 @@ class SimpleImporter extends HTMLImporter {
     this.convertContainer(bodyEls, 'body')
   }
 
+  // TODO -- check substance's implementation of overlapping annotations
+
   // override substance's internal function to allow for overlapping
   // annotations, without adhering to an expand / fuse mode
   _createInlineNodes () {

app/components/SimpleEditor/SimpleEditorWrapper.jsx

@@ -73,14 +73,13 @@ export class SimpleEditorWrapper extends React.Component {
     const { fragment } = this.props
     fragment.source = source
 
-    this.update(fragment)
-    return callback()
+    return this.update(fragment)
   }
 
   update (newChapter) {
     const { book } = this.props
     const { updateFragment } = this.props.actions
-    updateFragment(book, newChapter)
+    return updateFragment(book, newChapter)
   }
 }
 

app/components/SimpleEditor/config.js

@@ -4,30 +4,27 @@ import {
   CodePackage,
   EmphasisPackage,
   HeadingPackage,
-  // LinkPackage,
   ParagraphPackage,
   PersistencePackage,
   ProseArticle,
   LinkPackage,
   StrongPackage,
   SubscriptPackage,
-  SuperscriptPackage
+  SuperscriptPackage,
+  SwitchTextTypePackage,
+  SpellCheckPackage,
+  CodeblockPackage
 } from 'substance'
 
 // My Elements
-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 SourceNotePackage from './elements/source_note/SourceNotePackage'
 import ImagePackage from './elements/images/ImagePackage'
-
+import ListPackage from './elements/list/ListPackage'
 import TrackChangePackage from './elements/track_change/TrackChangePackage'
 
-// var DialoguePackage = require('./elements/dialogue/DialoguePackage')
-// var NumberedListPackage = require('./elements/numbered_list/NumberedListPackage')
-// var NoStyleListPackage = require('./elements/no_style_list/NoStyleListPackage')
-
 let config = {
   name: 'simple-editor',
   configure: (config, options) => {
@@ -40,7 +37,7 @@ let config = {
     config.import(BasePackage, {
       noBaseStyles: options.noBaseStyles
     })
-
+    config.import(SwitchTextTypePackage)
     config.import(ParagraphPackage)
     config.import(HeadingPackage)
     config.import(BlockquotePackage)
@@ -49,23 +46,18 @@ let config = {
     config.import(SubscriptPackage)
     config.import(SuperscriptPackage)
     config.import(CodePackage)
-    // config.import(LinkPackage)
     config.import(PersistencePackage)
 
-    config.import(CodeblockPackage)
     config.import(LinkPackage)
-    // config.import(DialoguePackage)
+    config.import(SpellCheckPackage)
+    config.import(ListPackage)
+    config.import(CodeblockPackage)
     config.import(ExtractPackage)
     config.import(NotePackage)
     config.import(SourceNotePackage)
-    config.import(CommentPackage)
     config.import(ImagePackage)
-
+    config.import(CommentPackage)
     config.import(TrackChangePackage)
-
-    // config.import(DialoguePackage)
-    // config.import(NoStyleListPackage)
-    // config.import(NumberedListPackage)
   }
 }
 

app/components/SimpleEditor/elements/codeblock/Codeblock.js

-import { TextBlock } from 'substance'
-
-class Codeblock extends TextBlock {}
-
-Codeblock.type = 'codeblock'
-
-export default Codeblock

app/components/SimpleEditor/elements/codeblock/CodeblockComponent.js

-import { TextBlockComponent } from 'substance'
-
-class CodeblockComponent extends TextBlockComponent {
-  render ($$) {
-    let el = super.render.call(this, $$)
-    return el.addClass('sc-codeblock')
-  }
-}
-
-export default CodeblockComponent

app/components/SimpleEditor/elements/codeblock/CodeblockHTMLConverter.js

-export default {
-  type: 'codeblock',
-  tagName: 'pre',
-
-  import: function (el, node, converter) {
-    let codeEl = el.find('code')
-    if (codeEl) {
-      node.content = converter.annotatedText(codeEl, [node.id, 'content'], { preserveWhitespace: true })
-    }
-  },
-
-  export: function (node, el, converter) {
-    let $$ = converter.$$
-
-    el.append(
-      $$('code').append(
-        converter.annotatedText([node.id, 'content'])
-      )
-    )
-  }
-}

app/components/SimpleEditor/elements/codeblock/CodeblockPackage.js

-import Codeblock from './Codeblock'
-import CodeblockComponent from './CodeblockComponent'
-import CodeblockHTMLConverter from './CodeblockHTMLConverter'
-
-export default {
-  name: 'codeblock',
-  configure: function (config) {
-    config.addNode(Codeblock)
-
-    config.addComponent('codeblock', CodeblockComponent)
-    config.addConverter('html', CodeblockHTMLConverter)
-
-    config.addTextType({
-      name: 'codeblock',
-      data: {type: 'codeblock'}
-    })
-
-    config.addLabel('codeblock', {
-      en: 'Codeblock',
-      de: 'Codeblock'
-    })
-  }
-
-  // Codeblock: Codeblock,
-  // CodeblockComponent: CodeblockComponent,
-  // CodeblockHTMLConverter: CodeblockHTMLConverter
-}

app/components/SimpleEditor/elements/codeblock/codeblock.scss

-.sc-codeblock {
-  font-family: var(--font-family-code);
-  font-size: 15px;
-}
-
-// Toolbar styles
-// .sc-switch-text-type .se-option.sm-codeblock {
-//   font-family: var(--font-family-code);
-//   font-size: 15px;
-// }

app/components/SimpleEditor/elements/comment/CommentBubble.js

 import {
-  createAnnotation,
   DefaultDOMElement,
   FontAwesomeIcon as Icon,
   Tool
@@ -29,6 +28,7 @@ class CommentBubble extends Tool {
   // calculated relative to the overlay container, which gets positioned
   // wrong on resize (substance bug -- TODO)
   didMount () {
+    this.context.editorSession.onUpdate('', this.position, this)
     this.position()
     DefaultDOMElement.getBrowserWindow().on('resize', this.didUpdate, this)
   }
@@ -52,7 +52,7 @@ class CommentBubble extends Tool {
     if (!surface) return
 
     const documentElement = document.querySelector('.se-content')
-    const overlayContainer = document.querySelector('.sc-overlay-container')
+    const overlayContainer = document.querySelector('.sc-overlay')
 
     setTimeout(() => { // read comment below
       const documentElementWidth = documentElement.offsetWidth
@@ -62,7 +62,9 @@ class CommentBubble extends Tool {
       // unhide it first, as the bubble has no height otherwise
       this.el.removeClass('sc-overlay-bubble-hidden')
 
-      const hints = surface.getBoundingRectangleForSelection()
+      let wsel = window.getSelection()
+      let wrange = wsel.getRangeAt(0)
+      const hints = wrange.getBoundingClientRect()
       const selectionHeight = hints.height
       const bubbleHeight = this.el.getHeight()
       const cheat = 3
@@ -89,8 +91,8 @@ class CommentBubble extends Tool {
     return commandStates.comment
   }
 
-  getDocumentSession () {
-    return this.context.documentSession
+  getEditorSession () {
+    return this.context.editorSession
   }
 
   getMode () {
@@ -103,8 +105,8 @@ class CommentBubble extends Tool {
   }
 
   getSelection () {
-    const documentSession = this.getDocumentSession()
-    return documentSession.getSelection()
+    const editorSession = this.getEditorSession()
+    return editorSession.getSelection()
   }
 
   // TODO -- get from provider
@@ -137,12 +139,15 @@ class CommentBubble extends Tool {
 
     const newNode = {
       selection: selection,
-      node: { type: 'comment' }
+      type: 'comment',
+      path: selection.path,
+      start: selection.start,
+      end: selection.end
     }
 
-    surface.transaction((tx, args) => {
-      const annotation = createAnnotation(tx, newNode)
-      provider.focusTextArea(annotation.node.id)
+    surface.editorSession.transaction((tx, args) => {
+      const annotation = tx.create(newNode)
+      provider.focusTextArea(annotation.id)
     })
   }
 }

app/components/SimpleEditor/elements/comment/CommentComponent.js

@@ -29,7 +29,8 @@ class CommentComponent extends AnnotationComponent {
     return el
   }
 
-  shouldRerender (newProps) {
+  // TODO -- this was shouldRerender, but that stopped working. why?
+  shouldRedraw (newProps) {
     if (this.hasNodeChanged()) {
       this.active = this.props.node.active
       this.rerender()
@@ -46,7 +47,7 @@ class CommentComponent extends AnnotationComponent {
 
   didMount () {
     const provider = this.getProvider()
-    provider.on('comments:updated', this.shouldRerender, this)
+    provider.on('comments:updated', this.shouldRedraw, this)
   }
 
   getProvider () {

app/components/SimpleEditor/elements/comment/CommentPackage.js

@@ -7,7 +7,10 @@ import ResolvedCommentPackage from './ResolvedCommentPackage'
 
 export default {
   name: 'comment',
-  configure: function (config) {
+  configure: function (config, {
+    disableCollapsedCursor, // TODO -- should delete?
+    toolGroup
+  }) {
     config.import(ResolvedCommentPackage)
 
     config.addNode(Comment)
@@ -15,10 +18,13 @@ export default {
     config.addComponent(Comment.type, CommentComponent)
     config.addConverter('html', CommentHTMLConverter)
 
-    config.addCommand(Comment.type, CommentCommand, { nodeType: Comment.type })
+    config.addCommand(Comment.type, CommentCommand, {
+      disableCollapsedCursor,  // TODO -- same as above
+      nodeType: Comment.type
+    })
+
     config.addTool('comment', CommentBubble, {
-      target: 'overlay',
-      triggerOnCursorMove: true
+      toolGroup: 'overlay'
     })
 
     config.addIcon('comment', { 'fontawesome': 'fa-comment' })

app/components/SimpleEditor/elements/comment/comment.scss

@@ -17,7 +17,7 @@ $white: #fff;
   background-color: $light-green;
 }
 
-.sc-prose-editor-overlay-tools {
+.sc-overlay {
   .se-active-tools {
     .sc-overlay-bubble {
       background: $white;

app/components/SimpleEditor/elements/elements.scss

-@import './codeblock/codeblock';
 @import './comment/comment';
 // @import './dialogue/dialogue';
 @import './extract/extract';
@@ -11,3 +10,5 @@
 @import './track_change/trackChange';
 
 @import './images/image';
+@import './modal_warning/modalWarning';
+@import './list/customLists';

app/components/SimpleEditor/elements/extract/extract.scss

-.sc-extract {
+.sc-prose-editor .se-content .sc-extract {
   font-family: 'Fira Sans';
   font-style: italic;
   font-weight: 300;

app/components/SimpleEditor/elements/images/Image.js

-import { DocumentNode } from 'substance'
-
-class Image extends DocumentNode {}
-
-Image.define({
-  type: 'image',
-  src: { type: 'string', default: 'http://' }
-})
-
-export default Image