diff --git a/stories/buttons/Dropdown.stories.js b/stories/buttons/Dropdown.stories.js index d1ff8a2fde9b959692742f405b631641715cfce8..e1ff79a0e369a01325c288f6f8041f53167c8876 100644 --- a/stories/buttons/Dropdown.stories.js +++ b/stories/buttons/Dropdown.stories.js @@ -20,13 +20,13 @@ const DropElement = styled.div` export const Base = () => ( <Wrapper> - <Dropdown iconName="boldSvg" dropComponent={<DropElement />} /> + <Dropdown iconName="bold" dropComponent={<DropElement />} /> </Wrapper> ); // export const RightSide = () => ( // <RightWrapper> -// <Dropdown iconName="boldSvg" /> +// <Dropdown iconName="bold" /> // </RightWrapper> // ); diff --git a/stories/buttons/MenuButton.stories.js b/stories/buttons/MenuButton.stories.js index eee2799c1f9bba5c9f63d93c86525bb4096d32b8..618a50794e9f50a19391ded7e131f5715cfc3ead 100644 --- a/stories/buttons/MenuButton.stories.js +++ b/stories/buttons/MenuButton.stories.js @@ -15,17 +15,17 @@ export const Base = () => { <Demo onClickButton={reset}> <MenuButton active={active} - iconName="boldSvg" - onClick={() => setActive(!active)} + iconName="bold" + onMouseDown={() => setActive(!active)} title="bold" /> </Demo> ); }; -export const Inactive = () => <MenuButton iconName="boldSvg" />; -export const Active = () => <MenuButton active iconName="boldSvg" />; -export const Disabled = () => <MenuButton disabled iconName="boldSvg" />; +export const Inactive = () => <MenuButton iconName="bold" />; +export const Active = () => <MenuButton active iconName="bold" />; +export const Disabled = () => <MenuButton disabled iconName="bold" />; export const IconAndText = () => { const [active, setActive] = useState(false); @@ -38,9 +38,9 @@ export const IconAndText = () => { <Demo onClickButton={reset}> <MenuButton active={active} - iconName="boldSvg" + iconName="bold" label="Make it bold" - onClick={() => setActive(!active)} + onMouseDown={() => setActive(!active)} /> </Demo> ); @@ -58,7 +58,7 @@ export const TextOnly = () => { <MenuButton active={active} label="Make it bold" - onClick={() => setActive(!active)} + onMouseDown={() => setActive(!active)} /> </Demo> ); diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js index c4aa0b7a6a0e4f47998ef8e5f6ff852f5d67369c..532317292ec26228d89a1517c3137d0223610554 100644 --- a/wax-prosemirror-components/src/components/ImageUpload.js +++ b/wax-prosemirror-components/src/components/ImageUpload.js @@ -22,7 +22,7 @@ const ImageUpload = ({ item, fileUpload, view }) => { const { activeViewId } = useContext(WaxContext); const inputRef = useRef(null); - const handleClick = () => inputRef.current.click(); + const handleMouseDown = () => inputRef.current.click(); return ( <UploadImage select={item.select && item.select(view.state, activeViewId)}> @@ -31,7 +31,7 @@ const ImageUpload = ({ item, fileUpload, view }) => { active={false} disabled={false} iconName={item.icon} - onClick={handleClick} + onMouseDown={handleMouseDown} title="Upload Image" /> diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js index 5ef226a929e223c40531a913e5597db00deeee78..89e6a68864b185a8577f788d69c66445bf23665c 100644 --- a/wax-prosemirror-components/src/icons/icons.js +++ b/wax-prosemirror-components/src/icons/icons.js @@ -99,12 +99,6 @@ export default { <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" /> </Svg> ), - boldSvg: ({ className }) => ( - <Svg className={className} viewBox="0 0 24 24"> - <path d="M0 0h24v24H0z" fill="none" /> - <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" /> - </Svg> - ), bold: ({ className }) => ( <Svg className={className} viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" />