From 5387d39bc6bcb52c9bf2abd1f5c9695c7d9aec51 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 17 Jun 2024 15:31:59 +0300
Subject: [PATCH] useWaxView
---
.../src/Editoria/layout/EditoriaLayout.js | 131 ++++++++++++------
wax-prosemirror-core/index.js | 2 +
wax-prosemirror-core/src/Wax.js | 78 ++++++++---
wax-prosemirror-core/src/WaxView.js | 25 ++--
4 files changed, 164 insertions(+), 72 deletions(-)
diff --git a/editors/demo/src/Editoria/layout/EditoriaLayout.js b/editors/demo/src/Editoria/layout/EditoriaLayout.js
index 40b7c1a02..353c84cfd 100644
--- a/editors/demo/src/Editoria/layout/EditoriaLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaLayout.js
@@ -11,6 +11,7 @@ import {
WaxContext,
ComponentPlugin,
DocumentHelpers,
+ useWaxView,
} from 'wax-prosemirror-core';
import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
@@ -220,43 +221,81 @@ const DummyCompo = () => {
return <div>MY DIV</div>;
};
-const EditoriaLayout = ({ editor }) => {
+const EditorComponent = props => {
+ useWaxView(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),
@@ -271,6 +310,7 @@ const EditoriaLayout = ({ editor }) => {
// currentUser: true,
// }]
+ console.log('ssss');
return (
<ThemeProvider theme={cokoTheme}>
{Dummy}
@@ -294,11 +334,31 @@ const EditoriaLayout = ({ editor }) => {
onResizeEnd={onResizeEnd}
>
<WaxSurfaceScroll>
- <EditorContainer>{editor}</EditorContainer>
+ <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> */}
<CommentsContainer>
<CommentTrackToolsContainer>
<CommentTrackTools>
- {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
+ {/* {commentsTracksCount + trackBlockNodesCount} COMMENTS AND */}
SUGGESTIONS
<CommentTrackOptions>
<CommentTrackToolBar />
@@ -308,17 +368,6 @@ const EditoriaLayout = ({ editor }) => {
<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 0bc457d6c..662d87b29 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -1,6 +1,8 @@
/* Editor */
export { default as Wax } from './src/Wax';
+export { default as useWaxView } from './src/useWaxView';
+
/* Service Class */
export { default as Service } from './src/Service';
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index 646ce5751..485bf8f89 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -10,6 +10,7 @@ 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);
@@ -35,6 +36,16 @@ const createConfigWithHash = config => {
return configHash;
};
+const setupLayout = (application, layout) => {
+ const Layout = application.container.get('Layout');
+ if (layout) Layout.setLayout(layout);
+
+ console.log(Layout.layoutComponent);
+ return WaviewMemo || Layout.layoutComponent;
+};
+
+let WaviewMemo = null;
+
const Wax = forwardRef((props, ref) => {
const {
autoFocus,
@@ -67,19 +78,10 @@ const Wax = forwardRef((props, ref) => {
console.log('create application from config. hash:', configHash);
const newApplication = createApplication(props);
+ WaviewMemo = setupLayout(newApplication, layout);
setApplication(newApplication);
}, [configHash]);
- const [WaxRender, setLayout] = useState(null);
-
- useEffect(() => {
- if (application) {
- const Layout = application.container.get('Layout');
- if (layout) Layout.setLayout(layout);
- setLayout(() => Layout.layoutComponent);
- }
- }, [application?.id]);
-
const finalOnChange = content => {
if (!onChange) return;
const { schema } = application.schema;
@@ -90,20 +92,52 @@ const Wax = forwardRef((props, ref) => {
// if (layout) Layout.setLayout(layout);
// const WaxRender = Layout.layoutComponent;
- // const WaviewMemo = useMemo(
- // () => (
-
- // ),
- // [],
- // );
+ // 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);
-
- if (!application || !WaxRender) return null;
-
+ // 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);
return (
<WaxProvider app={application}>
<PortalProvider>
- <WaxView
+ <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
autoFocus={autoFocus}
browserSpellCheck={browserSpellCheck}
customValues={customValues}
@@ -122,9 +156,7 @@ const Wax = forwardRef((props, ref) => {
}
user={user}
value={value}
- >
- {({ editor }) => <WaxRender className={className} editor={editor} />}
- </WaxView>
+ /> */}
</PortalProvider>
</WaxProvider>
);
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 465a2f835..4e08b53dc 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -147,8 +147,17 @@ const WaxView = forwardRef((props, ref) => {
if (!previousDoc.eq(view.state.doc) || tr.getMeta('forceUpdate'))
props.onChange(docContent);
};
+ console.log(view);
- const editor = (
+ // const editor = (
+ // <EditorContainer>
+ // <div ref={setEditorRef} />
+ // <WaxOverlays activeViewId="main" group="main" />
+ // <WaxPortals />
+ // </EditorContainer>
+ // );
+
+ return (
<EditorContainer>
<div ref={setEditorRef} />
<WaxOverlays activeViewId="main" group="main" />
@@ -156,13 +165,13 @@ const WaxView = forwardRef((props, ref) => {
</EditorContainer>
);
- return useMemo(
- () =>
- props.children({
- editor,
- }),
- [readonly, customValues, context.app.id],
- );
+ // return useMemo(
+ // () =>
+ // props.children({
+ // editor,
+ // }),
+ // [readonly, customValues, context.app.id],
+ // );
});
export default WaxView;
--
GitLab