enable/disalbe track changes from tool

editors/editoria/src/config/config.js

@@ -60,7 +60,7 @@ export default {
 
   RulesService: [emDash, ellipsis],
   ShortCutsService: {},
-  EnableTrackChangeService: { enabled: true },
+  EnableTrackChangeService: { enabled: false },
 
   PmPlugins: [
     columnResizing(),

wax-prosemirror-components/index.js

-export { default as InfoArea } from "./src/components/infoArea/InfoArea";
-export { default as Overlay } from "./src/components/Overlay";
-export { default as Button } from "./src/components/Button";
-export { default as icons } from "./src/icons/icons";
-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 NoteEditorContainer
-} from "./src/components/notes/NoteEditorContainer";
+export { default as InfoArea } from './src/components/infoArea/InfoArea';
+export { default as Overlay } from './src/components/Overlay';
+export { default as Button } from './src/components/Button';
+export { default as icons } from './src/icons/icons';
+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 NoteEditorContainer } from './src/components/notes/NoteEditorContainer';
 
-export { default as LinkComponent } from "./src/components/link/LinkComponent";
+export { default as LinkComponent } from './src/components/link/LinkComponent';
 
-export {
-  default as CommentBubbleComponent
-} from "./src/components/comments/CommentBubbleComponent";
+export { default as CommentBubbleComponent } from './src/components/comments/CommentBubbleComponent';
 
-export { default as RightArea } from "./src/components/rightArea/RightArea";
+export { default as RightArea } from './src/components/rightArea/RightArea';
+
+export { default as TrackChangeEnable } from './src/components/trackChanges/TrackChangeEnable';

wax-prosemirror-components/package.json

@@ -22,7 +22,8 @@
     "styled-components": "^4.2.0",
     "uuid": "^7.0.3",
     "wax-prosemirror-core": "^0.0.13",
-    "wax-prosemirror-utilities": "^0.0.13"
+    "wax-prosemirror-utilities": "^0.0.13",
+    "wax-prosemirror-themes": "^0.0.13"
   },
   "peerDependencies": {
     "react": "^16.13.1",

wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js

+import React, { useContext, useState } 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'};
+  }
+`;
+
+const TrackChangeEnable = ({ view = {}, item, enabled }) => {
+  if (item.onlyOnMain) {
+    const {
+      view: { main },
+    } = useContext(WaxContext);
+    view = main;
+  }
+
+  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>
+  );
+};
+
+export default TrackChangeEnable;

wax-prosemirror-core/src/Wax.js

@@ -100,8 +100,7 @@ const Wax = props => {
     1000,
     { maxWait: 5000 },
   );
-  const TrackChange = application.config.get('config.EnableTrackChangeService')
-    .enabled;
+  const TrackChange = application.config.get('config.EnableTrackChangeService');
 
   const Layout = application.container.get('Layout');
   if (layout) Layout.setLayout(layout);

wax-prosemirror-core/src/WaxView.js

@@ -61,7 +61,8 @@ export default props => {
 
   const dispatchTransaction = transaction => {
     const { TrackChange } = props;
-    const tr = TrackChange
+
+    const tr = TrackChange.enabled
       ? trackedTransaction(transaction, view.state, user)
       : transaction;
 

wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChange.js

 import React from 'react';
 import { injectable } from 'inversify';
 import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import { TrackChangeEnable } from 'wax-prosemirror-components';
 import Tools from '../../lib/Tools';
 
 export default
@@ -11,7 +13,7 @@ class EnableTrackChange extends Tools {
 
   get run() {
     return state => {
-      console.log(this.config);
+      this.config.enabled = !this.config.enabled;
       return true;
     };
   }
@@ -22,23 +24,15 @@ class EnableTrackChange extends Tools {
     };
   }
 
-  select(state) {
-    return true;
-  }
-
   renderTool(view) {
     if (isEmpty(view)) return null;
     return this._isDisplayed ? (
-      <button
-        type="button"
-        onMouseDown={e => {
-          e.preventDefault();
-          this.run(view.state, view.dispatch);
-        }}
-      >
-        {' '}
-        Track{' '}
-      </button>
+      <TrackChangeEnable
+        key={uuidv4()}
+        view={view}
+        item={this.toJSON()}
+        enabled={this.config.enabled}
+      />
     ) : null;
   }
 }

wax-prosemirror-services/src/TrackChangeService/EnableTrackChangeService/EnableTrackChangeService.js

@@ -6,7 +6,7 @@ class EnableTrackChangeService extends Service {
   boot() {}
 
   register() {
-    this.container.bind('EnableTrackChange').toFactory(() => {
+    this.container.bind('EnableTrackChange').toDynamicValue(() => {
       return new EnableTrackChange(this.config);
     });
   }