diff --git a/stories/buttons/MenuButton.stories.js b/stories/buttons/MenuButton.stories.js
index eab09db067e6eee9655faf3095a66d6761af0864..eee2799c1f9bba5c9f63d93c86525bb4096d32b8 100644
--- a/stories/buttons/MenuButton.stories.js
+++ b/stories/buttons/MenuButton.stories.js
@@ -17,6 +17,7 @@ export const Base = () => {
active={active}
iconName="boldSvg"
onClick={() => setActive(!active)}
+ title="bold"
/>
</Demo>
);
diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 85cf9df094a3b0ca9905ef4ee68277b3a5332bd3..9354174abf8f18c9c4191dfcbd83e9156ca26b19 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,45 +1,74 @@
-/* eslint react/prop-types: 0 */
import React, { useContext } 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 Button = ({ view = {}, item }) => {
+ const { active, enable, icon, onlyOnMain, run, title } = item;
+
+ // let view = {};
+
const {
view: { main },
- activeViewId,
+ // activeViewId,
} = useContext(WaxContext);
- if (item.onlyOnMain) {
- view = main;
- }
+
+ if (onlyOnMain) view = main;
+
+ const { dispatch, state } = view;
+
+ const handleClick = e => {
+ // e.preventDefault();
+ run(state, dispatch);
+ };
+
+ const isActive = active && active(state);
+
+ const isDisabled = enable && !enable(state);
+ // &&
+ // item.select &&
+ // item.select(view.state, activeViewId);
+
+ // console.log(item);
+
+ // 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>
+ // );
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}
+ onClick={handleClick}
+ title={title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 965f46be22f609676998bb98e9f8bf81a6acc9d1..c4aa0b7a6a0e4f47998ef8e5f6ff852f5d67369c 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/wax-prosemirror-components/src/components/ImageUpload.js
@@ -1,35 +1,43 @@
/* 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';
+import MenuButton from '../ui/buttons/MenuButton';
+
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 {
- }
+
input {
display: none;
}
`;
+
+// TO DO -- select should be done with MenuButton's disabled prop
+
const ImageUpload = ({ item, fileUpload, view }) => {
const { activeViewId } = useContext(WaxContext);
+
+ const inputRef = useRef(null);
+ const handleClick = () => 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}
+ <label htmlFor="file-upload">
+ <MenuButton
+ active={false}
+ disabled={false}
+ iconName={item.icon}
+ onClick={handleClick}
+ title="Upload Image"
+ />
+
<input
id="file-upload"
+ ref={inputRef}
onChange={e => fileUpload(e.target.files[0])}
type="file"
/>
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index 62d3986303919d74987d5cb3386b582ec1d37f90..f6861aabff0437c2e2c23669345b8c96f80ac94e 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { isFunction } from "lodash";
-import styled from "styled-components";
-import icons from "../icons/icons";
+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;
@@ -27,6 +27,8 @@ const InnerStyled = styled.div`
right: 100%;
`;
+const MoreIcon = icons.more;
+
const ToolGroupComponent = ({ view, tools, name, title }) => {
const [more, showHide] = useState(false),
toolsShown = [],
@@ -45,13 +47,13 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
{toolsShown}
{rest.length && !more ? (
<MoreButton title="show more tools" onClick={() => showHide(!more)}>
- {icons.ellipses}
+ <MoreIcon />
</MoreButton>
) : null}
{more && (
<div>
<MoreButton title="hide" onClick={() => showHide(!more)}>
- {icons.ellipses}
+ <MoreIcon />
</MoreButton>
<InnerStyled>{rest}</InnerStyled>
</div>
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index e590e6a758d520a29da696cc8905ff2048840f0b..2285e72007c59506ed137a539f73896e1b2f2534 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,34 +1,37 @@
/* eslint react/prop-types: 0 */
import React, { useState, useContext } 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 Dropdown from '../../ui/buttons/Dropdown';
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 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;
-`;
+// const InsertTableToolContainer = styled.div`
+// display: block !important;
+// height: auto;
+// top: 53px;
+// left: 556px;
+// position: absolute;
+// `;
const CreateTable = ({ view = {}, item }) => {
const {
view: { main },
- activeViewId,
+ // activeViewId,
} = useContext(WaxContext);
if (item.onlyOnMain) {
view = main;
@@ -37,34 +40,52 @@ const CreateTable = ({ view = {}, item }) => {
const { state, dispatch } = view;
const [isTableToolDisplayed, setTableToolDisplay] = useState(false);
- const CreateButton = (
- <ButtonStyled
- type="button"
- isActive={isTableToolDisplayed}
- title={item.title}
- disabled={item.enable && !item.enable(view.state)}
- onMouseDown={e => {
- e.preventDefault();
- setTableToolDisplay(!isTableToolDisplayed);
- }}
- select={item.select && item.select(view.state, activeViewId)}
- >
- {item.content}
- </ButtonStyled>
- );
- return isTableToolDisplayed ? (
- <>
- {CreateButton}
- <InsertTableToolContainer>
+ // const CreateButton = (
+ // <ButtonStyled
+ // type="button"
+ // isActive={isTableToolDisplayed}
+ // title={item.title}
+ // disabled={item.enable && !item.enable(view.state)}
+ // onMouseDown={e => {
+ // e.preventDefault();
+ // setTableToolDisplay(!isTableToolDisplayed);
+ // }}
+ // 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}</>
+ // );
+
+ // select pending
+ return (
+ <Dropdown
+ active={isTableToolDisplayed}
+ dropComponent={
<InsertTableTool
onGridSelect={colRows => {
item.run(colRows, state, dispatch);
}}
/>
- </InsertTableToolContainer>
- </>
- ) : (
- <>{CreateButton}</>
+ }
+ iconName={item.icon}
+ disabled={item.enable && !item.enable(view.state)}
+ onClick={() => setTableToolDisplay(!isTableToolDisplayed)}
+ title={item.title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js
index 742f9a9b0765e19d6844c3cf3682e5937d8c1390..da53ef8ea0bc6a263e6fefeceb6e04fc02e41136 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 handleClick = () => {
+ 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"
+ onClick={handleClick}
+ title={item.title}
+ />
);
};
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index f05b63cde1ef63e380352966cb958b36b7555c81..5a0fd281848b4d462c3fe954a5a9eee08803bde9 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/wax-prosemirror-components/src/icons/icons.js
@@ -1,3 +1,7 @@
+/**
+ * SVG source for icons: https://material.io/resources/icons
+ */
+
import React from 'react';
import styled from 'styled-components';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
@@ -43,50 +47,50 @@ const Svg = styled.svg.attrs(() => ({
`;
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} />,
+ // 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} />,
+ // 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>
- ),
+ // 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 }) => (
@@ -101,4 +105,161 @@ export default {
<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>
+ ),
+ 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>
+ ),
};
diff --git a/wax-prosemirror-components/src/ui/buttons/Dropdown.js b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
index 5866460f67c8573fc244be7cd16a44c426efebe6..6548f8e700e0b5163998dff16005280dbb47d91a 100644
--- a/wax-prosemirror-components/src/ui/buttons/Dropdown.js
+++ b/wax-prosemirror-components/src/ui/buttons/Dropdown.js
@@ -14,7 +14,7 @@ const DropWrapper = styled.div`
`;
const Dropdown = props => {
- const { className, dropComponent, iconName, label } = props;
+ const { className, dropComponent, iconName, label, title } = props;
const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +27,7 @@ const Dropdown = props => {
iconName={iconName}
label={label}
onClick={() => setIsOpen(!isOpen)}
+ title={title}
/>
{isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
@@ -38,11 +39,13 @@ Dropdown.propTypes = {
dropComponent: PropTypes.node.isRequired,
iconName: PropTypes.string,
label: PropTypes.string,
+ title: PropTypes.string,
};
Dropdown.defaultProps = {
iconName: null,
label: null,
+ title: null,
};
export default Dropdown;
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
index f0bd1a42ea42a8b6e2423f631fc7cb0e52459a0d..d80da6252cb2fa4b10050b792fde0004b4e876a7 100644
--- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -29,7 +29,10 @@ const disabledStyles = css`
}
`;
-const Wrapper = styled.button`
+const Wrapper = styled.button.attrs(props => ({
+ title: props.title,
+ type: 'button',
+}))`
align-items: center;
background: none;
border: none;
@@ -65,7 +68,15 @@ const Label = styled.span`
`;
const MenuButton = props => {
- const { active, className, disabled, iconName, label, onClick } = props;
+ const {
+ active,
+ className,
+ disabled,
+ iconName,
+ label,
+ title,
+ onClick,
+ } = props;
return (
<Wrapper
@@ -73,6 +84,7 @@ const MenuButton = props => {
className={className}
disabled={disabled}
onClick={onClick}
+ title={title}
>
{iconName && (
<StyledIcon active={active} disabled={disabled} name={iconName} />
@@ -88,11 +100,13 @@ MenuButton.propTypes = {
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-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
index 095a111d3ecada49add4c7162de42e5fe7723353..a0e60fdff28c06deafa1503163c0b499b67ca201 100644
--- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
+++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
@@ -1,13 +1,14 @@
import { redo } from 'prosemirror-history';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// 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;
+ // content = icons.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..04699b3908b572fbef71307bb6aea9bd7980f829 100644
--- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
+++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
@@ -1,13 +1,14 @@
import { undo } from 'prosemirror-history';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// 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;
+ // content = icons.undo;
+ icon = 'undo';
onlyOnMain = true;
name = 'Undo';
diff --git a/wax-prosemirror-services/src/ImageService/Image.js b/wax-prosemirror-services/src/ImageService/Image.js
index 83c3f235c3c7673f25f348a7b72ff631e11f8e4f..167b2c770c5cee6d9dca19fcff580fa652f7c330 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,8 @@ export default
@injectable()
class Image extends Tools {
title = 'Insert image';
- content = icons.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..8a4d0d5a22664e1afcaefdb5d13b3572b519d08f 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/CodeService/Code.js
@@ -1,14 +1,15 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Code extends Tools {
title = 'Toggle code';
- content = icons.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..2821a5a65ac10b13b46f53562177396c1f151010 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/EmphasisService/Emphasis.js
@@ -1,14 +1,15 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Emphasis extends Tools {
title = 'Toggle emphasis';
- content = icons.em;
+ // 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..19388f588167756f783395aa2c39b38354f857a8 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SmallCapsService/SmallCaps.js
@@ -2,12 +2,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 { icons } from 'wax-prosemirror-components';
@injectable()
export default class SmallCaps extends Tools {
title = 'Toggle Small Caps';
- content = icons.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..7b4d549d5585699e785299fcf59da54d218f59ee 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/StrikeThroughService/StrikeThrough.js
@@ -8,7 +8,8 @@ export default
@injectable()
class StrikeThrough extends Tools {
title = 'Toggle strikethrough';
- content = icons.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..93a0adade6eef37e0029f416673a229118ec49fd 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/StrongService/Strong.js
@@ -2,13 +2,14 @@ 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 { icons } from 'wax-prosemirror-components';
export default
@injectable()
class Strong extends Tools {
title = 'Toggle strong';
- content = icons.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..39f229b3e17f328e803a554a05fb4660c7a94932 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SubscriptService/Subscript.js
@@ -1,14 +1,15 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Subscript extends Tools {
title = 'Toggle subscript';
- content = icons.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..b8b7515b4a4f64f14c6bd15cca011f8ef1cf5158 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/SuperscriptService/Superscript.js
@@ -1,14 +1,15 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
export default
@injectable()
class Superscript extends Tools {
title = 'Toggle superscript';
- content = icons.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..d4dec7135552792967528feccd8bdf1b81e0141b 100644
--- a/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js
+++ b/wax-prosemirror-services/src/InlineAnnotations/UnderlineService/Underline.js
@@ -1,14 +1,15 @@
import { toggleMark } from 'prosemirror-commands';
import { Commands } from 'wax-prosemirror-utilities';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// 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..c4c17d9a17f95d1be06c89cbe9c9ec035938b0c8 100644
--- a/wax-prosemirror-services/src/LinkService/LinkTool.js
+++ b/wax-prosemirror-services/src/LinkService/LinkTool.js
@@ -2,12 +2,13 @@ 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';
+// import { icons } from 'wax-prosemirror-components';
@injectable()
export default class LinkTool extends Tools {
title = 'Add or remove link';
- content = icons.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..ffeb764dea0348e9918a2273253e85927a8a4d22 100644
--- a/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js
+++ b/wax-prosemirror-services/src/ListsService/JoinUpService/JoinUp.js
@@ -1,13 +1,14 @@
import { joinUp } from 'prosemirror-commands';
import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
export default
@injectable()
class JoinUp extends Tools {
title = 'Join with above block';
- content = icons.join_up;
+ // content = icons.join_up;
+ icon = 'arrowUp';
name = 'JoinUp';
get run() {
diff --git a/wax-prosemirror-services/src/ListsService/LiftService/Lift.js b/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
index 452d24663b00073189e5bb79ea653cbc4acc5b1d..6ce31b84860d8602a307222a350c1b40e126f206 100644
--- a/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
+++ b/wax-prosemirror-services/src/ListsService/LiftService/Lift.js
@@ -1,13 +1,14 @@
import { lift } from 'prosemirror-commands';
import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
export default
@injectable()
class Lift extends Tools {
title = 'Lift out of enclosing block';
- content = icons.lift;
+ // content = icons.lift;
+ icon = 'indentDecrease';
name = 'Lift';
get run() {
diff --git a/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js b/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
index 7cf174b453862fef49cc07df1e1681f6ef3b33c1..33085ba1557a0aab4fee5362391c082da84ef6a2 100644
--- a/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
+++ b/wax-prosemirror-services/src/ListsService/OrderedListService/OrderedList.js
@@ -1,13 +1,14 @@
import Tools from '../../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import { wrapInList } from 'prosemirror-schema-list';
import { Commands } from 'wax-prosemirror-utilities';
@injectable()
export default class OrderedList extends Tools {
title = 'Wrap in ordered list';
- content = icons.ordered_list;
+ // content = icons.ordered_list;
+ icon = 'numberedList';
name = 'OrderedList';
get run() {
diff --git a/wax-prosemirror-services/src/NoteService/Note.js b/wax-prosemirror-services/src/NoteService/Note.js
index dea7314ffcee8d24481c74135790aadf9e084617..8613909594ca923187b61471585cf60c0654de2a 100644
--- a/wax-prosemirror-services/src/NoteService/Note.js
+++ b/wax-prosemirror-services/src/NoteService/Note.js
@@ -1,6 +1,6 @@
import Tools from '../lib/Tools';
import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+// import { icons } from 'wax-prosemirror-components';
import { Fragment } from 'prosemirror-model';
import { v4 as uuidv4 } from 'uuid';
@@ -8,7 +8,8 @@ export default
@injectable()
class Note extends Tools {
title = 'Insert Note';
- content = icons.footnote;
+ // content = icons.footnote;
+ icon = 'note';
name = 'Note';
get run() {
diff --git a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
index f336a12e68903efb65f88b16e08a1980f4e1ed03..473130e9a8ed6378119cbe0c11f3f6853dcbd80f 100644
--- a/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
+++ b/wax-prosemirror-services/src/TablesService/InsertTableService/Table.js
@@ -3,7 +3,7 @@ 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';
@@ -11,7 +11,8 @@ export default
@injectable()
class Table extends Tools {
title = 'Insert table';
- content = icons.table;
+ // content = icons.table;
+ icon = 'table';
name = 'Table';
get run() {
diff --git a/wax-prosemirror-services/src/lib/Tools.js b/wax-prosemirror-services/src/lib/Tools.js
index 4d9e90bfdbfb16f6d775a42ea7ec9eb2c91df3a6..72ff77be8163343e6cb59bcbd1d811d8299b0353 100644
--- a/wax-prosemirror-services/src/lib/Tools.js
+++ b/wax-prosemirror-services/src/lib/Tools.js
@@ -6,8 +6,8 @@ import { Button } from 'wax-prosemirror-components';
@injectable()
class Tools {
- title = 'title';
- content = 'content';
+ // title = 'title';
+ // content = 'content';
_isDisplayed = true;
_isHiddenInToolGroup = false;
onlyOnMain = false;
@@ -42,7 +42,9 @@ class Tools {
toJSON() {
return {
title: this.title,
- content: this.content,
+ // content: this.content,
+ icon: this.icon,
+ label: this.label,
active: this.active,
run: this.run,
enable: this.enable,