Skip to content
Snippets Groups Projects
Commit 9b31ea9d authored by chris's avatar chris
Browse files

highlighter fixes

parent 12adae20
No related branches found
No related tags found
1 merge request!211Fixes
Hide whitespace changes
Inline Side-by-side
wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js
+ 13
− 16
View file @ 9b31ea9d
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;
wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
+ 57
− 38
View file @ 9b31ea9d
......@@ -2,14 +2,17 @@ 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`
......@@ -28,15 +31,16 @@ const TextHighlightComponent = styled.div`
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);
let dblClick = false;
const ref = useRef();
const {
view: { main },
......@@ -45,11 +49,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 +67,81 @@ 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 = () => {
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
style={{
backgroundColor:
localStorage.getItem('lastBgColor') != undefined
? localStorage.getItem('lastBgColor')
: highlightDropDownOptions[0].name,
}}
>
<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;
wax-prosemirror-components/src/icons/icons.js
+ 1
− 9
View file @ 9b31ea9d
......@@ -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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment