Skip to content
Snippets Groups Projects
Commit 5387d39b authored by chris's avatar chris
Browse files

useWaxView

parent 11383b1d
No related branches found
No related tags found
1 merge request!590Build wax view
Hide whitespace changes
Inline Side-by-side
editors/demo/src/Editoria/layout/EditoriaLayout.js
+ 90
− 41
View file @ 5387d39b
......@@ -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>
......
wax-prosemirror-core/index.js
+ 2
− 0
View file @ 5387d39b
/* Editor */
export { default as Wax } from './src/Wax';
export { default as useWaxView } from './src/useWaxView';
/* Service Class */
export { default as Service } from './src/Service';
......
wax-prosemirror-core/src/Wax.js
+ 55
− 23
View file @ 5387d39b
......@@ -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>
);
......
wax-prosemirror-core/src/WaxView.js
+ 17
− 8
View file @ 5387d39b
......@@ -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;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment