Newer
Older
Deleephan K S
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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 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;
`;
const DropWrapper = styled.div`
margin-top: ${grid(1)};
position: absolute;
background: white;
top: 32px;
width: max-content;
`;
const TextHighlightComponent = styled.div`
display: flex;
flex-direction: column;
background:white
border:1px solid gray
`;
const Highlighter = styled.div`
min-width: 25px;
height: 25px;
margin:5px;
display: inline-grid;
cursor: pointer;
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 },
activeViewId,
activeView,
} = 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' },
{ name: 'yellow', value: 'color:yellow' },
{ name: 'black', value: 'color:black' },
{ name: 'green', value: 'color:green' },
{ name: 'gray', value: 'color:gray' },
{ name: 'orange', value: 'color:orange' },
{ name: 'brown', value: 'color:brown' },
{ name: 'aquamarine', value: 'color:aquamarine' },
{ name: 'transparent', value: 'color:transparent' },
];
const renderList = () => {
const lists = [];
Object.keys(highlightDropDownOptions).forEach(function (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>
);
});
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);
setIsOpen(false);
}
const handleDblClk=()=>{
console.log()
item.run(state, dispatch, localStorage.getItem('lastColor'));
}
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>
{isOpen && (
<DropWrapper>
<TextHighlightComponent key={uuidv4()} item={item} view={dispatch, state}
close={() => {
setIsOpen(false);
}}>{renderList()}</TextHighlightComponent>
</DropWrapper>
)}
</Wrapper>
),
[isOpen,isDisabled],
);
return MenuButtonComponent;
};
export default TextHighlightingTool;