diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js index a09c91c564f2966522f849e2e274bc0c0800abff..e0903bed218cd4e6b432d7c5fe3d13652008babe 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js @@ -51,19 +51,19 @@ const StyledButton = styled.div``; -const CustomTagBlockComponent = (isIconClicked, item) => { +const CustomTagBlockComponent = props => { + const { isShowTag, item } = props; const ref = useRef(); const [inputValue, setInputValue] = useState(''); const [tagName, setTagName] = useState(''); const localTagList = JSON.parse(localStorage.getItem('tagBlockList')); - const { app, view: { main }, activeView } = useContext(WaxContext); + const { app, view: { main }, activeView, activeViewId } = useContext(WaxContext); const { state, dispatch } = main; const { selection: { $from, $to } } = state; const serviceConfig = app.config.get('config.CustomTagService'); const [serviceList, setServiceList] = useState([]); - const onChangeTagName = (e) => { setTagName(e.target.value) setInputValue(e.target.value) @@ -86,12 +86,7 @@ const CustomTagBlockComponent = (isIconClicked, item) => { const onSelectTag = (e, val) => { val = val.replace(/ /g, "-"); - - Commands.setBlockType(state.config.schema.nodes.customTagBlock, { - class: 'custom-tag-block ' + val - })(state, dispatch); - - + item.run(state, dispatch, val); } useDeepCompareEffect(() => { @@ -115,7 +110,7 @@ const CustomTagBlockComponent = (isIconClicked, item) => { return useMemo( () => ( <Wrapper> - {isIconClicked.isShowTag === true && <FlexDiv> + {isShowTag === true && <FlexDiv> <Input ref={ref} type="text" diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js b/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js index 0f0e47e6ef9da79b047d52331ac6d0061dbd802a..15477e4946f2942d9a13ec6754cdfa3f02e3991c 100644 --- a/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js +++ b/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js @@ -66,7 +66,6 @@ const BlockElementGroup = props => { setIconClicked(isIconClicked === true ? false : true); } - return ( <Wrapper> {groupName !== "Custom Block" && <> @@ -87,7 +86,7 @@ const BlockElementGroup = props => { </div> </FlexDiv> <ListWrapper> - <CustomTagBlockComponent isShowTag={isIconClicked} view={view} /> + <CustomTagBlockComponent isShowTag={isIconClicked} view={view} item={items[0]} /> </ListWrapper> </>} diff --git a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js index 8ae0044222930fb281e4b985afb05b87f5fddcb2..e413effa45a3b1fd48535c76389a0e6cdeb498bc 100644 --- a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js +++ b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js @@ -1,16 +1,23 @@ import React from 'react'; // eslint-disable-next-line import/no-named-as-default,import/no-named-as-default-member import Tools from '../../lib/Tools'; +import { Commands } from 'wax-prosemirror-utilities'; class CustomTagBlockTool extends Tools { title = 'Custom Tag Block'; name = 'CustomTagBlock'; + get run() { + return (state, dispatch, val) => { + Commands.setBlockType(state.config.schema.nodes.customTagBlock, { + class: 'custom-tag-block ' + val + })(state, dispatch); + }; + } + get active() { return state => { - return Commands.blockActive(state.config.schema.nodes.customTagBlock)( - state, - ); + return Commands.blockActive(state.config.schema.nodes.customTagBlock)(state); }; } }