From 73c4d2cd324a5541f5189436dc94c122f309993c Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 15 Jan 2021 15:19:39 +0200
Subject: [PATCH] execute command
---
editors/editoria/src/layout/EditoriaLayout.js | 2 +-
.../src/components/Overlay.js | 11 ++--
.../TrackChangeOptionsComponent.js | 50 ++++++++++++-------
.../trackChanges/TrackChangeOptionsTool.js | 2 +-
.../src/ui/buttons/MenuButton.js | 1 +
.../src/OverlayService/OverlayComponent.js | 13 ++---
6 files changed, 49 insertions(+), 30 deletions(-)
diff --git a/editors/editoria/src/layout/EditoriaLayout.js b/editors/editoria/src/layout/EditoriaLayout.js
index fc5d06776..c01a05806 100644
--- a/editors/editoria/src/layout/EditoriaLayout.js
+++ b/editors/editoria/src/layout/EditoriaLayout.js
@@ -127,7 +127,7 @@ const CommentTrackToolsContainer = styled.div`
position: fixed;
padding-top: 5px;
right: 30px;
- z-index: 2;
+ z-index: 1;
background: white;
padding-left: 5%;
`;
diff --git a/wax-prosemirror-components/src/components/Overlay.js b/wax-prosemirror-components/src/components/Overlay.js
index 6d3cce46b..53e2a3f77 100644
--- a/wax-prosemirror-components/src/components/Overlay.js
+++ b/wax-prosemirror-components/src/components/Overlay.js
@@ -1,10 +1,13 @@
-import React from "react";
-import styled from "styled-components";
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import styled from 'styled-components';
+
const OverlayContainer = styled.div`
- position: ${props => props.position.position};
left: ${props => `${props.position.left}px`};
+ position: ${props => props.position.position};
top: ${props => `${props.position.top}px`};
- z-index: 999;
+ // z-index: 999;
`;
const Overlay = props => (
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
index b5a767702..bdbda7c2e 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js
@@ -107,6 +107,7 @@ const AcceptRejectAllControls = styled.div`
right: 207px;
transform-origin: 50% 50% 0px;
width: 200px;
+ z-index: 9999;
`;
const AcceptRejectAllRow = styled.div`
@@ -168,38 +169,51 @@ const getComments = main => {
return comments;
};
-const renderTools = menuItems => {
- const tools = [];
- tools.push(
- menuItems.map((menuItem, index) => {
- return (
- <MenuButton
- iconName={menuItem.icon}
- key={menuItem.name}
- label={menuItem.label}
- />
- );
- }),
- );
- return <>{tools}</>;
-};
-
const TrackChangeOptionsComponent = ({ groups }) => {
const [isShownTrack, setIsShownTrack] = useState(false);
const menuItems = groups[0].items;
- const { view } = useContext(WaxContext);
+ const { view, activeView, activeViewId } = useContext(WaxContext);
+ const { dispatch, state } = view;
const inlineTracks = getInlineTracks(view.main).length;
const blockTracks = getTrackBlockNodes(view.main).length;
const comments = getComments(view.main).length;
+ const renderTools = () => {
+ const tools = [];
+ tools.push(
+ menuItems.map((menuItem, index) => {
+ const isActive = !!(
+ menuItem.active(state, activeViewId) &&
+ menuItem.select(state, activeViewId)
+ );
+
+ const isDisabled = !menuItem.select(state, activeViewId, activeView);
+ return (
+ <MenuButton
+ active={isActive || false}
+ disabled={isDisabled}
+ iconName={menuItem.icon}
+ key={menuItem.name}
+ label={menuItem.label}
+ onMouseDown={e => {
+ e.preventDefault();
+ menuItem.run(activeView.state, activeView.dispatch);
+ }}
+ />
+ );
+ }),
+ );
+ return <>{tools}</>;
+ };
+
return (
<Wrapper>
<TotalSuggestions>
{inlineTracks + blockTracks} SUGGESTIONS
</TotalSuggestions>
- <ToolsContainer>{renderTools(menuItems)}</ToolsContainer>
+ <ToolsContainer>{renderTools()}</ToolsContainer>
<AcceptRejectAll
onMouseEnter={() => setIsShownTrack(true)}
onMouseLeave={() => setIsShownTrack(false)}
diff --git a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js
index 162e688d1..640597119 100644
--- a/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js
+++ b/wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsTool.js
@@ -27,7 +27,7 @@ const TrackChangeOptionsTool = ({ view = {}, item, groups }) => {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
- useOnClickOutside(ref, () => setIsOpen(false));
+ // useOnClickOutside(ref, () => setIsOpen(false));
const MemorizedDropdown = useMemo(
() => (
diff --git a/wax-prosemirror-components/src/ui/buttons/MenuButton.js b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
index e08d2fc6b..7e5606dc0 100644
--- a/wax-prosemirror-components/src/ui/buttons/MenuButton.js
+++ b/wax-prosemirror-components/src/ui/buttons/MenuButton.js
@@ -46,6 +46,7 @@ const Wrapper = styled.button.attrs(props => ({
outline: none;
padding: 2px;
transition: all 0.1s ease-in;
+ user-select: none;
> svg {
transition: all 0.1s ease-in;
diff --git a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
index c79077b36..5db172c90 100644
--- a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
+++ b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
@@ -1,21 +1,22 @@
-import React, { useMemo } from "react";
-import usePosition from "./usePosition";
-import { Overlay } from "wax-prosemirror-components";
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useMemo } from 'react';
+import { Overlay } from 'wax-prosemirror-components';
+import usePosition from './usePosition';
export default (Component, markType) => props => {
const [position, setPosition, mark] = usePosition(markType);
const component = useMemo(
() => (
<Component
- setPosition={setPosition}
mark={mark}
position={position}
+ setPosition={setPosition}
{...props}
/>
),
- [JSON.stringify(mark), position]
+ [JSON.stringify(mark), position],
);
- const visible = position.left ? true : false;
+ const visible = !!position.left;
return <Overlay position={position}>{visible && component}</Overlay>;
};
--
GitLab