diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js index 6817892542777b3758a8687da0cff1a1ca86dd9e..2f2dd9406bc4ffe09a77891a18feaf4de16487e7 100644 --- a/wax-prosemirror-components/src/components/Button.js +++ b/wax-prosemirror-components/src/components/Button.js @@ -1,6 +1,6 @@ /* eslint react/prop-types: 0 */ -import React, { useContext } from 'react'; +import React, { useContext, useMemo } from 'react'; import { WaxContext } from 'wax-prosemirror-core'; import MenuButton from '../ui/buttons/MenuButton'; @@ -26,16 +26,21 @@ const Button = ({ view = {}, item }) => { const isDisabled = enable && !enable(state) && !(select && select(state, activeViewId)); - return ( - <MenuButton - active={isActive || false} - disabled={isDisabled} - iconName={icon} - label={label} - onMouseDown={handleMouseDown} - title={title} - /> + const MenuButtonComponent = useMemo( + () => ( + <MenuButton + active={isActive || false} + disabled={isDisabled} + iconName={icon} + label={label} + onMouseDown={handleMouseDown} + title={title} + /> + ), + [], ); + + return MenuButtonComponent; }; export default Button; diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js index cae23c1c40fde6c45061267f150ca4e6cc0b2808..6ab71762b38941a1852d6d3461a88ad90a00c694 100644 --- a/wax-prosemirror-components/src/components/ToolGroupComponent.js +++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js @@ -1,5 +1,5 @@ /* eslint react/prop-types: 0 */ -import React from 'react'; +import React, { useMemo } from 'react'; import styled from 'styled-components'; import Dropdown from '../ui/buttons/Dropdown'; @@ -30,18 +30,22 @@ const ToolGroupComponent = ({ view, tools, name }) => { : toolsShown.push(tool.renderTool(view)); }); - return ( - <Wrapper data-name={name}> - {toolsShown} - {rest.length > 0 && ( - <Dropdown - iconName="more" - dropComponent={<DropWrapper>{rest}</DropWrapper>} - title="Show more tools" - /> - )} - </Wrapper> + const MemorizedToolGroupComponent = useMemo( + () => ( + <Wrapper data-name={name}> + {toolsShown} + {rest.length > 0 && ( + <Dropdown + iconName="more" + dropComponent={<DropWrapper>{rest}</DropWrapper>} + title="Show more tools" + /> + )} + </Wrapper> + ), + [], ); + return MemorizedToolGroupComponent; }; export default ToolGroupComponent; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js index 4615cdf3ab0f61f43cfedca04d370951303b9f8b..37a1472848a98d50253b14bc995653d8fd68c257 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js @@ -1,5 +1,5 @@ /* eslint react/prop-types: 0 */ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import MenuButton from '../../ui/buttons/MenuButton'; const TrackChangeEnable = ({ view = {}, item, enabled }) => { @@ -11,15 +11,20 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => { item.run(view.state, view.dispatch); }; - return ( - <MenuButton - active={isEnabled} - disabled={item.enable && !item.enable(view.state)} - label="Track Changes" - onMouseDown={e => handleMouseDown(e)} - title={item.title} - /> + const MenuButtonComponent = useMemo( + () => ( + <MenuButton + active={isEnabled} + disabled={item.enable && !item.enable(view.state)} + label="Track Changes" + onMouseDown={e => handleMouseDown(e)} + title={item.title} + /> + ), + [], ); + + return MenuButtonComponent; }; export default TrackChangeEnable; diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js index 6101c3d50fcd0b31e65db6cb7c77efaa63c497f0..173f8d1743de36720b4ad35992742db7d9b32580 100644 --- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js +++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js @@ -78,7 +78,7 @@ const MenuButton = props => { title, onMouseDown, } = props; - + console.log('here?'); return ( <Wrapper active={active} diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js index 5b1c4263191ffae80b5f61c50cd2ba9935c5d52b..0ad922f8c9cf261aed1c0b1ef3694a3d45c6afbc 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js +++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { injectable, inject } from 'inversify'; import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components'; import { isEmpty } from 'lodash'; @@ -50,7 +50,12 @@ class DisplayText extends ToolGroup { }; const tabList = [first, second]; - return <Tabs key={uuidv4()} tabList={tabList} />; + + const TabsComponent = useMemo( + () => <Tabs key={uuidv4()} tabList={tabList} />, + [], + ); + return TabsComponent; } }