new tool

wax-prosemirror-services/index.js

@@ -80,3 +80,4 @@ export { default as FillTheGapToolGroupService } from './src/WaxToolGroups/FillT
 export { default as MultipleChoiceDropDownToolGroupService } from './src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDownToolGroupService';
 export { default as EssayToolGroupService } from './src/WaxToolGroups/EssayToolGroupService/EssayToolGroupService';
 export { default as MatchingToolGroupService } from './src/WaxToolGroups/MatchingToolGroupService/MatchingToolGroupService';
+export { default as MultipleDropDownToolGroupService } from './src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDownToolGroupService';

wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/DropComponent.js → wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/DropDownComponent.js

@@ -38,7 +38,7 @@ const DropdownStyled = styled(Dropdown)`
   }
 `;
 
-const DropComponent = ({ title, view, tools }) => {
+const DropDownComponent = ({ title, view, tools }) => {
   const context = useContext(WaxContext);
   const {
     activeView,
@@ -112,4 +112,4 @@ const DropComponent = ({ title, view, tools }) => {
   return MultipleDropDown;
 };
 
-export default DropComponent;
+export default DropDownComponent;

wax-prosemirror-services/src/WaxToolGroups/MultipleChoiceDropDownToolGroupService/MultipleChoiceDropDown.js

@@ -3,7 +3,7 @@ import { injectable, inject } from 'inversify';
 import { isEmpty } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import ToolGroup from '../../lib/ToolGroup';
-import DropComponent from './DropComponent';
+import DropDownComponent from './DropDownComponent';
 
 @injectable()
 class MultipleChoiceDropDown extends ToolGroup {
@@ -28,7 +28,7 @@ class MultipleChoiceDropDown extends ToolGroup {
     if (isEmpty(view)) return null;
     return (
       // eslint-disable-next-line no-underscore-dangle
-      <DropComponent key="Multipe Drop Down" tools={this._tools} view={view} />
+      <DropDownComponent key={uuidv4()} tools={this._tools} view={view} />
     );
   }
 }

wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js

+import React from 'react';
+import { injectable, inject } from 'inversify';
+import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import ToolGroup from '../../lib/ToolGroup';
+import DropDownComponent from './DropDownComponent';
+
+@injectable()
+class MultipleDropDown extends ToolGroup {
+  tools = [];
+  constructor() {
+    super();
+    this.tools = [];
+  }
+
+  renderTools(view) {
+    if (isEmpty(view)) return null;
+    return (
+      // eslint-disable-next-line no-underscore-dangle
+      <DropDownComponent key={uuidv4()} tools={this._tools} view={view} />
+    );
+  }
+}
+
+export default MultipleDropDown;

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

+import Service from '../../Service';
+import MultipleDropDown from './MultipleDropDown';
+
+class MultipleDropDownToolGroupService extends Service {
+  register() {
+    this.container.bind('MultipleDropDown').to(MultipleDropDown);
+  }
+}
+
+export default MultipleDropDownToolGroupService;