select Node

wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js

 import { injectable } from 'inversify';
 import { Fragment } from 'prosemirror-model';
+import { NodeSelection } from 'prosemirror-state';
 import { v4 as uuidv4 } from 'uuid';
 import Tools from '../../lib/Tools';
 
@@ -12,11 +13,21 @@ class CreateDropDown extends Tools {
   get run() {
     return (state, dispatch) => {
       const content = Fragment.empty;
+      const { tr } = state;
       const createGap = state.config.schema.nodes.multiple_drop_down_option.create(
         { id: uuidv4() },
         content,
       );
-      dispatch(state.tr.replaceSelectionWith(createGap));
+      tr.replaceSelectionWith(createGap);
+      tr.insertText(' ');
+      const resolvedPos = tr.doc.resolve(
+        tr.selection.anchor -
+          1 -
+          (tr.selection.$anchor.nodeBefore.nodeSize + 1),
+      );
+
+      tr.setSelection(new NodeSelection(resolvedPos));
+      dispatch(tr);
     };
   }
 

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

 /* eslint-disable react/prop-types */
-import React, { useContext, useState, useRef, useLayoutEffect } from 'react';
+import React, {
+  useContext,
+  useState,
+  useRef,
+  useLayoutEffect,
+  useMemo,
+  useEffect,
+} from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { v4 as uuidv4 } from 'uuid';
 import styled from 'styled-components';
@@ -74,23 +81,31 @@ export default ({ setPosition, position }) => {
     return editable;
   });
 
+  const currentOptions = activeView.state.selection.node
+    ? activeView.state.selection.node.attrs.options
+    : [];
+
   const readOnly = !isEditable;
 
-  const [options, setOptions] = useState();
+  const [options, setOptions] = useState(currentOptions);
 
   const [optionText, setOptionText] = useState('');
   const addOptionRef = useRef(null);
 
   useLayoutEffect(() => {
     const { selection } = activeView.state;
-    const { to } = selection;
+    const { from } = selection;
     const WaxSurface = activeView.dom.getBoundingClientRect();
-    const end = activeView.coordsAtPos(to);
-    const left = end.left - WaxSurface.left - 100;
-    const top = end.top - WaxSurface.top + 25;
+    const start = activeView.coordsAtPos(from);
+    const left = start.left - WaxSurface.left - 75;
+    const top = start.top - WaxSurface.top + 25;
     setPosition({ ...position, left, top });
   }, [position.left]);
 
+  useEffect(() => {
+    if (addOptionRef.current) addOptionRef.current.focus();
+  }, []);
+
   const updateOptionText = () => {
     setOptionText(addOptionRef.current.value);
   };
@@ -102,6 +117,7 @@ export default ({ setPosition, position }) => {
   };
 
   const addOption = () => {
+    console.log('text', addOptionRef.current.value);
     if (addOptionRef.current.value.trim() === '') return;
     const obj = { label: addOptionRef.current.value, value: uuidv4() };
     setOptions(prevOptions => [...prevOptions, obj]);
@@ -109,6 +125,8 @@ export default ({ setPosition, position }) => {
     addOptionRef.current.focus();
   };
 
+  console.log(options);
+
   return (
     <>
       <TriangleTop />
@@ -123,7 +141,7 @@ export default ({ setPosition, position }) => {
             type="text"
             value={optionText}
           />
-          <button onClick={addOption} type="button">
+          <button onMouseUp={addOption} type="button">
             Add
           </button>
         </AddOption>

wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js

@@ -8,6 +8,7 @@ const StyledIconAction = styled(Icon)`
   height: 24px;
   width: 24px;
   outline: 1px solid black;
+  cursor: pointer;
 `;
 
 export default ({ node, view, getPos }) => {

wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js

@@ -2,9 +2,7 @@ const multipleDropDownOptionNode = {
   attrs: {
     class: { default: 'multiple-drop-down-option' },
     id: { default: '' },
-    // isfirst: { default: false },
-    // answer: { default: {} },
-    // options: { default: [] },
+    options: { default: [] },
   },
   group: 'inline questions',
   content: 'text*',
@@ -18,8 +16,7 @@ const multipleDropDownOptionNode = {
         return {
           id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
-          // isfirst: JSON.parse(dom.getAttribute('isfirst').toLowerCase()),
-          // answer: JSON.parse(dom.getAttribute('answer').toLowerCase()),
+          options: JSON.parse(dom.getAttribute('options')),
         };
       },
     },
@@ -30,8 +27,7 @@ const multipleDropDownOptionNode = {
       {
         id: node.attrs.id,
         class: node.attrs.class,
-        // isfirst: node.attrs.isfirst,
-        // answer: JSON.stringify(node.attrs.answer),
+        options: JSON.stringify(node.attrs.options),
       },
       0,
     ];