Enhanched note functionality completed

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

@@ -58,6 +58,7 @@ class EditNoteTool extends Tool {
       const allowed = ['comment', 'redo', 'save', 'switch-text-type', 'undo', 'note']
       if (!includes(allowed, key)) commandStates[key].disabled = true
     })
+    this.rerender()
   }
 
   saveNote (source) {

app/components/SimpleEditor/miniEditor/config.js

@@ -5,8 +5,6 @@ import {
   PersistencePackage,
   ProseArticle,
   StrongPackage,
-  SubscriptPackage,
-  SuperscriptPackage,
   SpellCheckPackage
 
 } from 'substance'
@@ -26,8 +24,6 @@ let config = {
     config.import(ParagraphPackage)
     config.import(EmphasisPackage)
     config.import(StrongPackage)
-    config.import(SubscriptPackage)
-    config.import(SuperscriptPackage)
     config.import(PersistencePackage)
     config.import(SpellCheckPackage)
   }

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

@@ -12,24 +12,66 @@ class Notes extends Component {
     let self = this
 
     const listItems = entries.map(function (entry, i) {
+      let extractedElement = ''
+      if (entry.content) {
+        extractedElement = self.parseEntryContent($$, entry.content)
+        return extractedElement
+          .attr('data-id', entry.id)
+          .addClass('sc-notes-footer-item')
+      }
       return $$('li')
         .attr('data-id', entry.id)
         .addClass('sc-notes-footer-item')
-        .append(self.parseEntryContent(entry.content))
+        .append(extractedElement)
     })
 
     if (listItems.length === 0) return $$('div')
-
     return $$('ol')
         .addClass('sc-notes-footer')
         .append(listItems)
   }
 
-  parseEntryContent (content) {
-    // return content
+  parseEntryContent ($$, content) {
     let parser = new DOMParser()
-    //
-    return parser.parseFromString(content, 'text/html').body.childNodes[0].innerText
+    let parsedContent = parser.parseFromString(content, 'text/html').body
+    let parentElement = parsedContent.childNodes[0]
+    let children = parentElement.childNodes
+    let constructedElement = $$('li')
+
+    for (let i = 0; i < children.length; i++) {
+      if (children[i].nodeName === '#text') {
+        constructedElement.append(children[i].data)
+      } else {
+        let contructedChildElement = $$(children[i].nodeName)
+        // Case of nested styling, first contruct the sub child node
+        if (children[i].children.length === 1) {
+          let contructedSubChildElement = $$(children[i].children[0].nodeName)
+          this.assignVirtualElementClass(children[i].children[0], contructedSubChildElement)
+          this.assignVirtualElementClass(children[i], contructedChildElement)
+
+          contructedSubChildElement.append(children[i].children[0].innerText)
+          contructedChildElement.append(contructedSubChildElement)
+        } else {
+          this.assignVirtualElementClass(children[i], contructedChildElement)
+          contructedChildElement.append(children[i].innerText)
+        }
+
+        constructedElement.append(contructedChildElement)
+      }
+    }
+
+    return constructedElement
+  }
+
+  assignVirtualElementClass (DOMElement, virtualElement) {
+    switch (DOMElement.nodeName) {
+      case 'STRONG':
+        virtualElement.addClass('sc-strong')
+        break
+      case 'EM':
+        virtualElement.addClass('sc-emphasis')
+        break
+    }
   }
 
   getProvider () {