From fd742afbac548ae5b3dbb12605c1991b3d3444d2 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 26 Jun 2024 13:49:36 +0300
Subject: [PATCH] use-wax-view-context
---
editors/demo/src/Editoria/Editoria.js | 18 +++++------
wax-prosemirror-core/src/components/Button.js | 32 ++++++++++---------
.../src/components/ToolGroupComponent.js | 8 ++---
.../src/components/ToolGroups.js | 11 ++-----
.../defaultServices/MenuService/Menu.js | 16 +++-------
.../MenuService/MenuWrapper.js | 4 +--
.../src/utilities/lib/ToolGroup.js | 8 ++---
.../src/utilities/lib/Tools.js | 7 ++--
.../src/BaseService/RedoService/Redo.js | 6 ++--
.../src/BaseService/UndoService/Undo.js | 6 ++--
.../BaseService/components/UndoRedoButton.js | 24 +++++++-------
.../AnnotationToolGroupService/Annotations.js | 12 +++----
12 files changed, 71 insertions(+), 81 deletions(-)
diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index 404d183cc..c6f7cde7b 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 15e2d5700..5a35a8deb 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 ebbeaecb2..d673aceaf 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 ccb2278ab..e09766816 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 17a584161..7987cce29 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 5c139a297..4a77932c3 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 fa96542ca..0e50d3fb4 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 01544d23e..0d3490a3b 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 3ed277a47..2c5b31139 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 585daac72..4d2207ff7 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 3000759b2..6c390008d 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 236786a82..9c21d3fa3 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;
--
GitLab