multiple drop down component

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

 import Service from '../../Service';
 import CreateDropDown from './CreateDropDown';
+import multipleDropDownOptionNode from '../schema/multipleDropDownOptionNode';
+import MultipleDropDownNodeView from './MultipleDropDownNodeView';
+import MultipleDropDownComponent from '../components/MultipleDropDownComponent';
 
 class CreateDropDownService extends Service {
   register() {
+    const createNode = this.container.get('CreateNode');
+    const addPortal = this.container.get('AddPortal');
+
     this.container.bind('CreateDropDown').to(CreateDropDown);
+
+    createNode({
+      multiple_drop_down_option: multipleDropDownOptionNode,
+    });
+
+    addPortal({
+      nodeView: MultipleDropDownNodeView,
+      component: MultipleDropDownComponent,
+      context: this.app,
+    });
   }
 }
 

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

+import QuestionsNodeView from '../../lib/helpers/QuestionsNodeView';
+
+export default class MultipleDropDownNodeView extends QuestionsNodeView {
+  constructor(
+    node,
+    view,
+    getPos,
+    decorations,
+    createPortal,
+    Component,
+    context,
+  ) {
+    super(node, view, getPos, decorations, createPortal, Component, context);
+
+    this.node = node;
+    this.outerView = view;
+    this.getPos = getPos;
+    this.context = context;
+  }
+
+  static name() {
+    return 'multiple_drop_down_option';
+  }
+
+  stopEvent(event) {
+    if (event.target.type === 'text') {
+      return true;
+    }
+    const innerView = this.context.pmViews[this.node.attrs.id];
+    return innerView && innerView.dom.contains(event.target);
+  }
+}

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

@@ -2,7 +2,6 @@ import Service from '../Service';
 import MultipleDropDownQuestion from './MultipleDropDownQuestion';
 import MultipleDropDownContainerNodeView from './MultipleDropDownContainerNodeView';
 import multipleDropDownContainerNode from './schema/multipleDropDownContainerNode';
-import multipleDropDownOptionNode from './schema/multipleDropDownOptionNode';
 import CreateDropDownService from './CreateDropDownService/CreateDropDownService';
 import MultipleDropDownContainerComponent from './components/MultipleDropDownContainerComponent';
 
@@ -20,10 +19,6 @@ class MultipleDropDownService extends Service {
       multiple_drop_down_container: multipleDropDownContainerNode,
     });
 
-    createNode({
-      multiple_drop_down_option: multipleDropDownOptionNode,
-    });
-
     addPortal({
       nodeView: MultipleDropDownContainerNodeView,
       component: MultipleDropDownContainerComponent,

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

+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+
+export default ({ node, view, getPos }) => {
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
+  const customProps = main.props.customValues;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  return <span>DropDown</span>;
+};