diff --git a/editors/demo/src/Editoria/layout/EditoriaLayout.js b/editors/demo/src/Editoria/layout/EditoriaLayout.js
index 353c84cfda903fbf70071c30dc1bd4ef720c0917..87eeef71f895ce77d65f63f896b6045e2e7d1335 100644
--- a/editors/demo/src/Editoria/layout/EditoriaLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaLayout.js
@@ -11,7 +11,7 @@ import {
WaxContext,
ComponentPlugin,
DocumentHelpers,
- useWaxView,
+ WaxView,
} from 'wax-prosemirror-core';
import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
@@ -216,86 +216,51 @@ const RightArea = ComponentPlugin('rightArea');
const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
const BottomRightInfo = ComponentPlugin('BottomRightInfo');
+const WaxPortals = ComponentPlugin('waxPortals');
+const WaxOverlays = ComponentPlugin('waxOverlays');
+
const DummyCompo = () => {
console.log('dummy');
return <div>MY DIV</div>;
};
-const EditorComponent = props => {
- useWaxView(props);
+const EditoriaLayout = props => {
const {
pmViews: { main },
+ options,
} = useContext(WaxContext);
-
- const editorRef = useCallback(
- element => {
- if (element && main) {
- element.replaceChildren(main?.dom);
- }
- },
- [main],
- );
-
- useEffect(() => {
- if (props.autoFocus) {
- main?.focus();
- }
- }, [props.autoFocus, main]);
-
- return <div ref={editorRef} className="prosemirror-editor" />;
-};
-
-const EditoriaLayout = ({
- className,
- browserSpellCheck,
- customValues,
- readonly,
- autoFocus,
- user,
- targetFormat,
- serializer,
- scrollMargin,
- scrollThreshold,
- fileUpload,
- finalOnChange,
- placeholder,
-}) => {
- // const {
- // pmViews: { main },
- // options,
- // } = useContext(WaxContext);
const Dummy = useMemo(() => {
return <DummyCompo />;
}, []);
let fullScreenStyles = {};
- // if (options.fullScreen) {
- // fullScreenStyles = {
- // backgroundColor: '#fff',
- // height: '100%',
- // left: '0',
- // margin: '0',
- // padding: '0',
- // position: 'fixed',
- // top: '0',
- // width: '100%',
- // zIndex: '99999',
- // };
- // }
- // const notes = main && getNotes(main);
- // const commentsTracksCount =
- // main && DocumentHelpers.getCommentsTracksCount(main);
- // const trackBlockNodesCount =
- // main && DocumentHelpers.getTrackBlockNodesCount(main);
-
- // const areNotes = notes && !!notes.length && notes.length > 0;
-
- // const [hasNotes, setHasNotes] = useState(areNotes);
-
- // const showNotes = () => {
- // setHasNotes(areNotes);
- // };
+ if (options.fullScreen) {
+ fullScreenStyles = {
+ backgroundColor: '#fff',
+ height: '100%',
+ left: '0',
+ margin: '0',
+ padding: '0',
+ position: 'fixed',
+ top: '0',
+ width: '100%',
+ zIndex: '99999',
+ };
+ }
+ const notes = main && getNotes(main);
+ const commentsTracksCount =
+ main && DocumentHelpers.getCommentsTracksCount(main);
+ const trackBlockNodesCount =
+ main && DocumentHelpers.getTrackBlockNodesCount(main);
+
+ const areNotes = notes && !!notes.length && notes.length > 0;
+
+ const [hasNotes, setHasNotes] = useState(areNotes);
+
+ const showNotes = () => {
+ setHasNotes(areNotes);
+ };
const delayedShowedNotes = useCallback(
// setTimeout(() => showNotes(), 100),
@@ -304,13 +269,14 @@ const EditoriaLayout = ({
useEffect(() => {}, [delayedShowedNotes]);
- // const users = [{
- // userId: '1',
- // displayName: 'test test',
- // currentUser: true,
- // }]
+ const users = [
+ {
+ userId: '1',
+ displayName: 'test test',
+ currentUser: true,
+ },
+ ];
- console.log('ssss');
return (
<ThemeProvider theme={cokoTheme}>
{Dummy}
@@ -334,31 +300,13 @@ const EditoriaLayout = ({
onResizeEnd={onResizeEnd}
>
<WaxSurfaceScroll>
- <EditorComponent
- className={className}
- autoFocus={autoFocus}
- browserSpellCheck={browserSpellCheck}
- customValues={customValues}
- fileUpload={fileUpload}
- onChange={finalOnChange || (() => true)}
- placeholder={placeholder}
- readonly={readonly}
- // ref={ref}
- scrollMargin={scrollMargin}
- scrollThreshold={scrollThreshold}
- serializer={serializer}
- targetFormat={targetFormat}
- // TrackChange={
- // application.config.get('config.EnableTrackChangeService') ||
- // undefined
- // }
- user={user}
- />
- {/* <EditorContainer>{editor}</EditorContainer> */}
+ <EditorContainer>
+ <WaxView {...props} />
+ </EditorContainer>
<CommentsContainer>
<CommentTrackToolsContainer>
<CommentTrackTools>
- {/* {commentsTracksCount + trackBlockNodesCount} COMMENTS AND */}
+ {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
SUGGESTIONS
<CommentTrackOptions>
<CommentTrackToolBar />
@@ -368,6 +316,16 @@ const EditoriaLayout = ({
<RightArea area="main" />
</CommentsContainer>
</WaxSurfaceScroll>
+ {hasNotes && (
+ <NotesAreaContainer>
+ <NotesContainer id="notes-container">
+ <NotesArea view={main} />
+ </NotesContainer>
+ <CommentsContainerNotes>
+ <RightArea area="notes" />
+ </CommentsContainerNotes>
+ </NotesAreaContainer>
+ )}
</PanelGroup>
</EditorArea>
</Main>
diff --git a/wax-prosemirror-core/index.js b/wax-prosemirror-core/index.js
index 662d87b294ce0e317e982b4c63d83cfde1248fa8..42ea154a7463331a5955f8657b251aa44cd20331 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -1,7 +1,7 @@
/* Editor */
export { default as Wax } from './src/Wax';
-export { default as useWaxView } from './src/useWaxView';
+export { default as WaxView } from './src/WaxView';
/* Service Class */
export { default as Service } from './src/Service';
diff --git a/wax-prosemirror-core/src/Application.js b/wax-prosemirror-core/src/Application.js
index 8a1e335d45ba1e419f5f0cff4ae58f6c179db292..0c226701b5ea7b43156409ee297b53f91fd50be9 100644
--- a/wax-prosemirror-core/src/Application.js
+++ b/wax-prosemirror-core/src/Application.js
@@ -3,11 +3,10 @@ import 'reflect-metadata';
import deepmerge from 'deepmerge';
import { v4 as uuidv4 } from 'uuid';
+import { cloneDeep } from 'lodash';
import Config from './config/Config';
import defaultConfig from './config/defaultConfig';
import PmPlugins from './PmPlugins';
-import DefaultSchema from './utilities/schema/DefaultSchema';
-import { cloneDeep } from 'lodash';
export default class Application {
constructor(container) {
@@ -102,13 +101,10 @@ export default class Application {
},
);
- // const appConfig = {
- // config: { SchemaService: DefaultSchema, ...defaultConfig() },
- // };
-
/*
Create Container
*/
+
const container = new Container();
/*
@@ -118,7 +114,6 @@ export default class Application {
container.bind('Wax').toFactory(() => new Application(container));
- console.log(appConfig);
container.bind('config').toConstantValue(appConfig);
container.bind('Config').to(Config).inSingletonScope();
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index 485bf8f89864aa0670af6fb76aa39bae68a03812..46ec248371bcf4773ad2d8218289282ccb066c83 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -1,16 +1,13 @@
/* eslint react/prop-types: 0 */
-import React, { useEffect, useState, forwardRef, useMemo } from 'react';
+import React, { useEffect, useState, forwardRef } from 'react';
import { DOMSerializer } from 'prosemirror-model';
-import { v4 as uuidv4 } from 'uuid';
import CryptoJS from 'crypto-js';
import stringify from 'safe-stable-stringify';
import DefaultSchema from './utilities/schema/DefaultSchema';
import WaxProvider from './WaxContext';
import PortalProvider from './PortalContext';
import Application from './Application';
-import WaxView from './WaxView';
import helpers from './helpers/helpers';
-import useWaxView from './useWaxView';
const serializer = schema => {
const WaxSerializer = DOMSerializer.fromSchema(schema);
@@ -39,14 +36,12 @@ const createConfigWithHash = config => {
const setupLayout = (application, layout) => {
const Layout = application.container.get('Layout');
if (layout) Layout.setLayout(layout);
-
- console.log(Layout.layoutComponent);
- return WaviewMemo || Layout.layoutComponent;
+ return WaxLayout || Layout.layoutComponent;
};
-let WaviewMemo = null;
+let WaxLayout = null;
-const Wax = forwardRef((props, ref) => {
+const Wax = forwardRef((props, innerViewRef) => {
const {
autoFocus,
browserSpellCheck,
@@ -69,16 +64,17 @@ const Wax = forwardRef((props, ref) => {
const configHash = createConfigWithHash(config);
// useEffect(() => {
- // const newApplication = createApplication(props);
- // setApplication(newApplication);
- // return () => newApplication.resetApp();
+ // // const newApplication = createApplication(props);
+ // // setApplication(newApplication);
+ // return () => application.resetApp();
// }, []);
useEffect(() => {
console.log('create application from config. hash:', configHash);
+ // if (application) application.resetApp();
const newApplication = createApplication(props);
- WaviewMemo = setupLayout(newApplication, layout);
+ WaxLayout = setupLayout(newApplication, layout);
setApplication(newApplication);
}, [configHash]);
@@ -88,64 +84,21 @@ const Wax = forwardRef((props, ref) => {
helpers.saveContent(content, onChange, schema, serializer, targetFormat);
};
- // const Layout = application.container.get('Layout');
- // if (layout) Layout.setLayout(layout);
- // const WaxRender = Layout.layoutComponent;
-
- // const WaviewMemo = () =>
- // useMemo(
- // () => ({
- // // eslint-disable-next-line no-shadow
- // if(application) {
- // const Layout = application.container.get('Layout');
- // if (layout) Layout.setLayout(layout);
- // return () => Layout.layoutComponent;
- // },
- // }),
- // [],
- // );
- // console.log(WaviewMemo);
- // let WaviewMemo = null;
- // if (application) {
- // const Layout = application.container.get('Layout');
- // if (layout) Layout.setLayout(layout);
- // WaviewMemo = Layout.layoutComponent;
- // }
- if (!application || !WaviewMemo) return null;
-
- console.log(WaviewMemo);
+ if (!application || !WaxLayout) return null;
+
return (
<WaxProvider app={application}>
<PortalProvider>
- <WaviewMemo
- className={className}
- autoFocus={autoFocus}
- browserSpellCheck={browserSpellCheck}
- customValues={customValues}
- fileUpload={fileUpload}
- onChange={finalOnChange || (() => true)}
- placeholder={placeholder}
- readonly={readonly}
- ref={ref}
- scrollMargin={scrollMargin}
- scrollThreshold={scrollThreshold}
- serializer={serializer}
- targetFormat={targetFormat}
- TrackChange={
- application.config.get('config.EnableTrackChangeService') ||
- undefined
- }
- user={user}
- />
- {/* <WaxView
+ <WaxLayout
autoFocus={autoFocus}
browserSpellCheck={browserSpellCheck}
+ className={className}
customValues={customValues}
fileUpload={fileUpload}
+ innerViewRef={innerViewRef}
onChange={finalOnChange || (() => true)}
placeholder={placeholder}
readonly={readonly}
- ref={ref}
scrollMargin={scrollMargin}
scrollThreshold={scrollThreshold}
serializer={serializer}
@@ -156,7 +109,7 @@ const Wax = forwardRef((props, ref) => {
}
user={user}
value={value}
- /> */}
+ />
</PortalProvider>
</WaxProvider>
);
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 4e08b53dc6347291104a708ba48955e00e61306c..49783fec46487affa51182605e091ef0c250d5dd 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -20,6 +20,7 @@ import WaxOptions from './WaxOptions';
import helpers from './helpers/helpers';
import './styles/styles.css';
+import useWaxView from './useWaxView';
const EditorContainer = styled.div`
height: 100%;
@@ -29,149 +30,40 @@ const EditorContainer = styled.div`
const WaxPortals = ComponentPlugin('waxPortals');
const WaxOverlays = ComponentPlugin('waxOverlays');
-let previousDoc;
-
-const WaxView = forwardRef((props, ref) => {
- let view;
+const WaxView = props => {
+ const { autoFocus } = props;
+ useWaxView(props);
const {
- browserSpellCheck,
- customValues,
- readonly,
- autoFocus,
- user,
- targetFormat,
- serializer,
- scrollMargin,
- scrollThreshold,
- } = props;
-
- const context = useContext(WaxContext);
- const { createPortal } = useContext(PortalContext);
- const [mounted, setMounted] = useState(false);
-
- context.app.setContext({ ...context, createPortal });
- const schema = context.app.getSchema();
-
- const setEditorRef = useCallback(
- node => {
- if (node) {
- // if (!mounted) {
- context.app.bootServices();
- context.app.getShortCuts();
- context.app.getRules();
- // }
- const options = WaxOptions({
- ...props,
- schema,
- plugins: context.app.getPlugins(),
- });
-
- view = new EditorView(
- { mount: node },
- {
- editable: () => !readonly,
- customValues,
- state: EditorState.create(options),
- dispatchTransaction,
- disallowedTools: [],
- user,
- scrollMargin: scrollMargin || 200,
- scrollThreshold: scrollThreshold || 200,
- attributes: {
- spellcheck: browserSpellCheck ? 'true' : 'false',
- },
- },
- );
-
- setMounted(true);
-
- context.updateView(
- {
- main: view,
- },
- 'main',
- );
- setTimeout(() => {
- if (autoFocus && view) {
- view.state.tr.insertText('', 0);
- view.dispatch(view.state.tr.scrollIntoView());
- view.focus();
- }
- }, 500);
+ pmViews: { main },
+ app,
+ } = useContext(WaxContext);
+
+ // useEffect(() => {
+ // return () => app.resetApp();
+ // }, []);
+
+ const editorRef = useCallback(
+ element => {
+ if (element && main) {
+ element.replaceWith(main?.dom);
}
- return node;
},
- [readonly, customValues, context.app.id],
+ [main],
);
useEffect(() => {
- return () => (view = null);
- }, []);
-
- useImperativeHandle(ref, () => ({
- getContent() {
- return helpers.getDocContent(schema, serializer, targetFormat, context);
- },
- }));
-
- const dispatchTransaction = transaction => {
- const { TrackChange } = props;
- const tr =
- TrackChange && TrackChange.enabled
- ? trackedTransaction(transaction, view.state, user, context)
- : transaction;
-
- if (!view) return;
-
- previousDoc = view.state.doc;
- const state = view.state.apply(tr);
- view.updateState(state);
-
- /* when a transaction comes from a view other than
- main don't keep updating the view ,as this is
- the central point of each transaction
- */
- context.setTransaction(transaction);
-
- if (!transaction.getMeta('outsideView')) {
- context.updateView(
- {
- main: view,
- },
- 'main',
- );
+ if (autoFocus && main) {
+ main.focus();
}
-
- const docContent =
- targetFormat === 'JSON' ? state.doc.toJSON() : state.doc.content;
- if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
- props.onChange(docContent);
- };
- console.log(view);
-
- // const editor = (
- // <EditorContainer>
- // <div ref={setEditorRef} />
- // <WaxOverlays activeViewId="main" group="main" />
- // <WaxPortals />
- // </EditorContainer>
- // );
+ }, [autoFocus, main]);
return (
<EditorContainer>
- <div ref={setEditorRef} />
+ <div ref={editorRef} />
<WaxOverlays activeViewId="main" group="main" />
<WaxPortals />
</EditorContainer>
);
-
- // return useMemo(
- // () =>
- // props.children({
- // editor,
- // }),
- // [readonly, customValues, context.app.id],
- // );
-});
+};
export default WaxView;
diff --git a/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuService.js b/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuService.js
index 3b5d8418555b9c93f9261b93d4cd9bb65029696f..9b159bc8b4d70fd4e75b64d32d30c91683b370ca 100644
--- a/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuService.js
+++ b/wax-prosemirror-core/src/config/defaultServices/MenuService/MenuService.js
@@ -11,6 +11,14 @@ class MenuService extends Service {
if (this.app.config.get('config.MenuService') === undefined) return false;
const { menus } = this.container.get('MenuCollection');
const layout = this.container.get('Layout');
+
+ // console.log(layout.components.mainMenuToolBar);
+ menus.forEach(menu => {
+ if (layout.components[menu.config.templateArea]) {
+ layout.components[menu.config.templateArea].clear();
+ }
+ });
+
menus.forEach(menu => {
layout.addComponent(menu.config.templateArea, menu.render());
});