move create gap tool

editors/demo/src/HHMI/config/config.js

@@ -55,6 +55,10 @@ export default {
         'FullScreen',
       ],
     },
+    {
+      templateArea: 'fillTheGap',
+      toolGroups: ['FillTheGap'],
+    },
   ],
 
   SchemaService: DefaultSchema,

wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGap.js

@@ -27,19 +27,10 @@ class CreateGap extends Tools {
   }
 
   select = (state, activeViewId, activeView) => {
-    let status = false;
-    const { from, to } = state.selection;
-    const { disallowedTools } = activeView.props;
+    if (activeView.props.type && activeView.props.type === 'filltheGapContaier')
+      return true;
 
-    state.doc.nodesBetween(from, to, (node, pos) => {
-      if (node.type.name === 'fill_the_gap_container') {
-        status = true;
-      }
-    });
-
-    if (from === null || disallowedTools.includes('Gap')) status = false;
-
-    return status;
+    return false;
   };
 
   get active() {

wax-prosemirror-services/src/FillTheGapQuestionService/CreateGapService/CreateGapService.js

 import { Service } from 'wax-prosemirror-core';
 import CreateGap from './CreateGap';
+import FillTheGapToolGroupService from '../../WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService';
 
 class FillTheGapQuestionService extends Service {
   register() {
     this.container.bind('CreateGap').to(CreateGap);
   }
+
+  dependencies = [new FillTheGapToolGroupService()];
 }
 
 export default FillTheGapQuestionService;

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

@@ -87,6 +87,7 @@ const ContainerEditor = ({ node, view, getPos }) => {
           'FillTheGap',
           'MultipleChoice',
         ],
+        type: 'filltheGapContaier',
         handleDOMEvents: {
           mousedown: () => {
             main.dispatch(

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

 /* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import ContainerEditor from './ContainerEditor';
 import FeedbackComponent from './FeedbackComponent';
@@ -10,6 +10,10 @@ const FillTheGapContainer = styled.div`
   margin-bottom: 30px;
 `;
 
+const FillTheGapContainerTool = styled.div`
+  background: #f5f5f7;
+`;
+
 const FillTheGapWrapper = styled.div`
   margin: 0px 38px 15px 38px;
   margin-top: 10px;
@@ -21,6 +25,8 @@ export default ({ node, view, getPos }) => {
     pmViews: { main },
   } = context;
 
+  const FillTheGapTool = ComponentPlugin('fillTheGap');
+
   const customProps = main.props.customValues;
   const { testMode } = customProps;
 
@@ -32,7 +38,12 @@ export default ({ node, view, getPos }) => {
 
   return (
     <FillTheGapWrapper>
-      <span>Fill The Gap</span>
+      <div>
+        <span> Fill The Gap</span>
+        <FillTheGapContainerTool>
+          <FillTheGapTool />
+        </FillTheGapContainerTool>
+      </div>
       <FillTheGapContainer className="fill-the-gap">
         <ContainerEditor getPos={getPos} node={node} view={view} />
 

wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGap.js

+import { injectable, inject } from 'inversify';
+import { ToolGroup } from 'wax-prosemirror-core';
+
+@injectable()
+class FillTheGap extends ToolGroup {
+  tools = [];
+  constructor(@inject('CreateGap') CreateGap) {
+    super();
+    this.tools = [CreateGap];
+  }
+}
+
+export default FillTheGap;

wax-prosemirror-services/src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService.js

+import { Service } from 'wax-prosemirror-core';
+import FillTheGap from './FillTheGap';
+
+class FillTheGapToolGroupService extends Service {
+  register() {
+    this.container.bind('FillTheGap').to(FillTheGap);
+  }
+}
+
+export default FillTheGapToolGroupService;