diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js index 2d969bca5d54279b8948efcf01a4a19bb255e40f..486741f24f53077821af4600d6cf8bf6d6c0a671 100644 --- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js @@ -68,6 +68,8 @@ const StyledIcon = styled(Icon)` const DropComponent = ({ getPos, node, view, uniqueId }) => { const [selectedOption, setSelectedOption] = useState(node.attrs.correct); + const [allOptions, setAllOptions] = useState(node.attrs.options); + const itemRefs = useRef([]); const wrapperRef = useRef(); const [isOpen, setIsOpen] = useState(false); @@ -81,8 +83,9 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { const isEditable = main.props.editable(editable => { return editable; }); + let isDisabled = !isEditable; - if (node.attrs.options.length === 0) isDisabled = true; + if (allOptions.length === 0) isDisabled = true; const onChange = option => { const allNodes = getNodes(main); @@ -104,6 +107,12 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { useOnClickOutside(wrapperRef, () => setIsOpen(false)); + useEffect(() => { + const theNode = getMatchingNode(main, node); + setAllOptions(theNode.attrs.options); + setSelectedOption(theNode.attrs.correct); + }, [getMatchingNode(main, node).attrs.options]); + useEffect(() => { if (isDisabled) setIsOpen(false); }, [isDisabled]); @@ -153,7 +162,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { const MultipleDropDown = useMemo(() => { let selectedValue; if (selectedOption) { - selectedValue = node.attrs.options.filter(option => { + selectedValue = allOptions.filter(option => { return option.value === selectedOption; }); } @@ -182,7 +191,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { > {selectedOption === null || !selectedOption ? 'Select Option' - : selectedValue[0].label} + : selectedValue[0]?.label} <StyledIcon name="expand" /> </DropDownButton> <DropDownMenu @@ -191,7 +200,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { isOpen={isOpen} role="listbox" > - {node.attrs.options.map((option, index) => { + {allOptions.map((option, index) => { itemRefs.current[index] = itemRefs.current[index] || createRef(); return ( <span @@ -210,7 +219,7 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { </DropDownMenu> </Wrapper> ); - }, [node.attrs.options, selectedOption, isOpen, isDisabled]); + }, [allOptions, selectedOption, isOpen, isDisabled]); return MultipleDropDown; }; @@ -218,5 +227,26 @@ const DropComponent = ({ getPos, node, view, uniqueId }) => { export default DropComponent; const getNodes = view => { - return DocumentHelpers.findInlineNodes(view.state.doc); + const allNodes = DocumentHelpers.findInlineNodes(view.state.doc); + const matchingOptionNodes = []; + allNodes.forEach(node => { + if (node.node.type.name === 'matching_option') { + matchingOptionNodes.push(node); + } + }); + return matchingOptionNodes; +}; + +const getMatchingNode = (view, node) => { + const allNodes = DocumentHelpers.findInlineNodes(view.state.doc); + let matchingNode = ''; + allNodes.forEach(singleNode => { + if ( + singleNode.node.type.name === 'matching_option' && + singleNode.node.attrs.id === node.attrs.id + ) { + matchingNode = singleNode.node; + } + }); + return matchingNode; }; diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js index 6b4175ccfa79124686abd3e186f0695819a8013f..990f4de65b0993ec630c51ef8f2292291424e1ae 100644 --- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js @@ -220,18 +220,35 @@ export default ({ node, view, getPos }) => { setTimeout(() => { setAddingOption(false); }); + const allNodes = getNodes(context.pmViews.main); + // const allNodesOptions = getOptionsNodes(context.pmViews.main); + // console.log(allNodesOptions); + allNodes.forEach(singleNode => { if (singleNode.node.attrs.id === node.attrs.id) { singleNode.node.content.content.forEach(parentNodes => { parentNodes.forEach(optionNode => { if (optionNode.type.name === 'matching_option') { + // setTimeout(() => { + // context.pmViews.main.dispatch( + // context.pmViews.main.state.tr + // .setMeta('addToHistory', false) + // .setNodeMarkup(allNodesOptions[0].pos, undefined, { + // ...allNodesOptions[0].node.attrs, + // options: options.filter(option => option.value !== value), + // correct: '', + // }), + // ); + // console.log(allNodesOptions); + // }); + /* eslint-disable-next-line no-param-reassign */ optionNode.attrs.options = options.filter( option => option.value !== value, ); if (optionNode.attrs.correct === value) { - optionNode.attrs.correct = ''; + optionNode.attrs.correct = null; } } }); @@ -393,3 +410,14 @@ const getNodes = view => { }); return matchingContainerNodes; }; + +const getOptionsNodes = view => { + const allNodes = DocumentHelpers.findInlineNodes(view.state.doc); + const matchingOptionNodes = []; + allNodes.forEach(node => { + if (node.node.type.name === 'matching_option') { + matchingOptionNodes.push(node); + } + }); + return matchingOptionNodes; +};