update option text

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

@@ -39,8 +39,7 @@ const DropdownStyled = styled(Dropdown)`
   }
 `;
 
-const DropComponent = ({ options }) => {
-  console.log(options);
+const DropComponent = ({ getPos, node, view }) => {
   const context = useContext(WaxContext);
   const {
     pmViews: { main },
@@ -75,7 +74,7 @@ const DropComponent = ({ options }) => {
         <DropdownStyled
           key={uuidv4()}
           onChange={option => onChange(option)}
-          options={options}
+          options={[]}
           placeholder="Select option"
           select
           value="Select option"

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

@@ -118,6 +118,7 @@ export default ({ node, view, getPos }) => {
     pmViews: { main },
   } = context;
   const [options, setOptions] = useState(node.attrs.options);
+  const [optionText, setOptionText] = useState('');
   const [addingOption, setAddingOption] = useState(false);
   const addOptionRef = useRef(null);
 
@@ -129,31 +130,44 @@ export default ({ node, view, getPos }) => {
 
   const readOnly = !isEditable;
 
-  const addOption = () => {
-    if (addOptionRef.current.value.trim() === '') return;
-    const obj = { label: addOptionRef.current.value, key: uuidv4() };
-    setOptions(prevOptions => [...prevOptions, obj]);
-    setAddingOption(true);
-    setTimeout(() => {
-      setAddingOption(false);
-    });
-  };
-
   useEffect(() => {
     const allNodes = getNodes(main);
     if (!addingOption) return;
     allNodes.forEach(singleNode => {
       if (singleNode.node.attrs.id === node.attrs.id) {
         main.dispatch(
-          main.state.tr.setNodeMarkup(getPos(), undefined, {
-            ...singleNode.node.attrs,
-            options,
-          }),
+          main.state.tr
+            .setMeta('addToHistory', false)
+            .setNodeMarkup(getPos(), undefined, {
+              ...singleNode.node.attrs,
+              options,
+            }),
         );
       }
     });
   }, [options]);
 
+  const addOption = () => {
+    if (addOptionRef.current.value.trim() === '') return;
+    const obj = { label: addOptionRef.current.value, key: uuidv4() };
+    setOptions(prevOptions => [...prevOptions, obj]);
+    setAddingOption(true);
+    setTimeout(() => {
+      setAddingOption(false);
+    });
+    setOptionText('');
+  };
+
+  const updateOptionText = () => {
+    setOptionText(addOptionRef.current.value);
+  };
+
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.which === 13) {
+      addOption();
+    }
+  };
+
   const removeOption = key => {
     setOptions(options.filter(option => option.key !== key));
     setAddingOption(true);
@@ -195,9 +209,12 @@ export default ({ node, view, getPos }) => {
             </OptionArea>
             <AddOption>
               <input
+                onChange={updateOptionText}
+                onKeyPress={handleKeyDown}
                 placeholder="Type an option ..."
                 ref={addOptionRef}
                 type="text"
+                value={optionText}
               />
               <button onClick={addOption} type="button">
                 Add Option

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

@@ -106,7 +106,7 @@ export default ({ node, view, getPos }) => {
       )}
       <EditorComponent getPos={getPos} node={node} view={view} />
       <DropDownContainer>
-        <DropDownComponent options={options} />
+        <DropDownComponent getPos={getPos} node={node} view={view} />
       </DropDownContainer>
     </Option>
   );