diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index f3a5082cd16efe2fd42d56ae3e7912e9f4e47e41..41b239ecfa76a233c7b87961013dbf3b2899c821 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -16,7 +16,8 @@ export { default as CreateTable } from './src/components/tables/CreateTable';
export { default as Tabs } from './src/ui/tabs/Tabs';
export { default as BlockLevelTools } from './src/ui/tabs/BlockLevelTools';
export { default as FindAndReplaceTool } from './src/components/findAndReplace/FindAndReplaceTool';
-export { default as FullScreen } from './src/components/FullScreen';
+export { default as FullScreen } from './src/components/various/FullScreen';
+export { default as LeftSideButton } from './src/components/various/LeftSideButton';
export { default as SpecialCharactersTool } from './src/components/specialCharacters/SpecialCharactersTool';
export { default as TextHighlightingTool } from './src/components/textHighlight/TextHighlightingTool';
export { default as EditorInfoTool } from './src/components/EditorInfo/CounterInfo/EditorInfoTool';
diff --git a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js
index 688b99c48be71bc57713713641ab2b66fc680ea0..14d71e2314b5d2be99743afe0c9ec92ff19d74a3 100644
--- a/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js
+++ b/wax-prosemirror-components/src/components/customtag/CustomTagBlockComponent.js
@@ -1,9 +1,17 @@
import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import { WaxContext } from 'wax-prosemirror-core';
import { v4 as uuidv4 } from 'uuid';
import MenuButton from '../../ui/buttons/MenuButton';
+const activeStyles = css`
+ pointer-events: none;
+`;
+
+const StyledButton = styled(MenuButton)`
+ ${props => props.active && activeStyles}
+`;
+
const Input = styled.input`
border: none;
border-bottom: 1px solid grey;
@@ -138,7 +146,7 @@ const CustomTagBlockComponent = ({ isShowTag, item }) => {
tagList.push(
<TagBoxWrapper key={uuidv4()}>
<Box key={uuidv4()} />
- <MenuButton
+ <StyledButton
active={tagStatus[blockTag.label]}
disabled={isDisabled}
key={uuidv4()}
diff --git a/wax-prosemirror-components/src/components/FullScreen.js b/wax-prosemirror-components/src/components/various/FullScreen.js
similarity index 96%
rename from wax-prosemirror-components/src/components/FullScreen.js
rename to wax-prosemirror-components/src/components/various/FullScreen.js
index 941c40f31bbf56de0e849e08b2fad3d37afd88ac..3e458f119c336412036ba0b2411d76f4001dccc2 100644
--- a/wax-prosemirror-components/src/components/FullScreen.js
+++ b/wax-prosemirror-components/src/components/various/FullScreen.js
@@ -3,7 +3,7 @@
import React, { useContext, useMemo } from 'react';
import { TextSelection } from 'prosemirror-state';
import { WaxContext } from 'wax-prosemirror-core';
-import MenuButton from '../ui/buttons/MenuButton';
+import MenuButton from '../../ui/buttons/MenuButton';
const Button = ({ view = {}, item }) => {
const { active, icon, label, select, title } = item;
diff --git a/wax-prosemirror-components/src/components/various/LeftSideButton.js b/wax-prosemirror-components/src/components/various/LeftSideButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..61b65e239a4c3fa3084a07d68c3b0507a0960c8a
--- /dev/null
+++ b/wax-prosemirror-components/src/components/various/LeftSideButton.js
@@ -0,0 +1,61 @@
+/* eslint react/prop-types: 0 */
+import React, { useContext, useMemo } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled, { css } from 'styled-components';
+import MenuButton from '../../ui/buttons/MenuButton';
+
+const activeStyles = css`
+ pointer-events: none;
+`;
+
+const StyledButton = styled(MenuButton)`
+ ${props => props.active && activeStyles}
+`;
+
+const LeftSideButton = ({ view = {}, item }) => {
+ const { active, icon, label, onlyOnMain, run, select, title } = item;
+
+ const {
+ view: { main },
+ activeViewId,
+ activeView,
+ } = useContext(WaxContext);
+
+ if (onlyOnMain) view = main;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const { dispatch, state } = view;
+
+ const handleMouseDown = (e, editorState, editorDispatch) => {
+ e.preventDefault();
+ run(editorState, dispatch);
+ };
+
+ const isActive = !!(
+ active(state, activeViewId) && select(state, activeViewId)
+ );
+
+ let isDisabled = !select(state, activeViewId, activeView);
+ if (!isEditable) isDisabled = true;
+
+ const LeftSideButtonComponent = useMemo(
+ () => (
+ <StyledButton
+ active={isActive || false}
+ disabled={isDisabled}
+ iconName={icon}
+ label={label}
+ onMouseDown={e => handleMouseDown(e, view.state, view.dispatch)}
+ title={title}
+ />
+ ),
+ [isActive, isDisabled],
+ );
+
+ return LeftSideButtonComponent;
+};
+
+export default LeftSideButton;
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js b/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
index 8bd7a8564d91f4fd757975d809c2a8a7f08eb636..b622fd1fa25ee025a07ae182efccbc923c02d010 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/AuthorService/Author.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -32,6 +35,14 @@ class Author extends Tools {
return Commands.setBlockType(state.config.schema.nodes.author)(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default Author;
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
index 7155f17258e68aaee0598a7430819658f5344a56..6d3fe21688abd5fa5399ae6728827d3ce97730d1 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphPoetryService/EpigraphPoetry.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -36,6 +39,14 @@ class EpigraphPoetry extends Tools {
);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default EpigraphPoetry;
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
index 365321ad08a3c1a950721f87ced1745bf8a0943f..02a2b94b8eb1876985d116b04cf955fa7919e727 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/EpigraphProseService/EpigraphProse.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -37,4 +40,12 @@ class EpigraphProse extends Tools {
);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
index 3dd460550c4f71b81f0bb052c30c4251ab46359d..f29ab84670b3e5413ec6a3ba648ab8da80b76bcb 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -47,4 +50,12 @@ class Heading2 extends Tools {
})(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
index 21a99033e07792b61cace70df0f20a5b012904b0..e2dd3d94ecd790c725fd28c363938c0fe2dcd00a 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -47,4 +50,12 @@ class Heading3 extends Tools {
})(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading4.js b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading4.js
index fdc4e4ffe33d4132ae6cb0221e470cefcd6a3cc6..3991590cf620ef5a844e0d16726dd36262ce5912 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading4.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading4.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -47,4 +50,12 @@ class Heading4 extends Tools {
})(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js b/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
index 17293be671c324d0c75a37d4c659aff9a5895227..b9a534540edabbcfaeb888b5313a65627c482732 100644
--- a/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
+++ b/wax-prosemirror-services/src/DisplayBlockLevel/SubTitleService/SubTitle.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -33,4 +36,12 @@ class SubTitle extends Tools {
return Commands.setBlockType(state.config.schema.nodes.subtitle)(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js b/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js
index ae8d74663270816021a4578ad5a10c112569b041..031b1f758068ad5550f8d7d81ffa9ce56a440a90 100644
--- a/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js
+++ b/wax-prosemirror-services/src/FullScreenService/FullScreenTool.js
@@ -27,8 +27,9 @@ class FullScreenTool extends Tools {
renderTool(view) {
if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
return this._isDisplayed ? (
- <FullScreen key="FullScreen" item={this.toJSON()} view={view} />
+ <FullScreen item={this.toJSON()} key="FullScreen" view={view} />
) : null;
}
}
diff --git a/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js b/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
index f6da4040bdf347e77417eecd5522328445d98d20..8dc87c7063b78fb9f34caf4a3c3cd651a98d93b1 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/BlockQuoteService/BlockQuote.js
@@ -1,6 +1,9 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
import { wrapIn } from 'prosemirror-commands';
import { NodeSelection } from 'prosemirror-state';
+import { LeftSideButton } from 'wax-prosemirror-components';
import Tools from '../../lib/Tools';
@injectable()
@@ -39,5 +42,13 @@ class BlockQuote extends Tools {
return wrapIn(state.config.schema.nodes.blockquote)(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default BlockQuote;
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js b/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
index c5e8fdfca4080b0a1207d467736b633f5435c7fd..bf8741648362b5835aac2a5918fce5d43065e119 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ExtractPoetryService/ExtractPoetry.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -36,5 +39,13 @@ class ExtractPoetry extends Tools {
);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default ExtractPoetry;
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js b/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
index 0760fabbed7f528a3d258e8bd040142eb5375c48..9096f4f0668697232c2f5b5d025928ef8123fcf4 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ExtractProseService/ExtractProse.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -36,5 +39,13 @@ class ExtractProse extends Tools {
);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default ExtractProse;
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js b/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
index 774a432142d337f3126bffe139cac6b2f18744f2..a4eb6bf3cceac21b0934b4831965ed7c44ac3fe7 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ParagraphContinuedService/ParagraphContinued.js
@@ -1,4 +1,7 @@
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
import Tools from '../../lib/Tools';
@@ -36,6 +39,14 @@ class ParagraphContinued extends Tools {
);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default ParagraphContinued;
diff --git a/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js b/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
index f0ebddd07ba0eb1b59065700874608d400035b4a..caf142fbbb51b29374e995d8cd75dcff67da958b 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/ParagraphService/Paragraph.js
@@ -1,6 +1,9 @@
-import Tools from '../../lib/Tools';
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
+import Tools from '../../lib/Tools';
export default
@injectable()
@@ -33,4 +36,12 @@ class Paragraph extends Tools {
return Commands.setBlockType(state.config.schema.nodes.paragraph)(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
diff --git a/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js b/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
index 17c67a2789f5edb2f86015c94ed208cf57fd05f0..58d4e63f59d15fd99fb61044328ecf8855aa53ab 100644
--- a/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
+++ b/wax-prosemirror-services/src/TextBlockLevel/SourceNoteService/SourceNote.js
@@ -1,6 +1,9 @@
-import Tools from '../../lib/Tools';
+import React from 'react';
import { injectable } from 'inversify';
+import { isEmpty } from 'lodash';
+import { LeftSideButton } from 'wax-prosemirror-components';
import { Commands } from 'wax-prosemirror-utilities';
+import Tools from '../../lib/Tools';
@injectable()
class SourceNote extends Tools {
@@ -32,5 +35,13 @@ class SourceNote extends Tools {
return Commands.setBlockType(state.config.schema.nodes.sourceNote)(state);
};
}
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <LeftSideButton item={this.toJSON()} key="BlockQuote" view={view} />
+ ) : null;
+ }
}
export default SourceNote;