diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js index 3784d96ede801a9145bfdc4d4d5c5ef103bd4c71..de11fc6f46a6ec5a2f9e5542043f261b8cb7bbd2 100644 --- a/editors/editoria/src/config/config.js +++ b/editors/editoria/src/config/config.js @@ -58,6 +58,10 @@ const updateTitle = title => { console.log(title); }; +const saveTags = tags => { + console.log(tags); +}; + export default { MenuService: [ { @@ -135,6 +139,7 @@ export default { { label: 'custom-tag-label-3', tagType: 'block' }, { label: 'label 2', tagType: 'block' }, ], + // updateTags: saveTags, }, services: [ diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js index 0b37b919dd496a61c000be79974b57e817fef7ce..0b40e4c05d5bb1cb45543ad273322a8da681fe9c 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js @@ -80,6 +80,12 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => { customTagsConfig && customTagsConfig.tags ? customTagsConfig.tags : initialArr; + + const saveTags = + customTagsConfig && customTagsConfig.tags + ? customTagsConfig.updateTags + : () => true; + const [allTags, setAllTags] = useState(configTags); const tagStatus = item.active( activeView.state, @@ -105,9 +111,9 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => { const onClickAdd = () => { if (inputValue.trim() === '') return; - configTags.push({ label: inputValue, tagType: 'block' }); setAllTags(configTags); + saveTags(configTags); setInputValue(''); if (ref.current) ref.current.focus(); }; diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js index 9ae7027deaf4753b2e9248ca5d7f36c26f9b5bd0..522afa887e5b23564358d7eb47947d0314abd445 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js @@ -1,12 +1,7 @@ -import React, { useMemo, useRef, useState } from 'react'; -import styled from 'styled-components'; -import MenuButton from '../../ui/buttons/MenuButton'; +import React, { useMemo, useState, useContext } from 'react'; +import { WaxContext } from 'wax-prosemirror-core'; -const Wrapper = styled.div` - font-size: 0; - position: relative; - z-index: 2; -`; +import MenuButton from '../../ui/buttons/MenuButton'; const CustomTagInlineComponent = ({ view: { state }, item }) => { const { icon, title } = item; @@ -14,7 +9,16 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => { const [isOpen, setIsOpen] = useState( !!(localInline !== null && localInline !== false), ); - const ref = useRef(); + + const { + view: { main }, + } = useContext(WaxContext); + + let isDisabled = false; + const isEditable = main.props.editable(editable => { + return editable; + }); + if (!isEditable) isDisabled = true; const onClickIcon = () => { setIsOpen(isOpen !== true); @@ -23,16 +27,13 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => { return useMemo( () => ( - <Wrapper ref={ref}> - <div onClick={onClickIcon}> - <MenuButton - active={isOpen} - disabled={false} - iconName={icon} - title={title} - /> - </div> - </Wrapper> + <MenuButton + active={isOpen} + disabled={isDisabled} + iconName={icon} + onMouseDown={onClickIcon} + title={title} + /> ), [isOpen], ); diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js index c69940f4f08ba6b1f4d94680d7b7b912a2b73937..135ba97f4677371629429ff6787b60a183bf01c7 100644 --- a/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js +++ b/wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js @@ -100,6 +100,10 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { customTagsConfig && customTagsConfig.tags ? customTagsConfig.tags : initialArr; + const saveTags = + customTagsConfig && customTagsConfig.tags + ? customTagsConfig.updateTags + : () => true; const [allTags, setAllTags] = useState(configTags); const onChangeTagName = () => { @@ -117,6 +121,7 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => { configTags.push({ label: inputValue, tagType: 'inline' }); setAllTags(configTags); + saveTags(configTags); setInputValue(''); if (ref.current) ref.current.focus(); setInputValue(''); diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js index aa85ed3e5cb926f13aef09cbc502e46b0f5add2f..7e5606dc0b04b90e9fca4193dc1fd524af306344 100644 --- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js +++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js @@ -21,7 +21,6 @@ const disabledStyles = css` const activeStyles = css` background: ${th('colorPrimary')}; color: ${th('colorTextReverse')}; - pointer-events: none; > svg { fill: ${th('colorTextReverse')}; diff --git a/wax-prosemirror-plugins/src/images/captionPlugin.js b/wax-prosemirror-plugins/src/images/captionPlugin.js index fb6345e6283a576bc2a5e7155c2110c3f106ef99..6ae3b7a1d41764b68fde03877d624c0a5a3589d8 100644 --- a/wax-prosemirror-plugins/src/images/captionPlugin.js +++ b/wax-prosemirror-plugins/src/images/captionPlugin.js @@ -7,9 +7,7 @@ const captionPlugin = key => init() { return DecorationSet.empty; }, - apply(tr, set) { - console.log('in apply'); - }, + apply(tr, set) {}, }, props: { decorations(state) {