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

view

parent 5e9f8e6c
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/Editoria.js
+ 16
− 2
View file @ f6089f8e
......@@ -6,6 +6,7 @@ import { EditoriaLayout, EditoriaMobileLayout } from './layout';
import { config, configMobile } from './config';
import { demo } from './demo';
import { debounce } from 'lodash';
import { TablesService } from 'wax-table-service';
const renderImage = file => {
const reader = new FileReader();
......@@ -32,6 +33,7 @@ const user = {
// }];
const Editoria = () => {
const [myConfig, setMyConfig] = useState(config);
const [width] = useWindowSize();
let layout = EditoriaLayout;
......@@ -48,10 +50,22 @@ const Editoria = () => {
const EditoriaComponent = useMemo(
() => (
<>
<button
onClick={() => {
console.log(myConfig);
myConfig.PmPlugins = [];
myConfig.services = [...myConfig.services, new TablesService()];
setMyConfig({ ...myConfig });
}}
>
{' '}
change config
</button>
<Wax
ref={editorRef}
key={key}
config={finalConfig}
config={myConfig}
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
......@@ -68,7 +82,7 @@ const Editoria = () => {
</>
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[layout, finalConfig],
[layout, myConfig],
);
return <>{EditoriaComponent}</>;
};
......
editors/demo/src/Editoria/config/config.js
+ 11
− 12
View file @ f6089f8e
......@@ -52,8 +52,7 @@ async function DummyPromise(userInput, { askKb }) {
} else {
// JSON response test
const json = JSON.stringify({
content:
askKb ? 'KB will be queried' : 'Just a normal call',
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/'],
});
......@@ -234,7 +233,7 @@ export default {
'SpecialCharacters',
'CodeBlock',
'ToggleAi',
'Tables',
// 'Tables',
'TrackingAndEditing',
'FullScreen',
],
......@@ -306,13 +305,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,7 +324,7 @@ export default {
},
services: [
new YjsService(),
// new YjsService(),
new BlockDropDownToolGroupService(),
new AskAiContentService(),
new CustomTagService(),
......@@ -337,7 +336,7 @@ export default {
new TrackChangeService(),
new CommentsService(),
new ImageService(),
new TablesService(),
// new TablesService(),
new BaseService(),
// new NoteService(),
new CodeBlockService(),
......
wax-prosemirror-core/src/Application.js
+ 6
− 3
View file @ f6089f8e
import { Container } from 'inversify';
import 'reflect-metadata';
import deepmerge from 'deepmerge';
import { v4 as uuidv4 } from 'uuid';
import Config from './config/Config';
import defaultConfig from './config/defaultConfig';
import PmPlugins from './PmPlugins';
export default class Application {
constructor(container) {
this.id = uuidv4();
this.container = container;
this.PmPlugins = container.get('PmPlugins');
}
......@@ -101,12 +104,12 @@ export default class Application {
Set base bindings for the App to work
*/
container.bind('PmPlugins').to(PmPlugins).inSingletonScope();
container.bind('PmPlugins').to(PmPlugins);
container.bind('Wax').toFactory(() => new Application(container));
container.bind('config').toConstantValue(appConfig);
container.bind('Config').to(Config).inSingletonScope();
container.bind('config').toFactory(() => appConfig);
container.bind('Config').to(Config);
/*
Start the App
......
wax-prosemirror-core/src/Wax.js
+ 6
− 0
View file @ f6089f8e
......@@ -35,6 +35,7 @@ const Wax = forwardRef((props, ref) => {
autoFocus,
browserSpellCheck,
className,
config,
customValues,
fileUpload,
layout,
......@@ -49,6 +50,11 @@ const Wax = forwardRef((props, ref) => {
scrollThreshold,
} = props;
useEffect(() => {
const newApplication = createApplication(props);
setApplication(newApplication);
}, [config.PmPlugins.length]);
if (!application) return null;
const finalOnChange = content => {
......
wax-prosemirror-core/src/WaxContext.js
+ 11
− 8
View file @ f6089f8e
/* eslint react/prop-types: 0 */
/* eslint react/destructuring-assignment: 0 */
import React, { useContext, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
export const WaxContext = React.createContext({
pmViews: {},
......@@ -41,14 +41,17 @@ export default props => {
},
});
return (
<WaxContext.Provider
value={{
useEffect(() => {
if (props.app.config.get('config.PmPlugins').length === 0) {
setContext({
...context,
}}
>
{props.children}
</WaxContext.Provider>
app: props.app,
});
}
}, [props.app.id]);
return (
<WaxContext.Provider value={context}>{props.children}</WaxContext.Provider>
);
};
......
wax-prosemirror-core/src/WaxView.js
+ 33
− 50
View file @ f6089f8e
......@@ -7,7 +7,6 @@ import React, {
useEffect,
forwardRef,
useImperativeHandle,
useState,
} from 'react';
import styled from 'styled-components';
import { EditorState } from 'prosemirror-state';
......@@ -40,7 +39,6 @@ const WaxView = forwardRef((props, ref) => {
customValues,
readonly,
autoFocus,
reconfigureState,
user,
placeholder,
targetFormat,
......@@ -51,18 +49,19 @@ const WaxView = forwardRef((props, ref) => {
const context = useContext(WaxContext);
const { createPortal } = useContext(PortalContext);
const [mounted, setMounted] = useState(false);
// 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();
}
// if (!mounted) {
context.app.bootServices();
context.app.getShortCuts();
context.app.getRules();
// }
const options = WaxOptions({
...props,
schema,
......@@ -86,7 +85,7 @@ const WaxView = forwardRef((props, ref) => {
},
);
setMounted(true);
// setMounted(true);
context.updateView(
{
......@@ -104,7 +103,7 @@ const WaxView = forwardRef((props, ref) => {
}
return node;
},
[readonly, customValues],
[readonly, customValues, context.app.id],
);
useEffect(() => {
......@@ -112,52 +111,36 @@ const WaxView = forwardRef((props, ref) => {
}, []);
useEffect(() => {
console.log('in reconfigure');
// const parse = parser(schema);
if (!reconfigureState) return;
if (context.app.config.get('config.PmPlugins').length === 0) {
let finalPlugins = [];
const createPlaceholder = () => {
return Placeholder({ content: placeholder });
};
finalPlugins = defaultPlugins.concat([
createPlaceholder(placeholder),
...context.app.getPlugins(),
]);
(reconfigureState?.plugins || []).forEach(plugin => {
const pluginKey = Object.keys(plugin)[0];
const pluginValue = plugin[pluginKey];
const reconfigureOptions = {
// doc: parse(value),
schema,
plugins: finalPlugins,
};
if (context.app.PmPlugins.get(pluginKey)) {
context.app.PmPlugins.replace(pluginKey, pluginValue);
} else {
context.app.PmPlugins.add(pluginKey, pluginValue);
context.pmViews.main.updateState(EditorState.create(reconfigureOptions));
if (context.pmViews.main.dispatch) {
context.pmViews.main.dispatch(
context.pmViews?.main.state.tr.setMeta('addToHistory', false),
);
}
});
console.log(
'in reconfigure down',
reconfigureState,
context.app.getPlugins(),
);
let finalPlugins = [];
const createPlaceholder = () => {
return Placeholder({ content: placeholder });
};
finalPlugins = defaultPlugins.concat([
createPlaceholder(placeholder),
...context.app.getPlugins(),
]);
const reconfigureOptions = {
// doc: parse(value),
schema,
plugins: finalPlugins,
};
context.pmViews.main.updateState(EditorState.create(reconfigureOptions));
if (context.pmViews.main.dispatch) {
context.pmViews.main.dispatch(
context.pmViews?.main.state.tr.setMeta('addToHistory', false),
);
}
return true;
}, [JSON.stringify(reconfigureState)]);
}, [context.app.id]);
useImperativeHandle(ref, () => ({
getContent() {
......
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