special characters component structure and click outside close

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

 /* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { WaxContext } from 'wax-prosemirror-core';
+import { each, groupBy, map } from 'lodash';
 import Icon from '../../helpers/Icon';
+import CharactersList from './CharactersList';
 
 const Wrapper = styled.div`
   width: 400px;
+  height: 200px;
+  overflow: hidden;
   background: #fff;
   font-size: 14px;
-  border-radius: 1.03093% / 8%;
   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: ${grid(2)};
 `;
 
+const SearchInput = styled.input`
+  font-size: 15px;
+  font-weight: 400;
+  border-radius: 2px;
+  border: none;
+  padding: ${grid(1)} ${grid(10)} ${grid(1)} ${grid(1)};
+  width: 85%;
+  box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+  ::placeholder {
+    color: #d8dae0;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const CharactersListComponent = styled.div`
+  height: 150px;
+  overflow-y: sroll;
+`;
+
+const LastUsedComponent = styled.div``;
+
 const SpecialCharactersComponent = ({ close }) => {
-  return <Wrapper>Special Characters</Wrapper>;
+  const searchRef = useRef(null);
+  const [searchValue, setSearchValue] = useState('');
+  const GroupedCharacters = groupBy(CharactersList, 'group');
+  const onChange = () => {
+    setSearchValue(searchRef.current.value);
+    console.log(GroupedCharacters);
+  };
+
+  return (
+    <Wrapper>
+      <SearchInput
+        ref={searchRef}
+        type="text"
+        placeholder="Search"
+        value={searchValue}
+        onChange={onChange}
+      />
+      <CharactersListComponent>Characters List</CharactersListComponent>
+      <LastUsedComponent>Characters Last Used</LastUsedComponent>
+    </Wrapper>
+  );
 };
 
 export default SpecialCharactersComponent;

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

-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 import SpecialCharactersComponent from './SpecialCharactersComponent';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
 
 const Wrapper = styled.div`
   font-size: 0;
@@ -22,10 +23,13 @@ const DropWrapper = styled.div`
 const SpecialCharactersTool = ({ view = {}, item }) => {
   const { icon, title } = item;
   const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef();
+
+  useOnClickOutside(ref, () => setIsOpen(false));
 
   const MemorizedDropdown = useMemo(
     () => (
-      <Wrapper>
+      <Wrapper ref={ref}>
         <MenuButton
           active={isOpen}
           disabled={false}

wax-prosemirror-components/src/components/tables/CreateTable.js

@@ -31,7 +31,7 @@ const CreateTable = ({ view = {}, item }) => {
   }
 
   const { state } = view;
-  const { enable, icon, run, select, title } = item;
+  const { icon, run, select, title } = item;
   const ref = useRef();
   const [isOpen, setIsOpen] = useState(false);