diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js index f34fca7bc4131967f0f6b1999c1c4c45c3449c82..b94c0a7e544cd9a2c0c8c322de878770755537f4 100644 --- a/wax-prosemirror-components/src/components/ImageUpload.js +++ b/wax-prosemirror-components/src/components/ImageUpload.js @@ -1,5 +1,5 @@ /* eslint react/prop-types: 0 */ -import React, { useContext, useRef } from 'react'; +import React, { useContext, useRef, useMemo } from 'react'; import { WaxContext } from 'wax-prosemirror-core'; import styled from 'styled-components'; @@ -17,25 +17,30 @@ const ImageUpload = ({ item, fileUpload, view }) => { const inputRef = useRef(null); const handleMouseDown = () => inputRef.current.click(); - return ( - <Wrapper> - <label htmlFor="file-upload"> - <MenuButton - active={false} - disabled={!(item.select && item.select(view.state, activeViewId))} - iconName={item.icon} - onMouseDown={handleMouseDown} - title="Upload Image" - /> + const ImageUploadComponent = useMemo( + () => ( + <Wrapper> + <label htmlFor="file-upload"> + <MenuButton + active={false} + disabled={!(item.select && item.select(view.state, activeViewId))} + iconName={item.icon} + onMouseDown={handleMouseDown} + title="Upload Image" + /> - <input - id="file-upload" - ref={inputRef} - onChange={e => fileUpload(e.target.files[0])} - type="file" - /> - </label> - </Wrapper> + <input + id="file-upload" + ref={inputRef} + onChange={e => fileUpload(e.target.files[0])} + type="file" + /> + </label> + </Wrapper> + ), + [], ); + + return ImageUploadComponent; }; export default ImageUpload; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js index 37a1472848a98d50253b14bc995653d8fd68c257..8ee8b7c181a5523a88a79b7bdd8dc3eadfa57266 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js @@ -11,7 +11,7 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => { item.run(view.state, view.dispatch); }; - const MenuButtonComponent = useMemo( + const TrackChangeEnableComponent = useMemo( () => ( <MenuButton active={isEnabled} @@ -21,10 +21,10 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => { title={item.title} /> ), - [], + [isEnabled], ); - return MenuButtonComponent; + return TrackChangeEnableComponent; }; export default TrackChangeEnable;