Init of mini editor functionality for notes

app/components/SimpleEditor/SimpleEditor.scss

@@ -5,6 +5,8 @@ $fa-font-path: '~font-awesome/fonts';
 @import '~substance/substance.css';
 @import './elements/elements';
 @import './panes/panes';
+@import './MiniEditor/MiniEditor';
+
 
 // grays
 $border: #ccc;
@@ -62,7 +64,6 @@ $active-blue: #4a90e2;
   position: absolute;
   right: 0;
   top: 0;
-
   .se-toolbar-wrapper .sc-toolbar {
     background-color: $primary;
     border: 1px solid $border;

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

 import { each, includes, keys } from 'lodash'
-import { documentHelpers, FontAwesomeIcon as Icon, Tool } from 'substance'
-import PromptTextArea from './PromptTextArea'
+import { documentHelpers, Tool, ProseEditorConfigurator as Configurator,
+  EditorSession } from 'substance'
+// import PromptTextArea from './PromptTextArea'
+import MiniEditor from '../../miniEditor/miniEditor'
+import config from '../../miniEditor/config'
+import Importer from '../../SimpleEditorImporter'
 
 class EditNoteTool extends Tool {
+
   render ($$) {
+    const miniEditorSession = this._initMiniEditor()
     let el = $$('div').addClass('sc-edit-note-tool')
-
     const selected = this.getSelection()
     if (!selected.node) return el
-
-    const disabled = this.isEditorReadOnly()
-
-    // TODO -- on this.getLabel add a label to package and call it save note
-    const icon = $$(Icon, { icon: 'fa-save' })
-      .addClass('sc-save-icon')
-
-    const save = $$('div')
-      .addClass('sc-save-area')
-      .append(icon)
-      .on('click', this.saveNote)
-
-    const noteTool = $$('div')
-      .addClass('sc-edit-note-tool-container')
-      .append(
-        $$(PromptTextArea, {
-          disabled: disabled,
-          path: [selected.node.id, 'note-content'],
-          placeholder: 'Type your note here'
-        })
-      )
-    if (!disabled) noteTool.append(save)
-
-    el.append(noteTool)
-
-    // to properly adjust text area height depending on text
-    this.setTextAreaHeight()
-
+    el.append($$(MiniEditor, {
+      editorSession: miniEditorSession
+    }))
     return el
   }
 
@@ -43,6 +23,18 @@ class EditNoteTool extends Tool {
     this.context.editorSession.onUpdate('', this.diabelTools, this)
   }
 
+  _initMiniEditor () {
+    const configurator = new Configurator().import(config)
+    configurator.addImporter('html', Importer)
+
+    const importer = configurator.createImporter('html')
+    const doc = importer.importDocument('hello')
+    const editorSession = new EditorSession(doc, {
+      configurator: configurator
+    })
+    return editorSession
+  }
+
   diabelTools () {
     const selected = this.getSelection()
     if (!selected.node) return

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

@@ -3,8 +3,8 @@ import { AnnotationTool } from 'substance'
 class NoteTool extends AnnotationTool {
   renderButton ($$) {
     const el = super.renderButton($$)
-    const readOnly = this.isSurfaceReadOnly()
-    if (readOnly === true) el.attr('disabled', 'true')
+    // const readOnly = this.isSurfaceReadOnly()
+    // if (readOnly === true) el.attr('disabled', 'true')
     return el
   }
 

app/components/SimpleEditor/miniEditor/config.js

+import {
+  BasePackage,
+  EmphasisPackage,
+  ParagraphPackage,
+  PersistencePackage,
+  ProseArticle,
+  StrongPackage,
+  SubscriptPackage,
+  SuperscriptPackage,
+  SpellCheckPackage
+
+} from 'substance'
+
+let config = {
+  name: 'simple-editor',
+  configure: (config, options) => {
+    config.defineSchema({
+      name: 'prose-article',
+      ArticleClass: ProseArticle,
+      defaultTextType: 'paragraph'
+    })
+
+    config.import(BasePackage, {
+      noBaseStyles: options.noBaseStyles
+    })
+    config.import(ParagraphPackage)
+    config.import(EmphasisPackage)
+    config.import(StrongPackage)
+    config.import(SubscriptPackage)
+    config.import(SuperscriptPackage)
+    config.import(PersistencePackage)
+    config.import(SpellCheckPackage)
+  }
+}
+
+export default config

app/components/SimpleEditor/miniEditor/miniEditor.js

+import {
+  ProseEditor,
+  ContainerEditor,
+  Toolbar
+} from 'substance'
+
+// import ContainerEditor from './ContainerEditor'
+
+class MiniEditor extends ProseEditor {
+  render ($$) {
+    const el = $$('div').addClass('sc-mini-editor')
+    let toolbar = this._renderMiniToolbar($$)
+    let editor = this._renderEditor($$)
+    let SplitPane = this.componentRegistry.get('split-pane')
+    let ScrollPane = this.componentRegistry.get('scroll-pane')
+
+    const contentPanel = $$(ScrollPane, {
+      name: 'miniEditorContentPanel',
+      scrollbarPosition: 'right'
+    })
+      .append(editor)
+      .attr('id', 'content-panel')
+      .ref('miniEditorContentPanel')
+
+    el.append(
+      $$(SplitPane, { splitType: 'horizontal' })
+        .append(toolbar, contentPanel)
+    )
+
+    return el
+  }
+
+  _renderMiniToolbar ($$) {
+    let commandStates = this.commandManager.getCommandStates()
+    return $$('div').addClass('se-toolbar-wrapper').append(
+      $$(Toolbar, {
+        commandStates: commandStates,
+        toolGroups: ['document', 'annotations']
+      }).ref('mini_toolbar')
+    )
+  }
+
+  _renderEditor ($$) {
+    return $$(ContainerEditor, {
+      editorSession: this.editorSession,
+      // commands: configurator.getSurfaceCommandNames(),
+      containerId: 'body',
+      spellcheck: 'native'
+      // textTypes: configurator.getTextTypes()
+    }).ref('mini_body')
+  }
+
+  getChildContext () {
+    const oldContext = super.getChildContext()
+
+    // attach all to context
+    return {
+      ...oldContext
+    }
+  }
+}
+
+export default MiniEditor

app/components/SimpleEditor/miniEditor/miniEditor.scss

+.sc-prose-editor .sc-mini-editor {
+  .se-scrollable {
+    height: 150px;
+    width: 360px;
+  }
+}