From 63aac7442f665d32f4edd1dcfb41b614a928e58b Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Tue, 22 Sep 2020 20:58:46 +0300
Subject: [PATCH] fix image mousedown event & remove duplicate svg
---
stories/buttons/Dropdown.stories.js | 4 ++--
stories/buttons/MenuButton.stories.js | 16 ++++++++--------
.../src/components/ImageUpload.js | 4 ++--
wax-prosemirror-components/src/icons/icons.js | 6 ------
4 files changed, 12 insertions(+), 18 deletions(-)
diff --git a/stories/buttons/Dropdown.stories.js b/stories/buttons/Dropdown.stories.js
index d1ff8a2fd..e1ff79a0e 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 eee2799c1..618a50794 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 c4aa0b7a6..532317292 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 5ef226a92..89e6a6886 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" />
--
GitLab