diff --git a/wax-prosemirror-core/src/config/defaultConfig.js b/wax-prosemirror-core/src/config/defaultConfig.js index 8b5f98f721ab61fd2f13294ee4d803b9a4c87463..457cb38f0798b7e1a552abe7a8861a7a0d0e2dd4 100644 --- a/wax-prosemirror-core/src/config/defaultConfig.js +++ b/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(), ], }); diff --git a/wax-prosemirror-core/src/config/plugins/defaultPlugins.js b/wax-prosemirror-core/src/config/plugins/defaultPlugins.js index eb62279208e5fb8de8a9a2f915ad7457d3b941c7..88158c86b7cace5cf58ed3c872a94fc0fecc2f18 100644 --- a/wax-prosemirror-core/src/config/plugins/defaultPlugins.js +++ b/wax-prosemirror-core/src/config/plugins/defaultPlugins.js @@ -1,6 +1,5 @@ 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()]; diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent1.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent1.js new file mode 100644 index 0000000000000000000000000000000000000000..cc2f3d4502687b273b88bae79f9df24326ce4bda --- /dev/null +++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent1.js @@ -0,0 +1,100 @@ +/* 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); +};