diff --git a/.eslintrc.js b/.eslintrc.js
index 6ed1d951b7bf3950cab82fd603a4bc86707a5067..c5207cf68c1e65352a89ebda4d495fdbb0e3b792 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,7 +22,11 @@ eslint.parserOptions = {
};
eslint.rules = {
- 'sort-keys': 'off',
+ 'class-methods-use-this': [
+ 1,
+ { exceptMethods: ['run', 'enable', 'active', 'select'] },
+ ],
+ // 'import/no-named-as-default': 0,
'import/no-extraneous-dependencies': [
'error',
{
@@ -30,13 +34,20 @@ eslint.rules = {
},
],
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
- 'class-methods-use-this': [1, { exceptMethods: ['run', 'enable', 'active'] }],
-
'react/prop-types': [
2,
- { ignore: ['children', 'className', 'onClick', 'onMouseEnter', 'theme'] },
+ {
+ ignore: [
+ 'children',
+ 'className',
+ 'onClick',
+ 'onMouseDown',
+ 'onMouseEnter',
+ 'theme',
+ ],
+ },
],
- // 'import/no-named-as-default': 0,
+ 'sort-keys': 'off',
};
module.exports = eslint;
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index ef823aeea687d8da82430783ebd5bb28329c704f..e7b51cea453085c9ac746cb67af35e0bfb83900c 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
import { EditoriaLayout } from 'wax-prosemirror-layouts';
import { Wax } from 'wax-prosemirror-core';
@@ -12,17 +12,12 @@ const GlobalStyle = createGlobalStyle`
margin: 0;
padding: 0;
overflow-y: hidden;
+ }
+
#root {
height:100vh;
width:100vw;
}
- }
-`;
-
-const StyledWax = styled(Wax)`
- .wax-surface-scroll {
- /* height: ${props => (props.debug ? '50vh' : '100%')}; */
- }
`;
const renderImage = file => {
@@ -43,7 +38,7 @@ const user = {
const Editoria = () => (
<Fragment>
<GlobalStyle />
- <StyledWax
+ <Wax
config={config}
autoFocus
placeholder="Type Something..."
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 3e0b13574e74ec1730cf8cda95badfcc31049503..7072aeab13c9c70d5f17b45059cd5bd9f521dec8 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -24,6 +24,7 @@ import {
CodeBlockService,
CodeBlockToolGroupService,
TrackChangeToolGroupService,
+ DisplayTextToolGroupService,
} from 'wax-prosemirror-services';
import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
@@ -54,7 +55,7 @@ export default {
},
{
templateArea: 'leftSideBar',
- toolGroups: ['Display', 'Text'],
+ toolGroups: ['DisplayText'],
},
],
@@ -95,5 +96,6 @@ export default {
new CodeBlockService(),
new CodeBlockToolGroupService(),
new TrackChangeToolGroupService(),
+ new DisplayTextToolGroupService(),
],
};
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
deleted file mode 100644
index 7e32f1bddaca693ebc31083323ff350d55fb89a5..0000000000000000000000000000000000000000
--- a/stories/Button.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-const Button = ({ onClick }) => (
- <button onClick={onClick} type="button">
- Click me
- </button>
-)
-
-export const Base = () => <Button onClick={() => console.log('clicked!')} />
-
-export default {
- component: Button,
- title: 'Test/Button',
-}
diff --git a/stories/buttons/Dropdown.stories.js b/stories/buttons/Dropdown.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1ff79a0e369a01325c288f6f8041f53167c8876
--- /dev/null
+++ b/stories/buttons/Dropdown.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Dropdown from '../../wax-prosemirror-components/src/ui/buttons/Dropdown';
+
+const Wrapper = styled.div`
+ height: 150px;
+`;
+
+// const RightWrapper = styled(Wrapper)`
+// display: flex;
+// justify-content: flex-end;
+// `;
+
+const DropElement = styled.div`
+ background: palegoldenrod;
+ height: 100px;
+ width: 100px;
+`;
+
+export const Base = () => (
+ <Wrapper>
+ <Dropdown iconName="bold" dropComponent={<DropElement />} />
+ </Wrapper>
+);
+
+// export const RightSide = () => (
+// <RightWrapper>
+// <Dropdown iconName="bold" />
+// </RightWrapper>
+// );
+
+export default {
+ component: Dropdown,
+ title: 'Buttons/Dropdown',
+};
diff --git a/stories/buttons/Icon.stories.js b/stories/buttons/Icon.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..f2eb45da2db42136b8219b184efb2e921df25ae5
--- /dev/null
+++ b/stories/buttons/Icon.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import Icon from '../../wax-prosemirror-components/src/ui/buttons/Icon';
+
+export const Base = () => <Icon name="commentBubble" />;
+
+export default {
+ component: Icon,
+ title: 'Buttons/Icon',
+};
diff --git a/stories/buttons/MenuButton.stories.js b/stories/buttons/MenuButton.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..618a50794e9f50a19391ded7e131f5715cfc3ead
--- /dev/null
+++ b/stories/buttons/MenuButton.stories.js
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import MenuButton from '../../wax-prosemirror-components/src/ui/buttons/MenuButton';
+
+import { Demo } from '../_helpers';
+
+export const Base = () => {
+ const [active, setActive] = useState(false);
+
+ const reset = () => {
+ setActive(false);
+ };
+
+ return (
+ <Demo onClickButton={reset}>
+ <MenuButton
+ active={active}
+ iconName="bold"
+ onMouseDown={() => setActive(!active)}
+ title="bold"
+ />
+ </Demo>
+ );
+};
+
+export const Inactive = () => <MenuButton iconName="bold" />;
+export const Active = () => <MenuButton active iconName="bold" />;
+export const Disabled = () => <MenuButton disabled iconName="bold" />;
+
+export const IconAndText = () => {
+ const [active, setActive] = useState(false);
+
+ const reset = () => {
+ setActive(false);
+ };
+
+ return (
+ <Demo onClickButton={reset}>
+ <MenuButton
+ active={active}
+ iconName="bold"
+ label="Make it bold"
+ onMouseDown={() => setActive(!active)}
+ />
+ </Demo>
+ );
+};
+
+export const TextOnly = () => {
+ const [active, setActive] = useState(false);
+
+ const reset = () => {
+ setActive(false);
+ };
+
+ return (
+ <Demo onClickButton={reset}>
+ <MenuButton
+ active={active}
+ label="Make it bold"
+ onMouseDown={() => setActive(!active)}
+ />
+ </Demo>
+ );
+};
+
+export default {
+ component: MenuButton,
+ title: 'Buttons/Menu Button',
+};
diff --git a/stories/tabs/BlockElement.stories.js b/stories/tabs/BlockElement.stories.js
index 831f803db44ee5ad6f46864591c1b51c27a7c4da..20a7d444f7ee72b434968829e04017e55cb634e7 100644
--- a/stories/tabs/BlockElement.stories.js
+++ b/stories/tabs/BlockElement.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
import BlockElement from '../../wax-prosemirror-components/src/ui/tabs/BlockElement';
const item = {
- content: 'something',
+ label: 'something',
};
export const Base = () => <BlockElement item={item} isNested={false} />;
diff --git a/stories/tabs/BlockElementGroup.stories.js b/stories/tabs/BlockElementGroup.stories.js
index 8dce998f1bda096026f6701da6487856cea6efbe..4074ccc2b7ebf983efd97c82abf1e9bfa7520b78 100644
--- a/stories/tabs/BlockElementGroup.stories.js
+++ b/stories/tabs/BlockElementGroup.stories.js
@@ -4,10 +4,10 @@ import BlockElementGroup from '../../wax-prosemirror-components/src/ui/tabs/Bloc
const items = [
{
- content: 'Heading 1',
+ label: 'Heading 1',
},
{
- content: 'Heading 2',
+ label: 'Heading 2',
},
];
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 26f3d8d5a60a50f188ea5da378ed070eafbaca55..0742df29fae1f35d3485ca5b54e9f5bd1c005f7e 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -6,6 +6,8 @@ export { default as TableDropDown } from './src/components/TableDropDown';
export { default as ImageUpload } from './src/components/ImageUpload';
export { default as LeftMenuTitle } from './src/components/LeftMenuTitle';
export { default as ToolGroupComponent } from './src/components/ToolGroupComponent';
+export { default as ToolGroups } from './src/components/ToolGroups';
+
export { default as NoteEditorContainer } from './src/components/notes/NoteEditorContainer';
export { default as LinkComponent } from './src/components/link/LinkComponent';
@@ -17,3 +19,6 @@ export { default as RightArea } from './src/components/rightArea/RightArea';
export { default as TrackChangeEnable } from './src/components/trackChanges/TrackChangeEnable';
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';
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index 2032ecda19beaed7c9003f0f9ce6784e3d69ee27..b8271eed33839501f980e378f87481286b20e8ad 100644
--- a/wax-prosemirror-components/package.json
+++ b/wax-prosemirror-components/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"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 85cf9df094a3b0ca9905ef4ee68277b3a5332bd3..7f6ec04c5010ab201202c7ec203764fcd8c66753 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,45 +1,38 @@
-/* eslint react/prop-types: 0 */
import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { ButtonStyles } from 'wax-prosemirror-themes';
import { WaxContext } from 'wax-prosemirror-core';
-
-const ButtonStyled = styled.button`
- ${ButtonStyles};
- opacity: ${props => (props.select ? 1 : 0.4)};
- pointer-events: ${props => (props.select ? 'default' : 'none')};
- color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- &:hover {
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- }
-`;
+import MenuButton from '../ui/buttons/MenuButton';
const Button = ({ view = {}, item }) => {
+ const { active, enable, icon, label, onlyOnMain, run, select, title } = item;
+
const {
view: { main },
activeViewId,
} = useContext(WaxContext);
- if (item.onlyOnMain) {
- view = main;
- }
+
+ if (onlyOnMain) view = main;
+
+ const { dispatch, state } = view;
+
+ const handleMouseDown = e => {
+ e.preventDefault();
+ run(state, dispatch);
+ };
+
+ const isActive = active && active(state);
+
+ const isDisabled =
+ enable && !enable(state) && !(select && select(view.state, activeViewId));
return (
- <ButtonStyled
- type="button"
- isActive={item.active && item.active(view.state)}
- title={item.title}
- disabled={item.enable && !item.enable(view.state)}
- onMouseDown={e => {
- e.preventDefault();
- item.run(view.state, view.dispatch);
- }}
- select={item.select && item.select(view.state, activeViewId)}
- >
- {item.content}
- </ButtonStyled>
+ <MenuButton
+ active={isActive}
+ disabled={isDisabled}
+ iconName={icon}
+ label={label}
+ onMouseDown={handleMouseDown}
+ title={title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 965f46be22f609676998bb98e9f8bf81a6acc9d1..f34fca7bc4131967f0f6b1999c1c4c45c3449c82 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/wax-prosemirror-components/src/components/ImageUpload.js
@@ -1,40 +1,41 @@
/* eslint react/prop-types: 0 */
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import styled from 'styled-components';
-const UploadImage = styled.div`
- opacity: ${props => (props.select ? 1 : 0.4)};
- pointer-events: ${props => (props.select ? 'default' : 'none')};
- color: #777;
- display: inline-flex;
- padding: 0px 10px;
- .custom-file-upload {
- cursor: pointer;
- }
- &:hover {
- }
+import MenuButton from '../ui/buttons/MenuButton';
+
+const Wrapper = styled.div`
input {
display: none;
}
`;
+
const ImageUpload = ({ item, fileUpload, view }) => {
const { activeViewId } = useContext(WaxContext);
+
+ const inputRef = useRef(null);
+ const handleMouseDown = () => inputRef.current.click();
+
return (
- <UploadImage select={item.select && item.select(view.state, activeViewId)}>
- <label
- className="custom-file-upload"
- title="upload image"
- htmlFor="file-upload"
- >
- {item.content}
+ <Wrapper>
+ <label htmlFor="file-upload">
+ <MenuButton
+ active={false}
+ disabled={!(item.select && item.select(view.state, activeViewId))}
+ iconName={item.icon}
+ onMouseDown={handleMouseDown}
+ title="Upload Image"
+ />
+
<input
id="file-upload"
+ ref={inputRef}
onChange={e => fileUpload(e.target.files[0])}
type="file"
/>
</label>
- </UploadImage>
+ </Wrapper>
);
};
export default ImageUpload;
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index 62d3986303919d74987d5cb3386b582ec1d37f90..e1f76123f4a036cafde8a7043137a80aa54f3bc7 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,37 +1,29 @@
-import React, { useState } from "react";
-import { isFunction } from "lodash";
-import styled from "styled-components";
-import icons from "../icons/icons";
-
-const ToolGroupStyled = styled.div`
- border-right: 1px solid #ecedf1;
- &:last-child {
- border-right: none;
- }
-`;
+import React from 'react';
+import { isFunction } from 'lodash';
+import styled from 'styled-components';
+
+import Dropdown from '../ui/buttons/Dropdown';
+
+const Wrapper = styled.div`
+ background: #fff;
+ display: inline-flex;
+ align-items: center;
+ padding: 0 4px;
-const MoreButton = styled.button`
- background: none;
- border: none;
- cursor: pointer;
- &:active {
- outline: none;
+ > button,
+ > div {
+ margin: 0 2px;
}
`;
-const InnerStyled = styled.div`
- display: flex;
- width: 0;
- top: 40px;
- position: relative;
- right: 100%;
+const DropWrapper = styled(Wrapper)`
+ border: 1px solid gray;
+ padding: 4px;
`;
-const ToolGroupComponent = ({ view, tools, name, title }) => {
- const [more, showHide] = useState(false),
- toolsShown = [],
- rest = [],
- DisplayTitle = isFunction(title) ? title : () => title;
+const ToolGroupComponent = ({ view, tools, name }) => {
+ const toolsShown = [];
+ const rest = [];
tools.forEach(tool => {
tool.isIntoMoreSection() && tool.isDisplayed()
@@ -40,23 +32,16 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
});
return (
- <ToolGroupStyled data-name={name}>
- <DisplayTitle />
+ <Wrapper data-name={name}>
{toolsShown}
- {rest.length && !more ? (
- <MoreButton title="show more tools" onClick={() => showHide(!more)}>
- {icons.ellipses}
- </MoreButton>
- ) : null}
- {more && (
- <div>
- <MoreButton title="hide" onClick={() => showHide(!more)}>
- {icons.ellipses}
- </MoreButton>
- <InnerStyled>{rest}</InnerStyled>
- </div>
+ {rest.length > 0 && (
+ <Dropdown
+ iconName="more"
+ dropComponent={<DropWrapper>{rest}</DropWrapper>}
+ title="Show more tools"
+ />
)}
- </ToolGroupStyled>
+ </Wrapper>
);
};
diff --git a/wax-prosemirror-components/src/components/ToolGroups.js b/wax-prosemirror-components/src/components/ToolGroups.js
new file mode 100644
index 0000000000000000000000000000000000000000..374fb6f15a63edb7e272aa3b8e7b16b2334d0f81
--- /dev/null
+++ b/wax-prosemirror-components/src/components/ToolGroups.js
@@ -0,0 +1,24 @@
+/* eslint no-underscore-dangle: 0 */
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import ToolGroupComponent from './ToolGroupComponent';
+
+const ToolGroups = ({ toolGroups, view }) => {
+ return toolGroups.map(toolGroup => {
+ if (toolGroup._toolGroups.length > 0) {
+ return <ToolGroups toolGroups={toolGroup._toolGroups} view={view} />;
+ }
+ return (
+ <ToolGroupComponent
+ key={uuidv4()}
+ view={view}
+ tools={toolGroup._tools}
+ // title={this.title}
+ // name={name}
+ />
+ );
+ });
+};
+
+export default ToolGroups;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index e590e6a758d520a29da696cc8905ff2048840f0b..aaac04e050c2a46d0f6f70cee277e58f1f074408 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,29 +1,8 @@
-/* eslint react/prop-types: 0 */
import React, { useState, useContext } from 'react';
-import styled from 'styled-components';
-import { ButtonStyles } from 'wax-prosemirror-themes';
import { WaxContext } from 'wax-prosemirror-core';
-import InsertTableTool from '../../ui/tables/InsertTableTool';
-
-const ButtonStyled = styled.button`
- ${ButtonStyles};
- opacity: ${props => (props.select ? 1 : 0.4)};
- pointer-events: ${props => (props.select ? 'default' : 'none')};
- color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- &:hover {
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- }
-`;
-const InsertTableToolContainer = styled.div`
- display: block;
- height: auto;
- top: 53px;
- position: absolute;
-`;
+import Dropdown from '../../ui/buttons/Dropdown';
+import InsertTableTool from '../../ui/tables/InsertTableTool';
const CreateTable = ({ view = {}, item }) => {
const {
@@ -34,37 +13,32 @@ const CreateTable = ({ view = {}, item }) => {
view = main;
}
+ const [showTool, setShowTool] = useState(false);
+ const toggleShowTool = () => setShowTool(!showTool);
+
const { state, dispatch } = view;
- const [isTableToolDisplayed, setTableToolDisplay] = useState(false);
+ const { enable, icon, run, select, title } = item;
- const CreateButton = (
- <ButtonStyled
- type="button"
- isActive={isTableToolDisplayed}
- title={item.title}
- disabled={item.enable && !item.enable(view.state)}
- onMouseDown={e => {
- e.preventDefault();
- setTableToolDisplay(!isTableToolDisplayed);
+ const dropComponent = (
+ <InsertTableTool
+ onGridSelect={colRows => {
+ run(colRows, state, dispatch);
}}
- select={item.select && item.select(view.state, activeViewId)}
- >
- {item.content}
- </ButtonStyled>
+ />
);
- return isTableToolDisplayed ? (
- <>
- {CreateButton}
- <InsertTableToolContainer>
- <InsertTableTool
- onGridSelect={colRows => {
- item.run(colRows, state, dispatch);
- }}
- />
- </InsertTableToolContainer>
- </>
- ) : (
- <>{CreateButton}</>
+
+ const isDisabled =
+ enable && !enable(state) && !(select && select(state, activeViewId));
+
+ return (
+ <Dropdown
+ active={showTool}
+ dropComponent={dropComponent}
+ iconName={icon}
+ disabled={isDisabled}
+ onClick={toggleShowTool}
+ title={title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
index 742f9a9b0765e19d6844c3cf3682e5937d8c1390..aea281b0c2f15b43c118aeecea03c8ee81103ae7 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
@@ -1,21 +1,22 @@
/* eslint react/prop-types: 0 */
import React, { useContext, useState } from 'react';
-import styled from 'styled-components';
-import { ButtonStyles } from 'wax-prosemirror-themes';
+// import styled from 'styled-components';
+// import { ButtonStyles } from 'wax-prosemirror-themes';
import { WaxContext } from 'wax-prosemirror-core';
+import MenuButton from '../../ui/buttons/MenuButton';
-const ButtonStyled = styled.button`
- ${ButtonStyles};
- opacity: ${props => (props.select ? 1 : 0.4)};
- pointer-events: ${props => (props.select ? 'default' : 'none')};
- color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- &:hover {
- background-color: ${props =>
- props.isActive ? props.theme.colorPrimary : 'transparent'};
- }
-`;
+// const ButtonStyled = styled.button`
+// ${ButtonStyles};
+// opacity: ${props => (props.select ? 1 : 0.4)};
+// pointer-events: ${props => (props.select ? 'default' : 'none')};
+// color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
+// background-color: ${props =>
+// props.isActive ? props.theme.colorPrimary : 'transparent'};
+// &:hover {
+// background-color: ${props =>
+// props.isActive ? props.theme.colorPrimary : 'transparent'};
+// }
+// `;
const TrackChangeEnable = ({ view = {}, item, enabled }) => {
if (item.onlyOnMain) {
@@ -27,21 +28,36 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => {
const [isEnabled, setEnabled] = useState(enabled);
+ // return (
+ // <ButtonStyled
+ // type="button"
+ // isActive={isEnabled}
+ // title={item.title}
+ // disabled={item.enable && !item.enable(view.state)}
+ // onMouseDown={e => {
+ // e.preventDefault();
+ // setEnabled(!isEnabled);
+ // item.run(view.state, view.dispatch);
+ // }}
+ // select={item.select && item.select(view.state)}
+ // >
+ // {item.content}
+ // </ButtonStyled>
+ // );
+
+ const handleMouseDown = () => {
+ setEnabled(!isEnabled);
+ item.run(view.state, view.dispatch);
+ };
+
return (
- <ButtonStyled
- type="button"
- isActive={isEnabled}
- title={item.title}
+ <MenuButton
+ active={isEnabled}
disabled={item.enable && !item.enable(view.state)}
- onMouseDown={e => {
- e.preventDefault();
- setEnabled(!isEnabled);
- item.run(view.state, view.dispatch);
- }}
- select={item.select && item.select(view.state)}
- >
- {item.content}
- </ButtonStyled>
+ label="Track Changes"
+ onMouseDown={handleMouseDown}
+ title={item.title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index c83940873b03673b5e33e98343a3ed3b01544624..c7f654f19706b0ea713cbb1d7820e1f4b09437aa 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -1,78 +1,221 @@
+/**
+ * SVG source for icons: https://material.io/resources/icons
+ */
+
import React from 'react';
+import styled from 'styled-components';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {
- faBold,
- faItalic,
faCheck,
- faCode,
- faSuperscript,
- faSubscript,
- faUnderline,
- faStrikethrough,
- faLink,
faParagraph,
faHeading,
faQuoteLeft,
- faListOl,
- faListUl,
- faImage,
- faTable,
faTimes,
- faUndo,
- faRedo,
- faOutdent,
- faAngleUp,
- faStickyNote,
faVial,
- faFileCode,
- faEllipsisH,
} from '@fortawesome/free-solid-svg-icons';
+// default values
+// to explain vertical align: https://stackoverflow.com/a/24626986
+const Svg = styled.svg.attrs(() => ({
+ version: '1.1',
+ xmlns: 'http://www.w3.org/2000/svg',
+ xmlnsXlink: 'http://www.w3.org/1999/xlink',
+}))`
+ height: 24px;
+ width: 24px;
+ fill: gray;
+ vertical-align: top;
+`;
+
export default {
- em: <FontAwesomeIcon icon={faItalic} />,
- italic: <FontAwesomeIcon icon={faItalic} />,
- strong: <FontAwesomeIcon icon={faBold} />,
- bold: <FontAwesomeIcon icon={faBold} />,
- code: <FontAwesomeIcon icon={faCode} />,
- subscript: <FontAwesomeIcon icon={faSubscript} />,
- superscript: <FontAwesomeIcon icon={faSuperscript} />,
- underline: <FontAwesomeIcon icon={faUnderline} />,
- strikethrough: <FontAwesomeIcon icon={faStrikethrough} />,
- link: <FontAwesomeIcon icon={faLink} />,
paragraph: <FontAwesomeIcon icon={faParagraph} />,
heading: <FontAwesomeIcon icon={faHeading} />,
blockquote: <FontAwesomeIcon icon={faQuoteLeft} />,
- code_block: <FontAwesomeIcon icon={faFileCode} />,
- ordered_list: <FontAwesomeIcon icon={faListOl} />,
- bullet_list: <FontAwesomeIcon icon={faListUl} />,
- image: <FontAwesomeIcon icon={faImage} />,
- table: <FontAwesomeIcon icon={faTable} />,
- footnote: <FontAwesomeIcon icon={faStickyNote} />,
- undo: <FontAwesomeIcon icon={faUndo} />,
- redo: <FontAwesomeIcon icon={faRedo} />,
- lift: <FontAwesomeIcon icon={faOutdent} />,
- join_up: <FontAwesomeIcon icon={faAngleUp} />,
source: <FontAwesomeIcon icon={faVial} />,
- ellipses: <FontAwesomeIcon icon={faEllipsisH} />,
- small_caps: (
- <span className="small-caps">
- <svg
- width="35"
- height="20"
- viewBox="0 0 35 20"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M9.21799 1.12207L9.34998 0H0V1.12207H4.004V15.0701H5.258V1.12207H9.21799ZM14.14 6.34912L14.242 5.51611H7.935V6.34912H10.587V15.0701H11.539V6.34912H14.14Z"
- transform="translate(10.286 8.92993)"
- fill="#4F4F4F"
- />
- </svg>
- </span>
- ),
check: <FontAwesomeIcon icon={faCheck} />,
times: <FontAwesomeIcon icon={faTimes} />,
+ commentBubble: ({ className }) => (
+ <Svg 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>
+ ),
+ 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>
+ ),
+ 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">
+ <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>
+ ),
+ 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>
+ ),
+ title: ({ className }) => (
+ <Svg className={className} viewBox="0 0 24 24">
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M5 4v3h5.5v12h3V7H19V4z" />
+ </Svg>
+ ),
};
diff --git a/wax-prosemirror-components/src/ui/buttons/Dropdown.js b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..617302671b65fff39958250c2123dc0e075d3300
--- /dev/null
+++ b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import MenuButton from './MenuButton';
+
+// font size 0 reason: https://stackoverflow.com/a/19212391
+const Wrapper = styled.div`
+ font-size: 0;
+ position: relative;
+`;
+
+const DropWrapper = styled.div`
+ margin-top: 4px;
+ position: absolute;
+ z-index: 2;
+`;
+
+const Dropdown = props => {
+ const { className, disabled, dropComponent, iconName, label, title } = props;
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ // const dropElementRef = useRef(null);
+
+ return (
+ <Wrapper className={className}>
+ <MenuButton
+ active={isOpen}
+ disabled={disabled}
+ iconName={iconName}
+ label={label}
+ onMouseDown={() => setIsOpen(!isOpen)}
+ title={title}
+ />
+
+ {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+ </Wrapper>
+ );
+};
+
+Dropdown.propTypes = {
+ disabled: PropTypes.bool,
+ dropComponent: PropTypes.node.isRequired,
+ iconName: PropTypes.string,
+ label: PropTypes.string,
+ title: PropTypes.string,
+};
+
+Dropdown.defaultProps = {
+ disabled: false,
+ iconName: null,
+ label: null,
+ title: null,
+};
+
+export default Dropdown;
diff --git a/wax-prosemirror-components/src/ui/buttons/Icon.js b/wax-prosemirror-components/src/ui/buttons/Icon.js
new file mode 100644
index 0000000000000000000000000000000000000000..00b46ac11e22f59e6dc3741ef0b3aee764d84ad5
--- /dev/null
+++ b/wax-prosemirror-components/src/ui/buttons/Icon.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import icons from '../../icons/icons';
+
+/**
+ * Only works with SVG icons from icons.js
+ */
+
+const SVGIcon = props => {
+ const { className, name } = props;
+
+ const Component = icons[name];
+ return <Component className={className} />;
+};
+
+SVGIcon.propTypes = {
+ name: PropTypes.string.isRequired,
+};
+
+export default SVGIcon;
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..09feb60c92f2e3f183ae986c2a5e536f5dd7e2fc
--- /dev/null
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+
+import Icon from './Icon';
+
+const activeStyles = css`
+ background: gray;
+ color: white;
+
+ > svg {
+ fill: white;
+ }
+
+ &:hover {
+ background: gray;
+ }
+`;
+
+const disabledStyles = css`
+ cursor: not-allowed;
+
+ > svg {
+ fill: gainsboro;
+ }
+
+ &:hover {
+ background: none;
+ }
+`;
+
+const Wrapper = styled.button.attrs(props => ({
+ title: props.title,
+ type: 'button',
+}))`
+ background: none;
+ border: none;
+ border-radius: 2px;
+ cursor: pointer;
+ height: 28px;
+ outline: none;
+ padding: 2px;
+ transition: all 0.1s ease-in;
+
+ > svg {
+ transition: all 0.1s ease-in;
+ }
+
+ &:hover {
+ background: gainsboro;
+ }
+
+ ${props => props.active && activeStyles}
+ ${props => props.disabled && disabledStyles}
+`;
+
+const StyledIcon = styled(Icon)`
+ height: 24px;
+ width: 24px;
+`;
+
+const Label = styled.span`
+ margin: 0 8px;
+ ${props => props.hasIcon && `margin: 0 8px 0 4px;`}
+`;
+
+const MenuButton = props => {
+ const {
+ active,
+ className,
+ disabled,
+ iconName,
+ label,
+ title,
+ onMouseDown,
+ } = props;
+
+ return (
+ <Wrapper
+ active={active}
+ className={className}
+ disabled={disabled}
+ onMouseDown={onMouseDown}
+ title={title}
+ >
+ {iconName && (
+ <StyledIcon active={active} disabled={disabled} name={iconName} />
+ )}
+
+ {label && <Label hasIcon={!!iconName}>{label}</Label>}
+ </Wrapper>
+ );
+};
+
+MenuButton.propTypes = {
+ active: PropTypes.bool.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ iconName: PropTypes.string,
+ label: PropTypes.string,
+ title: PropTypes.string,
+};
+
+MenuButton.defaultProps = {
+ iconName: null,
+ label: null,
+ title: null,
+};
+
+export default MenuButton;
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElement.js b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
index 1ff4cdeec6bfdeb33c47d24f1099211393a03d7e..c8e85303516d17419bb904f16eec1d5a8a144bb3 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockElement.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
@@ -14,22 +14,22 @@ const Box = styled.div`
background: gray;
`;
-const Label = styled(Button)``;
+const StyledButton = styled(Button)``;
const BlockElement = props => {
- const { item, onClick } = props;
+ const { item, onClick, view } = props;
return (
<Wrapper onClick={onClick}>
<Box />
- <Label item={item} />
+ <StyledButton item={item} view={view} />
</Wrapper>
);
};
BlockElement.propTypes = {
item: PropTypes.shape({
- content: PropTypes.string,
+ label: PropTypes.string,
}).isRequired,
};
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js b/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js
index f04ec851326eaa62e652e878fc25429c8f8be30c..9c640c5b564e72dfb6e3020bc02b9b4ebb8e7cb2 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js
@@ -4,15 +4,32 @@ import styled from 'styled-components';
import BlockElement from './BlockElement';
const Wrapper = styled.div``;
-const GroupName = styled.div``;
+
+const GroupName = styled.div`
+ margin-bottom: 4px;
+ font-size: 14px;
+ text-transform: uppercase;
+`;
+
+const ListWrapper = styled.div`
+ > div:not(:last-child) {
+ margin-bottom: 4px;
+ }
+`;
const BlockElementGroup = props => {
- const { groupName, items } = props;
+ const { groupName, items, view } = props;
return (
<Wrapper>
<GroupName>{groupName}</GroupName>
- {items && items.map(item => <BlockElement item={item} />)}
+
+ <ListWrapper>
+ {items &&
+ items.map(item => (
+ <BlockElement key={item.name} item={item} view={view} />
+ ))}
+ </ListWrapper>
</Wrapper>
);
};
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
index e18efcae66230aa23325c1eba879b61b1ad0bc90..f52e7b5b8d47c4fa42aa27cc5e36242fb16f7ab2 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
@@ -5,19 +5,26 @@ import styled from 'styled-components';
import BlockElementGroup from './BlockElementGroup';
const Wrapper = styled.div`
+ padding: 8px;
+
> div:not(:last-child) {
margin-bottom: 8px;
}
`;
const BlockLevelTools = props => {
- const { groups } = props;
+ const { groups, view } = props;
return (
<Wrapper>
{groups &&
groups.map(group => (
- <BlockElementGroup groupName={group.groupName} items={group.items} />
+ <BlockElementGroup
+ groupName={group.groupName}
+ key={group.groupName}
+ items={group.items}
+ view={view}
+ />
))}
</Wrapper>
);
@@ -29,7 +36,7 @@ BlockLevelTools.propTypes = {
groupName: PropTypes.string,
items: PropTypes.arrayOf(
PropTypes.shape({
- content: PropTypes.string,
+ label: PropTypes.string,
}),
),
}),
diff --git a/wax-prosemirror-components/src/ui/tabs/Tabs.js b/wax-prosemirror-components/src/ui/tabs/Tabs.js
index 1d56c32eca113a4f964c0d30648181c4fe882e78..e2751296d4afc136c8bae37b6d97f3a641398055 100644
--- a/wax-prosemirror-components/src/ui/tabs/Tabs.js
+++ b/wax-prosemirror-components/src/ui/tabs/Tabs.js
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
+import Icon from '../buttons/Icon';
const Wrapper = styled.div`
display: flex;
@@ -10,7 +11,6 @@ const Wrapper = styled.div`
const Tabs = styled.div`
display: flex;
flex-direction: column;
- margin-right: 10px;
`;
const activeTab = css`
@@ -18,23 +18,26 @@ const activeTab = css`
`;
const Tab = styled.div`
- height: 50px;
- width: 50px;
- background: papayawhip;
- margin-bottom: 5px;
+ background: gainsboro;
+ padding: 8px;
+ margin: 0 4px 4px 4px;
cursor: pointer;
+ &:first-child {
+ margin-top: 4px;
+ }
+
${props => props.active && activeTab}
&:hover {
- background: gray;
+ background: silver;
}
`;
const Content = styled.div`
width: 100%;
height: 100%;
- border: 1px solid gray;
+ background: gainsboro;
`;
const TabsPane = props => {
@@ -52,7 +55,7 @@ const TabsPane = props => {
key={tab.id}
onClick={() => setTabDisplay(tab.id)}
>
- {tab.displayName}
+ <Icon name={tab.icon} />
</Tab>
))}
</Tabs>
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index 9646ac493c158d741368c6e20e6585aa69ed8be2..4fe79e6856bf28fe05c1862ba3acd6314b10c52e 100644
--- a/wax-prosemirror-core/package.json
+++ b/wax-prosemirror-core/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"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 0cc74c051c84a69802f4f3b5c909ff95f0c3273c..a97c6c3afe14f9fcb2e038e5590f7a99ab740240 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -1,7 +1,6 @@
/* eslint react/prop-types: 0 */
import React, { useEffect, useState } from 'react';
import debounce from 'lodash/debounce';
-import styled from 'styled-components';
import { DOMSerializer, DOMParser } from 'prosemirror-model';
@@ -43,12 +42,6 @@ const createPlaceholder = placeholder => {
return Placeholder({ content: placeholder });
};
-const LayoutWrapper = styled.div`
- display: flex;
- flex-direction: column;
- height: 99%;
-`;
-
const Wax = props => {
let finalPlugins = [];
const [application, setApplication] = useState();
@@ -125,24 +118,23 @@ const Wax = props => {
const WaxRender = Layout.layoutComponent;
return (
- <LayoutWrapper className={`${className}`}>
- <WaxProvider app={application}>
- <WaxView
- autoFocus={autoFocus}
- readonly={readonly}
- options={WaxOptions}
- placeholder={placeholder}
- fileUpload={fileUpload}
- onBlur={onBlur || (v => true)}
- onChange={finalOnChange || (v => true)}
- debug={debug}
- TrackChange={TrackChange}
- user={user}
- >
- {({ editor }) => <WaxRender editor={editor} />}
- </WaxView>
- </WaxProvider>
- </LayoutWrapper>
+ <WaxProvider app={application}>
+ <WaxView
+ autoFocus={autoFocus}
+ readonly={readonly}
+ options={WaxOptions}
+ placeholder={placeholder}
+ fileUpload={fileUpload}
+ onBlur={onBlur || (v => true)}
+ onChange={finalOnChange || (v => true)}
+ debug={debug}
+ TrackChange={TrackChange}
+ user={user}
+ >
+ {({ editor }) => <WaxRender className={className} editor={editor} />}
+ </WaxView>
+ </WaxProvider>
);
};
+
export default Wax;
diff --git a/wax-prosemirror-layouts/package.json b/wax-prosemirror-layouts/package.json
index 5bc7e2b397ee45ef61c532b8c025c72119b38fc0..e96e5abf1cf8a9ce5068293f8e73fdc98e36b80c 100644
--- a/wax-prosemirror-layouts/package.json
+++ b/wax-prosemirror-layouts/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"description": "Wax prosemirror layouts",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 361b9ce6dcdb080e346671f44366b652789cdc5d..2fcf38483b947baba05697704b5f79e585b6af76 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
import PanelGroup from 'react-panelgroup';
import { InfoArea } from 'wax-prosemirror-components';
import { componentPlugin } from 'wax-prosemirror-services';
@@ -8,12 +8,7 @@ import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { WaxContext } from 'wax-prosemirror-core';
import EditorElements from './EditorElements';
-const LayoutWrapper = styled.div`
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 100%;
- overflow: hidden;
+const divider = css`
.divider {
&:before {
content: 'Notes';
@@ -61,124 +56,71 @@ const LayoutWrapper = styled.div`
}
`;
-const LeftMenuSurfaceContainer = styled.div`
+const Wrapper = styled.div`
display: flex;
- flex-direction: row;
+ flex-direction: column;
+
height: 100%;
width: 100%;
+ overflow: hidden;
+
+ ${divider}
`;
-const WaxSurfaceContainer = styled.div`
- flex: 1;
- position: relative;
- z-index: 1;
+const Main = styled.div`
display: flex;
- flex-direction: column;
- height: 100%;
- width: 100%;
+ flex-grow: 1;
`;
-const EditorContainer = styled.div`
- width: 65%;
- height: 100%;
- .ProseMirror {
- -moz-box-shadow: 0 0 8px #ecedf1;
- -webkit-box-shadow: 0 0 8px #ecedf1;
- box-shadow: 0 0 8px #ecedf1;
- min-height: 90%;
- padding: 30px 30px 30px 30px;
- @media (max-width: 600px) {
- padding: 65px 10px 10px 10px;
- }
- }
- @media (max-width: 600px) {
- width: 95%;
+const TopMenu = styled.div`
+ display: flex;
+ justify-content: center;
+ min-height: 40px;
+ user-select: none;
+ border-bottom: 2px solid #ecedf1;
+
+ > div:not(:last-child) {
+ border-right: 1px solid #ecedf1;
}
`;
+const SideMenu = styled.div`
+ border-right: 1px solid #ecedf1;
+ min-width: 250px;
+ height: 100%;
+`;
+
+const EditorArea = styled.div`
+ flex-grow: 1;
+`;
+
const WaxSurfaceScroll = styled.div`
- bottom: 0;
- left: 0;
- overflow: auto;
- position: absolute;
+ overflow-y: auto;
display: flex;
- right: 0;
- top: 0;
box-sizing: border-box;
padding: 0 2px 2px 2px;
height: 100%;
+ width: 100%;
+
${EditorElements};
`;
-const MainMenuContainer = styled.div`
- background: #fff;
- min-height: 52px;
- line-height: 32px;
- position: relative;
- width: 100%;
- user-select: none;
- border-bottom: 2px solid #ecedf1;
- @media (max-width: 600px) {
- position: absolute;
- /* width: 100%; */
- font-size: 10px;
- min-height: 72px;
- line-height: 0px;
- }
-`;
-const MainMenuInner = styled.div`
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
+const EditorContainer = styled.div`
+ width: 65%;
height: 100%;
- background: #fff;
- z-index: 9999;
- div {
- align-items: center;
- justify-content: center;
- @media (max-width: 600px) {
- justify-content: start;
- }
- }
-`;
-const SideMenuContainer = styled.div`
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- width: 14%;
- height: 98%;
- @media (max-width: 600px) {
- display: none;
+ .ProseMirror {
+ box-shadow: 0 0 8px #ecedf1;
+ min-height: 90%;
+ padding: 40px;
}
`;
-const SideMenuInner = styled.div`
+const CommentsContainer = styled.div`
display: flex;
- width: 100%;
- > div {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- margin-top: 35px;
- button {
- display: flex;
- flex-direction: column;
- font-family: ${props => props.theme.fontInterface};
- margin-left: 5%;
- width: 90%;
- }
- [data-name='Display'] {
- border-right: none;
- }
- }
+ flex-direction: column;
+ width: 35%;
+ height: 100%;
`;
const NotesAreaContainer = styled.div`
@@ -198,19 +140,6 @@ const NotesContainer = styled.div`
height: 100%;
width: 65%;
position: relative;
- @media (max-width: 600px) {
- width: 100%;
- }
-`;
-
-const CommentsContainer = styled.div`
- display: flex;
- flex-direction: column;
- width: 35%;
- height: 100%;
- @media (max-width: 600px) {
- width: auto;
- }
`;
let surfaceHeight = 700;
@@ -231,75 +160,65 @@ const hasNotes = main => {
};
const LeftSideBar = componentPlugin('leftSideBar');
-const RightSideBar = componentPlugin('rightSideBar');
+// const RightSideBar = componentPlugin('rightSideBar');
const TopBar = componentPlugin('topBar');
const NotesArea = componentPlugin('notesArea');
const RightArea = componentPlugin('rightArea');
const WaxOverlays = componentPlugin('waxOverlays');
-const withNotes = () => {
- return (
- <NotesAreaContainer>
- <NotesContainer id="notes-container">
- <NotesArea />
- </NotesContainer>
- <CommentsContainer>
- <RightArea area="notes" />
- </CommentsContainer>
- </NotesAreaContainer>
- );
-};
-
const EditoriaLayout = ({ editor }) => {
const {
view: { main },
} = useContext(WaxContext);
- let AreasWithNotes = null;
- if (main) {
- const notes = hasNotes(main);
- if (notes.length) AreasWithNotes = withNotes();
- }
+ const notes = main && hasNotes(main);
+ const showNotes = notes && !!notes.length && notes.length > 0;
return (
<ThemeProvider theme={cokoTheme}>
- <LayoutWrapper>
- <MainMenuContainer>
- <MainMenuInner>
- <TopBar />
- </MainMenuInner>
- </MainMenuContainer>
-
- <LeftMenuSurfaceContainer>
- <SideMenuContainer>
- <SideMenuInner>
- <LeftSideBar />
- </SideMenuInner>
- </SideMenuContainer>
-
- <PanelGroup
- direction="column"
- panelWidths={[
- { size: surfaceHeight, resize: 'dynamic' },
- { size: notesHeight, resize: 'stretch' },
- ]}
- onResizeEnd={onResizeEnd}
- >
- <WaxSurfaceContainer>
- <WaxSurfaceScroll className="wax-surface-scroll">
+ <Wrapper>
+ <TopMenu>
+ <TopBar />
+ </TopMenu>
+
+ <Main>
+ <SideMenu>
+ <LeftSideBar />
+ </SideMenu>
+
+ <EditorArea>
+ <PanelGroup
+ direction="column"
+ panelWidths={[
+ { size: surfaceHeight, resize: 'stretch' },
+ { size: notesHeight, resize: 'stretch' },
+ ]}
+ onResizeEnd={onResizeEnd}
+ >
+ <WaxSurfaceScroll>
<EditorContainer>{editor}</EditorContainer>
<CommentsContainer>
<RightArea area="main" />
</CommentsContainer>
</WaxSurfaceScroll>
- <RightSideBar />
- </WaxSurfaceContainer>
- {AreasWithNotes}
- </PanelGroup>
- </LeftMenuSurfaceContainer>
+
+ {showNotes && (
+ <NotesAreaContainer>
+ <NotesContainer id="notes-container">
+ <NotesArea />
+ </NotesContainer>
+ <CommentsContainer>
+ <RightArea area="notes" />
+ </CommentsContainer>
+ </NotesAreaContainer>
+ )}
+ </PanelGroup>
+ </EditorArea>
+ </Main>
+
<InfoArea />
<WaxOverlays />
- </LayoutWrapper>
+ </Wrapper>
</ThemeProvider>
);
};
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 3d8c1d20c54f8129411678d58d404369440901f0..a6f86c22e44ab848d46625fd1f075469a95b90ee 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/wax-prosemirror-plugins/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"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 424d4402dacca8ad1c0e572353e1917c7a04de5a..1bebb06e488daf95e5b5474a59684cd3e58925e4 100644
--- a/wax-prosemirror-schema/package.json
+++ b/wax-prosemirror-schema/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"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 9da4eae14ce49c0d6606647654776ca93c8e0dd4..1ea51a65b7a0d4af93ae5a00aec159608fffcf97 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -41,3 +41,5 @@ export { default as TextToolGroupService } from './src/WaxToolGroups/TextToolGro
export { default as NoteToolGroupService } from './src/WaxToolGroups/NoteToolGroupService/NoteToolGroupService';
export { default as CodeBlockToolGroupService } from './src/WaxToolGroups/CodeBlockToolGroupService/CodeBlockToolGroupService';
export { default as TrackChangeToolGroupService } from './src/WaxToolGroups/TrackChangeToolGroupService/TrackChangeToolGroupService';
+
+export { default as DisplayTextToolGroupService } from './src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService';
diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json
index fdb963eb09b70b3de3758074adfb0dd2e0bf8bcc..beab4008e6751edaba7e36e78a8ca2df24711490 100644
--- a/wax-prosemirror-services/package.json
+++ b/wax-prosemirror-services/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"description": "Wax prosemirror services",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
index 095a111d3ecada49add4c7162de42e5fe7723353..7d0a8b008c3bc26cab83505ca0b412f76dec3f40 100644
--- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
+++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
@@ -1,13 +1,12 @@
import { redo } from 'prosemirror-history';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Redo extends Tools {
- title = 'Redo last undone change';
- content = icons.redo;
+ title = 'Redo';
+ icon = 'redo';
onlyOnMain = true;
name = 'Redo';
diff --git a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
index 6351636115b1054ff66e9fca91dc91d0b702c552..e593e832ce70cd43aa58299b417d6bbd4f45f707 100644
--- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
+++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
@@ -1,13 +1,12 @@
import { undo } from 'prosemirror-history';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Undo extends Tools {
- title = 'Undo last change';
- content = icons.undo;
+ title = 'Undo';
+ icon = 'undo';
onlyOnMain = true;
name = 'Undo';
diff --git a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
index 49bba48d517a3287aeaacc3a6bfb7503336a8b20..f490f7623b364de489af889fc860f7172cd1a90a 100644
--- a/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
+++ b/wax-prosemirror-services/src/CodeBlockService/CodeBlockTool.js
@@ -1,12 +1,11 @@
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import { setBlockType } from 'prosemirror-commands';
import Tools from '../lib/Tools';
@injectable()
class CodeBlockTool extends Tools {
title = 'Insert Code Block';
- content = icons.code_block;
+ icon = 'codeBlock';
name = 'CodeBlockTool';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js b/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
index eef6df395685f07c6710aaec1d4c93ace215ed29..18e843d46f5f74019bff19790d3d8f74fa15a016 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
@injectable()
class Author extends Tools {
title = 'Change to Author';
- content = 'Author';
+ label = 'Author';
name = 'Author';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
index 86703bcc9a7adb099cbbafc975ef5c54037aed69..ef7b404fbf01d239cd441a7fde12a5e280afe9e3 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
@injectable()
class EpigraphPoetry extends Tools {
title = 'Change to Epigraph Poetry';
- content = 'Epigraph Poetry';
+ label = 'Epigraph Poetry';
name = 'EpigraphPoetry';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
index 170d559d8fcb443cc9284fc47cbca5d3f3331330..eebf0a30c24e5a2e21c6e50393ab6d12e8b13658 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
@@ -6,7 +6,7 @@ export default
@injectable()
class EpigraphProse extends Tools {
title = 'Change to Epigraph Prose';
- content = 'Epigraph Prose';
+ label = 'Epigraph Prose';
name = 'EpigraphProse';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading1.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading1.js
index c064fd69544ea3ed6ba6fba0840badd77e2403b3..cb21632813e39978dd90e2d226270d5e990b1d6d 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading1.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading1.js
@@ -6,7 +6,7 @@ export default
@injectable()
class Heading1 extends Tools {
title = 'Change to heading level 1';
- content = 'Heading 1';
+ label = 'Heading 1';
name = 'Heading1';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
index 061b45e86aca54e7d6a118d4943ab5a1ff2cea9c..23bf3763961e6eab6e21d0327cfc7f81d6046272 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
@@ -6,7 +6,7 @@ export default
@injectable()
class Heading2 extends Tools {
title = 'Change to heading level 2';
- content = 'Heading 2';
+ label = 'Heading 2';
name = 'Heading2';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
index 642e44d3401ba3a0ecfa1a5ed9f3f4c7752e0417..01e16ca8e771fd2cf3cadfee41916a037add87ec 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
@@ -6,7 +6,7 @@ export default
@injectable()
class Heading3 extends Tools {
title = 'Change to heading level 3';
- content = 'Heading 3';
+ label = 'Heading 3';
name = 'Heading3';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js b/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
index ee18810ff1b2fad7eb702a8d0be737b437232f5d..cb14ab9fe6532e60d31d19693dc7304672adc44b 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
@@ -1,11 +1,12 @@
-import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
import { Commands } from 'wax-prosemirror-utilities';
+import Tools from '../../lib/Tools';
+export default
@injectable()
-export default class SubTitle extends Tools {
+class SubTitle extends Tools {
title = 'Change to Subtitle';
- content = 'Subtitle';
+ label = 'Subtitle';
name = 'SubTitle';
get run() {
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/TitleService/Title.js b/wax-prosemirror-services/src/DisplayBlockLevel/TitleService/Title.js
index 37a70eb6ad32b05e75c4e3cf001e1ac117759565..443be005b94823baa770aca815c96d4e58332f18 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/TitleService/Title.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/TitleService/Title.js
@@ -2,10 +2,11 @@ import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
import { Commands } from 'wax-prosemirror-utilities';
+export default
@injectable()
-export default class Title extends Tools {
+class Title extends Tools {
title = 'Change to Title';
- content = 'Title';
+ label = 'Title';
name = 'Title';
get run() {
diff --git a/wax-prosemirror-services/src/ImageService/Image.js b/wax-prosemirror-services/src/ImageService/Image.js
index 83c3f235c3c7673f25f348a7b72ff631e11f8e4f..22bf37ced95cfbe19379fa87a1139db32021aa39 100644
--- a/wax-prosemirror-services/src/ImageService/Image.js
+++ b/wax-prosemirror-services/src/ImageService/Image.js
@@ -2,7 +2,7 @@ import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import { isEmpty } from 'lodash';
import { injectable } from 'inversify';
-import { icons, ImageUpload } from 'wax-prosemirror-components';
+import { ImageUpload } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../lib/Tools';
import fileUpload from './fileUpload';
@@ -11,7 +11,7 @@ export default
@injectable()
class Image extends Tools {
title = 'Insert image';
- content = icons.image;
+ icon = 'image';
name = 'Image';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js b/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js
index 413d7b842f2ecc449550ef0a029deb65428a0851..2310e5d6a4d1f07d485016de16e44a910e4280d1 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js
@@ -1,14 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Code extends Tools {
title = 'Toggle code';
- content = icons.code;
+ icon = 'code';
name = 'Code';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js b/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js
index afacd594df18c469bec40fed3ef4e4c9c3e5a3f8..41d9472b647ad721cb672c6b738d5ff0289cfae3 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js
@@ -1,14 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Emphasis extends Tools {
title = 'Toggle emphasis';
- content = icons.em;
+ icon = 'italic';
name = 'Emphasis';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js b/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js
index c7e4da4d829a756d657ebb7d61bbb2b622162272..cc1517c23df779bf20ae799363b41a0128503754 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js
@@ -1,13 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
-import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+import Tools from '../../lib/Tools';
+export default
@injectable()
-export default class SmallCaps extends Tools {
+class SmallCaps extends Tools {
title = 'Toggle Small Caps';
- content = icons.small_caps;
+ icon = 'smallCaps';
name = 'SmallCaps';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js b/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js
index f070bc17d53b4bfc5a0330f0d612f8fa2bef3b4b..f7ef9e16ca682939fe1d86d02b9a79d55f4532ef 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js
@@ -1,14 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class StrikeThrough extends Tools {
title = 'Toggle strikethrough';
- content = icons.strikethrough;
+ icon = 'strikethrough';
name = 'StrikeThrough';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js b/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js
index ef85988a5c4e22db00ea89bb7c30216990de7e45..e0cdbdbaf332d346cb266493818b39eba1cdd558 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js
@@ -2,13 +2,12 @@ import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
export default
@injectable()
class Strong extends Tools {
title = 'Toggle strong';
- content = icons.strong;
+ icon = 'bold';
name = 'Strong';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js b/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js
index 9e5e1941054e0f18653f0285fb0eebd710624616..1b11f8d0b2b0476a24c13e7f9a48a6cd483cf8a5 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js
@@ -1,14 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Subscript extends Tools {
title = 'Toggle subscript';
- content = icons.subscript;
+ icon = 'subscript';
name = 'Subscript';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js b/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js
index 64fbd2a46b8bf71cbab10aa0238d61aabc822d0b..7dd74cbc4f41b59ca78bdecb9d08649c8030910a 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js
@@ -1,14 +1,13 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Superscript extends Tools {
title = 'Toggle superscript';
- content = icons.superscript;
+ icon = 'superscript';
name = 'Superscript';
get run() {
diff --git a/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js b/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js
index 9947a98175c75c16c86393c9e859baf58c955abc..0113f357196a8d28b5747d053303b9f4ba7634ae 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js
@@ -1,14 +1,14 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Underline extends Tools {
title = 'Toggle underline';
- content = icons.underline;
+ // content = icons.underline;
+ icon = 'underline';
name = 'Underline';
get run() {
diff --git a/wax-prosemirror-services/src/LinkService/LinkTool.js b/wax-prosemirror-services/src/LinkService/LinkTool.js
index ca9e24b66860e87bc89894898302f6a346abaee7..c8301594fa42ea8c21d2f8d8a307c330039f6459 100644
--- a/wax-prosemirror-services/src/LinkService/LinkTool.js
+++ b/wax-prosemirror-services/src/LinkService/LinkTool.js
@@ -2,12 +2,11 @@ import { injectable } from 'inversify';
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../lib/Tools';
-import { icons } from 'wax-prosemirror-components';
@injectable()
export default class LinkTool extends Tools {
title = 'Add or remove link';
- content = icons.link;
+ icon = 'link';
name = 'LinkTool';
get run() {
diff --git a/wax-prosemirror-services/src/ListsService/BulletListService/BulletList.js b/wax-prosemirror-services/src/ListsService/BulletListService/BulletList.js
index 7eaed9bc1b3819b7f38a51ad78eb7a7118f65863..993287546a73582e6260b843c9769cda1c384816 100644
--- a/wax-prosemirror-services/src/ListsService/BulletListService/BulletList.js
+++ b/wax-prosemirror-services/src/ListsService/BulletListService/BulletList.js
@@ -9,6 +9,7 @@ export default
class BulletList extends Tools {
title = 'Wrap in bullet list';
content = icons.bullet_list;
+ icon = 'bulletList';
name = 'BulletList';
get run() {
diff --git a/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js b/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js
index 41239d9867c259c4dae361f2b8a08ef2d510ca6c..f02acabf2b087ba465a6fc43f5337226a9b4d4cd 100644
--- a/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js
+++ b/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js
@@ -1,24 +1,23 @@
import { joinUp } from 'prosemirror-commands';
-import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+import Tools from '../../lib/Tools';
export default
@injectable()
class JoinUp extends Tools {
title = 'Join with above block';
- content = icons.join_up;
+ icon = 'arrowUp';
name = 'JoinUp';
get run() {
return joinUp;
}
- get enable() {
- return joinUp;
- }
-
select(state) {
return joinUp(state);
}
+
+ get enable() {
+ return joinUp;
+ }
}
diff --git a/wax-prosemirror-services/src/ListsService/LiftService/Lift.js b/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
index 452d24663b00073189e5bb79ea653cbc4acc5b1d..e6966e185aef035665924390440f714eb248a0fe 100644
--- a/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
+++ b/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
@@ -1,15 +1,18 @@
import { lift } from 'prosemirror-commands';
-import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+import Tools from '../../lib/Tools';
export default
@injectable()
class Lift extends Tools {
title = 'Lift out of enclosing block';
- content = icons.lift;
+ icon = 'indentDecrease';
name = 'Lift';
+ select(state) {
+ return lift(state);
+ }
+
get run() {
return lift;
}
diff --git a/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js b/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
index 7cf174b453862fef49cc07df1e1681f6ef3b33c1..7a0f67cdca76938635e5c8d3c99d3253c64ce049 100644
--- a/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
+++ b/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
@@ -1,13 +1,13 @@
-import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import { wrapInList } from 'prosemirror-schema-list';
import { Commands } from 'wax-prosemirror-utilities';
+import Tools from '../../lib/Tools';
+export default
@injectable()
-export default class OrderedList extends Tools {
+class OrderedList extends Tools {
title = 'Wrap in ordered list';
- content = icons.ordered_list;
+ icon = 'numberedList';
name = 'OrderedList';
get run() {
diff --git a/wax-prosemirror-services/src/MenuService/MenuWrapper.js b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
index e546894e6e39ec17e840be5d585ca0194cd570df..5b67f631aa0cecb92704f784686b2088c4989fed 100644
--- a/wax-prosemirror-services/src/MenuService/MenuWrapper.js
+++ b/wax-prosemirror-services/src/MenuService/MenuWrapper.js
@@ -1,22 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
+/* eslint no-underscore-dangle: 0 */
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
import { map } from 'lodash';
-
-const MainMenu = styled.div`
- display: flex;
- flex-wrap: wrap;
- background: #fff;
- padding: 2px 2px 2px 0;
- position: relative;
-`;
+import { ToolGroupComponent, ToolGroups } from 'wax-prosemirror-components';
const MainMenuBar = ({ items = [], view }) => {
- return (
- <MainMenu key="MainMenu">
- {map(items, item => item.renderTools(view))}
- </MainMenu>
- );
+ return <>{map(items, item => item.renderTools(view))}</>;
};
export default MainMenuBar;
diff --git a/wax-prosemirror-services/src/NoteService/Note.js b/wax-prosemirror-services/src/NoteService/Note.js
index dea7314ffcee8d24481c74135790aadf9e084617..17e97dc216e7ddde4f7025d8b36889553a9835a2 100644
--- a/wax-prosemirror-services/src/NoteService/Note.js
+++ b/wax-prosemirror-services/src/NoteService/Note.js
@@ -1,6 +1,5 @@
import Tools from '../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
import { Fragment } from 'prosemirror-model';
import { v4 as uuidv4 } from 'uuid';
@@ -8,7 +7,7 @@ export default
@injectable()
class Note extends Tools {
title = 'Insert Note';
- content = icons.footnote;
+ icon = 'note';
name = 'Note';
get run() {
@@ -35,7 +34,7 @@ class Note extends Tools {
get enable() {
return state => {
- return true;
+ return false;
};
}
}
diff --git a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
index f336a12e68903efb65f88b16e08a1980f4e1ed03..5ab8f5f4276d663d8d93326dc902a7dcdf3e6d2b 100644
--- a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
+++ b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
@@ -3,15 +3,14 @@ import { isEmpty } from 'lodash';
import { v4 as uuidv4 } from 'uuid';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons, CreateTable } from 'wax-prosemirror-components';
-
+import { CreateTable } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Table extends Tools {
title = 'Insert table';
- content = icons.table;
+ icon = 'table';
name = 'Table';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js b/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
index e2e0d3c6ab3019a344dce61dd0f4b4c410993677..f5e8521959a0a62f3bd6ceddfade26f02ddd491d 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
@@ -5,7 +5,7 @@ import { wrapIn } from 'prosemirror-commands';
@injectable()
class BlockQuote extends Tools {
title = 'Change to Block Quote';
- content = 'Block Quote';
+ label = 'Block Quote';
name = 'BlockQuote';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js b/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
index 529cc75c3accf8a48e5a29fdf02912081e5053a2..46e9adf51cfc6399bf078233c4ea102a25cdc527 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
@injectable()
class ExtractPoetry extends Tools {
title = 'Change to Extract Poetry';
- content = 'Extract Poetry';
+ label = 'Extract Poetry';
name = 'ExtractPoetry';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js b/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
index 7e2d707b1952212b230a843f4c07a05c6c8571a7..8573250630e87481cdc253d3a0991c4a5087f299 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
@injectable()
class ExtractProse extends Tools {
title = 'Change to Extract Prose';
- content = 'Extract Prose';
+ label = 'Extract Prose';
name = 'ExtractProse';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js b/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
index 926eb25882765d5906992f7dddfb0ba5fee33ea9..203509e551cf5c8467554ae199ff3a76101162ac 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
@@ -5,7 +5,7 @@ import Tools from '../../lib/Tools';
@injectable()
class ParagraphContinued extends Tools {
title = 'Change to Paragraph Continued';
- content = 'Paragraph Continued';
+ label = 'Paragraph Continued';
name = 'ParagraphContinued';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js b/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
index f7c892c42b6901266de0765c3be819bff5c53ff3..1554be67dd2d501a2a22a2b4a232dcbb3ab90086 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
@@ -2,11 +2,11 @@ import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
import { Commands } from 'wax-prosemirror-utilities';
-export default
+export default
@injectable()
class Paragraph extends Tools {
title = 'Change to Paragraph';
- content = 'Paragraph';
+ label = 'Paragraph';
name = 'Paragraph';
get run() {
diff --git a/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js b/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
index c641f496c8f74db8f7b72652261e6c2909eafb92..99e94d5e3c695c3fd50fa2da69b7a3ca360c0f28 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
@@ -5,7 +5,7 @@ import { Commands } from 'wax-prosemirror-utilities';
@injectable()
class SourceNote extends Tools {
title = 'Change to Source Note';
- content = 'Source Note';
+ label = 'Source Note';
name = 'SourceNote';
get run() {
diff --git a/wax-prosemirror-services/src/TrackChangeService/AcceptTrackChangeService/AcceptTrackChange.js b/wax-prosemirror-services/src/TrackChangeService/AcceptTrackChangeService/AcceptTrackChange.js
index dc63a32a7d8b5416553217a9605ff8709f231785..d4debc43ae838a8e90c3ae21a6e32f7ebb3efb82 100644
--- a/wax-prosemirror-services/src/TrackChangeService/AcceptTrackChangeService/AcceptTrackChange.js
+++ b/wax-prosemirror-services/src/TrackChangeService/AcceptTrackChangeService/AcceptTrackChange.js
@@ -8,7 +8,7 @@ export default
@injectable()
class AcceptTrackChange extends Tools {
title = 'Accept Changes';
- content = 'Accept';
+ label = 'Accept';
name = 'AcceptTrackChange';
get run() {
diff --git a/wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChange.js b/wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChange.js
index 9ad60b2b5edb938786aee79ca379bddf32752cb8..ed551651aef9138c85097689a6ee247699cd923b 100644
--- a/wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChange.js
+++ b/wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChange.js
@@ -9,7 +9,7 @@ export default
@injectable()
class EnableTrackChange extends Tools {
title = 'Toggle Track Changes';
- content = 'track changes';
+ label = 'Track Changes';
name = 'EnableTrackChange';
get run() {
diff --git a/wax-prosemirror-services/src/TrackChangeService/RejectTrackChangeService/RejectTrackChange.js b/wax-prosemirror-services/src/TrackChangeService/RejectTrackChangeService/RejectTrackChange.js
index 113bdec11bea9fe88bef3493caaf66a06184ab06..4a7e4de3dc9928364c38d88208d38b9a65369817 100644
--- a/wax-prosemirror-services/src/TrackChangeService/RejectTrackChangeService/RejectTrackChange.js
+++ b/wax-prosemirror-services/src/TrackChangeService/RejectTrackChangeService/RejectTrackChange.js
@@ -13,7 +13,7 @@ export default
@injectable()
class RejectTrackChange extends Tools {
title = 'Reject Changes';
- content = 'Reject';
+ label = 'Reject';
name = 'RejectTrackChange';
get run() {
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
new file mode 100644
index 0000000000000000000000000000000000000000..481200f5b7fccfc4441436604e9b52cb3bab2143
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { injectable, inject } from 'inversify';
+import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components';
+import ToolGroup from '../../lib/ToolGroup';
+import { isEmpty } from 'lodash';
+import styled from 'styled-components';
+
+const Empty = styled.div`
+ background: khaki;
+ height: 100%;
+`;
+
+@injectable()
+class DisplayText extends ToolGroup {
+ tools = [];
+ toolGroups = [];
+
+ constructor(@inject('Display') display, @inject('Text') text) {
+ super();
+ this.toolGroups = [
+ {
+ name: 'TabA',
+ groups: [display, text],
+ },
+ ];
+ }
+
+ renderTools(view) {
+ if (isEmpty(view)) return null;
+
+ const first = {
+ id: '1',
+ icon: 'title',
+ component: (
+ <BlockLevelTools
+ groups={this._toolGroups[0].groups.map(group => ({
+ groupName: group.title.props.title,
+ items: group._tools,
+ }))}
+ view={view}
+ />
+ ),
+ };
+
+ const second = {
+ id: '2',
+ icon: 'code',
+ component: <Empty />,
+ };
+
+ const tabList = [first, second];
+ return <Tabs tabList={tabList} />;
+ }
+}
+
+export default DisplayText;
diff --git a/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService.js b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService.js
new file mode 100644
index 0000000000000000000000000000000000000000..77996124eab69416cafbe320d079d6a50e840cf9
--- /dev/null
+++ b/wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayTextToolGroupService.js
@@ -0,0 +1,10 @@
+import Service from '../../Service';
+import DisplayText from './DisplayText';
+
+class DisplayTextToolGroupService extends Service {
+ register() {
+ this.container.bind('DisplayText').to(DisplayText);
+ }
+}
+
+export default DisplayTextToolGroupService;
diff --git a/wax-prosemirror-services/src/lib/ToolGroup.js b/wax-prosemirror-services/src/lib/ToolGroup.js
index 93ce54c133e1d655e7239f7c61dbc1b603937977..60d6393c9d175109594c22baae10fbf9b7bc48d9 100644
--- a/wax-prosemirror-services/src/lib/ToolGroup.js
+++ b/wax-prosemirror-services/src/lib/ToolGroup.js
@@ -1,18 +1,24 @@
import React, { useState } from 'react';
import { injectable } from 'inversify';
-import { ToolGroupComponent } from 'wax-prosemirror-components';
+import { ToolGroupComponent, ToolGroups } from 'wax-prosemirror-components';
import { v4 as uuidv4 } from 'uuid';
+export default
@injectable()
-export default class ToolGroup {
+class ToolGroup {
_config = {};
title = '';
_tools = [];
- constructor() {}
+ _toolGroups = [];
+
setGroupConfig(config) {
this._config = config;
}
+ set toolGroups(groups) {
+ this._toolGroups = groups;
+ }
+
excludeIncludeTools() {
const { exclude = [], include = [] } = this._config;
@@ -52,6 +58,9 @@ export default class ToolGroup {
renderTools(view) {
const { name } = this.constructor;
+ if (this._toolGroups > 0) {
+ return <ToolGroups toolGroups={this._toolGroups} view={view} />;
+ }
return (
<ToolGroupComponent
key={uuidv4()}
diff --git a/wax-prosemirror-services/src/lib/Tools.js b/wax-prosemirror-services/src/lib/Tools.js
index 4d9e90bfdbfb16f6d775a42ea7ec9eb2c91df3a6..47412051b5e51a384caefa2c8fb33391a47927ac 100644
--- a/wax-prosemirror-services/src/lib/Tools.js
+++ b/wax-prosemirror-services/src/lib/Tools.js
@@ -7,7 +7,6 @@ import { Button } from 'wax-prosemirror-components';
@injectable()
class Tools {
title = 'title';
- content = 'content';
_isDisplayed = true;
_isHiddenInToolGroup = false;
onlyOnMain = false;
@@ -42,7 +41,8 @@ class Tools {
toJSON() {
return {
title: this.title,
- content: this.content,
+ icon: this.icon,
+ label: this.label,
active: this.active,
run: this.run,
enable: this.enable,
diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json
index e920da9067e237ea679a59d9c2c7e8292ad0e0c6..b7995221b207c0098907fc2f4ff6671269e3e6a5 100644
--- a/wax-prosemirror-themes/package.json
+++ b/wax-prosemirror-themes/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"description": "Wax prosemirror themes",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index ba3b33623bce4a29a35799fdb9dc603007538bd1..33976a2e491bf1f29398d242e5d440ec734abac1 100644
--- a/wax-prosemirror-utilities/package.json
+++ b/wax-prosemirror-utilities/package.json
@@ -4,7 +4,7 @@
"version": "0.0.19",
"description": "Wax prosemirror utilities",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],