diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index f583ecd122f76f6b7065c7dc14b0c0ce458e7147..d0077c0e271eed3d4c28b6e22da3d9d2fc906c9b 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -58,10 +58,9 @@ const Editoria = () => {
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
- // value={demo}
- value={'<title>hiii</title>'}
+ value={demo}
layout={layout}
- onChange={source => console.log(source)}
+ // onChange={source => console.log(source)}
user={user}
/>
</>
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 72381316256b8bf69bc55671fdc477d94ab95008..75fe9444c1e4f86f5eb2a15d2df48ecb05d6fed1 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -28,6 +28,10 @@ import {
MathService,
FindAndReplaceService,
TrackingAndEditingToolGroupService,
+ FullScreenService,
+ FullScreenToolGroupService,
+ SpecialCharactersService,
+ SpecialCharactersToolGroupService,
} from 'wax-prosemirror-services';
import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -43,7 +47,7 @@ import invisibles, {
export default {
MenuService: [
{
- templateArea: 'topBar',
+ templateArea: 'mainMenuToolBar',
toolGroups: [
'Base',
{
@@ -53,15 +57,34 @@ export default {
'Notes',
'Lists',
'Images',
+ 'SpecialCharacters',
'CodeBlock',
'Tables',
'TrackingAndEditing',
+ 'FullScreen',
],
},
{
templateArea: 'leftSideBar',
toolGroups: ['DisplayText'],
},
+ {
+ templateArea: 'commentTrackToolBar',
+ toolGroups: [
+ {
+ name: 'Annotations',
+ more: [
+ 'Superscript',
+ 'Subscript',
+ 'SmallCaps',
+ 'Emphasis',
+ 'Code',
+ 'Underline',
+ 'StrikeThrough',
+ ],
+ },
+ ],
+ },
],
SchemaService: DefaultSchema,
@@ -107,5 +130,9 @@ export default {
new MathService(),
new FindAndReplaceService(),
new TrackingAndEditingToolGroupService(),
+ new FullScreenService(),
+ new FullScreenToolGroupService(),
+ new SpecialCharactersService(),
+ new SpecialCharactersToolGroupService(),
],
};
diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js
index ee2566a3bf243e4d3714235f39f8122c3df9e3ef..3087de49cb1761594b5a79c0faa21e08f882453d 100644
--- a/editors/editoria/src/layout/EditorElements.js
+++ b/editors/editoria/src/layout/EditorElements.js
@@ -15,7 +15,6 @@ export default css`
background: white;
counter-reset: footnote;
line-height: 1.6;
- font-size: 14px;
${fontWriting}
p::selection,
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index 4668f50752ec28a48bdb240960e9e28ef49a27da..7222febf38c03cd64f8be80bf1f3c1b9f9e419fa 100644
--- a/editors/editoria/src/layout/EditoriaLayout.js
+++ b/editors/editoria/src/layout/EditoriaLayout.js
@@ -60,10 +60,16 @@ const TopMenu = styled.div`
${th('colorFurniture')};
}
- > div:last-child {
+
+ > div:nth-last-of-type(-n+2) {
margin-left: auto;
- margin-right: 10px;
}
+
+ > div:last-child {
+ margin-left: 0;
+ margin-right: ${grid(5)};
+ }
+
> div[data-name="Tables"]{
border-right: none;
}
@@ -116,6 +122,20 @@ const CommentsContainerNotes = styled.div`
height: 100%;
`;
+const CommentTrackTools = styled.div`
+ padding: ${grid(2)}0 0 0;
+ position: fixed;
+ display: flex;
+ margin-left: 5px;
+ z-index: 1;
+ height: 30px;
+ width: 29.4%;
+ background: #fff;
+ span {
+ margin-left: auto;
+ }
+`;
+
const NotesAreaContainer = styled.div`
background: #fff;
display: flex;
@@ -159,9 +179,10 @@ const getNotes = main => {
};
const LeftSideBar = ComponentPlugin('leftSideBar');
-const TopBar = ComponentPlugin('topBar');
+const MainMenuToolBar = ComponentPlugin('mainMenuToolBar');
const NotesArea = ComponentPlugin('notesArea');
const RightArea = ComponentPlugin('rightArea');
+const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
const WaxOverlays = ComponentPlugin('waxOverlays');
const EditoriaLayout = ({ editor }) => {
@@ -189,7 +210,7 @@ const EditoriaLayout = ({ editor }) => {
<ThemeProvider theme={cokoTheme}>
<Wrapper>
<TopMenu>
- <TopBar />
+ <MainMenuToolBar />
</TopMenu>
<Main>
@@ -209,6 +230,12 @@ const EditoriaLayout = ({ editor }) => {
<WaxSurfaceScroll>
<EditorContainer>{editor}</EditorContainer>
<CommentsContainer>
+ <CommentTrackTools>
+ <span>
+ 58 COMMENTS AND SUGGESTIONS
+ <CommentTrackToolBar />
+ </span>
+ </CommentTrackTools>
<RightArea area="main" />
</CommentsContainer>
</WaxSurfaceScroll>
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 7c670937663bc079f0d8f1eb51a1d7e7b3f4e4b0..6203978ca814f55a64f55c3e2c5f5d7160c6266d 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -15,3 +15,5 @@ export { default as CreateTable } from './src/components/tables/CreateTable';
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/package.json b/wax-prosemirror-components/package.json
index 951d89e0efa07663b8c31ba7c8a206fe23e433c4..d0a7a9cd84d0347c0a33519a0c154fcd0fc74e80 100644
--- a/wax-prosemirror-components/package.json
+++ b/wax-prosemirror-components/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror UI components",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 4edf40a850e80af769f651662087cfc29de8652a..1aebf6ba55a5be32b372999e8c0fd2a1742e8e35 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,11 +1,10 @@
/* eslint react/prop-types: 0 */
-
import React, { useContext, useMemo } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import MenuButton from '../ui/buttons/MenuButton';
const Button = ({ view = {}, item }) => {
- const { active, enable, icon, label, onlyOnMain, run, select, title } = item;
+ const { active, icon, label, onlyOnMain, run, select, title } = item;
const {
view: { main },
@@ -22,8 +21,9 @@ const Button = ({ view = {}, item }) => {
run(editorState, dispatch);
};
- const isActive = active(state, activeViewId) && select(state, activeViewId);
-
+ const isActive = !!(
+ active(state, activeViewId) && select(state, activeViewId)
+ );
const isDisabled = !select(state, activeViewId, activeView);
const MenuButtonComponent = useMemo(
diff --git a/wax-prosemirror-components/src/components/FullScreen.js b/wax-prosemirror-components/src/components/FullScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..94c1415914b323157858a0e26ecdfdfad471a6fa
--- /dev/null
+++ b/wax-prosemirror-components/src/components/FullScreen.js
@@ -0,0 +1,46 @@
+/* eslint react/prop-types: 0 */
+
+import React, { useContext, useMemo } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import MenuButton from '../ui/buttons/MenuButton';
+
+const Button = ({ view = {}, item }) => {
+ const { active, icon, label, onlyOnMain, run, select, title } = item;
+
+ const {
+ view: { main },
+ activeViewId,
+ activeView,
+ } = useContext(WaxContext);
+
+ if (onlyOnMain) view = main;
+
+ const { dispatch, state } = view;
+
+ const handleMouseDown = (e, editorState, editorDispatch) => {
+ e.preventDefault();
+ run(editorState, dispatch);
+ };
+
+ const isActive = active(state, activeViewId) && select(state, activeViewId);
+
+ const isDisabled = !select(state, activeViewId, activeView);
+
+ const MenuButtonComponent = useMemo(
+ () => (
+ <MenuButton
+ active={false}
+ disabled={false}
+ iconName={icon}
+ label={label}
+ onMouseDown={e => handleMouseDown(e, view.state, view.dispatch)}
+ title={title}
+ />
+ ),
+ [isActive, isDisabled],
+ );
+
+ return MenuButtonComponent;
+};
+
+export default Button;
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/link/LinkComponent.js b/wax-prosemirror-components/src/components/link/LinkComponent.js
index b22d7b8f72564a3a234567d87e021bf05bf10f69..4ac075f6d86b843874fc8bc55e41b85e7e6f928a 100644
--- a/wax-prosemirror-components/src/components/link/LinkComponent.js
+++ b/wax-prosemirror-components/src/components/link/LinkComponent.js
@@ -1,15 +1,20 @@
/* eslint react/prop-types: 0 */
import React, { useRef, useEffect, useState, useContext } from 'react';
import styled from 'styled-components';
+import { grid, th } from '@pubsweet/ui-toolkit';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
const Wrapper = styled.div`
- background: silver;
- display: inline-block;
- padding: 12px;
+ background: #fff;
+ background: #fff;
+ 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)} ${grid(1)} ${grid(2)} ${grid(2)};
a {
- color: unset;
+ color: #3a4863;
text-decoration: none;
}
`;
@@ -35,10 +40,18 @@ const ButtonGroup = styled.div`
const StyledButton = styled.button`
margin-right: 10px;
- background: #777;
+ background: ${th('colorPrimary')};
+ cursor: pointer;
color: #fff;
`;
+const StyledButtonCancel = styled.button`
+ margin-right: 10px;
+ background: #fff
+ cursor: pointer;
+ color:${th('colorPrimary')};;
+`;
+
const LinkComponent = ({ mark, setPosition, position }) => {
const href = mark ? mark.attrs.href : null;
const linkMark = mark ? mark : null;
@@ -202,9 +215,9 @@ const LinkComponent = ({ mark, setPosition, position }) => {
Apply
</StyledButton>
- <StyledButton onClick={editLinkHref} type="button">
+ <StyledButtonCancel onClick={editLinkHref} type="button">
Cancel
- </StyledButton>
+ </StyledButtonCancel>
</>
)}
@@ -214,9 +227,9 @@ const LinkComponent = ({ mark, setPosition, position }) => {
Edit
</StyledButton>
- <StyledButton onClick={removeLink} type="button">
+ <StyledButtonCancel onClick={removeLink} type="button">
Remove
- </StyledButton>
+ </StyledButtonCancel>
</>
)}
</ButtonGroup>
diff --git a/wax-prosemirror-components/src/components/specialCharacters/CharactersList.js b/wax-prosemirror-components/src/components/specialCharacters/CharactersList.js
new file mode 100644
index 0000000000000000000000000000000000000000..4beef78f7371d5a817a31171817c11df8f58b89b
--- /dev/null
+++ b/wax-prosemirror-components/src/components/specialCharacters/CharactersList.js
@@ -0,0 +1,315 @@
+export default
+[
+ { unicode: '\u00C0', name: 'Latin Capital Letter A with grave', group: 'Vowels' },
+ { unicode: '\u00E0', name: 'Latin Small Letter A with grave', group: 'Vowels' },
+ { unicode: '\u00C1', name: 'Latin Capital letter A with acute', group: 'Vowels' },
+ { unicode: '\u00E1', name: 'Latin Small Letter A with acute', group: 'Vowels' },
+ { unicode: '\u00C2', name: 'Latin Capital letter A with circumflex', group: 'Vowels' },
+ { unicode: '\u00E2', name: 'Latin Small Letter A with circumflex', group: 'Vowels' },
+ { unicode: '\u00C4', name: 'Latin Capital letter A with diaeresis', group: 'Vowels' },
+ { unicode: '\u00E4', name: 'Latin Small Letter A with diaeresis', group: 'Vowels' },
+ { unicode: '\u00C3', name: 'Latin Capital letter A with tilde', group: 'Vowels' },
+ { unicode: '\u00E3', name: 'Latin Small Letter A with tilde', group: 'Vowels' },
+ { unicode: '\u00C5', name: 'Latin Capital letter A with ring above', group: 'Vowels' },
+ { unicode: '\u00E5', name: 'Latin Small Letter A with ring above', group: 'Vowels' },
+ { unicode: '\u00C6', name: 'Latin Capital letter AE', group: 'Vowels' },
+ { unicode: '\u00E6', name: 'Latin Small Letter AE', group: 'Vowels' },
+ { unicode: '\u0100', name: 'Latin Capital Letter A with macron', group: 'Vowels' },
+ { unicode: '\u0101', name: 'Latin Small Letter A with macron', group: 'Vowels' },
+ { unicode: '\u01CD', name: 'Latin Capital Letter A with caron', group: 'Vowels' },
+ { unicode: '\u01CE', name: 'Latin Small Letter A with caron', group: 'Vowels' },
+ { unicode: '\u0104', name: 'Latin Capital Letter A with ogonek', group: 'Vowels' },
+ { unicode: '\u0105', name: 'Latin Small Letter A with ogonek', group: 'Vowels' },
+ // { unicode: '\u0102', name: 'Latin Capital Letter A with breve', group: 'Vowels' },
+ // { unicode: '\u0103', name: 'Latin Small Letter A with breve', group: 'Vowels' },
+
+ { unicode: '\u00C8', name: 'Latin Capital letter E with grave', group: 'Vowels' },
+ { unicode: '\u00E8', name: 'Latin Small Letter E with grave', group: 'Vowels' },
+ { unicode: '\u00C9', name: 'Latin Capital Letter E with acute', group: 'Vowels' },
+ { unicode: '\u00E9', name: 'Latin Small Letter E with acute', group: 'Vowels' },
+ { unicode: '\u00CA', name: 'Latin Capital letter E with circumflex', group: 'Vowels' },
+ { unicode: '\u00EA', name: 'Latin Small Letter E with circumflex', group: 'Vowels' },
+ { unicode: '\u00CB', name: 'Latin Capital Letter E with diaeresis', group: 'Vowels' },
+ { unicode: '\u00EB', name: 'Latin Small Letter E with diaeresis', group: 'Vowels' },
+ { unicode: '\u0112', name: 'Latin Capital Letter E with macron', group: 'Vowels' },
+ { unicode: '\u0113', name: 'Latin Small Letter E with macron', group: 'Vowels' },
+ { unicode: '\u011A', name: 'Latin Capital Letter E with caron', group: 'Vowels' },
+ { unicode: '\u011B', name: 'Latin Small Letter E with caron', group: 'Vowels' },
+ { unicode: '\u0118', name: 'Latin Capital Letter E with ogonek', group: 'Vowels' },
+ { unicode: '\u0119', name: 'Latin Small Letter E with ogonek', group: 'Vowels' },
+ // { unicode: '\u0114', name: 'Latin Capital Letter E with breve', group: 'Vowels' },
+ // { unicode: '\u0115', name: 'Latin Small Letter E with breve', group: 'Vowels' },
+ // { unicode: '\u0116', name: 'Latin Capital Letter E with dot above', group: 'Vowels' },
+ // { unicode: '\u0117', name: 'Latin Small Letter E with dot above', group: 'Vowels' },
+
+ { unicode: '\u00CC', name: 'Latin Capital letter I with grave', group: 'Vowels' },
+ { unicode: '\u00EC', name: 'Latin Small letter I with grave', group: 'Vowels' },
+ { unicode: '\u00CD', name: 'Latin Capital letter I with acute', group: 'Vowels' },
+ { unicode: '\u00ED', name: 'Latin Small letter I with acute', group: 'Vowels' },
+ { unicode: '\u00CE', name: 'Latin Capital Letter I with circumflex', group: 'Vowels' },
+ { unicode: '\u00EE', name: 'Latin Small Letter I with circumflex', group: 'Vowels' },
+ { unicode: '\u00CF', name: 'Latin Capital letter I with diaeresis', group: 'Vowels' },
+ { unicode: '\u00EF', name: 'Latin Small Letter I with diaeresis', group: 'Vowels' },
+ { unicode: '\u012A', name: 'Latin Capital Letter I with macron', group: 'Vowels' },
+ { unicode: '\u012B', name: 'Latin Small Letter I with macron', group: 'Vowels' },
+ { unicode: '\u01CF', name: 'Latin Capital Letter I with caron', group: 'Vowels' },
+ { unicode: '\u01D0', name: 'Latin Small Letter I with caron', group: 'Vowels' },
+ { unicode: '\u0130', name: 'Latin Capital Letter I with dot above', group: 'Vowels' },
+ { unicode: '\u0131', name: 'Latin Small Letter dotless I', group: 'Vowels' },
+
+ { unicode: '\u00D2', name: 'Latin Capital letter O with grave', group: 'Vowels' },
+ { unicode: '\u00F2', name: 'Latin Small Letter O with grave', group: 'Vowels' },
+ { unicode: '\u00D3', name: 'Latin Capital letter O with acute', group: 'Vowels' },
+ { unicode: '\u00F3', name: 'Latin Small Letter O with acute', group: 'Vowels' },
+ { unicode: '\u0150', name: 'Latin Capital Letter O with double acute', group: 'Vowels' },
+ { unicode: '\u0151', name: 'Latin Small Letter O with double acute', group: 'Vowels' },
+ { unicode: '\u00D8', name: 'Latin Capital letter O with stroke', group: 'Vowels' },
+ { unicode: '\u00F8', name: 'Latin Small Letter O with stroke', group: 'Vowels' },
+ { unicode: '\u00D4', name: 'Latin Capital letter O with circumflex', group: 'Vowels' },
+ { unicode: '\u00F4', name: 'Latin Small Letter O with circumflex', group: 'Vowels' },
+ { unicode: '\u00D6', name: 'Latin Capital letter O with diaeresis', group: 'Vowels' },
+ { unicode: '\u00F6', name: 'Latin Small Letter O with diaeresis', group: 'Vowels' },
+ { unicode: '\u00D5', name: 'Latin Capital letter O with tilde', group: 'Vowels' },
+ { unicode: '\u00F5', name: 'Latin Small Letter O with tilde', group: 'Vowels' },
+ { unicode: '\u014C', name: 'Latin Capital Letter O with macron', group: 'Vowels' },
+ { unicode: '\u014D', name: 'Latin Small Letter O with macron', group: 'Vowels' },
+ { unicode: '\u01D1', name: 'Latin Capital Letter O with caron', group: 'Vowels' },
+ { unicode: '\u01D2', name: 'Latin Small Letter O with caron', group: 'Vowels' },
+ { unicode: '\u01EA', name: 'Latin Capital Letter O with ogonek', group: 'Vowels' },
+ { unicode: '\u01EB', name: 'Latin Small Letter O with ogonek', group: 'Vowels' },
+
+ { unicode: '\u0152', name: 'Latin Capital Ligature OE', group: 'Vowels' },
+ { unicode: '\u0153', name: 'Latin Small Ligature OE', group: 'Vowels' },
+ { unicode: '\u00D9', name: 'Latin Capital Letter U with grave', group: 'Vowels' },
+ { unicode: '\u00F9', name: 'Latin Small Letter U with grave', group: 'Vowels' },
+ { unicode: '\u00DA', name: 'Latin Capital Letter U with acute', group: 'Vowels' },
+ { unicode: '\u00FA', name: 'Latin Small Letter U with acute', group: 'Vowels' },
+ { unicode: '\u0170', name: 'Latin Capital Letter U with double acute', group: 'Vowels' },
+ { unicode: '\u0171', name: 'Latin Small Letter U with double acute', group: 'Vowels' },
+ { unicode: '\u00DB', name: 'Latin Capital Letter U with circumflex', group: 'Vowels' },
+ { unicode: '\u00FB', name: 'Latin Small Letter U with circumflex', group: 'Vowels' },
+ { unicode: '\u00DC', name: 'Latin Capital Letter U with diaeresis', group: 'Vowels' },
+ { unicode: '\u00FC', name: 'Latin Small Letter U with diaeresis', group: 'Vowels' },
+ { unicode: '\u016E', name: 'Latin Capital Letter U with ring above', group: 'Vowels' },
+ { unicode: '\u016F', name: 'Latin Small Letter U with ring above', group: 'Vowels' },
+ { unicode: '\u016A', name: 'Latin Capital Letter U with macron', group: 'Vowels' },
+ { unicode: '\u016B', name: 'Latin Small Letter U with macron', group: 'Vowels' },
+ { unicode: '\u01D3', name: 'Latin Capital Letter U with caron', group: 'Vowels' },
+ { unicode: '\u01D4', name: 'Latin Small Letter U with caron', group: 'Vowels' },
+ { unicode: '\u0172', name: 'Latin Capital Letter U with ogonek', group: 'Vowels' },
+ { unicode: '\u0173', name: 'Latin Small Letter U with ogonek', group: 'Vowels' },
+
+ { unicode: '\u00DD', name: 'Latin Capital Letter Y with acute', group: 'Vowels' },
+ { unicode: '\u00FD', name: 'Latin Small Letter Y with acute', group: 'Vowels' },
+
+ { unicode: '\u0042\u0324', name: 'Latin Capital Letter B with diaeresis below', group: 'Consonants' },
+ { unicode: '\u0062\u0324', name: 'Latin Small Letter B with diaeresis below', group: 'Consonants' },
+ // { unicode: '\u0180', name: 'Latin Small Letter B with stroke', group: 'Consonants' },
+ // { unicode: '\u0181', name: 'Latin Capital Letter B with hook', group: 'Consonants' },
+ // { unicode: '\u0182', name: 'Latin Capital Letter B with top bar', group: 'Consonants' },
+ // { unicode: '\u0183', name: 'Latin Small Letter B with top bar', group: 'Consonants' },
+
+ { unicode: '\u00C7', name: 'Latin Capital Letter C with cedilla', group: 'Consonants' },
+ { unicode: '\u00E7', name: 'Latin Small Letter C with cedilla', group: 'Consonants' },
+ { unicode: '\u0106', name: 'Latin Capital Letter C with acute', group: 'Consonants' },
+ { unicode: '\u0107', name: 'Latin Small Letter C with acute', group: 'Consonants' },
+ { unicode: '\u0108', name: 'Latin Capital Letter C with circumflex', group: 'Consonants' },
+ { unicode: '\u0109', name: 'Latin Small Letter C with circumflex', group: 'Consonants' },
+ { unicode: '\u010C', name: 'Latin Capital Letter C with caron', group: 'Consonants' },
+ { unicode: '\u010D', name: 'Latin Small Letter C with caron', group: 'Consonants' },
+ // { unicode: '\u010A', name: 'Latin Capital Letter C with dot above', group: 'Consonants' },
+ // { unicode: '\u010B', name: 'Latin Small Letter C with dot above', group: 'Consonants' },
+ // { unicode: '\u0188', name: 'Latin Small Letter C with hook', group: 'Consonants' },
+ // { unicode: '\u0187', name: 'Latin Capital Letter C with hook', group: 'Consonants' },
+
+ { unicode: '\u010E', name: 'Latin Capital Letter D with caron', group: 'Consonants' },
+ { unicode: '\u010F', name: 'Latin Small Letter D with caron', group: 'Consonants' },
+ { unicode: '\u0110', name: 'Latin Capital Letter D with stroke', group: 'Consonants' },
+ { unicode: '\u0111', name: 'Latin Small Letter D with stroke', group: 'Consonants' },
+ // { unicode: '\u0189', name: 'Latin Capital Letter African D', group: 'Consonants' },
+ { unicode: '\u1E0C', name: 'Latin Capital Letter D with dot below', group: 'Consonants' },
+ { unicode: '\u1E0D', name: 'Latin Small Letter D with dot below', group: 'Consonants' },
+ { unicode: '\u0044\u0331', name: 'Latin Capital Letter D with macron below', group: 'Consonants' },
+ { unicode: '\u0064\u0331', name: 'Latin Small Letter D with macron below', group: 'Consonants' },
+ { unicode: '\u0044\u0324', name: 'Latin Capital Letter D with diaeresis below', group: 'Consonants' },
+ { unicode: '\u0064\u0324', name: 'Latin Small Letter D with diaeresis below', group: 'Consonants' },
+ // { unicode: '\u018A', name: 'Latin Capital Letter D with hook', group: 'Consonants' },
+ // { unicode: '\u018B', name: 'Latin Capital Letter D with top bar', group: 'Consonants' },
+ // { unicode: '\u018C', name: 'Latin Small Letter D with top bar', group: 'Consonants' },
+
+ { unicode: '\u01E6', name: 'Latin Capital Letter G with caron', group: 'Consonants' },
+ { unicode: '\u01E7', name: 'Latin Small Letter G with caron', group: 'Consonants' },
+ { unicode: '\u0120', name: 'Latin Capital Letter G with dot above', group: 'Consonants' },
+ { unicode: '\u0121', name: 'Latin Small Letter G with dot above', group: 'Consonants' },
+ { unicode: '\u1E20', name: 'Latin Capital Letter G with macron', group: 'Consonants' },
+ { unicode: '\u1E21', name: 'Latin Small Letter G with macron', group: 'Consonants' },
+ { unicode: '\u011E', name: 'Latin Capital Letter G with breve', group: 'Consonants' },
+ { unicode: '\u011F', name: 'Latin Small Letter G with breve', group: 'Consonants' },
+ // { unicode: '\u011C', name: 'Latin Capital Letter G with circumflex', group: 'Consonants' },
+ // { unicode: '\u011D', name: 'Latin Small Letter G with circumflex', group: 'Consonants' },
+
+ { unicode: '\u1E24', name: 'Latin Capital Letter H with dot below', group: 'Consonants' },
+ { unicode: '\u1E25', name: 'Latin Small Letter H with dot below', group: 'Consonants' },
+ { unicode: '\u0048\u032C', name: 'Latin Capital Letter H with caron below', group: 'Consonants' },
+ { unicode: '\u0068\u032C', name: 'Latin Small Letter H with caron below', group: 'Consonants' },
+
+ { unicode: '\u004A\u0301', name: 'Latin Capital Letter J with acute', group: 'Consonants' },
+ { unicode: '\u006A\u0301', name: 'Latin Small Letter J with acute', group: 'Consonants' },
+
+ { unicode: '\u1E32', name: 'Latin Capital Letter K with dot below', group: 'Consonants' },
+ { unicode: '\u1E33', name: 'Latin Small Letter K with dot below', group: 'Consonants' },
+
+ { unicode: '\u0141', name: 'Latin Capital Letter L with stroke', group: 'Consonants' },
+ { unicode: '\u0142', name: 'Latin Small Letter L with stroke', group: 'Consonants' },
+ { unicode: '\u1E36', name: 'Latin Capital Letter L with dot below', group: 'Consonants' },
+ { unicode: '\u1E37', name: 'Latin Small Letter L with dot below', group: 'Consonants' },
+ { unicode: '\u1E3A', name: 'Latin Capital Letter L with line below', group: 'Consonants' },
+ { unicode: '\u1E3B', name: 'Latin Small Letter L with line below', group: 'Consonants' },
+ { unicode: '\u004C\u0324', name: 'Latin Capital Letter L with two dots below', group: 'Consonants' },
+ { unicode: '\u006C\u0324', name: 'Latin Small Letter L with two dots below', group: 'Consonants' },
+
+ { unicode: '\u1E40', name: 'Latin Capital Letter M with dot above', group: 'Consonants' },
+ { unicode: '\u1E41', name: 'Latin Small Letter M with dot above', group: 'Consonants' },
+ { unicode: '\u1E42', name: 'Latin Capital Letter M with dot below', group: 'Consonants' },
+ { unicode: '\u1E43', name: 'Latin Small Letter M with dot below', group: 'Consonants' },
+ { unicode: '\u004D\u0310', name: 'Latin Capital Letter M with dot below', group: 'Consonants' },
+ { unicode: '\u006D\u0310', name: 'Latin Small Letter M with dot below', group: 'Consonants' },
+
+ { unicode: '\u00D1', name: 'Latin Capital Letter N with tilde', group: 'Consonants' },
+ { unicode: '\u00F1', name: 'Latin Small Letter N with tilde', group: 'Consonants' },
+ { unicode: '\u0143', name: 'Latin Capital Letter N with acute', group: 'Consonants' },
+ { unicode: '\u0144', name: 'Latin Small Letter N with acute', group: 'Consonants' },
+ { unicode: '\u0147', name: 'Latin Capital Letter N with caron', group: 'Consonants' },
+ { unicode: '\u0148', name: 'Latin Small Letter N with caron', group: 'Consonants' },
+ { unicode: '\u1E44', name: 'Latin Capital Letter N with dot above', group: 'Consonants' },
+ { unicode: '\u1E45', name: 'Latin Small Letter N with dot above', group: 'Consonants' },
+ { unicode: '\u1E46', name: 'Latin Capital Letter N with dot below', group: 'Consonants' },
+ { unicode: '\u1E47', name: 'Latin Small Letter N with dot below', group: 'Consonants' },
+ { unicode: '\u1E48', name: 'Latin Capital Letter N with line below', group: 'Consonants' },
+ { unicode: '\u1E49', name: 'Latin Small Letter N with line below', group: 'Consonants' },
+
+ { unicode: '\u0158', name: 'Latin Capital Letter R with caron', group: 'Consonants' },
+ { unicode: '\u0159', name: 'Latin Small Letter R with caron', group: 'Consonants' },
+ { unicode: '\u1E5E', name: 'Latin Capital Letter R with macron below', group: 'Consonants' },
+ { unicode: '\u1E5F', name: 'Latin Small Letter R with macron below', group: 'Consonants' },
+ { unicode: '\u0156', name: 'Latin Capital Letter R with cedilla', group: 'Consonants' },
+ { unicode: '\u0157', name: 'Latin Small Letter R with cedilla', group: 'Consonants' },
+ { unicode: '\u1E58', name: 'Latin Capital Letter R with dot above', group: 'Consonants' },
+ { unicode: '\u1E59', name: 'Latin Small Letter R with dot above', group: 'Consonants' },
+ { unicode: '\u1E5C', name: 'Latin Capital Letter R with dot below and macron', group: 'Consonants' },
+ { unicode: '\u1E5D', name: 'Latin Small Letter R with dot below and macron', group: 'Consonants' },
+
+ { unicode: '\u015A', name: 'Latin Capital Letter S with acute', group: 'Consonants' },
+ { unicode: '\u015B', name: 'Latin Small Letter S with acute', group: 'Consonants' },
+ { unicode: '\u015E', name: 'Latin Capital Letter S with cedilla', group: 'Consonants' },
+ { unicode: '\u015F', name: 'Latin Small Letter S with cedilla', group: 'Consonants' },
+ { unicode: '\u0160', name: 'Latin Capital Letter S with caron', group: 'Consonants' },
+ { unicode: '\u0161', name: 'Latin Small Letter S with caron', group: 'Consonants' },
+ { unicode: '\u0218', name: 'Latin Capital Letter S with comma below', group: 'Consonants' },
+ { unicode: '\u0219', name: 'Latin Small Letter S with comma below', group: 'Consonants' },
+ { unicode: '\u00DF', name: 'Latin Small Letter sharp S', group: 'Consonants' },
+
+ { unicode: '\u0162', name: 'Latin Capital Letter T with cedilla', group: 'Consonants' },
+ { unicode: '\u0163', name: 'Latin Small Letter T with cedilla', group: 'Consonants' },
+ { unicode: '\u0164', name: 'Latin Capital Letter T with caron', group: 'Consonants' },
+ { unicode: '\u0165', name: 'Latin Small Letter T with caron', group: 'Consonants' },
+ { unicode: '\u021A', name: 'Latin Capital Letter T with comma below', group: 'Consonants' },
+ { unicode: '\u021B', name: 'Latin Small Letter T with comma below', group: 'Consonants' },
+ { unicode: '\u1E6E', name: 'Latin Capital Letter T with bar below', group: 'Consonants' },
+ { unicode: '\u1E6F', name: 'Latin Small Letter T with bar below', group: 'Consonants' },
+ { unicode: '\u0054\u0324', name: 'Latin Capital Letter T with two dots below', group: 'Consonants' },
+ { unicode: '\u0074\u0324', name: 'Latin Small Letter T with two dots below', group: 'Consonants' },
+
+ { unicode: '\u0179', name: 'Latin Capital Letter Z with acute', group: 'Consonants' },
+ { unicode: '\u017A', name: 'Latin Small Letter Z with acute', group: 'Consonants' },
+ { unicode: '\u017B', name: 'Latin Capital Letter Z with dot above', group: 'Consonants' },
+ { unicode: '\u017C', name: 'Latin Small Letter Z with dot above', group: 'Consonants' },
+ { unicode: '\u017D', name: 'Latin Capital Letter Z with caron', group: 'Consonants' },
+ { unicode: '\u017E', name: 'Latin Small Letter Z with caron', group: 'Consonants' },
+ { unicode: '\u1E92', name: 'Latin Capital Letter Z with dot below', group: 'Consonants' },
+ { unicode: '\u1E93', name: 'Latin Small Letter Z with dot below', group: 'Consonants' },
+
+ { unicode: '\u00D0', name: 'Latin Capital letter Eth', group: 'Latin' },
+ { unicode: '\u00F0', name: 'Latin Small letter Eth', group: 'Latin' },
+ { unicode: '\u00DE', name: 'Latin Capital Letter Thorn', group: 'Latin' },
+ { unicode: '\u00FE', name: 'Latin Small Letter Thorn', group: 'Latin' },
+
+ { unicode: '\u002B', name: 'Plus sign', group: 'Math' },
+ { unicode: '\u2212', name: 'Minus sign', group: 'Math' },
+ { unicode: '\u00D7', name: 'Multiplication sign', group: 'Math' },
+ { unicode: '\u00F7', name: 'Division sign', group: 'Math' },
+ { unicode: '\u002F', name: 'Solidus', group: 'Math' },
+ { unicode: '\u003D', name: 'Equals sign', group: 'Math' },
+ { unicode: '\u00B1', name: 'Plus-minus sign', group: 'Math' },
+ { unicode: '\u003C', name: 'Less than sign', group: 'Math' },
+ { unicode: '\u003E', name: 'Greater than sign', group: 'Math' },
+ { unicode: '\u2264', name: 'Less than or equal to sign', group: 'Math' },
+ { unicode: '\u2265', name: 'Greater than or equal to sign', group: 'Math' },
+ { unicode: '\u00B0', name: 'Degree symbol', group: 'Math' },
+ { unicode: '\u00B4', name: 'Acute accent', group: 'Math' },
+ { unicode: '\u02DD', name: 'Double acute accent', group: 'Math' },
+ { unicode: '\u007C', name: 'Vertical line', group: 'Math' },
+ { unicode: '\u03C0', name: 'Greek Small Letter Pi ', group: 'Math' },
+ { unicode: '\u2211', name: 'N-ary summation', group: 'Math' },
+
+ { unicode: '\u2018', name: 'Left Single Quotation Mark', group: 'Misc' },
+ { unicode: '\u2019', name: 'Right Single Quotation Mark', group: 'Misc' },
+ { unicode: '\u2026', name: 'Horizontal ellipsis', group: 'Misc' },
+ { unicode: '\u2013', name: 'En dash', group: 'Misc' },
+ { unicode: '\u2014', name: 'Em dash', group: 'Misc' },
+ { unicode: '\u2E3B', name: 'Three-em dash', group: 'Misc' },
+ { unicode: '\u2009', name: 'Thin space', group: 'Misc' },
+ { unicode: '\u200A', name: 'Hair space', group: 'Misc' },
+ { unicode: '\u2002', name: 'En space', group: 'Misc' },
+ { unicode: '\u2003', name: 'Em Space', group: 'Misc' },
+ { unicode: '\u00A9', name: 'Copyright', group: 'Misc' },
+ { unicode: '\u2117', name: 'Sound recording copyright', group: 'Misc' },
+ { unicode: '\u2122', name: 'Registered Trademark', group: 'Misc' },
+ { unicode: '\u00AE', name: 'Registered sign', group: 'Misc' },
+ { unicode: '\u00A1', name: 'Inverted Exclamation Mark', group: 'Misc' },
+ { unicode: '\u00BF', name: 'Inverted Question Mark', group: 'Misc' },
+ { unicode: '\u00AB', name: 'Left-pointing double-angle quotation mark', group: 'Misc' },
+ { unicode: '\u00BB', name: 'Right-pointing double-angle quotation mark', group: 'Misc' },
+ { unicode: '\u00B7', name: 'Middle dot', group: 'Misc' },
+ { unicode: '\u00A7', name: 'Section symbol', group: 'Misc' },
+ { unicode: '\u00B6', name: 'Pilcrow sign', group: 'Misc' },
+ { unicode: '\u2020', name: 'Dagger', group: 'Misc' },
+ { unicode: '\u2640', name: 'Female sign', group: 'Misc' },
+ { unicode: '\u2642', name: 'Male sign', group: 'Misc' },
+ { unicode: '\u00A3', name: 'Pound sign', group: 'Misc' },
+ { unicode: '\u00A5', name: 'Yen sign', group: 'Misc' },
+ { unicode: '\u20AC', name: 'Euro sign', group: 'Misc' },
+ { unicode: '\u00A2', name: 'Cent sign', group: 'Misc' },
+ { unicode: '\u2669', name: 'Quarter note', group: 'Misc' },
+ { unicode: '\u266A', name: 'Eigth note', group: 'Misc' },
+ { unicode: '\u266D', name: 'Flat sign', group: 'Misc' },
+ { unicode: '\u266E', name: 'Natural sign', group: 'Misc' },
+ { unicode: '\u266F', name: 'Sharp sign', group: 'Misc' },
+
+ // { unicode: '\u00A4', name: 'Currency sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00A6', name: 'Broken bar', group: 'Latin-Supplement' },
+ // { unicode: '\u00A7', name: 'Section sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00A8', name: 'Diaeresis', group: 'Latin-Supplement' },
+ // { unicode: '\u00AA', name: 'Feminine Ordinal Indicator', group: 'Latin-Supplement' },
+ // { unicode: '\u00AB', name: 'Left-pointing double angle quotation mark', group: 'Latin-Supplement' },
+ // { unicode: '\u00AC', name: 'Not sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00AD', name: 'Soft hyphen', group: 'Latin-Supplement' },
+ // { unicode: '\u00AF', name: 'macron', group: 'Latin-Supplement' },
+ // { unicode: '\u00B2', name: 'Superscript two', group: 'Latin-Supplement' },
+ // { unicode: '\u00B3', name: 'Superscript three', group: 'Latin-Supplement' },
+ // { unicode: '\u00B4', name: 'Acute accent', group: 'Latin-Supplement' },
+ // { unicode: '\u00B5', name: 'Micro sign', group: 'Latin-Supplement' },
+ // { unicode: '\u00B8', name: 'Cedilla', group: 'Latin-Supplement' },
+ // { unicode: '\u00B9', name: 'Superscript one', group: 'Latin-Supplement' },
+ // { unicode: '\u00BA', name: 'Masculine ordinal indicator', group: 'Latin-Supplement' },
+ // { unicode: '\u00BC', name: 'Vulgar fraction one quarter', group: 'Latin-Supplement' },
+ // { unicode: '\u00BD', name: 'Vulgar fraction one half', group: 'Latin-Supplement' },
+ // { unicode: '\u00BE', name: 'Vulgar fraction three quarters', group: 'Latin-Supplement' },
+
+ // { unicode: '\u0184', name: 'Latin Capital Letter Tone Six', group: 'Latin-Extended-B' },
+ // { unicode: '\u0185', name: 'Latin Small Letter Tone Six', group: 'Latin-Extended-B' },
+ // { unicode: '\u0186', name: 'Latin Capital Letter Open O', group: 'Latin-Extended-B' },
+ // { unicode: '\u018D', name: 'Latin Small Letter Turned Delta', group: 'Latin-Extended-B' },
+ // { unicode: '\u018E', name: 'Latin Capital Letter Reversed E', group: 'Latin-Extended-B' },
+ // { unicode: '\u018F', name: 'Latin Capital Letter Schwa', group: 'Latin-Extended-B' }
+]
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..beaa9e642e100d1175bc9aca0e0f66b7d920d9cc
--- /dev/null
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
@@ -0,0 +1,144 @@
+/* eslint react/prop-types: 0 */
+import React, { useRef, useState, useContext } from 'react';
+import styled from 'styled-components';
+import { grid } 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 CharactersList from './CharactersList';
+
+const Wrapper = styled.div`
+ width: 400px;
+ height: 220px;
+ overflow: hidden;
+ background: #fff;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ 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;
+`;
+const SearchInputContainer = styled.div`
+ 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: 88%;
+ 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;
+ display: flex;
+ flex-direction: column;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ padding-top: ${grid(2)};
+`;
+
+const SpecialCharactersGroup = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const GroupTitle = styled.div`
+ font-size: 16px;
+ padding: 0 ${grid(2)} ${grid(2)} ${grid(2)};
+`;
+
+const GroupCharacters = styled.div`
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+`;
+
+const SpecialCharacter = styled.div`
+ margin: ${grid(1)};
+ min-width: 25px;
+ height: 25px;
+ display: inline-grid;
+ cursor: pointer;
+ border: 1px solid black;
+ border-radius: 50%;
+ span {
+ text-align: center;
+ padding-top: 3px;
+ }
+`;
+
+const LastUsedComponent = styled.div``;
+
+const SpecialCharactersComponent = ({ close }) => {
+ const searchRef = useRef(null);
+ const { app, view } = useContext(WaxContext);
+ const [searchValue, setSearchValue] = useState('');
+ const groupedCharacters = groupBy(CharactersList, 'group');
+ const [specialCharactersList, setSpecialCharactersList] = useState(
+ CharactersList,
+ );
+ const onChange = () => {
+ setSearchValue(searchRef.current.value);
+ const filtertedSpecialCharacters = filter(CharactersList, value => {
+ console.log(value);
+ if (value.name.toLowerCase().includes(searchValue.toLowerCase()))
+ return value.name;
+ return false;
+ });
+ setSpecialCharactersList(filtertedSpecialCharacters);
+ };
+
+ const insertCharacter = () => {};
+
+ const renderList = () => {
+ const lists = [];
+
+ Object.keys(groupBy(specialCharactersList, 'group')).forEach(key => {
+ lists.push(
+ <SpecialCharactersGroup key={key}>
+ <GroupTitle> {key} </GroupTitle>
+ <GroupCharacters>
+ {groupedCharacters[key].map((item, index) => {
+ return (
+ <SpecialCharacter key={uuidv4()} onMouseDown={insertCharacter}>
+ <span>{item.unicode}</span>
+ </SpecialCharacter>
+ );
+ })}
+ </GroupCharacters>
+ </SpecialCharactersGroup>,
+ );
+ });
+ return <div>{lists}</div>;
+ };
+
+ return (
+ <Wrapper>
+ <SearchInputContainer>
+ <SearchInput
+ ref={searchRef}
+ type="text"
+ placeholder="Search"
+ value={searchValue}
+ onChange={onChange}
+ />
+ </SearchInputContainer>
+ <CharactersListComponent>{renderList()}</CharactersListComponent>
+ <LastUsedComponent>Characters Last Used</LastUsedComponent>
+ </Wrapper>
+ );
+};
+
+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..ff6bbc9d409a243999ac791ca966306e329fe361
--- /dev/null
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
@@ -0,0 +1,60 @@
+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;
+ 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 [isOpen, setIsOpen] = useState(false);
+ const ref = useRef();
+
+ useOnClickOutside(ref, () => setIsOpen(false));
+
+ const MemorizedDropdown = useMemo(
+ () => (
+ <Wrapper ref={ref}>
+ <MenuButton
+ active={isOpen}
+ disabled={false}
+ iconName={icon}
+ onMouseDown={() => {
+ setIsOpen(!isOpen);
+ }}
+ title={title}
+ />
+
+ {isOpen && (
+ <DropWrapper>
+ <SpecialCharactersComponent
+ close={() => {
+ setIsOpen(false);
+ }}
+ />
+ </DropWrapper>
+ )}
+ </Wrapper>
+ ),
+ [isOpen],
+ );
+
+ return MemorizedDropdown;
+};
+
+export default SpecialCharactersTool;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 42a08ffa972278bde01cb1b1fcf79b814d0d8c09..032de1c8bedac63f55e3a63cb11f1121704a84af 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/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);
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 2e35a7fa4eb43c747ee3386fbc287dd4445c96cd..7797e4614aafb84e1715c8918b4aae72e4a18c91 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -248,4 +248,37 @@ export default {
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</Svg>
),
+ fullScreen: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <title> Full screen </title>
+ <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+ </Svg>
+ ),
+ fullScreenExit: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <title> Exit full screen </title>
+ <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>
+ ),
+ chapterList: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24" fill="none">
+ <title> Chapters </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index cdfc6ef4bc537ad94083f8e6b3204c4c60a60517..289d3d07e96126bffe65cbbd2b765af83e76d6e2 100644
--- a/wax-prosemirror-core/package.json
+++ b/wax-prosemirror-core/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror core",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index fb2a468a49f3dd5f53dabbf52299ab651121155c..ba15b947c4da3558e6109ed25a836254dc5742a4 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -31,9 +31,10 @@ const serializer = schema => {
};
};
+let schema;
const createApplication = props => {
const application = Application.create(props);
- application.getSchema();
+ schema = application.getSchema();
application.bootServices();
return application;
};
@@ -67,7 +68,6 @@ const Wax = props => {
} = props;
if (!application) return null;
- const { schema } = application.schema;
const WaxOnchange = onChange ? onChange : value => true;
const editorContent = value || '';
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 2158b3f8c85beedad9915d2c8f708de481077b76..0733dd13349de03de07026bf7bf33942717a1624 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/wax-prosemirror-plugins/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror plugins",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-schema/package.json b/wax-prosemirror-schema/package.json
index dbcc65869c7f7dda2796812831b712863d852acc..f147a1878b33e0e4f06768e70068c573e7583f84 100644
--- a/wax-prosemirror-schema/package.json
+++ b/wax-prosemirror-schema/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror schema",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index 59998e9685ec1d5549d3f091b09741f61c3c8fab..c41319ad44b9adad9e301931944f7fba38c98ca9 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -29,6 +29,8 @@ export { default as TrackChangeService } from './src/TrackChangeService/TrackCha
export { default as trackedTransaction } from './src/TrackChangeService/track-changes/trackedTransaction';
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
@@ -46,3 +48,5 @@ export { default as TrackChangeToolGroupService } from './src/WaxToolGroups/Trac
export { default as DisplayTextToolGroupService } from './src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService';
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/package.json b/wax-prosemirror-services/package.json
index 95dde527b1b5e834c063430c2d5963c623d5487c..26729c6b28d1cbbf3e792932c00b00c1a84801b5 100644
--- a/wax-prosemirror-services/package.json
+++ b/wax-prosemirror-services/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror services",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-services/src/FullScreenService/FullScreenService.js b/wax-prosemirror-services/src/FullScreenService/FullScreenService.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b1add8ceb1ed0cab3a24f202add48f215c420b6
--- /dev/null
+++ b/wax-prosemirror-services/src/FullScreenService/FullScreenService.js
@@ -0,0 +1,12 @@
+import Service from '../Service';
+import FullScreenTool from './FullScreenTool';
+
+class FullScreenService extends Service {
+ name = 'FullScreenService';
+
+ register() {
+ this.container.bind('FullScreenTool').to(FullScreenTool);
+ }
+}
+
+export default FullScreenService;
diff --git a/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js b/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js
new file mode 100644
index 0000000000000000000000000000000000000000..ae8d74663270816021a4578ad5a10c112569b041
--- /dev/null
+++ b/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { FullScreen } from 'wax-prosemirror-components';
+import Tools from '../lib/Tools';
+
+export default
+@injectable()
+class FullScreenTool extends Tools {
+ title = 'full screen';
+ icon = 'fullScreen';
+ name = 'FullScreen';
+
+ get run() {
+ return () => true;
+ }
+
+ select = (state, activeViewId) => {
+ return true;
+ };
+
+ get enable() {
+ return state => {
+ return true;
+ };
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ return this._isDisplayed ? (
+ <FullScreen key="FullScreen" item={this.toJSON()} view={view} />
+ ) : null;
+ }
+}
diff --git a/wax-prosemirror-services/src/ImageService/Image.js b/wax-prosemirror-services/src/ImageService/Image.js
index 22bf37ced95cfbe19379fa87a1139db32021aa39..382f08e69bd8aebf8b5fca1d8f80fcc834d55ab1 100644
--- a/wax-prosemirror-services/src/ImageService/Image.js
+++ b/wax-prosemirror-services/src/ImageService/Image.js
@@ -15,7 +15,7 @@ class Image extends Tools {
name = 'Image';
get run() {
- return () => true;
+ return true;
}
select = (state, activeViewId) => {
diff --git a/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js b/wax-prosemirror-services/src/SpecialCharactersService/SpecialCharactersService.js
new file mode 100644
index 0000000000000000000000000000000000000000..046d5f1eb0f7bb8c9b4e3a6c3d593a86ed262c44
--- /dev/null
+++ 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..1cc5f16f3ee44ae8514c851f72cf91d2b61ccae0
--- /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 = 'Special Characters';
+ icon = 'specialCharacters';
+ name = 'specialCharacters';
+
+ 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/CommentToolGroupService/Comment.js b/wax-prosemirror-services/src/WaxToolGroups/CommentToolGroupService/Comment.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/wax-prosemirror-services/src/WaxToolGroups/CommentToolGroupService/CommentToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/CommentToolGroupService/CommentToolGroupService.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
index 0ad922f8c9cf261aed1c0b1ef3694a3d45c6afbc..a345abd8acab4e3512b594177be9bc19d0bb594a 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
@@ -45,7 +45,7 @@ class DisplayText extends ToolGroup {
const second = {
id: '2',
- icon: 'code',
+ icon: 'chapterList',
component: <Empty />,
};
diff --git a/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreen.js b/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..6416a4b8137677d13531c1386a94c955459cbfd3
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreen.js
@@ -0,0 +1,13 @@
+import { injectable, inject } from 'inversify';
+import ToolGroup from '../../lib/ToolGroup';
+
+@injectable()
+class FullScreen extends ToolGroup {
+ tools = [];
+ constructor(@inject('FullScreenTool') fullScreenTool) {
+ super();
+ this.tools = [fullScreenTool];
+ }
+}
+
+export default FullScreen;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreenToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreenToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..e50c63a96308b054cc54962ee02b2157655485ed
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/FullScreenToolGroupService/FullScreenToolGroupService.js
@@ -0,0 +1,10 @@
+import Service from '../../Service';
+import FullScreen from './FullScreen';
+
+class FullScreenToolGroupService extends Service {
+ register() {
+ this.container.bind('FullScreen').to(FullScreen);
+ }
+}
+
+export default FullScreenToolGroupService;
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..c6afcc99f0f26c0197fa5316820d997a8219a7bd
--- /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 SpecialCharacters;
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';
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index a1973313434b48ba22cef6cd23841062fda6b3e9..2bc84fb359c5fc82983e9bd18509b9aefe910644 100644
--- a/wax-prosemirror-utilities/package.json
+++ b/wax-prosemirror-utilities/package.json
@@ -4,7 +4,7 @@
"version": "0.0.26",
"description": "Wax prosemirror utilities",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],