diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js index 977ed5cc4dbf7c694157ede01a713d4b2f5b983e..fa52e35509b57dc1e5f1d06514566f8cc480bbe7 100644 --- a/editors/demo/src/Editors.js +++ b/editors/demo/src/Editors.js @@ -54,7 +54,7 @@ const Editors = () => { case 'ncbi': break; default: - return <HHMI />; + return <Editoria />; } }; diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js index 48d71f905e8342ea3a6db0beaa10c43e35934a7b..cce0f8b1c7b4e682de960f4ef5974e038195d6cb 100644 --- a/wax-prosemirror-components/src/components/ToolGroupComponent.js +++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js @@ -5,8 +5,8 @@ import styled from 'styled-components'; import Dropdown from '../ui/buttons/Dropdown'; const Wrapper = styled.div` - display: inline-flex; align-items: center; + display: inline-flex; padding: 0 4px; > button, diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js index 37436a96a67d662a0f9a5938db7a7dd1b7813101..d5f2f5b3649af1210f1b944aa96ba2fed4e1177b 100644 --- a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js +++ b/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js @@ -1,12 +1,6 @@ /* eslint react/prop-types: 0 */ -import React, { - useState, - useRef, - useContext, - useCallback, - useEffect, -} from 'react'; -import { each, eachRight, debounce } from 'lodash'; +import React, { useState, useRef, useContext, useEffect } from 'react'; +import { each, eachRight } from 'lodash'; import { WaxContext } from 'wax-prosemirror-core'; import { DocumentHelpers } from 'wax-prosemirror-utilities'; import styled from 'styled-components'; diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js index d385794bb303136d0779f147a83b80ca18e24ee2..b1717efc3b3e8de77ba3463ff64573f50fb00bba 100644 --- a/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js +++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangesBox.js @@ -3,9 +3,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import DateParser from '../../helpers/DateParser'; -import icons from '../../icons/icons'; - -const { check, times } = icons; +import Icon from '../../helpers/Icon'; const activeBorder = css` border-color: #bfc4cd; @@ -63,9 +61,18 @@ const ActionWrapper = styled.div` margin-bottom: 5px; `; +const StyledIcon = styled(Icon)` + bottom: 2px; + cursor: pointer; + height: 16px; + position: relative; + right: 2px; + width: 16px; +`; + const Text = styled.span``; -const Icon = styled.div` +const Icons = styled.div` border-radius: 3px; display: inline-block; height: 20px; @@ -80,17 +87,16 @@ const Icon = styled.div` const IconButton = props => { // eslint-disable-next-line react/prop-types - const { icon, onClick } = props; - + const { name, onClick } = props; const handleClick = e => { e.stopPropagation(); onClick(); }; return ( - <Icon onClick={handleClick} type="button"> - {icon} - </Icon> + <Icons onClick={handleClick} type="button"> + <StyledIcon name={name.toString()} /> + </Icons> ); }; @@ -170,8 +176,8 @@ const TrackChangesBox = props => { </Info> {active && ( <Tools> - <IconButton icon={check} onClick={onClickAccept} /> - <IconButton icon={times} onClick={onClickReject} /> + <IconButton name="checkTrack" onClick={onClickAccept} /> + <IconButton name="reject" onClick={onClickReject} /> </Tools> )} </HeadWrapper> diff --git a/wax-prosemirror-components/src/helpers/Icon.js b/wax-prosemirror-components/src/helpers/Icon.js index 0fedb3d648f9ccb844fad823492564841313ad4a..5fe228cab875d10e095f0f715efdc212f492939d 100644 --- a/wax-prosemirror-components/src/helpers/Icon.js +++ b/wax-prosemirror-components/src/helpers/Icon.js @@ -9,7 +9,6 @@ import icons from '../icons/icons'; const SVGIcon = props => { const { className, name } = props; - const Component = icons[name]; return <Component className={className} />; }; diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js index 2df0c38b4992ce860ff3fade8ca090731ffbbffa..73859b955688228813c71e8cc5d56120389008bd 100644 --- a/wax-prosemirror-components/src/icons/icons.js +++ b/wax-prosemirror-components/src/icons/icons.js @@ -261,6 +261,13 @@ export default { <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" /> </Svg> ), + reject: ({ className }) => ( + <Svg className={className} fill="none" viewBox="0 0 24 24"> + <title> Reject </title> + <path d="M0 0h24v24H0V0z" fill="none" /> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" /> + </Svg> + ), removeTag: ({ className }) => ( <Svg className={className} fill="none" viewBox="0 0 24 24"> <title> remove tag </title>