Commit d10bfe3e authored by Christos's avatar Christos
Browse files

Merge branch 'special-chareacters' into 'master'

Special chareacters

See merge request wax/wax-prosemirror!205
parents 386953e3 0162d4d2
/* eslint react/prop-types: 0 */
import React, { useRef, useState, useContext } from 'react';
import React, {
useRef,
useState,
useContext,
useCallback,
useEffect,
} from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { grid, th } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
import { WaxContext } from 'wax-prosemirror-core';
import { filter, groupBy } from 'lodash';
import Icon from '../../helpers/Icon';
import { filter, groupBy, debounce } from 'lodash';
import CharactersList from './CharactersList';
const Wrapper = styled.div`
width: 400px;
height: 220px;
height: 250px;
overflow: hidden;
background: #fff;
display: flex;
......@@ -19,9 +24,10 @@ const Wrapper = styled.div`
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
transform-origin: 50% 50% 0px;
padding-bottom: ${grid(2)};
`;
const SearchInputContainer = styled.div`
padding: ${grid(2)};
padding: ${grid(2)} ${grid(2)} ${grid(2)} ${grid(2)};
`;
const SearchInput = styled.input`
......@@ -41,7 +47,7 @@ const SearchInput = styled.input`
`;
const CharactersListComponent = styled.div`
height: 150px;
height: 200px;
display: flex;
flex-direction: column;
overflow-y: scroll;
......@@ -52,10 +58,12 @@ const CharactersListComponent = styled.div`
const SpecialCharactersGroup = styled.div`
display: flex;
flex-direction: column;
padding-top: ${grid(2)};
`;
const GroupTitle = styled.div`
font-size: 16px;
font-size: 17px;
color: ${th('colorPrimary')};
padding: 0 ${grid(2)} ${grid(2)} ${grid(2)};
`;
......@@ -70,29 +78,49 @@ const SpecialCharacter = styled.div`
min-width: 25px;
height: 25px;
display: inline-grid;
background: ${th('colorPrimary')}
cursor: pointer;
border: 1px solid black;
border: 1px solid ${th('colorPrimary')};
border-radius: 50%;
&:hover {
background: white;
}
span {
font-size: 16px;
text-align: center;
padding-top: 3px;
color: white;
&:hover {
color: ${th('colorPrimary')};
}
}
`;
const LastUsedComponent = styled.div``;
// const LastUsedComponent = styled.div`
// display: flex;
// flex-direction: row;
// height: 30px;
// `;
const SpecialCharactersComponent = ({ close }) => {
const searchRef = useRef(null);
const { app, view } = useContext(WaxContext);
const { activeView } = useContext(WaxContext);
const [searchValue, setSearchValue] = useState('');
const groupedCharacters = groupBy(CharactersList, 'group');
const [specialCharactersList, setSpecialCharactersList] = useState(
CharactersList,
);
const onChange = () => {
setSearchValue(searchRef.current.value);
};
const delayedSearch = useCallback(
debounce(() => searchCharacters(), 300),
[searchValue],
);
const searchCharacters = () => {
const filtertedSpecialCharacters = filter(CharactersList, value => {
console.log(value);
if (value.name.toLowerCase().includes(searchValue.toLowerCase()))
return value.name;
return false;
......@@ -100,7 +128,15 @@ const SpecialCharactersComponent = ({ close }) => {
setSpecialCharactersList(filtertedSpecialCharacters);
};
const insertCharacter = () => {};
useEffect(() => {
delayedSearch();
}, [searchValue, delayedSearch]);
const insertCharacter = character => {
const { state, dispatch } = activeView;
const { from, to } = state.selection;
dispatch(state.tr.insertText(character.unicode, from, to));
};
const renderList = () => {
const lists = [];
......@@ -110,13 +146,19 @@ const SpecialCharactersComponent = ({ close }) => {
<SpecialCharactersGroup key={key}>
<GroupTitle> {key} </GroupTitle>
<GroupCharacters>
{groupedCharacters[key].map((item, index) => {
return (
<SpecialCharacter key={uuidv4()} onMouseDown={insertCharacter}>
<span>{item.unicode}</span>
</SpecialCharacter>
);
})}
{groupBy(specialCharactersList, 'group')[key].map(
(character, index) => {
return (
<SpecialCharacter
key={uuidv4()}
onMouseDown={() => insertCharacter(character)}
title={character.name}
>
<span>{character.unicode}</span>
</SpecialCharacter>
);
},
)}
</GroupCharacters>
</SpecialCharactersGroup>,
);
......@@ -136,7 +178,6 @@ const SpecialCharactersComponent = ({ close }) => {
/>
</SearchInputContainer>
<CharactersListComponent>{renderList()}</CharactersListComponent>
<LastUsedComponent>Characters Last Used</LastUsedComponent>
</Wrapper>
);
};
......
/* eslint react/prop-types: 0 */
import React, { useEffect, useState } from 'react';
import debounce from 'lodash/debounce';
import { DOMSerializer, DOMParser } from 'prosemirror-model';
import { DefaultSchema } from 'wax-prosemirror-utilities';
import WaxProvider from './WaxContext';
import Application from './Application';
import WaxView from './WaxView';
import defaultPlugins from './plugins/defaultPlugins';
import Placeholder from './plugins/placeholder';
......@@ -137,7 +135,7 @@ const Wax = props => {
};
Wax.defaultProps = {
config: { services: [] },
config: { SchemaService: DefaultSchema, services: [] },
};
export default Wax;
Markdown is supported
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