core plugins

wax-prosemirror-core/src/config/defaultConfig.js

@@ -5,6 +5,7 @@ import LayoutService from './defaultServices/LayoutService/LayoutService';
 import PortalService from './defaultServices/PortalService/PortalService';
 import MenuService from './defaultServices/MenuService/MenuService';
 import OverlayService from './defaultServices/OverlayService/OverlayService';
+import CorePluginsService from './defaultServices/CorePluginsService/CorePluginsService';
 
 export default () => ({
   services: [
@@ -15,5 +16,6 @@ export default () => ({
     new PortalService(),
     new MenuService(),
     new OverlayService(),
+    new CorePluginsService(),
   ],
 });

wax-prosemirror-core/src/config/plugins/defaultPlugins.js

 import { history } from 'prosemirror-history';
 import { dropCursor } from 'prosemirror-dropcursor';
 import { gapCursor } from 'prosemirror-gapcursor';
-import FakeCursorPlugin from './FakeCursorPlugin';
 
-export default [dropCursor(), gapCursor(), history(), FakeCursorPlugin()];
+export default [dropCursor(), gapCursor(), history()];

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

+/* eslint-disable no-underscore-dangle */
+import React, { useContext, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import {
+  WaxContext,
+  DocumentHelpers,
+  ReactDropDownStyles,
+} from 'wax-prosemirror-core';
+import Dropdown from 'react-dropdown';
+import { v4 as uuidv4 } from 'uuid';
+
+const Wrapper = styled.div`
+  ${ReactDropDownStyles};
+`;
+const DropdownStyled = styled(Dropdown)`
+  cursor: not-allowed;
+  display: inline-flex;
+  margin-left: auto;
+  opacity: ${props => (props.select ? 1 : 0.4)};
+  pointer-events: ${props => (props.select ? 'default' : 'none')};
+
+  .Dropdown-control {
+    border: none;
+    padding: 8px 30px 8px 10px;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  .Dropdown-arrow {
+    top: 17px;
+  }
+
+  .Dropdown-menu {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    width: 102%;
+
+    .Dropdown-option {
+      width: 100%;
+    }
+  }
+`;
+
+const DropComponent = ({ getPos, node, view }) => {
+  const [selectedOption, setSelectedOption] = useState(node.attrs.correct);
+
+  const context = useContext(WaxContext);
+  const {
+    pmViews: { main },
+  } = context;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const onChange = option => {
+    const allNodes = getNodes(main);
+    allNodes.forEach(singleNode => {
+      if (singleNode.node.attrs.id === node.attrs.id) {
+        main.dispatch(
+          main.state.tr
+            .setMeta('addToHistory', false)
+            .setNodeMarkup(singleNode.pos, undefined, {
+              ...singleNode.node.attrs,
+              correct: option.value,
+            }),
+        );
+      }
+    });
+  };
+
+  const MultipleDropDown = useMemo(
+    () => (
+      <Wrapper key={uuidv4()}>
+        <DropdownStyled
+          key={uuidv4()}
+          onChange={option => onChange(option)}
+          options={node.attrs.options}
+          placeholder="Select option"
+          select={isEditable}
+          value={
+            selectedOption === 'undefined' ? 'Select Option' : selectedOption
+          }
+        />
+      </Wrapper>
+    ),
+    [node.attrs.options, selectedOption],
+  );
+
+  return MultipleDropDown;
+};
+
+export default DropComponent;
+
+const getNodes = view => {
+  return DocumentHelpers.findInlineNodes(view.state.doc);
+};