create option editor

editors/demo/src/Editors.js

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

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

@@ -31,7 +31,7 @@ const EditorWrapper = styled.div`
   }
 `;
 
-const EditorComponent = ({ node, view, getPos }) => {
+const ContainerEditor = ({ node, view, getPos }) => {
   const editorRef = useRef();
 
   const context = useContext(WaxContext);
@@ -148,4 +148,4 @@ const EditorComponent = ({ node, view, getPos }) => {
   );
 };
 
-export default EditorComponent;
+export default ContainerEditor;

wax-prosemirror-services/src/MatchingService/MatchingQuestion.js

 import { injectable } from 'inversify';
 import { wrapIn } from 'prosemirror-commands';
+import { Fragment } from 'prosemirror-model';
+import { findWrapping } from 'prosemirror-transform';
+import { TextSelection } from 'prosemirror-state';
 import { v4 as uuidv4 } from 'uuid';
 import Tools from '../lib/Tools';
 
@@ -11,9 +14,33 @@ class MatchingQuestion extends Tools {
 
   get run() {
     return (state, dispatch) => {
-      wrapIn(state.config.schema.nodes.matching_container, {
-        id: uuidv4(),
-      })(state, dispatch);
+      /* Create Wrapping */
+      const { $from, $to } = state.selection;
+      const range = $from.blockRange($to);
+      const { tr } = state;
+
+      const wrapping =
+        range &&
+        findWrapping(range, state.config.schema.nodes.matching_container, {
+          id: uuidv4(),
+        });
+      if (!wrapping) return false;
+      tr.wrap(range, wrapping);
+
+      const map = tr.mapping.maps[0];
+      let newPos = 0;
+      map.forEach((_from, _to, _newFrom, newTo) => {
+        newPos = newTo;
+      });
+
+      tr.setSelection(TextSelection.create(tr.doc, range.$to.pos));
+      const option = state.config.schema.nodes.matching_option.create(
+        { id: uuidv4() },
+        Fragment.empty,
+      );
+
+      tr.replaceSelectionWith(option);
+      dispatch(tr);
     };
   }
 

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

@@ -5,7 +5,7 @@ import matchingOptionNode from './schema/matchingOptionNode';
 import MatchingContainerNodeView from './MatchingContainerNodeView';
 import MatchingOptionNodeView from './MatchingOptionNodeView';
 import MatchingContainerComponent from './components/MatchingContainerComponent';
-import MatchingOptionComponent from './MatchingOptionComponent';
+import MatchingOptionComponent from './components/MatchingOptionComponent';
 
 class MatchingService extends Service {
   name = 'MatchingService';

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

@@ -4,6 +4,7 @@ import { WaxContext } from 'wax-prosemirror-core';
 import { Icon } from 'wax-prosemirror-components';
 import styled from 'styled-components';
 import FeedbackComponent from './FeedbackComponent';
+import ContainerEditor from './ContainerEditor';
 
 const MatchingContainer = styled.div`
   border: 3px solid #f5f5f7;
@@ -108,7 +109,7 @@ export default ({ node, view, getPos }) => {
           <LeftArea>
             <InputsContainer>
               <FirstOption>
-                {Input()}
+                <ContainerEditor getPos={getPos} node={node} view={view} />
                 {!readOnly && (
                   <ActionButton
                     onClick={() => addOption(node.attrs.id)}