fix

editors/demo/src/HHMI/HHMI.js

@@ -170,7 +170,7 @@ const Hhmi = () => {
         ref={editorRef}
         customValues={{ showFeedBack: submitted, testMode }}
         fileUpload={file => renderImage(file)}
-        value={content}
+        // value={content}
         readonly={readOnly}
         layout={HhmiLayout}
         onChange={source => console.log(source)}

wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js

@@ -44,7 +44,7 @@ const DropdownStyled = styled(Dropdown)`
 `;
 
 const DropComponent = ({ getPos, node, view }) => {
-  const [selectedOption, setSelectedOption] = useState(undefined);
+  const [selectedOption, setSelectedOption] = useState(node.attrs.correct);
 
   const context = useContext(WaxContext);
   const {
@@ -52,7 +52,6 @@ const DropComponent = ({ getPos, node, view }) => {
   } = context;
 
   const onChange = option => {
-    setSelectedOption(option);
     const allNodes = getNodes(main);
     allNodes.forEach(singleNode => {
       if (singleNode.node.attrs.id === node.attrs.id) {
@@ -68,14 +67,13 @@ const DropComponent = ({ getPos, node, view }) => {
     });
   };
 
-  useEffect(() => {
-    const value = selectedOption ? selectedOption.value : '';
-    const found = find(node.attrs.options, { value });
+  // useEffect(() => {
+  //   const found = find(node.attrs.options, { value: node.attrs.correct });
 
-    if (!found) {
-      setSelectedOption(undefined);
-    }
-  }, [node.attrs.options]);
+  //   if (found) {
+  //     setSelectedOption(found);
+  //   }
+  // }, [node.attrs.options]);
 
   const MultipleDropDown = useMemo(
     () => (

wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js

@@ -200,6 +200,8 @@ export default ({ node, view, getPos }) => {
     });
   };
 
+  const { testMode } = customProps;
+
   return (
     <MatchingWrapper>
       <span>Matching</span>
@@ -252,8 +254,7 @@ export default ({ node, view, getPos }) => {
             )}
           </CreateOptions>
         )}
-        {(!(readOnly && !customProps.showFeedBack) ||
-          (readOnly && !customProps.testMode && !customProps.showFeedBack)) && (
+        {!testMode && (
           <FeedbackComponent
             getPos={getPos}
             node={node}

wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js

@@ -8,7 +8,7 @@ import { Icon } from 'wax-prosemirror-components';
 import { WaxContext } from 'wax-prosemirror-core';
 import EditorComponent from './EditorComponent';
 import DropDownComponent from './DropDownComponent';
-import ReadOnlyDropDownComponent from './ReadOnlyDropDownComponent';
+import TestModeDropDownComponent from './TestModeDropDownComponent';
 
 const Option = styled.div`
   display: flex;
@@ -139,7 +139,7 @@ export default ({ node, view, getPos }) => {
         )}
 
         {readOnly && testMode && !showFeedBack && (
-          <ReadOnlyDropDownComponent getPos={getPos} node={node} view={view} />
+          <TestModeDropDownComponent getPos={getPos} node={node} view={view} />
         )}
 
         {readOnly && showFeedBack && (

wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js → wax-prosemirror-services/src/MatchingService/components/TestModeDropDownComponent.js

@@ -41,7 +41,7 @@ const DropdownStyled = styled(Dropdown)`
   }
 `;
 
-const ReadOnlyDropDownComponent = ({ getPos, node, view }) => {
+const TestModeDropDownComponent = ({ getPos, node, view }) => {
   const [selectedOption, setSelectedOption] = useState(undefined);
 
   const context = useContext(WaxContext);
@@ -97,7 +97,7 @@ const ReadOnlyDropDownComponent = ({ getPos, node, view }) => {
   return ReadOnlyMultipleDropDown;
 };
 
-export default ReadOnlyDropDownComponent;
+export default TestModeDropDownComponent;
 
 const getNodes = view => {
   return DocumentHelpers.findInlineNodes(view.state.doc);