Skip to content
Snippets Groups Projects
Commit 5c8af6ba authored by Christos's avatar Christos
Browse files

Merge branch 'fixes' into 'master' 

Fixes

See merge request !211
parents 12adae20 f116720b
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 @ 5c8af6ba
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
+ 66
− 41
View file @ 5c8af6ba
......@@ -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;
wax-prosemirror-components/src/icons/icons.js
+ 1
− 9
View file @ 5c8af6ba
......@@ -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