diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js index 404d183cccf7cfae280210442e74477989c7ce42..c6f7cde7b4f55120ce741cee08d68c53a3335a8c 100644 --- a/editors/demo/src/Editoria/Editoria.js +++ b/editors/demo/src/Editoria/Editoria.js @@ -50,14 +50,14 @@ const Editoria = () => { } const editorRef = useRef(); - // useEffect(() => { - // console.log('sss'); - // // const configObj = config(yjsProvider, ydoc, 'christos') - // setTimeout(() => { - // setFirst(false); - // }, 5000); - // // configObj.services = [...configObj.services, new TablesService()] - // }, [isFirst]); + useEffect(() => { + console.log('sss'); + // const configObj = config(yjsProvider, ydoc, 'christos') + setTimeout(() => { + setFirst(false); + }, 5000); + // configObj.services = [...configObj.services, new TablesService()] + }, [isFirst]); if (!isFirst) { // configObj.services = [...configObj.services, new TablesService()] @@ -72,7 +72,7 @@ const Editoria = () => { onClick={() => { console.log(myConfig); // myConfig.PmPlugins = []; - // myConfig.services = [...myConfig.services, new TablesService()]; + myConfig.services = [...myConfig.services, new TablesService()]; myConfig.name = 'Ffdfd'; setMyConfig({ ...myConfig }); }} diff --git a/wax-prosemirror-core/src/components/Button.js b/wax-prosemirror-core/src/components/Button.js index 15e2d57005b30f96b0fcf1481e082f461d25bf98..5a35a8deb7c1dfba8466a6a3077a7fc4ad54a931 100644 --- a/wax-prosemirror-core/src/components/Button.js +++ b/wax-prosemirror-core/src/components/Button.js @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { WaxContext } from '../WaxContext'; import MenuButton from './ui/MenuButton'; -const Button = ({ item }) => { +const Button = ({ view = {}, item }) => { const { t, i18n } = useTranslation(); const { active, icon, label, run, select, title } = item; const context = useContext(WaxContext); @@ -19,39 +19,41 @@ const Button = ({ item }) => { return editable; }); + const { state } = view; + + const handleMouseDown = e => { + e.preventDefault(); + run(activeView.state, activeView.dispatch, activeView, context); + }; + const isActive = !!( - active(context.options.currentState, activeViewId) && - select(context.options.currentState, activeViewId, activeView) + active(activeView.state, activeViewId) && + select(state, activeViewId, activeView) ); let isDisabled = !select( - context.options.currentState, + context.activeView.state, context.activeViewId, context.activeView, ); if (!isEditable) isDisabled = true; - - const onMouseDown = e => { - e.preventDefault(); - run(context.options.currentState, activeView.dispatch, activeView, context); - }; - - const MenuButtonComponent = useMemo(() => { - return ( + const MenuButtonComponent = useMemo( + () => ( <MenuButton active={isActive || false} disabled={isDisabled} iconName={icon} label={label} - onMouseDown={onMouseDown} + onMouseDown={e => handleMouseDown(e)} title={ !isEmpty(i18n) && i18n.exists(`Wax.Annotations.${title}`) ? t(`Wax.Annotations.${title}`) : title } /> - ); - }, [isActive, isDisabled, activeViewId, t(`Wax.Annotations.${title}`)]); + ), + [isActive, isDisabled, activeViewId, t(`Wax.Annotations.${title}`)], + ); return MenuButtonComponent; }; diff --git a/wax-prosemirror-core/src/components/ToolGroupComponent.js b/wax-prosemirror-core/src/components/ToolGroupComponent.js index ebbeaecb2c912a07122072224de09e6d5327890c..d673aceaf1ff9472ff267b65bdc7db17215c04b7 100644 --- a/wax-prosemirror-core/src/components/ToolGroupComponent.js +++ b/wax-prosemirror-core/src/components/ToolGroupComponent.js @@ -19,14 +19,14 @@ const DropWrapper = styled(Wrapper)` padding: 4px; `; -const ToolGroupComponent = ({ state, tools, name }) => { +const ToolGroupComponent = ({ view, tools, name }) => { const toolsShown = []; const rest = []; - console.log('hahahahaha'); + tools.forEach(tool => { tool.isIntoMoreSection() && tool.isDisplayed() - ? rest.push(tool.renderTool(state)) - : toolsShown.push(tool.renderTool(state)); + ? rest.push(tool.renderTool(view)) + : toolsShown.push(tool.renderTool(view)); }); const MemorizedToolGroupComponent = useMemo( diff --git a/wax-prosemirror-core/src/components/ToolGroups.js b/wax-prosemirror-core/src/components/ToolGroups.js index ccb2278ab6b3d674df3c3c8a5e764defd41a48ab..e097668166458487a93e130a805d2ee9c92d4863 100644 --- a/wax-prosemirror-core/src/components/ToolGroups.js +++ b/wax-prosemirror-core/src/components/ToolGroups.js @@ -3,18 +3,13 @@ import React from 'react'; import { v4 as uuidv4 } from 'uuid'; import ToolGroupComponent from './ToolGroupComponent'; -const ToolGroups = ({ toolGroups, state }) => { - console.log(state, 'tool groups '); +const ToolGroups = ({ toolGroups, view }) => { return toolGroups.map(toolGroup => { if (toolGroup._toolGroups.length > 0) { - return <ToolGroups toolGroups={toolGroup._toolGroups} state={state} />; + return <ToolGroups toolGroups={toolGroup._toolGroups} view={view} />; } return ( - <ToolGroupComponent - key={uuidv4()} - tools={toolGroup._tools} - state={state} - /> + <ToolGroupComponent key={uuidv4()} tools={toolGroup._tools} view={view} /> ); }); }; diff --git a/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js b/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js index 17a584161cd31ef9e2fed6026f4ed01b1227c40d..7987cce2927288efeb42b743bfa2a59bb17a0615 100644 --- a/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js +++ b/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js @@ -36,17 +36,11 @@ class Menu { render() { return () => { - const context = useContext(WaxContext); - const Bar = useMemo( - () => ( - // eslint-disable-next-line react/no-this-in-sfc - <MenuWrapper - items={this.toolGroups} - state={context.options.currentState} - /> - ), - [], - ); + const { activeView } = useContext(WaxContext); + const Bar = useMemo(() => ( + // eslint-disable-next-line react/no-this-in-sfc + <MenuWrapper items={this.toolGroups} view={activeView || {}} /> + )); return <>{Bar}</>; }; } diff --git a/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuWrapper.js b/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuWrapper.js index 5c139a297fc788af469203f6348ba928243c5283..4a77932c3d544e05809355fe07609ce840520704 100644 --- a/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuWrapper.js +++ b/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuWrapper.js @@ -4,8 +4,8 @@ import React from 'react'; import { map } from 'lodash'; -const MainMenuBar = ({ items = [], state }) => { - return <>{map(items, item => item.renderTools(state))}</>; +const MainMenuBar = ({ items = [], view }) => { + return <>{map(items, item => item.renderTools(view))}</>; }; export default MainMenuBar; diff --git a/wax-prosemirror-core/src/utilities/lib/ToolGroup.js b/wax-prosemirror-core/src/utilities/lib/ToolGroup.js index fa96542ca88db50464c727b0166ea7f3fd968199..0e50d3fb417e4364ed5a50a8fb0b6e4bf3062da9 100644 --- a/wax-prosemirror-core/src/utilities/lib/ToolGroup.js +++ b/wax-prosemirror-core/src/utilities/lib/ToolGroup.js @@ -59,12 +59,12 @@ class ToolGroup { this._tools = tools; } - renderTools(state) { - if (isEmpty(state)) return null; + renderTools(view) { + if (isEmpty(view)) return null; const { name } = this.constructor; if (this._toolGroups > 0) { - return <ToolGroups state={state} toolGroups={this._toolGroups} />; + return <ToolGroups toolGroups={this._toolGroups} view={view} />; } const MemorizedToolGroupComponent = useMemo( @@ -72,9 +72,9 @@ class ToolGroup { <ToolGroupComponent key={uuidv4()} name={name} - state={state} title={this.title} tools={this._tools} + view={view} /> ), [], diff --git a/wax-prosemirror-core/src/utilities/lib/Tools.js b/wax-prosemirror-core/src/utilities/lib/Tools.js index 01544d23e29a1e660305f6509cae739d9f20cd1a..0d3490a3b6c2879a6c8bd76c93b0596ff9b68fa4 100644 --- a/wax-prosemirror-core/src/utilities/lib/Tools.js +++ b/wax-prosemirror-core/src/utilities/lib/Tools.js @@ -51,10 +51,11 @@ class Tools { }; } - renderTool(state) { - if (isEmpty(state)) return null; + renderTool(view) { + if (isEmpty(view)) return null; + return this._isDisplayed ? ( - <Button item={this.toJSON()} key={uuidv4()} state={state} /> + <Button item={this.toJSON()} key={uuidv4()} view={view} /> ) : null; } diff --git a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js index 3ed277a4736980ddb053da779041232c1b7d2806..2c5b311394f849b16bc23d611434d36e641037b7 100644 --- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js +++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js @@ -25,10 +25,10 @@ export default class Redo extends Tools { return redo(state); } - renderTool(state) { - if (isEmpty(state)) return null; + renderTool(view) { + if (isEmpty(view)) return null; return this.isDisplayed() ? ( - <UndoRedoButton item={this.toJSON()} key="Redo" state={state} /> + <UndoRedoButton item={this.toJSON()} key="Redo" view={view} /> ) : null; } } diff --git a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js index 585daac7204d047b0fe00d7c7462858ae2e571ff..4d2207ff7c49b8a7470ce6731bf1dfe927d496bf 100644 --- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js +++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js @@ -25,10 +25,10 @@ export default class Undo extends Tools { return undo(state); } - renderTool(state) { - if (isEmpty(state)) return null; + renderTool(view) { + if (isEmpty(view)) return null; return this.isDisplayed() ? ( - <UndoRedoButton item={this.toJSON()} key="Undo" state={state} /> + <UndoRedoButton item={this.toJSON()} key="Undo" view={view} /> ) : null; } } diff --git a/wax-prosemirror-services/src/BaseService/components/UndoRedoButton.js b/wax-prosemirror-services/src/BaseService/components/UndoRedoButton.js index 3000759b237567f878acb565325501149cd0b459..6c390008ddb74e05afa3ac02905eb1c6cff36cbf 100644 --- a/wax-prosemirror-services/src/BaseService/components/UndoRedoButton.js +++ b/wax-prosemirror-services/src/BaseService/components/UndoRedoButton.js @@ -4,35 +4,33 @@ import { isEmpty } from 'lodash'; import { useTranslation } from 'react-i18next'; import { WaxContext, MenuButton } from 'wax-prosemirror-core'; -const UndoRedoButton = ({ item }) => { +const UndoRedoButton = ({ view = {}, item }) => { const { t, i18n } = useTranslation(); const { active, icon, label, run, select, title } = item; - const context = useContext(WaxContext); + const { pmViews: { main }, activeViewId, activeView, - } = context; + } = useContext(WaxContext); const isEditable = main.props.editable(editable => { return editable; }); - const handleMouseDown = e => { + const { state } = view; + + const handleMouseDown = (e, editorState, editorDispatch) => { e.preventDefault(); - run(context.options.currentState, activeView.dispatch); + run(editorState, editorDispatch); }; const isActive = !!( - active(context.options.currentState, activeViewId) && - select(context.options.currentState, activeViewId, activeView) + active(activeView.state, activeViewId) && + select(state, activeViewId, activeView) ); - let isDisabled = !select( - context.options.currentState, - activeViewId, - activeView, - ); + let isDisabled = !select(state, activeViewId, activeView); if (!isEditable) isDisabled = true; const UndoRedoButtonComponent = useMemo( @@ -42,7 +40,7 @@ const UndoRedoButton = ({ item }) => { disabled={isDisabled} iconName={icon} label={label} - onMouseDown={e => handleMouseDown(e)} + onMouseDown={e => handleMouseDown(e, main.state, main.dispatch)} title={ !isEmpty(i18n) && i18n.exists(`Wax.Base.${title}`) ? t(`Wax.Base.${title}`) diff --git a/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js b/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js index 236786a8291670554add0555ce328c8fe82d5092..9c21d3fa32af8f62cc3d1eb830be53a1fce7a6b7 100644 --- a/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js +++ b/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js @@ -32,8 +32,8 @@ class Annotations extends ToolGroup { ]; } - renderTools(state) { - if (isEmpty(state)) return null; + renderTools(view) { + if (isEmpty(view)) return null; const { name } = this.constructor; @@ -41,13 +41,13 @@ class Annotations extends ToolGroup { () => ( <ToolGroupComponent key={uuidv4()} - state={state} - tools={this._tools} - title={this.title} name={name} + title={this.title} + tools={this._tools} + view={view} /> ), - [state], + [view], ); return MemorizedToolGroupComponent;