diff --git a/wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js b/wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js
index 04daf9c04a3564d0d0fa98ce8c901d6131344fb4..3469adf8307927e181c3becefa7b642ca38008d8 100644
--- a/wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js
+++ b/wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js
@@ -1,10 +1,6 @@
-import React, { useMemo, useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import styled from 'styled-components';
-import { grid } from '@pubsweet/ui-toolkit';
-import useOnClickOutside from '../../helpers/useOnClickOutside';
-
const Wrapper = styled.div`
width: 400px;
@@ -38,8 +34,11 @@ const Highlighter = styled.div`
}
`;
-const TextHighlightComponent = ({ view = { dispatch, state }, item, close }) => {
-
+const TextHighlightComponent = ({
+ view = { dispatch, state },
+ item,
+ close,
+}) => {
const highlightDropDownOptions = [
{ name: 'red', value: 'background-color:red' },
{ name: 'blue', value: 'background-color:blue' },
@@ -50,25 +49,25 @@ const TextHighlightComponent = ({ view = { dispatch, state }, item, close }) =>
const handleMouseDown = e => {
e.preventDefault();
- console.log("state@@@@ ", view.state, " ########dispatch ", view.dispatch);
item.run(view.state, view.dispatch);
};
const renderList = () => {
const lists = [];
- Object.keys(highlightDropDownOptions).forEach(function (key) {
+ Object.keys(highlightDropDownOptions).forEach(key => {
lists.push(
- <Highlighter onMouseDown={e => handleMouseDown(e)} key={uuidv4()}
- title={highlightDropDownOptions[key].name} iconName={item.icon}
- >
- </Highlighter>
+ <Highlighter
+ onMouseDown={e => handleMouseDown(e)}
+ key={uuidv4()}
+ title={highlightDropDownOptions[key].name}
+ iconName={item.icon}
+ />,
);
});
return <div>{lists}</div>;
};
-
return (
<Wrapper>
<HighlightListComponent>{renderList()}</HighlightListComponent>
@@ -77,5 +76,3 @@ const TextHighlightComponent = ({ view = { dispatch, state }, item, close }) =>
};
export default TextHighlightComponent;
-
-
diff --git a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
index 2e8d47f8d408aff2122f7effaa4787887676d192..7c2aa2c86d01512fd79f377da5b455a52dbd6ee4 100644
--- a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
+++ b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
@@ -2,41 +2,46 @@ import React, { useMemo, useState, useRef, useContext } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
+import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../../ui/buttons/MenuButton';
import useOnClickOutside from '../../helpers/useOnClickOutside';
-import { WaxContext } from 'wax-prosemirror-core';
const Wrapper = styled.div`
font-size: 0;
position: relative;
z-index: 2;
+
+ button:hover {
+ background: transparent;
+ }
`;
const DropWrapper = styled.div`
+ background: white;
margin-top: ${grid(1)};
position: absolute;
- background: white;
top: 32px;
width: max-content;
`;
const TextHighlightComponent = styled.div`
+ background: white;
+ border: 1px solid gray;
display: flex;
flex-direction: column;
- background:white
- border:1px solid gray
`;
const Highlighter = styled.div`
min-width: 25px;
height: 25px;
- margin:5px;
+ margin: 5px;
display: inline-grid;
cursor: pointer;
- border:1px solid gray
+ border: 1px solid gray;
`;
const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
const { icon, title, select } = item;
const [isOpen, setIsOpen] = useState(false);
+
const ref = useRef();
const {
view: { main },
@@ -45,11 +50,8 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
} = useContext(WaxContext);
useOnClickOutside(ref, () => setIsOpen(false));
- let clicks = [];
let lastSaveColor;
- let isApplied=false;
- let timeout;
-
+
const highlightDropDownOptions = [
{ name: 'red', value: 'color:red' },
{ name: 'blue', value: 'color:blue' },
@@ -66,63 +68,86 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
const renderList = () => {
const lists = [];
- Object.keys(highlightDropDownOptions).forEach(function (key) {
+ Object.keys(highlightDropDownOptions).forEach(key => {
lists.push(
- <Highlighter onMouseDown={e => handleMouseDown(e)} key={uuidv4()}
- title={highlightDropDownOptions[key].name} data-style={highlightDropDownOptions[key].value} style={{backgroundColor: highlightDropDownOptions[key].name}}
- >
- </Highlighter>
+ <Highlighter
+ onMouseDown={e => handleMouseDown(e)}
+ key={uuidv4()}
+ title={highlightDropDownOptions[key].name}
+ data-style={highlightDropDownOptions[key].value}
+ style={{ backgroundColor: highlightDropDownOptions[key].name }}
+ />,
);
});
return <div>{lists}</div>;
};
-
+
const handleMouseDown = e => {
e.preventDefault();
- item.run(activeView.state,activeView.dispatch,e.target.getAttribute('style'));
- lastSaveColor=e.target.getAttribute('style')
- localStorage.setItem('lastColor',lastSaveColor)
- let btnBackground=e.target.title;
- localStorage.setItem('lastBgColor',btnBackground)
- console.log(btnBackground);
+ item.run(
+ activeView.state,
+ activeView.dispatch,
+ e.target.getAttribute('style'),
+ );
+
+ lastSaveColor = e.target.getAttribute('style');
+ localStorage.setItem('lastColor', lastSaveColor);
+ const btnBackground = e.target.title;
+ localStorage.setItem('lastBgColor', btnBackground);
setIsOpen(false);
- }
- const handleDblClk=()=>{
- console.log()
- item.run(state, dispatch, localStorage.getItem('lastColor'));
- }
+ };
+ const handleDblClk = () => {
+ const color = localStorage.getItem('lastColor')
+ ? localStorage.getItem('lastColor')
+ : `background-color: ${highlightDropDownOptions[0].name};`;
+ item.run(state, dispatch, color);
+ };
const isDisabled = !select(state, activeViewId, activeView);
const MenuButtonComponent = useMemo(
() => (
<Wrapper ref={ref} onDoubleClick={handleDblClk}>
- <div style={{backgroundColor:localStorage.getItem('lastBgColor')!=undefined?localStorage.getItem('lastBgColor'):''}}>
- <MenuButton
- active={isOpen}
- disabled={isDisabled}
- iconName={icon}
- onMouseDown={() => {setIsOpen(!isOpen)}
-
- }
- title={title}
- />
+ <div
+ disabled={isDisabled}
+ style={{
+ backgroundColor:
+ localStorage.getItem('lastBgColor') != undefined
+ ? localStorage.getItem('lastBgColor')
+ : highlightDropDownOptions[0].name,
+ opacity: isDisabled ? '0.4' : '1',
+ }}
+ >
+ <MenuButton
+ active={isOpen}
+ disabled={isDisabled}
+ iconName={icon}
+ onMouseDown={() => {
+ setIsOpen(!isOpen);
+ }}
+ title={title}
+ />
</div>
{isOpen && (
<DropWrapper>
- <TextHighlightComponent key={uuidv4()} item={item} view={dispatch, state}
+ <TextHighlightComponent
+ key={uuidv4()}
+ item={item}
+ view={(dispatch, state)}
close={() => {
setIsOpen(false);
- }}>{renderList()}</TextHighlightComponent>
+ }}
+ >
+ {renderList()}
+ </TextHighlightComponent>
</DropWrapper>
)}
</Wrapper>
),
- [isOpen,isDisabled],
+ [isOpen, isDisabled],
);
return MenuButtonComponent;
};
export default TextHighlightingTool;
-
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index e60e82864422c4d43cedf2b223c8d207a7f6985d..c84f27417a6d60fdf0053f5a4ad25df3750df98e 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -220,15 +220,7 @@ export default {
className={className}
enable-background="new 0 0 24 24"
viewBox="0 0 24 24"
- >
- <g>
- <rect fill="none" height="24" width="24" />
- <circle cx="12" cy="3.5" fill="none" r=".75" />
- <circle cx="12" cy="3.5" fill="none" r=".75" />
- <circle cx="12" cy="3.5" fill="none" r=".75" />
- <path d="M19,3h-4.18C14.4,1.84,13.3,1,12,1S9.6,1.84,9.18,3H5C4.86,3,4.73,3.01,4.6,3.04C4.21,3.12,3.86,3.32,3.59,3.59 c-0.18,0.18-0.33,0.4-0.43,0.64C3.06,4.46,3,4.72,3,5v14c0,0.27,0.06,0.54,0.16,0.78c0.1,0.24,0.25,0.45,0.43,0.64 c0.27,0.27,0.62,0.47,1.01,0.55C4.73,20.99,4.86,21,5,21h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M11,14.17l-1.41,1.42L6,12 l3.59-3.59L11,9.83L8.83,12L11,14.17z M12,4.25c-0.41,0-0.75-0.34-0.75-0.75S11.59,2.75,12,2.75s0.75,0.34,0.75,0.75 S12.41,4.25,12,4.25z M14.41,15.59L13,14.17L15.17,12L13,9.83l1.41-1.42L18,12L14.41,15.59z" />
- </g>
- </Svg>
+ ></Svg>
),
title: ({ className }) => (
<Svg className={className} viewBox="0 0 24 24">