diff --git a/editors/demo/package.json b/editors/demo/package.json
index ce8eafc3658f72e0b83a0d6288c773d759cbecd7..61b703857e69d66dc801c0fdf297de79668c1fc5 100644
--- a/editors/demo/package.json
+++ b/editors/demo/package.json
@@ -14,7 +14,6 @@
"typeface-fira-sans-condensed": "^0.0.54",
"typeface-inter": "^1.1.13",
"typeface-vollkorn": "^0.0.54",
- "wax-prosemirror-components": "^0.6.5",
"wax-prosemirror-core": "^0.6.5",
"wax-prosemirror-services": "^0.6.5"
},
diff --git a/lerna-debug.log b/lerna-debug.log
index de5f6878a0e4b9ae1b36cf7ad7e39aaa87ffe492..1a872a616a1d96982e9bbf40579acc017e419732 100644
--- a/lerna-debug.log
+++ b/lerna-debug.log
@@ -1,23 +1,51 @@
-0 silly input [ 'clean' ]
+0 silly input [ 'build' ]
1 silly flags {
1 silly flags _: [ 'run' ],
1 silly flags 'reject-cycles': false,
1 silly flags rejectCycles: false,
-1 silly flags parallel: true,
-1 silly flags script: 'clean',
+1 silly flags script: 'build',
1 silly flags args: []
1 silly flags }
2 verbose rootPath /home/chris/workspace/wax-prosemirror
3 info version 2.11.0
4 silly existsSync /home/chris/workspace/wax-prosemirror/VERSION
-5 error EPACKAGES Errored while collecting packages and package graph
-6 error JSONError: Unexpected token } in JSON at position 1160 while parsing near '...hema": "^0.5.13", }, "peerDependenci...' in wax-prosemirror-services/package.json
-6 error at module.exports (/home/chris/workspace/wax-prosemirror/node_modules/load-json-file/node_modules/parse-json/index.js:26:19)
-6 error at parse (/home/chris/workspace/wax-prosemirror/node_modules/load-json-file/index.js:8:29)
-6 error at Function.module.exports.sync (/home/chris/workspace/wax-prosemirror/node_modules/load-json-file/index.js:11:29)
-6 error at Function.module.exports.sync (/home/chris/workspace/wax-prosemirror/node_modules/read-pkg/index.js:40:25)
-6 error at /home/chris/workspace/wax-prosemirror/node_modules/lerna/lib/PackageUtilities.js:138:47
-6 error at Array.forEach (<anonymous>)
-6 error at /home/chris/workspace/wax-prosemirror/node_modules/lerna/lib/PackageUtilities.js:132:86
-6 error at Array.forEach (<anonymous>)
-6 error at Function.getPackages (/home/chris/workspace/wax-prosemirror/node_modules/lerna/lib/PackageUtilities.js:131:22)
+5 silly initialize attempt
+6 silly initialize success
+7 silly execute attempt
+8 silly runScriptInDir build [] wax-prosemirror-core
+9 silly getExecOpts { cwd: '/home/chris/workspace/wax-prosemirror/wax-prosemirror-core' }
+10 error build Errored while running script in 'wax-prosemirror-core'
+11 error execute callback with error
+12 error Error: Command failed: yarn run build
+12 error
+12 error ./index.js → dist/index.js...
+12 error Browserslist: caniuse-lite is outdated. Please run:
+12 error npx browserslist@latest --update-db
+12 error (!) Circular dependency
+12 error index.js -> src/Wax.js -> src/Application.js -> src/config/defaultConfig.js -> src/config/defaultServices/MenuService/MenuService.js -> src/config/defaultServices/MenuService/Menu.js -> src/utilities/lib/ToolGroup.js -> src/components/ToolGroups.js -> src/components/ToolGroupComponent.js -> src/components/ui/Dropdown.js -> src/components/ui/MenuButton.js -> index.js
+12 error [!] Error: 'default' is not exported by src/components/icons/icons.js, imported by index.js
+12 error https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
+12 error index.js (47:9)
+12 error 45: export { default as Tabs } from './src/components/tabs/Tabs';
+12 error 46: export { default as MenuButton } from './src/components/ui/MenuButton';
+12 error 47: export { default as icons } from './src/components/icons/icons';
+12 error ^
+12 error 48: export { default as Icon } from './src/components/icons/Icon';
+12 error 49: export { default as Button } from './src/components/Button';
+12 error Error: 'default' is not exported by src/components/icons/icons.js, imported by index.js
+12 error at error (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:5171:30)
+12 error at Module.error (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:9603:16)
+12 error at handleMissingExport (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:9525:28)
+12 error at Module.getVariableForExportName (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:9768:24)
+12 error at Module.traceVariable (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:9983:45)
+12 error at ModuleScope.findVariable (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:8549:39)
+12 error at FunctionScope.findVariable (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:2795:38)
+12 error at ChildScope.findVariable (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:2795:38)
+12 error at Identifier$1.bind (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:4152:40)
+12 error at MemberExpression.bind (/home/chris/workspace/wax-prosemirror/node_modules/rollup/dist/shared/rollup.js:2880:23)
+12 error
+12 error error Command failed with exit code 1.
+12 error $ BABEL_ENV=production rollup -c
+12 error info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+12 error
+12 error at /home/chris/workspace/wax-prosemirror/node_modules/lerna/node_modules/execa/index.js:236:11
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 11f889e217300273dd1fbe61c43980dd3efff9c4..de0b5ffcbbc6e244906a427e71636fb4da9dbc93 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -1,2 +1 @@
-export { default as Button } from './src/components/Button';
export { default as UndoRedoButton } from './src/components/UndoRedoButton';
diff --git a/wax-prosemirror-core/index.js b/wax-prosemirror-core/index.js
index d787a7d31f88b21899bfa7d4fa869248c697952e..1b73762dac31294e51a1f11c7e4ee5bb457ee86c 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -46,3 +46,4 @@ export { default as Tabs } from './src/components/tabs/Tabs';
export { default as MenuButton } from './src/components/ui/MenuButton';
export { default as icons } from './src/components/icons/icons';
export { default as Icon } from './src/components/icons/Icon';
+export { default as Button } from './src/components/Button';
diff --git a/wax-prosemirror-core/src/components/Button.js b/wax-prosemirror-core/src/components/Button.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ed84615376e6a418d54321470bc60e6059f4b89
--- /dev/null
+++ b/wax-prosemirror-core/src/components/Button.js
@@ -0,0 +1,51 @@
+/* eslint react/prop-types: 0 */
+import React, { useContext, useMemo } from 'react';
+import { WaxContext } from '../WaxContext';
+import MenuButton from './ui/MenuButton';
+
+const Button = ({ view = {}, item }) => {
+ const { active, icon, label, run, select, title } = item;
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ activeViewId,
+ activeView,
+ } = context;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const { state } = view;
+
+ const handleMouseDown = e => {
+ e.preventDefault();
+ run(activeView.state, activeView.dispatch, activeView, context);
+ };
+
+ const isActive = !!(
+ active(activeView.state, activeViewId) &&
+ select(state, activeViewId, activeView)
+ );
+
+ let isDisabled = !select(state, activeViewId, activeView);
+ if (!isEditable) isDisabled = true;
+
+ const MenuButtonComponent = useMemo(
+ () => (
+ <MenuButton
+ active={isActive || false}
+ disabled={isDisabled}
+ iconName={icon}
+ label={label}
+ onMouseDown={e => handleMouseDown(e)}
+ title={title}
+ />
+ ),
+ [isActive, isDisabled, activeViewId],
+ );
+
+ return MenuButtonComponent;
+};
+
+export default Button;
diff --git a/wax-prosemirror-core/src/components/ToolGroupComponent.js b/wax-prosemirror-core/src/components/ToolGroupComponent.js
index 50a6bc06c5399804ff0ec77eddb8af5236b04920..d673aceaf1ff9472ff267b65bdc7db17215c04b7 100644
--- a/wax-prosemirror-core/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-core/src/components/ToolGroupComponent.js
@@ -1,7 +1,6 @@
/* eslint react/prop-types: 0 */
import React, { useMemo } from 'react';
import styled from 'styled-components';
-
import Dropdown from './ui/Dropdown';
const Wrapper = styled.div`
diff --git a/wax-prosemirror-core/src/components/icons/icons.js b/wax-prosemirror-core/src/components/icons/icons.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..898ce60e3daaabc3103a03c9a03b00121313d56e 100644
--- a/wax-prosemirror-core/src/components/icons/icons.js
+++ b/wax-prosemirror-core/src/components/icons/icons.js
@@ -0,0 +1,481 @@
+/**
+ * SVG source for icons: https://material.io/resources/icons
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { th } from '@pubsweet/ui-toolkit';
+
+const Svg = styled.svg.attrs(() => ({
+ version: '1.1',
+ xmlns: 'http://www.w3.org/2000/svg',
+ xmlnsXlink: 'http://www.w3.org/1999/xlink',
+}))`
+ fill: ${th('colorPrimary')};
+ height: 24px;
+ vertical-align: top;
+ width: 24px;
+`;
+
+export default {
+ commentBubble: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" />
+ </Svg>
+ ),
+ blockquote: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
+ </Svg>
+ ),
+ bold: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
+ </Svg>
+ ),
+ italic: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
+ </Svg>
+ ),
+ undo: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" />
+ </Svg>
+ ),
+ redo: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
+ </Svg>
+ ),
+ save: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" />
+ </Svg>
+ ),
+ done: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+ </Svg>
+ ),
+ code: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
+ </Svg>
+ ),
+ link: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
+ </Svg>
+ ),
+ strikethrough: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ >
+ <g>
+ <rect fill="none" height="24" width="24" />
+ </g>
+ <g>
+ <g>
+ <g>
+ <path d="M6.85,7.08C6.85,4.37,9.45,3,12.24,3c1.64,0,3,0.49,3.9,1.28c0.77,0.65,1.46,1.73,1.46,3.24h-3.01 c0-0.31-0.05-0.59-0.15-0.85c-0.29-0.86-1.2-1.28-2.25-1.28c-1.86,0-2.34,1.02-2.34,1.7c0,0.48,0.25,0.88,0.74,1.21 C10.97,8.55,11.36,8.78,12,9H7.39C7.18,8.66,6.85,8.11,6.85,7.08z M21,12v-2H3v2h9.62c1.15,0.45,1.96,0.75,1.96,1.97 c0,1-0.81,1.67-2.28,1.67c-1.54,0-2.93-0.54-2.93-2.51H6.4c0,0.55,0.08,1.13,0.24,1.58c0.81,2.29,3.29,3.3,5.67,3.3 c2.27,0,5.3-0.89,5.3-4.05c0-0.3-0.01-1.16-0.48-1.94H21V12z" />
+ </g>
+ </g>
+ </g>
+ </Svg>
+ ),
+ underline: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
+ </Svg>
+ ),
+ more: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <title> Expand </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+ </Svg>
+ ),
+ subscript: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ >
+ <g>
+ <rect fill="none" height="24" width="24" />
+ <path d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z" />
+ </g>
+ </Svg>
+ ),
+ superscript: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ >
+ <g>
+ <rect fill="none" height="24" width="24" x="0" y="0" />
+ <path d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z" />
+ </g>
+ </Svg>
+ ),
+ smallCaps: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ >
+ <g>
+ <rect fill="none" height="24" width="24" />
+ </g>
+ <g>
+ <g>
+ <g>
+ <path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z" />
+ </g>
+ </g>
+ </g>
+ </Svg>
+ ),
+ note: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M22 10l-6-6H4c-1.1 0-2 .9-2 2v12.01c0 1.1.9 1.99 2 1.99l16-.01c1.1 0 2-.89 2-1.99v-8zm-7-4.5l5.5 5.5H15V5.5z" />
+ </Svg>
+ ),
+ numberedList: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" />
+ </Svg>
+ ),
+ bulletList: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
+ </Svg>
+ ),
+ indentDecrease: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" />
+ </Svg>
+ ),
+ image: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
+ </Svg>
+ ),
+ table: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z" />
+ </Svg>
+ ),
+ /* -- table alternative icon -- */
+ // table: ({ className }) => (
+ // <Svg className={className} viewBox="0 0 24 24">
+ // <path d="M0 0h24v24H0V0z" fill="none" />
+ // <path d="M10 10.02h5V21h-5zM17 21h3c1.1 0 2-.9 2-2v-9h-5v11zm3-18H5c-1.1 0-2 .9-2 2v3h19V5c0-1.1-.9-2-2-2zM3 19c0 1.1.9 2 2 2h3V10H3v9z" />
+ // </Svg>
+ // ),
+ arrowUp: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
+ </Svg>
+ ),
+ arrowDown: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+ </Svg>
+ ),
+ codeBlock: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ >
+ <g>
+ <rect fill="none" height="24" width="24" />
+ <circle cx="12" cy="3.5" fill="none" r=".75" />
+ <circle cx="12" cy="3.5" fill="none" r=".75" />
+ <circle cx="12" cy="3.5" fill="none" r=".75" />
+ <path d="M19,3h-4.18C14.4,1.84,13.3,1,12,1S9.6,1.84,9.18,3H5C4.86,3,4.73,3.01,4.6,3.04C4.21,3.12,3.86,3.32,3.59,3.59 c-0.18,0.18-0.33,0.4-0.43,0.64C3.06,4.46,3,4.72,3,5v14c0,0.27,0.06,0.54,0.16,0.78c0.1,0.24,0.25,0.45,0.43,0.64 c0.27,0.27,0.62,0.47,1.01,0.55C4.73,20.99,4.86,21,5,21h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M11,14.17l-1.41,1.42L6,12 l3.59-3.59L11,9.83L8.83,12L11,14.17z M12,4.25c-0.41,0-0.75-0.34-0.75-0.75S11.59,2.75,12,2.75s0.75,0.34,0.75,0.75 S12.41,4.25,12,4.25z M14.41,15.59L13,14.17L15.17,12L13,9.83l1.41-1.42L18,12L14.41,15.59z" />
+ </g>
+ </Svg>
+ ),
+ highlight: ({ className }) => (
+ <Svg
+ className={className}
+ enable-background="new 0 0 24 24"
+ viewBox="0 0 24 24"
+ />
+ ),
+ title: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M5 4v3h5.5v12h3V7H19V4z" />
+ </Svg>
+ ),
+ findAndReplace: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z" />
+ </Svg>
+ ),
+ navigatePrevious: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title>Previous</title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+ </Svg>
+ ),
+ navigateNext: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title>Next</title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
+ </Svg>
+ ),
+ close: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Close </title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <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>
+ ),
+ reject: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Reject </title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <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>
+ ),
+ removeTag: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> remove tag </title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <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} fill="none" viewBox="0 0 24 24">
+ <title> Full screen </title>
+ <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+ </Svg>
+ ),
+ fullScreenExit: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Exit full screen </title>
+ <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
+ </Svg>
+ ),
+ matchCase: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Match Case </title>
+ <path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z" />
+ </Svg>
+ ),
+ editing: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Editing </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+ </Svg>
+ ),
+ suggesting: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Suggesting </title>
+ <path d="M22,24H2v-4h20V24z M13.06,5.19l3.75,3.75L7.75,18H4v-3.75L13.06,5.19z M17.88,7.87l-3.75-3.75 l1.83-1.83c0.39-0.39,1.02-0.39,1.41,0l2.34,2.34c0.39,0.39,0.39,1.02,0,1.41L17.88,7.87z" />
+ </Svg>
+ ),
+ viewing: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Viewing </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+ </Svg>
+ ),
+ toggleOn: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Viewing </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
+ </Svg>
+ ),
+ specialCharacters: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <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} fill="none" viewBox="0 0 24 24">
+ <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>
+ ),
+ showTrack: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Show Changes </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M 18 2.016 L 18 0 L 0 0 L 0 2.016 Z M 18 6.984 L 18 5.016 L 0 5.016 L 0 6.984 Z M 7.5 12 L 7.5 9.984 L 0 9.984 L 0 12 Z M 16.871 11.691 L 17.633 10.93 C 17.711 10.852 17.75 10.754 17.75 10.637 C 17.75 10.52 17.711 10.422 17.633 10.344 L 17.633 10.344 L 16.656 9.367 C 16.578 9.289 16.48 9.25 16.363 9.25 C 16.246 9.25 16.148 9.289 16.07 9.367 L 16.07 9.367 L 15.309 10.129 Z M 11.813 16.75 L 16.422 12.141 L 14.859 10.578 L 10.25 15.188 L 10.25 16.75 Z" />
+ </Svg>
+ ),
+ acceptTrack: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Accept </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M 18 2.016 L 18 0 L 0 0 L 0 2.016 Z M 18 6.984 L 18 5.016 L 0 5.016 L 0 6.984 Z M 7.5 12 L 7.5 9.984 L 0 9.984 L 0 12 Z M 12.563 17.078 L 18.188 11.406 L 16.781 10 L 12.563 14.219 L 10.406 12.109 L 9 13.516 Z" />
+ </Svg>
+ ),
+ rejectTrack: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Reject </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M 18 2.016 L 18 0 L 0 0 L 0 2.016 Z M 18 6.984 L 18 5.016 L 0 5.016 L 0 6.984 Z M 7.5 12 L 7.5 9.984 L 0 9.984 L 0 12 Z M 16.609 17.516 L 18.016 16.109 L 15.438 13.484 L 18.016 10.906 L 16.609 9.5 L 14.031 12.078 L 11.406 9.5 L 10 10.906 L 12.625 13.484 L 10 16.109 L 11.406 17.516 L 14.031 14.891 Z" />
+ </Svg>
+ ),
+ acceptRejectTrack: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Accept </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M 14.531 7.078 L 20.156 1.406 L 18.75 0 L 14.531 4.219 L 12.375 2.109 L 10.969 3.516 Z M 9 5.063 L 9 3.047 L 0 3.047 L 0 5.063 Z M 17.578 16.078 L 18.984 14.672 L 16.406 12.047 L 18.984 9.469 L 17.578 8.063 L 15 10.641 L 12.375 8.063 L 10.969 9.469 L 13.594 12.047 L 10.969 14.672 L 12.375 16.078 L 15 13.453 Z M 9 13.078 L 9 11.063 L 0 11.063 L 0 13.078 Z" />
+ </Svg>
+ ),
+ checkTrack: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Accept </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+ </Svg>
+ ),
+ transformCase: ({ className }) => (
+ <Svg
+ className={className}
+ enableBackground="new 0 0 16 16"
+ fill="none"
+ viewBox="0 0 28 28"
+ >
+ <path d="M11.44,15.353c0-2.99-1.352-5.486-5.59-5.486c-2.314,0-4.056,0.624-4.94,1.118l0.728,2.548 c0.832-0.52,2.21-0.962,3.51-0.962c1.95,0,2.314,0.962,2.314,1.639v0.183C2.964,14.365,0,15.952,0,19.253 c0,2.028,1.534,3.9,4.108,3.9c1.508,0,2.808-0.547,3.64-1.562h0.078l0.234,1.274h3.562c-0.13-0.702-0.182-1.872-0.182-3.096 V15.353z M7.592,18.239c0,0.232-0.026,0.468-0.078,0.676c-0.26,0.807-1.066,1.456-2.054,1.456c-0.884,0-1.56-0.494-1.56-1.508 c0-1.534,1.612-2.028,3.692-2.003V18.239z" />
+ <path d="M23.062,5.343h-5.201l-5.355,17.524h4.108l1.247-4.498h5.019l1.353,4.498h4.264L23.062,5.343z M18.434,15.404l1.041-3.718 c0.285-1.014,0.545-2.34,0.806-3.38h0.052c0.26,1.04,0.572,2.34,0.884,3.38l1.093,3.718H18.434z" />
+ <polygon points="8.025,6.584 1.999,6.584 1.999,6.833 1.999,7.461 1.999,7.709 8.025,7.709 8.025,8.95 12.442,7.146 8.025,5.343" />
+ </Svg>
+ ),
+ lowerCaseTransform: ({ className }) => (
+ <Svg
+ className={className}
+ enableBackground="new 0 0 28.08 28.08"
+ fill="none"
+ viewBox="0 0 28.08 28.08"
+ >
+ <path d="M5.356,5.135L0,22.659h4.108l1.248-4.498h5.018l1.352,4.498h4.264L10.556,5.135H5.356z M5.928,15.196l1.04-3.718 c0.286-1.014,0.546-2.34,0.806-3.38h0.052c0.26,1.04,0.572,2.34,0.884,3.38l1.092,3.718H5.928z" />
+ <path d="M27.898,19.564v-4.42c0-2.99-1.353-5.486-5.59-5.486c-2.314,0-4.058,0.624-4.94,1.118l0.728,2.548 c0.832-0.52,2.211-0.962,3.51-0.962c1.951,0,2.314,0.962,2.314,1.639v0.183c-4.498-0.026-7.462,1.561-7.462,4.861 c0,2.028,1.534,3.9,4.108,3.9c1.508,0,2.808-0.547,3.64-1.562h0.078l0.233,1.274h3.562C27.95,21.957,27.898,20.787,27.898,19.564z M24.05,18.031c0,0.232-0.026,0.468-0.077,0.676c-0.261,0.807-1.066,1.456-2.055,1.456c-0.884,0-1.561-0.494-1.561-1.508 c0-1.534,1.613-2.028,3.692-2.003V18.031z" />
+ <polygon points="21.663,8.742 26.08,6.938 21.663,5.135 21.663,6.376 15.637,6.376 15.637,6.625 15.637,7.253 15.637,7.501 21.663,7.501" />
+ </Svg>
+ ),
+ cutomInline: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 426.66667 426.66667">
+ <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
+ </Svg>
+ ),
+ IconCross: ({ className }) => (
+ <Svg className={className} viewBox="0 0 409.6 409.6" fill="none">
+ <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
+ </Svg>
+ ),
+ IconMinus: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 409.6 409.6">
+ <path
+ d="M392.533,187.733H17.067C7.641,187.733,0,195.374,0,204.8s7.641,17.067,17.067,17.067h375.467
+ c9.426,0,17.067-7.641,17.067-17.067S401.959,187.733,392.533,187.733z"
+ />
+ </Svg>
+ ),
+ multipleChoice: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Add Multiple Choice </title>
+ <path d="M16.54,11L13,7.46l1.41-1.41l2.12,2.12l4.24-4.24l1.41,1.41L16.54,11z M11,7H2v2h9V7z M21,13.41L19.59,12L17,14.59 L14.41,12L13,13.41L15.59,16L13,18.59L14.41,20L17,17.41L19.59,20L21,18.59L18.41,16L21,13.41z M11,15H2v2h9V15z" />
+ </Svg>
+ ),
+ gapQuestion: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Add Fill The Gap Question </title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 15h14v3H5z" />
+ </Svg>
+ ),
+ insertGap: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Add Gap </title>
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M18 9v4H6V9H4v6h16V9h-2z" />
+ </Svg>
+ ),
+ plusSquare: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Add Option </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+ </Svg>
+ ),
+ deleteOutlined: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Delete Option </title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />{' '}
+ </Svg>
+ ),
+ essay: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create Essay </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>
+ ),
+ mulitpleDropDownQuestion: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create Multiple DropDown Question</title>
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />{' '}
+ </Svg>
+ ),
+ mulitpleDropDown: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Create DropDown </title>
+ <path d="M17 5H20L18.5 7L17 5M3 2H21C22.11 2 23 2.9 23 4V8C23 9.11 22.11 10 21 10H16V20C16 21.11 15.11 22 14 22H3C1.9 22 1 21.11 1 20V4C1 2.9 1.9 2 3 2M3 4V8H14V4H3M21 8V4H16V8H21M3 20H14V10H3V20M5 12H12V14H5V12M5 16H12V18H5V16Z" />
+ </Svg>
+ ),
+ refresh: ({ className }) => (
+ <Svg className={className} fill="none" viewBox="0 0 24 24">
+ <title> Refresh List</title>
+ <path d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z" />{' '}
+ </Svg>
+ ),
+};
diff --git a/wax-prosemirror-core/src/config/defaultServices/OverlayService/usePosition.js b/wax-prosemirror-core/src/config/defaultServices/OverlayService/usePosition.js
index f7368a16e18705e2c992c9eed489ffb78f2227a5..381e83b318cd8ef4a788a6f87fa0e54c0add18c3 100644
--- a/wax-prosemirror-core/src/config/defaultServices/OverlayService/usePosition.js
+++ b/wax-prosemirror-core/src/config/defaultServices/OverlayService/usePosition.js
@@ -24,8 +24,6 @@ export default options => {
let node = '';
/* Sets Default position at the end of the annotation. You
can overwrite the default position in your component.
- Check: wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
- for reposition the create new comment component.
*/
const calculatePosition = (focusedView, from, to) => {
const WaxSurface = focusedView.dom.getBoundingClientRect();
diff --git a/wax-prosemirror-core/src/utilities/lib/Tools.js b/wax-prosemirror-core/src/utilities/lib/Tools.js
index f6a92e4883432a844e3380e150f7f41d5611eabf..6e6eb09c0d7fa5300aa2d0c52b162348863ce238 100644
--- a/wax-prosemirror-core/src/utilities/lib/Tools.js
+++ b/wax-prosemirror-core/src/utilities/lib/Tools.js
@@ -3,7 +3,7 @@ import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import { isEmpty } from 'lodash';
import { injectable, inject } from 'inversify';
-import { Button } from 'wax-prosemirror-components';
+import Button from '../../components/Button';
@injectable()
class Tools {