Skip to content
Snippets Groups Projects
Commit 1dc8a5c1 authored by chris's avatar chris
Browse files

new WaxView

parent 5387d39b
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
+ 53
− 95
View file @ 1dc8a5c1
......@@ -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>
......
wax-prosemirror-core/index.js
+ 1
− 1
View file @ 1dc8a5c1
/* 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';
......
wax-prosemirror-core/src/Application.js
+ 2
− 7
View file @ 1dc8a5c1
......@@ -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();
......
wax-prosemirror-core/src/Wax.js
+ 15
− 62
View file @ 1dc8a5c1
/* 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>
);
......
wax-prosemirror-core/src/WaxView.js
+ 22
− 130
View file @ 1dc8a5c1
......@@ -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;
wax-prosemirror-core/src/config/defaultServices/MenuService/MenuService.js
+ 8
− 0
View file @ 1dc8a5c1
......@@ -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());
});
......
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