add special characters files

wax-prosemirror-components/index.js

@@ -16,3 +16,4 @@ export { default as Tabs } from './src/ui/tabs/Tabs';
 export { default as BlockLevelTools } from './src/ui/tabs/BlockLevelTools';
 export { default as FindAndReplaceTool } from './src/components/findAndReplace/FindAndReplaceTool';
 export { default as FullScreen } from './src/components/FullScreen';
+export { default as SpecialCharactersTool } from './src/components/specialCharacters/SpecialCharactersTool';

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js

@@ -20,15 +20,10 @@ const DropWrapper = styled.div`
 `;
 
 const FindAndReplaceTool = ({ view = {}, item }) => {
-  const { state } = view;
-  const { enable, icon, run, select, title } = item;
+  const { icon, title } = item;
   const dropElement = useRef();
   const [isOpen, setIsOpen] = useState(false);
 
-  // const isDisabled =
-  //   enable && !enable(state) && !(select && select(state, activeViewId));
-  //
-
   let styles = { right: '-205px' };
   const [style, setStyle] = useState(styles);
 

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

+/* eslint react/prop-types: 0 */
+import React, { useState } from 'react';
+
+const SpecialCharactersComponent = ({ close }) => {
+  return null;
+};
+
+export default SpecialCharactersComponent;

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

+import React, { useRef, useMemo, useState } from 'react';
+
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
+
+import MenuButton from '../../ui/buttons/MenuButton';
+import SpecialCharactersComponent from './SpecialCharactersComponent';
+
+const Wrapper = styled.div`
+  font-size: 0;
+  position: relative;
+  z-index: 2;
+`;
+
+const DropWrapper = styled.div`
+  margin-top: ${grid(1)};
+  position: absolute;
+  background: white;
+  top: 32px;
+`;
+
+const SpecialCharactersTool = ({ view = {}, item }) => {
+  const { icon, title } = item;
+  const dropElement = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const MemorizedDropdown = useMemo(
+    () => (
+      <Wrapper>
+        <MenuButton
+          active={isOpen}
+          disabled={false}
+          iconName={icon}
+          onMouseDown={() => {
+            setIsOpen(!isOpen);
+          }}
+          title={title}
+        />
+
+        {isOpen && (
+          <DropWrapper ref={dropElement}>
+            <SpecialCharactersComponent
+              close={() => {
+                setIsOpen(false);
+              }}
+            />
+          </DropWrapper>
+        )}
+      </Wrapper>
+    ),
+    [isOpen],
+  );
+
+  return MemorizedDropdown;
+};
+
+export default SpecialCharactersTool;

wax-prosemirror-services/index.js

@@ -30,6 +30,8 @@ export { default as trackedTransaction } from './src/TrackChangeService/track-ch
 export { default as MathService } from './src/MathService/MathService';
 export { default as FindAndReplaceService } from './src/FindAndReplaceService/FindAndReplaceService';
 export { default as FullScreenService } from './src/FullScreenService/FullScreenService';
+export { default as SpecialCharactersService } from './src/SpecialCharactersService/SpecialCharactersService';
+
 /*
 ToolGroups
 */
@@ -47,3 +49,4 @@ export { default as DisplayTextToolGroupService } from './src/WaxToolGroups/Disp
 export { default as BlockDropDownToolGroupService } from './src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDownToolGroupService';
 export { default as TrackingAndEditingToolGroupService } from './src/WaxToolGroups/TrackingAndEditingToolGroupService/TrackingAndEditingToolGroupService';
 export { default as FullScreenToolGroupService } from './src/WaxToolGroups/FullScreenToolGroupService/FullScreenToolGroupService';
+export { default as SpecialCharactersToolGroupService } from './src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharactersToolGroupService';

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

+import Service from '../Service';
+import SpecialCharactersTool from './SpecialCharactersTool';
+
+class SpecialCharactersService extends Service {
+  name = 'SpecialCharactersService';
+
+  register() {
+    this.container.bind('SpecialCharactersTool').to(SpecialCharactersTool);
+  }
+}
+export default SpecialCharactersService;

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

+import React from 'react';
+import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import { injectable } from 'inversify';
+import { SpecialCharactersTool } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+export default
+@injectable()
+class SpecialCharacters extends Tools {
+  title = 'Find And Replace';
+  icon = 'findAndReplace';
+  name = 'find';
+
+  get run() {
+    return (state, dispatch) => {};
+  }
+
+  select = (state, activeViewId) => {};
+
+  get enable() {
+    return state => {
+      return true;
+    };
+  }
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+
+    return this._isDisplayed ? (
+      <SpecialCharactersTool key={uuidv4()} item={this.toJSON()} view={view} />
+    ) : null;
+  }
+}

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

+import { injectable, inject } from 'inversify';
+import ToolGroup from '../../lib/ToolGroup';
+
+@injectable()
+class SpecialCharacters extends ToolGroup {
+  tools = [];
+  constructor(@inject('SpecialCharactersTool') specialCharactersTool) {
+    super();
+    this.tools = [specialCharactersTool];
+  }
+}
+
+export default SpecialCharactersTool;

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

+/* eslint-disable */
+import Service from '../../Service';
+import SpecialCharacters from './SpecialCharacters';
+
+class SpecialCharactersToolGroupService extends Service {
+  register() {
+    this.container.bind('SpecialCharacters').to(SpecialCharacters);
+  }
+}
+
+export default SpecialCharactersToolGroupService;

wax-prosemirror-services/src/lib/Tools.js

+/* eslint-disable */
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { isEmpty } from 'lodash';