diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js index 3013a68783ac7d0c3e5af7deb7b356a4778abe4f..3b6b0c98e22f5564e0a71aa53831d9075059a669 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js @@ -14,6 +14,7 @@ import { v4 as uuidv4 } from 'uuid'; import Icon from '../../helpers/Icon'; const IconRemove = styled(Icon)` + cursor: pointer; height: 10px; width: 10px; `; @@ -60,7 +61,6 @@ const StyledButton = styled.button` `; const ListStyle = styled.div` - cursor: pointer; margin: 5px 7px 7px 0px; padding: 2px 3px; `; @@ -80,7 +80,6 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { const ref = useRef(null); const [inputValue, setInputValue] = useState(''); - const [selectedTagNames, setSelectedTagNames] = useState([]); const [isCustomTagInline, setCustomTag] = useState( JSON.parse(localStorage.getItem('isInline')), @@ -145,26 +144,32 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { }; const removeFromSelection = tagName => { - // if (finalTag.length === 0) { - // dispatch( - // state.tr.removeMark( - // $from.pos, - // $to.pos, - // state.schema.marks.customTagInline, - // ), - // ); - // } else { - // dispatch( - // state.tr.addMark( - // $from.pos, - // $to.pos, - // state.schema.marks.customTagInline.create({ - // tagNames: JSON.stringify(finalTag), - // class: classNames, - // }), - // ), - // ); - // } + const { tags } = mark.attrs; + if (tags.length === 1) { + dispatch( + state.tr.removeMark( + mark.from, + mark.to, + state.schema.marks.customTagInline, + ), + ); + } else { + const index = tags.indexOf(tagName); + if (index > -1) { + tags.splice(index, 1); + dispatch( + state.tr.addMark( + mark.from, + mark.to, + state.schema.marks.customTagInline.create({ + ...((mark && mark.attrs) || {}), + tags, + class: tags.toString(), + }), + ), + ); + } + } }; useEffect(() => { @@ -178,33 +183,38 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { return isCustomTagInline === true ? ( <Wrapper> <InlineHeader>Custom Inline</InlineHeader> - {inlineTags.map(item => ( - <ListStyle key={uuidv4()}> - <Flex> - <ItemWrapper onMouseDown={() => addToSelection(item.label)}> - {item.label} - </ItemWrapper> - {/* {console.log(mark)} */} - {/* {selectedTagNames.map(value => { - return ( - <Fragment key={uuidv4()}> - {value === item.label ? ( - <span - aria-hidden="true" - onClick={() => removeFromSelection(item.label)} - role="button" - > - <IconRemove name="removeTag" /> - </span> - ) : ( - '' - )} - </Fragment> - ); - })} */} - </Flex> - </ListStyle> - ))} + {inlineTags.map(item => { + return ( + <ListStyle key={uuidv4()}> + <Flex> + {mark && mark.attrs.tags.includes(item.label) ? ( + <ItemWrapper>{item.label}</ItemWrapper> + ) : ( + <ItemWrapper onMouseDown={() => addToSelection(item.label)}> + {item.label} + </ItemWrapper> + )} + + {mark && + mark.attrs.tags.map(value => { + return ( + <Fragment key={uuidv4()}> + {value === item.label ? ( + <span + aria-hidden="true" + onClick={() => removeFromSelection(item.label)} + role="button" + > + <IconRemove name="removeTag" /> + </span> + ) : null} + </Fragment> + ); + })} + </Flex> + </ListStyle> + ); + })} <CustomWrapper> <Input onChange={onChangeTagName}