diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js index a95794e80c5b6ea1062317ed0319d257011fee88..a20cafc3609f06b3320ba089b8206d0f79b1bff7 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js @@ -35,10 +35,29 @@ const CustomTagList = styled.div` flex-direction: column; button { - margin-top: 5px; + border-radius: 4px; + left: -33px; + margin-left: 4px; + padding-left: 25px; + position: relative; } `; +const ListWrapper = styled.div` + display: flex; +`; + +const Box = styled.div` + background: #bfc4cd; + border-radius: 4px; + height: 22px; + position: relative; + right: 3px; + top: 3px; + width: 22px; + z-index: 999; +`; + const CustomTagBlockComponent = ({ isShowTag, item }) => { const ref = useRef(); const [inputValue, setInputValue] = useState(''); @@ -63,6 +82,13 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => { allTags, ); + const isEditable = main.props.editable(editable => { + return editable; + }); + + let isDisabled = !item.select(state, activeViewId, activeView); + if (!isEditable) isDisabled = true; + const onChangeTagName = () => { setInputValue(ref.current.value); }; @@ -87,14 +113,18 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => { blockTags.forEach(blockTag => { tagList.push( - <MenuButton - active={tagStatus[blockTag.label]} - disabled={false} - key={uuidv4()} - label={blockTag.label} - onMouseDown={() => onSelectTag(blockTag.label)} - title={blockTag.label} - />, + <ListWrapper> + <Box /> + <MenuButton + active={tagStatus[blockTag.label]} + disabled={isDisabled} + key={uuidv4()} + label={blockTag.label} + onMouseDown={() => onSelectTag(blockTag.label)} + title={blockTag.label} + /> + , + </ListWrapper>, ); }); return <CustomTagList>{tagList}</CustomTagList>; @@ -117,7 +147,7 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => { {renderTagList()} </> ), - [isShowTag, inputValue, tagStatus], + [isShowTag, inputValue, tagStatus, isDisabled], ); }; diff --git a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js index 8c0496003099050b4516dbaf37b77144afda3978..c53581338180e48704deb6093f4b77bace1cae38 100644 --- a/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js +++ b/wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockTool.js @@ -35,6 +35,11 @@ class CustomTagBlockTool extends Tools { return tagsActive; }; } + + select = (state, activeViewId) => { + if (activeViewId !== 'main') return false; + return true; + }; } export default CustomTagBlockTool;