Merge branch 'special-chareacters' into 'master'

Special chareacters

See merge request !205

wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js

 /* 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>
   );
 };

wax-prosemirror-core/src/Wax.js

 /* 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;