diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js index 41b239ecfa76a233c7b87961013dbf3b2899c821..23be03fc957e8f50a8dab4947f85f7c07388f9b6 100644 --- a/wax-prosemirror-components/index.js +++ b/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'; diff --git a/wax-prosemirror-components/src/components/SaveButton.js b/wax-prosemirror-components/src/components/SaveButton.js new file mode 100644 index 0000000000000000000000000000000000000000..ff56f49da9ed64c0375544f984d75c9a03008c54 --- /dev/null +++ b/wax-prosemirror-components/src/components/SaveButton.js @@ -0,0 +1,50 @@ +/* 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; diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js index ee46b554386ab9f14c5501456b27a51f1d5945e0..353a80df3809dfd56b0a02ab2652e7591aedf922 100644 --- a/wax-prosemirror-components/src/icons/icons.js +++ b/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" /> diff --git a/wax-prosemirror-services/src/BaseService/SaveService/Save.js b/wax-prosemirror-services/src/BaseService/SaveService/Save.js index ea7c9c3db018029dd48c87aa21e0748391b7fb24..f13d6e90139e4aa9997f36a8ff723e4c478d4215 100644 --- a/wax-prosemirror-services/src/BaseService/SaveService/Save.js +++ b/wax-prosemirror-services/src/BaseService/SaveService/Save.js @@ -1,15 +1,33 @@ -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; + } } diff --git a/wax-prosemirror-services/src/BaseService/index.js b/wax-prosemirror-services/src/BaseService/index.js index ac21c7dee1b100298434bdca50e12e2212341275..d8c34fee8d615c93871137379d4cb2fa85330f9e 100644 --- a/wax-prosemirror-services/src/BaseService/index.js +++ b/wax-prosemirror-services/src/BaseService/index.js @@ -1,5 +1,5 @@ -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()]; diff --git a/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js b/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js index 8cdb86f2d2faddbdf809f4447fee4880f5ceec27..d542e5551037378d64f85bdfc6027b4ae59c2803 100644 --- a/wax-prosemirror-services/src/WaxToolGroups/BaseToolGroupService/Base.js +++ b/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]; } }