diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index d78339fb32b49056d8f4c1095f253c99d6e457ee..2386bb268a7ebb8f7d64173f942de729e42b0552 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 a1e5e3a30a845e5bd34f007d26626d97ed08708d..99e18bebc117c74bceb239bc95e709174797817d 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 9227cb24d058f05235db4ac16201367105dbd3d8..02c1e2bd0d8523adee16c870bfcf727ade1e0919 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 bb3e37b3ed330312c00caf96b750790d2773fbde..60d79e93baf8f47c239991ba53057ff01a4f9300 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 fb1929aff1094d8d1c74488aef54ab6dc78bc753..bf8823fbc67459fa556d367411086e2642ad70ad 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 2900eff7127258e9b86a4bd755fceb538063df61..8c8b8799ae3d79363fc3f88cbb77791ac487515b 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 5a35a8deb7c1dfba8466a6a3077a7fc4ad54a931..8b6ad0d48b2c25789c9d36e65dcf524f12bbbf57 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 d673aceaf1ff9472ff267b65bdc7db17215c04b7..6ab5d6ceccfbfd7254841c9b9f486ff45fbbe93c 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 e097668166458487a93e130a805d2ee9c92d4863..ccb2278ab6b3d674df3c3c8a5e764defd41a48ab 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 9a51ca6e2de4e9a10458d637d2e4531229166ab0..6250983e224d2470b9dfd8bd7be4161bcbfd5856 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 4a77932c3d544e05809355fe07609ce840520704..5c139a297fc788af469203f6348ba928243c5283 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 af16d37b85908972aec2d455cdbcf02c8b241959..644e0f70f0ab3b9960f7f61961fa14078f823e1a 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 0e50d3fb417e4364ed5a50a8fb0b6e4bf3062da9..b03ca71d42e6c1576c8d2c668448bf3a4739e641 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 0d3490a3b6c2879a6c8bd76c93b0596ff9b68fa4..6a2f8e5e691c6b734cc194a17c0788362b97bd30 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 7c3ad593f6ae8f9ed774cac252417172b22112c5..61e1e808c0e3504b1ace319e0c87503f309f8896 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 10644c26ced48a8a12ea7a494343ea1e0632069c..236786a8291670554add0555ce328c8fe82d5092 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 d203214bd99d872f0ab2ae497da616b63a9b1c13..8d0cb7a859ab7000f49b1ae5f713abe74a3e0167 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());
}