icon and wrapper

editors/editoria/src/config/config.js

@@ -30,6 +30,8 @@ import {
   TrackingAndEditingToolGroupService,
   FullScreenService,
   FullScreenToolGroupService,
+  SpecialCharactersService,
+  SpecialCharactersToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -55,6 +57,7 @@ export default {
         'Notes',
         'Lists',
         'Images',
+        'SpecialCharacters',
         'CodeBlock',
         'Tables',
         'TrackingAndEditing',
@@ -129,5 +132,7 @@ export default {
     new TrackingAndEditingToolGroupService(),
     new FullScreenService(),
     new FullScreenToolGroupService(),
+    new SpecialCharactersService(),
+    new SpecialCharactersToolGroupService(),
   ],
 };

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

 /* eslint react/prop-types: 0 */
-import React, { useState } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
+import Icon from '../../helpers/Icon';
+
+const Wrapper = styled.div`
+  width: 400px;
+  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 SpecialCharactersComponent = ({ close }) => {
-  return null;
+  return <Wrapper>Special Characters</Wrapper>;
 };
 
 export default SpecialCharactersComponent;

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

-import React, { useRef, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
@@ -21,7 +21,6 @@ const DropWrapper = styled.div`
 
 const SpecialCharactersTool = ({ view = {}, item }) => {
   const { icon, title } = item;
-  const dropElement = useRef();
   const [isOpen, setIsOpen] = useState(false);
 
   const MemorizedDropdown = useMemo(
@@ -38,7 +37,7 @@ const SpecialCharactersTool = ({ view = {}, item }) => {
         />
 
         {isOpen && (
-          <DropWrapper ref={dropElement}>
+          <DropWrapper>
             <SpecialCharactersComponent
               close={() => {
                 setIsOpen(false);

wax-prosemirror-components/src/icons/icons.js

@@ -260,4 +260,18 @@ export default {
       <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
     </Svg>
   ),
+  specialCharacters: ({ className }) => (
+    <Svg className={className} viewBox="0 0 24 24" fill="none">
+      <g>
+        <rect fill="none" height="24" width="24" x="0" />
+      </g>
+      <g>
+        <g>
+          <g>
+            <path d="M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14 c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14 C10,9.25,11.28,9.16,11.88,9.14z M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8 s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z" />
+          </g>
+        </g>
+      </g>
+    </Svg>
+  ),
 };

wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersTool.js

@@ -8,9 +8,9 @@ import Tools from '../lib/Tools';
 export default
 @injectable()
 class SpecialCharacters extends Tools {
-  title = 'Find And Replace';
-  icon = 'findAndReplace';
-  name = 'find';
+  title = 'Special Characters';
+  icon = 'specialCharacters';
+  name = 'specialCharacters';
 
   get run() {
     return (state, dispatch) => {};

wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharacters.js

@@ -10,4 +10,4 @@ class SpecialCharacters extends ToolGroup {
   }
 }
 
-export default SpecialCharactersTool;
+export default SpecialCharacters;