save button in progress

wax-prosemirror-components/index.js

@@ -27,3 +27,4 @@ export { default as TrackChangeOptionsTool } from './src/components/trackChanges
 export { default as CustomTagInlineComponent } from './src/components/customtag/CustomTagInlineComponent';
 export { default as CustomTagInlineOverlayComponent } from './src/components/customtag/CustomTagInlineOverlayCompoment';
 export { default as CustomTagBlockComponent } from './src/components/customtag/CustomTagBlockComponent';
+export { default as SaveButton } from './src/components/SaveButton';

wax-prosemirror-components/src/components/SaveButton.js

+/* eslint react/prop-types: 0 */
+import React, { useContext, useMemo, useEffect } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import MenuButton from '../ui/buttons/MenuButton';
+
+const SaveButton = ({ view = {}, item }) => {
+  const { active, icon, label, onlyOnMain, run, select, title } = item;
+
+  const {
+    app,
+    view: { main },
+    activeViewId,
+    activeView,
+  } = useContext(WaxContext);
+
+  if (onlyOnMain) view = main;
+
+  const { state } = view;
+
+  const handleMouseDown = (e, editorState, editorDispatch) => {
+    console.log('save');
+  };
+
+  const isActive = !!active(state, activeViewId);
+  let isDisabled = !select(state, activeViewId, activeView);
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
+
+  const SaveButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isActive || false}
+        disabled={isDisabled}
+        iconName={icon}
+        label={label}
+        onMouseDown={e => handleMouseDown(e, view.state, view.dispatch)}
+        title={title}
+      />
+    ),
+    [isActive, isDisabled],
+  );
+
+  return SaveButtonComponent;
+};
+
+export default SaveButton;

wax-prosemirror-components/src/icons/icons.js

@@ -66,6 +66,12 @@ export default {
       <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>
   ),
+  save: ({ className }) => (
+    <Svg className={className} viewBox="0 0 24 24">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" />
+    </Svg>
+  ),
   code: ({ className }) => (
     <Svg className={className} viewBox="0 0 24 24">
       <path d="M0 0h24v24H0V0z" fill="none" />

wax-prosemirror-services/src/BaseService/SaveService/Save.js

-import Tools from '../../lib/Tools';
+import React from 'react';
+import { isEmpty } from 'lodash';
 import { injectable } from 'inversify';
-import { icons } from 'wax-prosemirror-components';
+
+import { SaveButton, icons } from 'wax-prosemirror-components';
+import Tools from '../../lib/Tools';
 
 export default
 @injectable()
 class Save extends Tools {
   title = 'Save changes';
+  icon = 'save';
+  onlyOnMain = true;
+  name = 'Save';
   content = icons.save;
   name = 'Save';
 
-  get run() {}
+  get run() {
+    return (state, dispatch) => {
+      return true;
+    };
+  }
 
   get enable() {}
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+    // eslint-disable-next-line no-underscore-dangle
+    return this._isDisplayed ? (
+      <SaveButton item={this.toJSON()} key="Save" view={view} />
+    ) : null;
+  }
 }

wax-prosemirror-services/src/BaseService/index.js

-import UndoService from "./UndoService/UndoService";
-import RedoService from "./RedoService/RedoService";
-import SaveService from "./SaveService/SaveService";
+import UndoService from './UndoService/UndoService';
+import RedoService from './RedoService/RedoService';
+import SaveService from './SaveService/SaveService';
 
-export default [new UndoService(), new RedoService()];
+export default [new UndoService(), new RedoService(), new SaveService()];

wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js

@@ -4,9 +4,13 @@ import ToolGroup from '../../lib/ToolGroup';
 @injectable()
 class Base extends ToolGroup {
   tools = [];
-  constructor(@inject('Undo') undo, @inject('Redo') redo) {
+  constructor(
+    @inject('Undo') undo,
+    @inject('Redo') redo,
+    @inject('Save') save,
+  ) {
     super();
-    this.tools = [undo, redo];
+    this.tools = [undo, redo, save];
   }
 }