add options in progress

editors/demo/src/HHMI/HHMI.js

@@ -29,19 +29,7 @@ const SubmitButton = styled.button`
 `;
 
 const t = `<p class="paragraph"></p>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice">
-   <div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32">
-      <p class="paragraph">question </p>
-   </div>
-   <div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1">
-      <p class="paragraph">answer 1</p>
-   </div>
-   <div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2">
-      <p class="paragraph">answer 2</p>
-   </div>
-</div>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></div>`;
-
+<div id="1c3b3bc9-8a82-4fae-9f00-5f3a2605d891" class="matching-container" answers="" feedback=""><p class="paragraph"><div class="matching-option" id="5677a6df-7211-481f-b0d7-94565c87bdbd" correct="false" answer="false"></div></p><p class="paragraph"></p></div><p class="paragraph">s</p><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question</p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" anser="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" anser="">answer 4; answer5;</span></p></div>`;
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);
   const [readOnly, isReadOnly] = useState(false);

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

@@ -18,6 +18,10 @@ const EditorWrapper = styled.div`
     }
     p {
       margin: 0;
+
+      br {
+        display: none;
+      }
     }
   }
 `;

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

@@ -28,12 +28,12 @@ const DropdownStyled = styled(Dropdown)`
   }
 
   .Dropdown-menu {
-    width: 122%;
+    width: 102%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     .Dropdown-option {
-      width: 120%;
+      width: 100%;
     }
   }
 `;
@@ -74,9 +74,9 @@ const DropComponent = ({ options }) => {
           key={uuidv4()}
           onChange={option => onChange(option)}
           options={dropDownOptions}
-          placeholder="Choose Option"
+          placeholder="Select option"
           select
-          value="test"
+          value="Select option"
         />
       </Wrapper>
     ),

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

@@ -37,11 +37,6 @@ const Option = styled.div`
   width: 100%;
 `;
 
-const CreateOptions = styled.div`
-  display: flex;
-  border: 1px solid black;
-`;
-
 const ActionButton = styled.button`
   height: 24px;
   border: none;
@@ -55,8 +50,16 @@ const StyledIconAction = styled(Icon)`
   width: 24px;
 `;
 
+const CreateOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+`;
+
 const OptionArea = styled.div`
   display: flex;
+  flex-direction: row;
+  width: 100%;
 `;
 
 const AddOption = styled.div`
@@ -68,8 +71,8 @@ export default ({ node, view, getPos }) => {
   const {
     pmViews: { main },
   } = context;
-  const [inputList, setInputList] = useState([]);
-  const addAnswerRef = useRef(null);
+  const [options, setOptions] = useState([]);
+  const addOptionRef = useRef(null);
 
   const customProps = main.props.customValues;
 
@@ -79,21 +82,15 @@ export default ({ node, view, getPos }) => {
 
   const readOnly = !isEditable;
 
-  const Input = () => {
-    return (
-      <input
-        placeholder="Your answer here"
-        ref={addAnswerRef}
-        type="text"
-        value=""
-      />
-    );
-  };
-
   const addOption = event => {
-    setInputList(inputList.concat(<Input key={inputList.length} />));
+    // if (options.length === 0) {
+    //   setOptions(options.push(addOptionRef.current.value));
+    // } else {
+    // }
+    setOptions(prevOptions => [...prevOptions, addOptionRef.current.value]);
   };
 
+  const addAnswer = event => {};
   return (
     <MatchingWrapper>
       <span>Matching</span>
@@ -103,7 +100,7 @@ export default ({ node, view, getPos }) => {
             <Option>
               {!readOnly && (
                 <ActionButton
-                  onClick={() => addOption(node.attrs.id)}
+                  onClick={() => addAnswer(node.attrs.id)}
                   type="button"
                 >
                   <StyledIconAction name="plusSquare" />
@@ -112,27 +109,19 @@ export default ({ node, view, getPos }) => {
               <ContainerEditor getPos={getPos} node={node} view={view} />
               <DropDownComponent />
             </Option>
-            <Option>
-              {!readOnly && (
-                <ActionButton
-                  onClick={() => addOption(node.attrs.id)}
-                  type="button"
-                >
-                  <StyledIconAction name="plusSquare" />
-                </ActionButton>
-              )}
-              <ContainerEditor getPos={getPos} node={node} view={view} />
-              <DropDownComponent />
-            </Option>
-            {inputList}
           </InputsContainer>
         </QuestionWrapper>
-        <CreateOptions>
-          <OptionArea>Options Area</OptionArea>
-          <AddOption>
-            <input type="text"></input>
-          </AddOption>
-        </CreateOptions>
+        {!readOnly && (
+          <CreateOptions>
+            <OptionArea>Options: {options}</OptionArea>
+            <AddOption>
+              <input placeholder="Add Option" ref={addOptionRef} type="text" />
+              <button onClick={addOption} type="button">
+                Add
+              </button>
+            </AddOption>
+          </CreateOptions>
+        )}
         {!(readOnly && !customProps.showFeedBack) && (
           <FeedbackComponent
             getPos={getPos}