keep selected value

editors/demo/src/Editors.js

@@ -70,7 +70,7 @@ const Editors = () => {
       case 'ncbi':
         return <NCBI />;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

editors/demo/src/HHMI/HHMI.js

@@ -28,7 +28,7 @@ const SubmitButton = styled.button`
   top: 16px;
 `;
 
-const t = `<p class="paragraph"></p><div id="1c3b3bc9-8a82-4fae-9f00-5f3a2605d891" class="matching-container" options="[{&quot;label&quot;:&quot;option 1&quot;,&quot;key&quot;:&quot;d916e258-be52-4bd3-a40f-779beb4f2cf5&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;key&quot;:&quot;58ed31b1-dc66-46d8-8049-c0e0c582e63e&quot;}]" feedback=""><p class="paragraph"></p><p class="paragraph"><div class="matching-option" id="5677a6df-7211-481f-b0d7-94565c87bdbd" isfirst="true" 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" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
+const t = `<p class="paragraph"></p><div id="f57acbf9-6602-4206-a026-f868329a89ec" class="matching-container" options="[{&quot;label&quot;:&quot;value 1&quot;,&quot;value&quot;:&quot;965e9b8a-2311-43f5-a3c9-099f5a2c2d50&quot;},{&quot;label&quot;:&quot;value 2&quot;,&quot;value&quot;:&quot;6a03e0a0-3a84-425d-a258-dcd7ed96a01a&quot;}]" feedback=""><p class="paragraph"><div class="matching-option" id="6d946105-fce7-4313-8da1-b0b065cfa2d8" isfirst="true" correct="false" answer="false" options="[object Object],[object Object]"></div></p><p class="paragraph"></p></div><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" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);
   const [readOnly, isReadOnly] = useState(false);

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

 /* eslint-disable no-underscore-dangle */
-import React, { useContext, useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { WaxContext } from 'wax-prosemirror-core';
+import { find } from 'lodash';
 import { ReactDropDownStyles } from 'wax-prosemirror-components';
 import Dropdown from 'react-dropdown';
 import { v4 as uuidv4 } from 'uuid';
@@ -40,12 +40,18 @@ const DropdownStyled = styled(Dropdown)`
 `;
 
 const DropComponent = ({ getPos, node, view }) => {
-  const context = useContext(WaxContext);
-  const {
-    pmViews: { main },
-  } = context;
+  const [selectedOption, setSelectedOption] = useState(undefined);
 
-  const onChange = option => {};
+  const onChange = option => {
+    setSelectedOption(option);
+  };
+
+  useEffect(() => {
+    const value = selectedOption ? selectedOption.value : '';
+    const found = find(node.attrs.options, { value });
+
+    if (!found) setSelectedOption(undefined);
+  }, [node.attrs.options]);
 
   const MultipleDropDown = useMemo(
     () => (
@@ -56,11 +62,13 @@ const DropComponent = ({ getPos, node, view }) => {
           options={node.attrs.options}
           placeholder="Select option"
           select
-          value="Select option"
+          value={
+            selectedOption === 'undedfined' ? 'Select Option' : selectedOption
+          }
         />
       </Wrapper>
     ),
-    [node.attrs.options],
+    [node.attrs.options, selectedOption],
   );
 
   return MultipleDropDown;

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

@@ -156,7 +156,7 @@ export default ({ node, view, getPos }) => {
 
   const addOption = () => {
     if (addOptionRef.current.value.trim() === '') return;
-    const obj = { label: addOptionRef.current.value, key: uuidv4() };
+    const obj = { label: addOptionRef.current.value, value: uuidv4() };
     setOptions(prevOptions => [...prevOptions, obj]);
     setAddingOption(true);
     setTimeout(() => {
@@ -176,8 +176,8 @@ export default ({ node, view, getPos }) => {
     }
   };
 
-  const removeOption = key => {
-    setOptions(options.filter(option => option.key !== key));
+  const removeOption = value => {
+    setOptions(options.filter(option => option.value !== value));
     setAddingOption(true);
     setTimeout(() => {
       setAddingOption(false);
@@ -212,11 +212,11 @@ export default ({ node, view, getPos }) => {
                   <li>Options: </li>
                   {options.map((option, index) => {
                     return (
-                      <li key={option.key}>
+                      <li key={option.value}>
                         <span>
                           {option.label} &nbsp;
                           <ActionButton
-                            onClick={() => removeOption(option.key)}
+                            onClick={() => removeOption(option.value)}
                             type="button"
                           >
                             <StyledIconAction name="deleteOutlined" />