set drop down options

editors/demo/src/HHMI/HHMI.js

@@ -54,7 +54,7 @@ const Hhmi = () => {
         value={t}
         readonly={readOnly}
         layout={HhmiLayout}
-        // onChange={source => console.log(source)}
+        onChange={source => console.log(source)}
       />
     </>
   );

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

@@ -45,27 +45,6 @@ const DropComponent = ({ getPos, node, view }) => {
     pmViews: { main },
   } = context;
 
-  const dropDownOptions = [
-    {
-      label: 'Option 1',
-      value: '0',
-    },
-    {
-      label: 'Long Option 2',
-      value: '1',
-    },
-    {
-      label: 'Option 3',
-      value: '2',
-    },
-    {
-      label: 'Option 4',
-      value: '3',
-    },
-  ];
-
-  useEffect(() => {}, []);
-
   const onChange = option => {};
 
   const MultipleDropDown = useMemo(
@@ -74,14 +53,14 @@ const DropComponent = ({ getPos, node, view }) => {
         <DropdownStyled
           key={uuidv4()}
           onChange={option => onChange(option)}
-          options={[]}
+          options={node.attrs.options}
           placeholder="Select option"
           select
           value="Select option"
         />
       </Wrapper>
     ),
-    [],
+    [node.attrs.options],
   );
 
   return MultipleDropDown;

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

+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prop-types */
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -117,7 +118,9 @@ export default ({ node, view, getPos }) => {
   const {
     pmViews: { main },
   } = context;
+
   const [options, setOptions] = useState(node.attrs.options);
+
   const [optionText, setOptionText] = useState('');
   const [addingOption, setAddingOption] = useState(false);
   const addOptionRef = useRef(null);
@@ -132,6 +135,10 @@ export default ({ node, view, getPos }) => {
 
   useEffect(() => {
     const allNodes = getNodes(main);
+
+    /*TEMP TO SAVE NODE OPTIONS TODO: SAVE IN CONTEXT OPTIONS*/
+    saveInChildOptions(allNodes);
+
     if (!addingOption) return;
     allNodes.forEach(singleNode => {
       if (singleNode.node.attrs.id === node.attrs.id) {
@@ -145,7 +152,7 @@ export default ({ node, view, getPos }) => {
         );
       }
     });
-  }, [options]);
+  }, [options, context]);
 
   const addOption = () => {
     if (addOptionRef.current.value.trim() === '') return;
@@ -177,6 +184,19 @@ export default ({ node, view, getPos }) => {
     });
   };
 
+  const saveInChildOptions = allNodes => {
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        singleNode.node.content.content.forEach(parentNodes => {
+          parentNodes.forEach(optionNode => {
+            if (optionNode.type.name === 'matching_option')
+              optionNode.attrs.options = options;
+          });
+        });
+      }
+    });
+  };
+
   return (
     <MatchingWrapper>
       <span>Matching</span>

wax-prosemirror-services/src/MatchingService/schema/matchingOptionNode.js

@@ -5,6 +5,7 @@ const matchingOptionNode = {
     isfirst: { default: false },
     correct: { default: false },
     answer: { default: false },
+    options: { default: [] },
   },
   group: 'inline questions',
   content: 'text*',

wax-prosemirror-services/src/lib/helpers/QuestionsNodeView.js

@@ -19,6 +19,7 @@ export default class QuestionsNodeView extends AbstractNodeView {
   }
 
   update(node) {
+    // if (!node.sameMarkup(this.node)) return false;
     this.node = node;
     if (this.context.pmViews[node.attrs.id]) {
       const { state } = this.context.pmViews[node.attrs.id];