diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 66105d9d24b989fd4c4217d830f313e48517847b..d173587820e232ca1fc6ce5a8d12b5c6addc7386 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -23,7 +23,6 @@ const Hhmi = () => {
         autoFocus
         fileUpload={file => renderImage(file)}
         value=""
-        targetFormat="JSON"
         // readonly
         layout={HhmiLayout}
         onChange={source => console.log(source)}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
index 8d8e14ca4d732bce3348333f1b15436ad5c2c9d6..584f515a751cabeea79af2aebfaffdfa378a9d1c 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/FeedbackComponent.js
@@ -41,7 +41,6 @@ export default ({ node, view, getPos }) => {
   }, [getNodes(context.view.main)]);
 
   const handleKeyDown = e => {
-    e.stopPropagation();
     if (e.key === 'Backspace') {
       context.view.main.dispatch(
         context.view.main.state.tr.setSelection(
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
index 8c1649569ff9d6b71b36fe8bbdec71f9563c8e35..a31255fefd391f3b24bfcf540f28c9ebc0972437 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -77,10 +77,10 @@ export default ({ node, view, getPos }) => {
   });
 
   const removeOption = () => {
-    main.state.doc.nodesBetween(getPos(), getPos() + 1, (nodes, pos) => {
-      if (nodes.attrs.id === node.attrs.id) {
+    main.state.doc.nodesBetween(getPos(), getPos() + 1, (sinlgeNode, pos) => {
+      if (sinlgeNode.attrs.id === node.attrs.id) {
         main.dispatch(
-          main.state.tr.deleteRange(getPos(), getPos() + nodes.nodeSize + 1),
+          main.state.tr.deleteRange(getPos(), getPos() + sinlgeNode.nodeSize),
         );
       }
     });
@@ -111,7 +111,7 @@ export default ({ node, view, getPos }) => {
           // create Empty Paragraph
           setTimeout(() => {
             helpers.createEmptyParagraph(context, newAnswerId);
-          }, 100);
+          }, 30);
         }
       }
     });
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js
index 46f1fda2084d69517ff32d653e9b27e97659a196..537c87cab809865caebe35a5ea90724b7e88352b 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js
@@ -10,21 +10,22 @@ const createEmptyParagraph = (context, newAnswerId) => {
         ),
       ),
     );
-
-    let type = context.view.main.state.schema.nodes.paragraph;
+    if (context.view[newAnswerId].dispatch) {
+      let type = context.view.main.state.schema.nodes.paragraph;
+      context.view[newAnswerId].dispatch(
+        context.view[newAnswerId].state.tr.insert(0, type.create()),
+      );
+    }
     context.view[newAnswerId].dispatch(
-      context.view[newAnswerId].state.tr.insert(0, type.create()),
+      context.view[newAnswerId].state.tr.setSelection(
+        TextSelection.between(
+          context.view[newAnswerId].state.selection.$anchor,
+          context.view[newAnswerId].state.selection.$head,
+        ),
+      ),
     );
+    context.view[newAnswerId].focus();
   }
-  context.view[newAnswerId].dispatch(
-    context.view[newAnswerId].state.tr.setSelection(
-      TextSelection.between(
-        context.view[newAnswerId].state.selection.$anchor,
-        context.view[newAnswerId].state.selection.$head,
-      ),
-    ),
-  );
-  context.view[newAnswerId].focus();
 };
 
 export default {
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
index 371f84ada30d33a47c5ed7936b1ef5d25428b96d..a4b95a133962f2d1f3a6661de60dcbb969672381 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
@@ -1,5 +1,6 @@
 const multipleChoiceNode = {
   attrs: {
+    class: { default: 'mutiple-choice-option' },
     id: { default: '' },
     correct: { default: false },
     feedback: { default: '' },
@@ -7,17 +8,20 @@ const multipleChoiceNode = {
   group: 'block',
   content: 'block*',
   // atom: true,
-  toDOM: node => ['multiple-choice', node.attrs, 0],
   parseDOM: [
     {
-      tag: 'multiple-choice',
+      tag: 'div.mutiple-choice-option',
       getAttrs(dom) {
         return {
           id: dom.getAttribute('id'),
+          class: dom.getAttribute('class'),
+          correct: dom.getAttribute('correct'),
+          feedback: dom.getAttribute('feedback'),
         };
       },
     },
   ],
+  toDOM: node => ['div', node.attrs, 0],
 };
 
 export default multipleChoiceNode;
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index e0f3b57ac42f93e9c2c77d5f581fdf04bb753b9c..9c069954dfc9884c3798536b64b406af7f7ac836 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -109,6 +109,14 @@ export default css`
       position: relative;
       right: 20px;
     }
+
+    .portal p {
+      display: block !important;
+    }
+
+    p:last-of-type {
+      display: none;
+    }
   }
 
   .mutiple-choice.ProseMirror-selectednode {