From b5551e1beb1c9fd2bd2bf311b45a2c511d84c711 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 24 Feb 2021 11:44:07 +0200
Subject: [PATCH] replace left side button
---
wax-prosemirror-components/index.js | 3 +-
.../customtag/CustomTagBlockComponent.js | 12 +++-
.../components/{ => various}/FullScreen.js | 2 +-
.../src/components/various/LeftSideButton.js | 61 +++++++++++++++++++
.../DisplayBlockLevel/AuthorService/Author.js | 11 ++++
.../EpigraphPoetryService/EpigraphPoetry.js | 11 ++++
.../EpigraphProseService/EpigraphProse.js | 11 ++++
.../HeadingService/Heading2.js | 11 ++++
.../HeadingService/Heading3.js | 11 ++++
.../HeadingService/Heading4.js | 11 ++++
.../SubTitleService/SubTitle.js | 11 ++++
.../src/FullScreenService/FullScreenTool.js | 3 +-
.../BlockQuoteService/BlockQuote.js | 11 ++++
.../ExtractPoetryService/ExtractPoetry.js | 11 ++++
.../ExtractProseService/ExtractProse.js | 11 ++++
.../ParagraphContinued.js | 11 ++++
.../ParagraphService/Paragraph.js | 13 +++-
.../SourceNoteService/SourceNote.js | 13 +++-
18 files changed, 221 insertions(+), 7 deletions(-)
rename wax-prosemirror-components/src/components/{ => various}/FullScreen.js (96%)
create mode 100644 wax-prosemirror-components/src/components/various/LeftSideButton.js
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index f3a5082cd..41b239ecf 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 688b99c48..14d71e231 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 941c40f31..3e458f119 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 000000000..61b65e239
--- /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 8bd7a8564..b622fd1fa 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 7155f1725..6d3fe2168 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 365321ad0..02a2b94b8 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 3dd460550..f29ab8467 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 21a99033e..e2dd3d94e 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 fdc4e4ffe..3991590cf 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 17293be67..b9a534540 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 ae8d74663..031b1f758 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 f6da4040b..8dc87c706 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 c5e8fdfca..bf8741648 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 0760fabbe..9096f4f06 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 774a43214..a4eb6bf3c 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 f0ebddd07..caf142fbb 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 17c67a278..58d4e63f5 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;
--
GitLab