diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js index 1d1488201ddc5a4753e6b050ca441d451b77c001..6203978ca814f55a64f55c3e2c5f5d7160c6266d 100644 --- a/wax-prosemirror-components/index.js +++ b/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'; diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js index 9bf82295036dc2b48daeaab28ab5e7c45c0890d6..4936b7cb54d0c3ffd5256fc5067c7e0498697ff9 100644 --- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js +++ b/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); diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js new file mode 100644 index 0000000000000000000000000000000000000000..461aa0d6b3891b03d651d3be78c98fd9f3fe522e --- /dev/null +++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js @@ -0,0 +1,8 @@ +/* eslint react/prop-types: 0 */ +import React, { useState } from 'react'; + +const SpecialCharactersComponent = ({ close }) => { + return null; +}; + +export default SpecialCharactersComponent; diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js new file mode 100644 index 0000000000000000000000000000000000000000..59a9b8236e41c6898ce59f1b0ff0f9a86ee78497 --- /dev/null +++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js @@ -0,0 +1,57 @@ +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; diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js index 39b830cc959421e6f1b9814b930165ae4e78bfea..c41319ad44b9adad9e301931944f7fba38c98ca9 100644 --- a/wax-prosemirror-services/index.js +++ b/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'; diff --git a/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharacters.js b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharacters.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..046d5f1eb0f7bb8c9b4e3a6c3d593a86ed262c44 100644 --- a/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js +++ b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js @@ -0,0 +1,11 @@ +import Service from '../Service'; +import SpecialCharactersTool from './SpecialCharactersTool'; + +class SpecialCharactersService extends Service { + name = 'SpecialCharactersService'; + + register() { + this.container.bind('SpecialCharactersTool').to(SpecialCharactersTool); + } +} +export default SpecialCharactersService; diff --git a/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersTool.js b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersTool.js new file mode 100644 index 0000000000000000000000000000000000000000..bfb93e026e30f36d3ab65eb02719cf9c5fda100e --- /dev/null +++ b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersTool.js @@ -0,0 +1,34 @@ +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; + } +} diff --git a/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharacters.js b/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharacters.js new file mode 100644 index 0000000000000000000000000000000000000000..e9e23413efcdcd870d0437b1db2b3796553a10fb --- /dev/null +++ b/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharacters.js @@ -0,0 +1,13 @@ +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; diff --git a/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharactersToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharactersToolGroupService.js new file mode 100644 index 0000000000000000000000000000000000000000..7ad79f9441eea0d5bfd575cae981bc8691fefdf6 --- /dev/null +++ b/wax-prosemirror-services/src/WaxToolGroups/SpecialCharactersToolGroupService/SpecialCharactersToolGroupService.js @@ -0,0 +1,11 @@ +/* eslint-disable */ +import Service from '../../Service'; +import SpecialCharacters from './SpecialCharacters'; + +class SpecialCharactersToolGroupService extends Service { + register() { + this.container.bind('SpecialCharacters').to(SpecialCharacters); + } +} + +export default SpecialCharactersToolGroupService; diff --git a/wax-prosemirror-services/src/lib/Tools.js b/wax-prosemirror-services/src/lib/Tools.js index 47412051b5e51a384caefa2c8fb33391a47927ac..573530f898baeb16638a8b135c077491feb3b050 100644 --- a/wax-prosemirror-services/src/lib/Tools.js +++ b/wax-prosemirror-services/src/lib/Tools.js @@ -1,3 +1,4 @@ +/* eslint-disable */ import React from 'react'; import { v4 as uuidv4 } from 'uuid'; import { isEmpty } from 'lodash';