diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index a1e859cac18e18ec0d088873a6e1982f450a612e..5fa4de11075cc179bd514dfd0ef7b242cbf5456b 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -48,7 +48,7 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={`<p class="paragraph"><span class="small-caps">some</span> text</p><h2>h2</h2><h3>a head</h3><h4>fff</h4><h1>ttt</h1>`}
+          value={demo}
           // readonly
           layout={layout}
           onChange={debounce(source => {
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
index 99c378f1bc0a3733c143e69340622150989d6af0..2dcdbfec057002447b287212bf1af7be3a69e18c 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js
@@ -3,7 +3,19 @@ import { Tools } from 'wax-prosemirror-services';
 import { Fragment } from 'prosemirror-model';
 import { v4 as uuidv4 } from 'uuid';
 
-let a = true;
+const createQuestion = (state, dispatch, tr) => {
+  const { empty, $from, $to } = state.selection;
+  let content = Fragment.empty;
+  if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
+    content = $from.parent.content.cut($from.parentOffset, $to.parentOffset);
+
+  const answerOption = state.config.schema.nodes.multiple_choice.create(
+    { id: uuidv4() },
+    content,
+  );
+  dispatch(tr.replaceSelectionWith(answerOption));
+};
+
 @injectable()
 class MultipleChoiceQuestion extends Tools {
   title = 'Add Multiple Choice Question';
@@ -21,19 +33,7 @@ class MultipleChoiceQuestion extends Tools {
       setTimeout(() => {
         state.doc.nodesBetween(from, to, (node, pos) => {
           if (node.type.name === 'question_wrapper') {
-            const { empty, $from, $to } = state.selection;
-            let content = Fragment.empty;
-            if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
-              content = $from.parent.content.cut(
-                $from.parentOffset,
-                $to.parentOffset,
-              );
-
-            const answerOption = state.config.schema.nodes.multiple_choice.create(
-              { id: uuidv4() },
-              content,
-            );
-            dispatch(tr.replaceSelectionWith(answerOption));
+            createQuestion(state, dispatch, tr);
           } else {
             tr.setBlockType(
               from,
@@ -44,20 +44,7 @@ class MultipleChoiceQuestion extends Tools {
               },
             );
             if (!tr.steps.length) return false;
-            const { empty, $from, $to } = state.selection;
-            let content = Fragment.empty;
-            if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
-              content = $from.parent.content.cut(
-                $from.parentOffset,
-                $to.parentOffset,
-              );
-
-            const answerOption = state.config.schema.nodes.multiple_choice.create(
-              { id: uuidv4() },
-              content,
-            );
-            dispatch(tr.replaceSelectionWith(answerOption));
-            // dispatch(state.tr.replaceSelectionWith(footnote));
+            createQuestion(state, dispatch, tr);
           }
         });
         state.schema.nodes.question_wrapper.spec.atom = true;
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e21a5e6d140ca4a44c650b282d97bd52e3e62e3
--- /dev/null
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/ToolBarBtn.js
@@ -0,0 +1,61 @@
+/* eslint react/prop-types: 0 */
+import React, { useContext, useMemo } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled, { css } from 'styled-components';
+import MenuButton from 'wax-prosemirror-components';
+
+const activeStyles = css`
+  pointer-events: none;
+`;
+
+const StyledButton = styled(MenuButton)`
+  ${props => props.active && activeStyles}
+`;
+
+const ToolBarBtn = ({ view = {}, item }) => {
+  const { active, icon, label, onlyOnMain, run, select, title } = item;
+
+  const {
+    view: { main },
+    activeViewId,
+    activeView,
+  } = useContext(WaxContext);
+
+  if (onlyOnMain) view = main;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const { dispatch, state } = view;
+
+  const handleMouseDown = (e, editorState, editorDispatch) => {
+    e.preventDefault();
+    run(editorState, dispatch);
+  };
+
+  const isActive = !!(
+    active(state, activeViewId) && select(state, activeViewId)
+  );
+
+  let isDisabled = !select(state, activeViewId, activeView);
+  if (!isEditable) isDisabled = true;
+
+  const ToolBarBtnComponent = useMemo(
+    () => (
+      <StyledButton
+        active={isActive || false}
+        disabled={isDisabled}
+        iconName={icon}
+        label={label}
+        onMouseDown={e => handleMouseDown(e, view.state, view.dispatch)}
+        title={title}
+      />
+    ),
+    [isActive, isDisabled],
+  );
+
+  return ToolBarBtnComponent;
+};
+
+export default ToolBarBtn;