From b74c61996f0edaf98d82cc21c8e4d866bb0a9ece Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 21 Jun 2024 15:10:42 +0300
Subject: [PATCH] save state in context
---
editors/demo/src/Editoria/Editoria.js | 32 +++++++-
editors/demo/src/Editoria/config/config.js | 75 +++++++++----------
editors/demo/src/Editors.js | 2 +-
wax-prosemirror-core/src/Wax.js | 6 +-
wax-prosemirror-core/src/WaxContext.js | 9 +++
wax-prosemirror-core/src/WaxView.js | 26 ++++---
wax-prosemirror-core/src/components/Button.js | 16 ++--
.../src/components/ToolGroupComponent.js | 7 +-
.../src/components/ToolGroups.js | 11 ++-
.../defaultServices/MenuService/Menu.js | 7 +-
.../MenuService/MenuWrapper.js | 4 +-
wax-prosemirror-core/src/useWaxView.js | 11 ++-
.../src/utilities/lib/ToolGroup.js | 8 +-
.../src/utilities/lib/Tools.js | 8 +-
wax-prosemirror-services/rollup.config.js | 2 +-
.../AnnotationToolGroupService/Annotations.js | 8 +-
.../src/YjsService/YjsService.js | 19 ++---
17 files changed, 145 insertions(+), 106 deletions(-)
diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index d78339fb3..2386bb268 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -1,4 +1,10 @@
-import React, { useLayoutEffect, useState, useMemo, useRef } from 'react';
+import React, {
+ useLayoutEffect,
+ useState,
+ useMemo,
+ useEffect,
+ useRef,
+} from 'react';
import { Wax } from 'wax-prosemirror-core';
@@ -31,6 +37,7 @@ const Editoria = () => {
const [width] = useWindowSize();
const [myConfig, setMyConfig] = useState(config);
const [myName, setMyName] = useState('COKO');
+ const [isFirst, setFirst] = useState(true);
let layout = EditoriaLayout;
let finalConfig = config;
@@ -43,13 +50,30 @@ 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]);
+
+ if (!isFirst) {
+ // configObj.services = [...configObj.services, new TablesService()]
+ // configObj.name = 'ddd';
+ config.name = 'Ffdfd';
+ // setMyConfig({ ...myConfig });
+ }
+
return (
<>
<button
onClick={() => {
console.log(myConfig);
- myConfig.PmPlugins = [];
- myConfig.services = [...myConfig.services, new TablesService()];
+ // myConfig.PmPlugins = [];
+ // myConfig.services = [...myConfig.services, new TablesService()];
+ myConfig.name = 'Ffdfd';
setMyConfig({ ...myConfig });
}}
>
@@ -69,7 +93,7 @@ const Editoria = () => {
<Wax
ref={editorRef}
key={key}
- config={myConfig}
+ config={config}
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index a1e5e3a30..99e18bebc 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -27,6 +27,7 @@ import {
BlockDropDownToolGroupService,
AskAiContentService,
YjsService,
+ BlockQuoteService,
} from 'wax-prosemirror-services';
import { TablesService, tableEditing, columnResizing } from 'wax-table-service';
@@ -52,11 +53,7 @@ async function DummyPromise(userInput, { askKb }) {
} else {
// JSON response test
const json = JSON.stringify({
- content: askKb
- ? 'KB will be queried'
- : `<p>Hello my friend</p>
-<strong>this is a strong</strong>
-<h1>this a title</h1>`,
+ content: askKb ? 'KB will be queried' : 'Just a normal call',
citations: ['citation 1', 'citation 2', 'citation 3'],
links: ['https://coko.foundation/', 'https://waxjs.net/about/'],
});
@@ -216,7 +213,7 @@ export default {
templateArea: 'mainMenuToolBar',
toolGroups: [
'Base',
- 'BlockDropDown',
+ // 'BlockDropDown',
// 'TitleTool',
{
name: 'Annotations',
@@ -228,28 +225,29 @@ export default {
'StrikeThrough',
],
},
+ 'BlockQuoteTool',
'HighlightToolGroup',
'TransformToolGroup',
- 'CustomTagInline',
+ // 'CustomTagInline',
'Notes',
'Lists',
'Images',
'SpecialCharacters',
- 'CodeBlock',
+ // 'CodeBlock',
'ToggleAi',
// 'Tables',
'TrackingAndEditing',
'FullScreen',
],
},
- {
- templateArea: 'leftSideBar',
- toolGroups: ['DisplayText'],
- },
- {
- templateArea: 'commentTrackToolBar',
- toolGroups: ['TrackCommentOptions'],
- },
+ // {
+ // templateArea: 'leftSideBar',
+ // toolGroups: ['DisplayText'],
+ // },
+ // {
+ // templateArea: 'commentTrackToolBar',
+ // toolGroups: ['TrackCommentOptions'],
+ // },
{
templateArea: 'BottomRightInfo',
toolGroups: ['InfoToolGroup'],
@@ -294,11 +292,11 @@ export default {
],
ImageService: { showAlt: true },
- CommentsService: {
- showTitle: true,
- getComments,
- setComments,
- },
+ // CommentsService: {
+ // showTitle: true,
+ // getComments,
+ // setComments,
+ // },
CustomTagService: {
tags: [
@@ -310,13 +308,13 @@ export default {
updateTags: saveTags,
},
- // YjsService: {
- // // eslint-disable-next-line no-restricted-globals
- // connectionUrl: 'ws://localhost:5010',
- // // connectionUrl: 'ws://0.tcp.ap.ngrok.io:17607',
- // docIdentifier: 'prosemirror-r5dw4q2fe2eedreeeeeweewwewerc',
- // YjsType: 'prosemirror',
- // },
+ YjsService: {
+ // eslint-disable-next-line no-restricted-globals
+ connectionUrl: 'ws://localhost:5010',
+ // connectionUrl: 'ws://0.tcp.ap.ngrok.io:17607',
+ docIdentifier: 'prosemirror-r5dw4q2fe2eedreeeeeweewwewerc',
+ YjsType: 'prosemirror',
+ },
AskAiContentService: {
AskAiContentTransformation: DummyPromise,
@@ -325,28 +323,29 @@ export default {
// GenerateImages: false,
CustomPromptsOn: true,
FreeTextPromptsOn: true,
- CustomPrompts: ['custom promt here!!'],
+ CustomPrompts: [],
},
services: [
- // new YjsService(),
- new BlockDropDownToolGroupService(),
+ new YjsService(),
+ new BlockQuoteService(),
+ // new BlockDropDownToolGroupService(),
new AskAiContentService(),
- new CustomTagService(),
- new DisplayBlockLevelService(),
- new TextBlockLevelService(),
+ // new CustomTagService(),
+ // new DisplayBlockLevelService(),
+ // new TextBlockLevelService(),
new ListsService(),
new LinkService(),
new InlineAnnotationsService(),
new TrackChangeService(),
- new CommentsService(),
+ // new CommentsService(),
new ImageService(),
- new TablesService(),
+ // new TablesService(),
new BaseService(),
new NoteService(),
- new CodeBlockService(),
+ // new CodeBlockService(),
new EditingSuggestingService(),
- new DisplayTextToolGroupService(),
+ // new DisplayTextToolGroupService(),
new MathService(),
new FindAndReplaceService(),
new FullScreenService(),
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 9227cb24d..02c1e2bd0 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -91,7 +91,7 @@ const Editors = () => {
case 'oen':
return <OEN />;
default:
- return <HHMI />;
+ return <Editoria />;
}
};
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index bb3e37b3e..60d79e93b 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -6,6 +6,7 @@ import CryptoJS from 'crypto-js';
import stringify from 'safe-stable-stringify';
import DefaultSchema from './utilities/schema/DefaultSchema';
import WaxProvider from './WaxContext';
+import StateProvider from './StateContext';
import PortalProvider from './PortalContext';
import Application from './Application';
import helpers from './helpers/helpers';
@@ -60,6 +61,7 @@ const Wax = forwardRef((props, innerViewRef) => {
useEffect(() => {
const newApplication = createApplication(props);
setApplication(newApplication);
+ console.log(configHash);
const Layout = newApplication.container.get('Layout');
if (layout) Layout.setLayout(layout);
setWaxLayout(Layout.layoutComponent);
@@ -102,7 +104,9 @@ const Wax = forwardRef((props, innerViewRef) => {
return (
<WaxProvider app={application}>
- <PortalProvider>{WaxLayoutRender}</PortalProvider>
+ <StateProvider>
+ <PortalProvider>{WaxLayoutRender}</PortalProvider>
+ </StateProvider>
</WaxProvider>
);
});
diff --git a/wax-prosemirror-core/src/WaxContext.js b/wax-prosemirror-core/src/WaxContext.js
index fb1929aff..bf8823fbc 100644
--- a/wax-prosemirror-core/src/WaxContext.js
+++ b/wax-prosemirror-core/src/WaxContext.js
@@ -8,6 +8,8 @@ export const WaxContext = React.createContext({
activeViewId: null,
app: null,
updateView: null,
+ updateState: null,
+ state: null,
updateActiveView: null,
removeView: null,
});
@@ -15,6 +17,7 @@ export const WaxContext = React.createContext({
export default props => {
const [context, setContext] = useState({
app: props.app,
+ state: props.state,
pmViews: props.view || {},
activeView: props.activeView || {},
activeViewId: props.activeViewId || {},
@@ -35,6 +38,12 @@ export default props => {
<WaxContext.Provider
value={{
...context,
+ updateState: state => {
+ setContext({
+ ...context,
+ state,
+ });
+ },
updateView: (newView, activeViewId) => {
const pmViews = Object.assign(context.pmViews, newView);
const activeView = pmViews[activeViewId || context.activeViewId];
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 2900eff71..8c8b8799a 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -1,5 +1,5 @@
/* eslint-disable consistent-return */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
import styled from 'styled-components';
import ComponentPlugin from './ComponentPlugin';
import './styles/styles.css';
@@ -18,21 +18,25 @@ const WaxPortals = ComponentPlugin('waxPortals');
const WaxOverlays = ComponentPlugin('waxOverlays');
const WaxView = props => {
+ const divRef = useRef(null);
+
const main = useWaxView(props);
- const waxRef = useCallback(
- node => {
- if (node) {
- node.replaceChildren(main?.dom);
- return node;
- }
- },
- [main],
- );
+ const initialize = useCallback(() => {
+ if (divRef.current) {
+ console.log('div.current , "df');
+ divRef.current.replaceChildren(main?.dom);
+ // return node;
+ }
+ }, [main]);
+
+ useEffect(() => {
+ initialize();
+ }, [initialize]);
return (
<EditorContainer>
- <div ref={waxRef} />
+ <div ref={divRef} />
<WaxOverlays activeViewId="main" group="main" />
<WaxPortals />
</EditorContainer>
diff --git a/wax-prosemirror-core/src/components/Button.js b/wax-prosemirror-core/src/components/Button.js
index 5a35a8deb..8b6ad0d48 100644
--- a/wax-prosemirror-core/src/components/Button.js
+++ b/wax-prosemirror-core/src/components/Button.js
@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next';
import { WaxContext } from '../WaxContext';
import MenuButton from './ui/MenuButton';
-const Button = ({ view = {}, item }) => {
+const Button = ({ state, item }) => {
+ console.log(state, 'button');
const { t, i18n } = useTranslation();
const { active, icon, label, run, select, title } = item;
const context = useContext(WaxContext);
@@ -19,23 +20,18 @@ const Button = ({ view = {}, item }) => {
return editable;
});
- const { state } = view;
+ // const { state } = view;
const handleMouseDown = e => {
e.preventDefault();
- run(activeView.state, activeView.dispatch, activeView, context);
+ run(state, activeView.dispatch, activeView, context);
};
const isActive = !!(
- active(activeView.state, activeViewId) &&
- select(state, activeViewId, activeView)
+ active(state, activeViewId) && select(state, activeViewId, activeView)
);
- let isDisabled = !select(
- context.activeView.state,
- context.activeViewId,
- context.activeView,
- );
+ let isDisabled = !select(state, context.activeViewId, context.activeView);
if (!isEditable) isDisabled = true;
const MenuButtonComponent = useMemo(
() => (
diff --git a/wax-prosemirror-core/src/components/ToolGroupComponent.js b/wax-prosemirror-core/src/components/ToolGroupComponent.js
index d673aceaf..6ab5d6cec 100644
--- a/wax-prosemirror-core/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-core/src/components/ToolGroupComponent.js
@@ -19,14 +19,15 @@ const DropWrapper = styled(Wrapper)`
padding: 4px;
`;
-const ToolGroupComponent = ({ view, tools, name }) => {
+const ToolGroupComponent = ({ state, tools, name }) => {
+ console.log(state, 'tool group componet');
const toolsShown = [];
const rest = [];
tools.forEach(tool => {
tool.isIntoMoreSection() && tool.isDisplayed()
- ? rest.push(tool.renderTool(view))
- : toolsShown.push(tool.renderTool(view));
+ ? rest.push(tool.renderTool(state))
+ : toolsShown.push(tool.renderTool(state));
});
const MemorizedToolGroupComponent = useMemo(
diff --git a/wax-prosemirror-core/src/components/ToolGroups.js b/wax-prosemirror-core/src/components/ToolGroups.js
index e09766816..ccb2278ab 100644
--- a/wax-prosemirror-core/src/components/ToolGroups.js
+++ b/wax-prosemirror-core/src/components/ToolGroups.js
@@ -3,13 +3,18 @@ import React from 'react';
import { v4 as uuidv4 } from 'uuid';
import ToolGroupComponent from './ToolGroupComponent';
-const ToolGroups = ({ toolGroups, view }) => {
+const ToolGroups = ({ toolGroups, state }) => {
+ console.log(state, 'tool groups ');
return toolGroups.map(toolGroup => {
if (toolGroup._toolGroups.length > 0) {
- return <ToolGroups toolGroups={toolGroup._toolGroups} view={view} />;
+ return <ToolGroups toolGroups={toolGroup._toolGroups} state={state} />;
}
return (
- <ToolGroupComponent key={uuidv4()} tools={toolGroup._tools} view={view} />
+ <ToolGroupComponent
+ key={uuidv4()}
+ tools={toolGroup._tools}
+ state={state}
+ />
);
});
};
diff --git a/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js b/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js
index 9a51ca6e2..6250983e2 100644
--- a/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js
+++ b/wax-prosemirror-core/src/config/defaultServices/MenuService/Menu.js
@@ -1,6 +1,6 @@
import React, { useMemo, useContext } from 'react';
import { injectable } from 'inversify';
-import { WaxContext } from '../../../WaxContext';
+import { StateContext } from '../../../StateContext';
import ToolGroup from '../../../utilities/lib/ToolGroup';
import MenuWrapper from './MenuWrapper';
@@ -35,10 +35,11 @@ class Menu {
render() {
return () => {
- const { activeView } = useContext(WaxContext);
+ const context = useContext(StateContext);
+ console.log(context);
const Bar = useMemo(() => (
// eslint-disable-next-line react/no-this-in-sfc
- <MenuWrapper items={this.toolGroups} view={activeView || {}} />
+ <MenuWrapper items={this.toolGroups} state={context.state} />
));
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 4a77932c3..5c139a297 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 = [], view }) => {
- return <>{map(items, item => item.renderTools(view))}</>;
+const MainMenuBar = ({ items = [], state }) => {
+ return <>{map(items, item => item.renderTools(state))}</>;
};
export default MainMenuBar;
diff --git a/wax-prosemirror-core/src/useWaxView.js b/wax-prosemirror-core/src/useWaxView.js
index af16d37b8..644e0f70f 100644
--- a/wax-prosemirror-core/src/useWaxView.js
+++ b/wax-prosemirror-core/src/useWaxView.js
@@ -3,6 +3,7 @@ import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import trackedTransaction from './utilities/track-changes/trackedTransaction';
import { WaxContext } from './WaxContext';
+import { StateContext } from './StateContext';
import { PortalContext } from './PortalContext';
import WaxOptions from './WaxOptions';
import helpers from './helpers/helpers';
@@ -25,6 +26,7 @@ const useWaxView = props => {
onChange,
} = props;
+ const stateContext = useContext(StateContext);
const context = useContext(WaxContext);
const [WaxView, setWaxView] = useState(null);
const { createPortal } = useContext(PortalContext);
@@ -67,6 +69,8 @@ const useWaxView = props => {
'main',
);
+ stateContext.updateState(view.state);
+
setTimeout(() => {
if (autoFocus && view) {
view.focus();
@@ -104,12 +108,7 @@ const useWaxView = props => {
context.setTransaction(transaction);
if (!transaction.getMeta('outsideView')) {
- context.updateView(
- {
- main: view,
- },
- 'main',
- );
+ stateContext.updateState(view.state);
}
const docContent =
diff --git a/wax-prosemirror-core/src/utilities/lib/ToolGroup.js b/wax-prosemirror-core/src/utilities/lib/ToolGroup.js
index 0e50d3fb4..b03ca71d4 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(view) {
- if (isEmpty(view)) return null;
+ renderTools(state) {
+ if (isEmpty(state)) return null;
const { name } = this.constructor;
if (this._toolGroups > 0) {
- return <ToolGroups toolGroups={this._toolGroups} view={view} />;
+ return <ToolGroups toolGroups={this._toolGroups} state={state} />;
}
const MemorizedToolGroupComponent = useMemo(
@@ -74,7 +74,7 @@ class ToolGroup {
name={name}
title={this.title}
tools={this._tools}
- view={view}
+ state={state}
/>
),
[],
diff --git a/wax-prosemirror-core/src/utilities/lib/Tools.js b/wax-prosemirror-core/src/utilities/lib/Tools.js
index 0d3490a3b..6a2f8e5e6 100644
--- a/wax-prosemirror-core/src/utilities/lib/Tools.js
+++ b/wax-prosemirror-core/src/utilities/lib/Tools.js
@@ -51,11 +51,11 @@ class Tools {
};
}
- renderTool(view) {
- if (isEmpty(view)) return null;
-
+ renderTool(state) {
+ if (isEmpty(state)) return null;
+ console.log(state);
return this._isDisplayed ? (
- <Button item={this.toJSON()} key={uuidv4()} view={view} />
+ <Button item={this.toJSON()} key={uuidv4()} state={state} />
) : null;
}
diff --git a/wax-prosemirror-services/rollup.config.js b/wax-prosemirror-services/rollup.config.js
index 7c3ad593f..61e1e808c 100644
--- a/wax-prosemirror-services/rollup.config.js
+++ b/wax-prosemirror-services/rollup.config.js
@@ -34,7 +34,7 @@ export default {
exclude: 'node_modules/**',
}),
commonjs(),
- terser(),
+ // terser(),
],
external: [
'uuid',
diff --git a/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js b/wax-prosemirror-services/src/InlineAnnotations/AnnotationToolGroupService/Annotations.js
index 10644c26c..236786a82 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(view) {
- if (isEmpty(view)) return null;
+ renderTools(state) {
+ if (isEmpty(state)) return null;
const { name } = this.constructor;
@@ -41,13 +41,13 @@ class Annotations extends ToolGroup {
() => (
<ToolGroupComponent
key={uuidv4()}
- view={view}
+ state={state}
tools={this._tools}
title={this.title}
name={name}
/>
),
- [view],
+ [state],
);
return MemorizedToolGroupComponent;
diff --git a/wax-prosemirror-services/src/YjsService/YjsService.js b/wax-prosemirror-services/src/YjsService/YjsService.js
index d203214bd..8d0cb7a85 100644
--- a/wax-prosemirror-services/src/YjsService/YjsService.js
+++ b/wax-prosemirror-services/src/YjsService/YjsService.js
@@ -43,17 +43,14 @@ class YjsService extends Service {
this.app.PmPlugins.add('ySyncPlugin', ySyncPlugin(type));
- if (cursorBuilder) {
- this.app.PmPlugins.add(
- 'yCursorPlugin',
- yCursorPlugin(provider.awareness, { cursorBuilder }),
- );
- } else {
- this.app.PmPlugins.add(
- 'yCursorPlugin',
- yCursorPlugin(provider.awareness),
- );
- }
+ // if (cursorBuilder) {
+ // this.app.PmPlugins.add(
+ // 'yCursorPlugin',
+ // yCursorPlugin(provider.awareness, { cursorBuilder }),
+ // );
+ // } else {
+ this.app.PmPlugins.add('yCursorPlugin', yCursorPlugin(provider.awareness));
+ // }
this.app.PmPlugins.add('yUndoPlugin', yUndoPlugin());
}
--
GitLab