diff --git a/editors/demo/package.json b/editors/demo/package.json
index 1c34e59dec32134fdc035c318fe17310154655b3..b77d8609d8bec4eee3e8dd56a330b1c47b429bc6 100644
--- a/editors/demo/package.json
+++ b/editors/demo/package.json
@@ -1,6 +1,6 @@
{
"name": "demo",
- "version": "0.9.43",
+ "version": "0.9.44",
"private": true,
"dependencies": {
"@guardian/prosemirror-invisibles": "^1.2.0",
@@ -15,10 +15,10 @@
"typeface-fira-sans-condensed": "^0.0.54",
"typeface-inter": "^1.1.13",
"typeface-vollkorn": "^0.0.54",
- "wax-prosemirror-core": "^0.9.43",
- "wax-prosemirror-services": "^0.9.43",
- "wax-questions-service": "^0.9.43",
- "wax-table-service": "^0.9.43"
+ "wax-prosemirror-core": "^0.9.44",
+ "wax-prosemirror-services": "^0.9.44",
+ "wax-questions-service": "^0.9.44",
+ "wax-table-service": "^0.9.44"
},
"scripts": {
"start": "react-app-rewired start",
diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index 9fb4b57d1f4e442011cf346cc3899edbaf975a27..88d85b6d56cbd98b226e66a5408989c93f78a90f 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -1,4 +1,10 @@
-import React, { useLayoutEffect, useState, useMemo, useRef } from 'react';
+import React, {
+ useLayoutEffect,
+ useState,
+ useMemo,
+ useEffect,
+ useRef,
+} from 'react';
import { Wax } from 'wax-prosemirror-core';
@@ -6,6 +12,8 @@ import { EditoriaLayout, EditoriaMobileLayout } from './layout';
import { config, configMobile } from './config';
import { demo } from './demo';
import { debounce } from 'lodash';
+import { TablesService } from 'wax-table-service';
+import { YjsService } from 'wax-prosemirror-services';
const renderImage = file => {
const reader = new FileReader();
@@ -28,6 +36,9 @@ const user = {
const Editoria = () => {
const [width] = useWindowSize();
+ const [myConfig, setMyConfig] = useState(config);
+ const [myName, setMyName] = useState('COKO');
+ const [isFirst, setFirst] = useState(true);
let layout = EditoriaLayout;
let finalConfig = config;
@@ -40,32 +51,106 @@ const Editoria = () => {
}
const editorRef = useRef();
- const EditoriaComponent = useMemo(
- () => (
- <>
- <Wax
- ref={editorRef}
- key={key}
- config={finalConfig}
- autoFocus
- placeholder="Type Something..."
- fileUpload={file => renderImage(file)}
- value={demo}
- // readonly
- layout={layout}
- // onChange={debounce(source => {
- // console.log(JSON.stringify(source));
- // }, 200)}
- user={user}
- scrollMargin={200}
- scrollThreshold={200}
- />
- </>
- ),
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [layout, finalConfig],
+ // useEffect(() => {
+ // console.log('sss');
+ // // const configObj = config(yjsProvider, ydoc, 'christos')
+ // setTimeout(() => {
+ // setFirst(false);
+ // }, 5000);
+ // // configObj.services = [...configObj.services, new TablesService()]
+ // }, [isFirst]);
+
+ if (!isFirst) {
+ // configObj.services = [...configObj.services, new TablesService()]
+ // configObj.name = 'ddd';
+ config.name = 'Ffdfd';
+ // setMyConfig({ ...myConfig });
+ }
+
+ return (
+ <>
+ <button
+ onClick={() => {
+ console.log(myConfig);
+ // myConfig.PmPlugins = [];
+ myConfig.services = [...myConfig.services, new TablesService()];
+ myConfig.name = 'Ffd1fd';
+ setMyConfig({ ...myConfig });
+ }}
+ >
+ {' '}
+ change config
+ </button>
+
+ <button
+ onClick={() => {
+ setMyName('GIANNIS');
+ }}
+ >
+ {' '}
+ change name
+ </button>
+
+ <Wax
+ ref={editorRef}
+ key={key}
+ config={config}
+ autoFocus
+ placeholder="Type Something..."
+ fileUpload={file => renderImage(file)}
+ // value={demo}
+ // readonly
+ layout={layout}
+ name={myName}
+ // onChange={debounce(source => {
+ // console.log(JSON.stringify(source));
+ // }, 200)}
+ user={user}
+ scrollMargin={200}
+ scrollThreshold={200}
+ value={'<p>fdsfsdf<strong>test</strong>ss</p>'}
+ />
+ </>
);
- return <>{EditoriaComponent}</>;
+
+ // 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={myConfig}
+ // autoFocus
+ // placeholder="Type Something..."
+ // fileUpload={file => renderImage(file)}
+ // // value={demo}
+ // // readonly
+ // layout={layout}
+ // // onChange={debounce(source => {
+ // // console.log(JSON.stringify(source));
+ // // }, 200)}
+ // user={user}
+ // scrollMargin={200}
+ // scrollThreshold={200}
+ // />
+ // </>
+ // ),
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
+ // [layout, myConfig],
+ // );
+ // return <>{EditoriaComponent}</>;
};
function useWindowSize() {
diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index 40557530fe1cfe3c5f72e34c627be8e3e02787c9..0a8eff6229a01726b7e171bf2429e50adf2794df 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -26,8 +26,8 @@ import {
disallowPasteImagesPlugin,
BlockDropDownToolGroupService,
AskAiContentService,
- BlockQuoteService,
YjsService,
+ BlockQuoteService,
} from 'wax-prosemirror-services';
import { TablesService, tableEditing, columnResizing } from 'wax-table-service';
@@ -53,11 +53,7 @@ async function DummyPromise(userInput, { askKb }) {
} else {
// JSON response test
const json = JSON.stringify({
- content: askKb
- ? 'KB will be queried'
- : `<p>Hello my friend</p>
-<strong>this is a strong</strong>
-<h1>this a title</h1>`,
+ 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/'],
});
@@ -217,7 +213,7 @@ export default {
templateArea: 'mainMenuToolBar',
toolGroups: [
'Base',
- 'BlockDropDown',
+ // 'BlockDropDown',
// 'TitleTool',
{
name: 'Annotations',
@@ -232,26 +228,26 @@ export default {
'BlockQuoteTool',
'HighlightToolGroup',
'TransformToolGroup',
- 'CustomTagInline',
+ // 'CustomTagInline',
'Notes',
'Lists',
'Images',
'SpecialCharacters',
- 'CodeBlock',
+ // 'CodeBlock',
'ToggleAi',
- 'Tables',
+ // 'Tables',
'TrackingAndEditing',
'FullScreen',
],
},
- {
- templateArea: 'leftSideBar',
- toolGroups: ['DisplayText'],
- },
- {
- templateArea: 'commentTrackToolBar',
- toolGroups: ['TrackCommentOptions'],
- },
+ // {
+ // templateArea: 'leftSideBar',
+ // toolGroups: ['DisplayText'],
+ // },
+ // {
+ // templateArea: 'commentTrackToolBar',
+ // toolGroups: ['TrackCommentOptions'],
+ // },
{
templateArea: 'BottomRightInfo',
toolGroups: ['InfoToolGroup'],
@@ -312,13 +308,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-2',
+ YjsType: 'prosemirror',
+ },
AskAiContentService: {
AskAiContentTransformation: DummyPromise,
@@ -327,29 +323,29 @@ export default {
// GenerateImages: false,
CustomPromptsOn: true,
FreeTextPromptsOn: true,
- CustomPrompts: ['custom promt here!!'],
+ CustomPrompts: [],
},
services: [
- // new YjsService(),
- new BlockDropDownToolGroupService(),
+ new YjsService(),
new BlockQuoteService(),
+ // new BlockDropDownToolGroupService(),
new AskAiContentService(),
- new CustomTagService(),
- new DisplayBlockLevelService(),
- new TextBlockLevelService(),
+ // new CustomTagService(),
+ // new DisplayBlockLevelService(),
+ // new TextBlockLevelService(),
new ListsService(),
new LinkService(),
new InlineAnnotationsService(),
new TrackChangeService(),
- new CommentsService(),
+ // new CommentsService(),
new ImageService(),
- new TablesService(),
+ // new TablesService(),
new BaseService(),
new NoteService(),
- new CodeBlockService(),
+ // new CodeBlockService(),
new EditingSuggestingService(),
- new DisplayTextToolGroupService(),
+ // new DisplayTextToolGroupService(),
new MathService(),
new FindAndReplaceService(),
new FullScreenService(),
diff --git a/editors/demo/src/Editoria/layout/EditoriaLayout.js b/editors/demo/src/Editoria/layout/EditoriaLayout.js
index 7570ee0bc6de6b96caae0834c178e9bf2b336126..6956f765ef83fa108de59f55bc85ddb31fe57106 100644
--- a/editors/demo/src/Editoria/layout/EditoriaLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaLayout.js
@@ -1,5 +1,10 @@
-/* stylelint-disable no-descending-specificity */
-import React, { useContext, useState, useCallback, useEffect } from 'react';
+import React, {
+ useContext,
+ useState,
+ useCallback,
+ useEffect,
+ useMemo,
+} from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import PanelGroup from 'react-panelgroup';
import {
@@ -16,7 +21,6 @@ const divider = css`
.panelGroup {
background: #fff;
}
-
.divider {
> div {
background: ${th('colorBorder')};
@@ -33,17 +37,16 @@ const divider = css`
const Wrapper = styled.div`
background: ${th('colorBackground')};
- display: flex;
- flex-direction: column;
font-family: ${th('fontInterface')};
font-size: ${th('fontSizeBase')};
- height: 100%;
line-height: ${grid(4)};
+ display: flex;
+ flex-direction: column;
- overflow: hidden;
+ height: 100%;
width: 100%;
+ overflow: hidden;
- /* stylelint-disable-next-line order/properties-alphabetical-order */
${divider}
* {
@@ -58,30 +61,25 @@ const Main = styled.div`
`;
const TopMenu = styled.div`
- background: ${th('colorBackgroundToolBar')};
- border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
display: flex;
min-height: 40px;
user-select: none;
-
- > div:last-child {
- margin-left: 0;
- margin-right: ${grid(5)};
- }
+ background: ${th('colorBackgroundToolBar')};
+ border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
> div:not(:last-child) {
- border-right-color: ${th('colorFurniture')};
- border-right-style: ${th('borderStyle')};
- border-right-width: ${th('borderWidth')};
+ border-right: ${th('borderWidth')} ${th('borderStyle')}
+ ${th('colorFurniture')};
}
> div:nth-last-of-type(-n + 2) {
margin-left: auto;
}
- > div[data-name='FullScreen'] {
- margin: 0;
+ > div:last-child {
+ margin-left: 0;
+ margin-right: ${grid(5)};
}
> div[data-name='Tables'] {
@@ -90,10 +88,10 @@ const TopMenu = styled.div`
`;
const SideMenu = styled.div`
- background: ${th('colorBackgroundToolBar')};
+ background: ${th('colorBackgroundToolBar')}
border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- height: calc(100% - 16px);
min-width: 250px;
+ height: calc(100% - 16px);
`;
const EditorArea = styled.div`
@@ -101,19 +99,19 @@ const EditorArea = styled.div`
`;
const WaxSurfaceScroll = styled.div`
- box-sizing: border-box;
+ overflow-y: auto;
display: flex;
+ box-sizing: border-box;
height: 100%;
- overflow-y: auto;
- position: absolute;
width: 100%;
- /* stylelint-disable-next-line order/properties-alphabetical-order */
- ${EditorElements}
+ position: absolute;
+ /* PM styles for main content*/
+ ${EditorElements};
`;
const EditorContainer = styled.div`
- height: 100%;
width: 65%;
+ height: 100%;
.ProseMirror {
box-shadow: 0 0 8px #ecedf1;
@@ -125,38 +123,38 @@ const EditorContainer = styled.div`
const CommentsContainer = styled.div`
display: flex;
flex-direction: column;
- height: 100%;
width: 35%;
+ height: 100%;
`;
const CommentsContainerNotes = styled.div`
display: flex;
flex-direction: column;
- height: 100%;
width: 35%;
+ height: 100%;
`;
const CommentTrackToolsContainer = styled.div`
- background: white;
display: flex;
- padding-top: 5px;
position: fixed;
+ padding-top: 5px;
right: 30px;
- width: 25%;
z-index: 1;
+ background: white;
+ width: 25%;
`;
const CommentTrackTools = styled.div`
- display: flex;
margin-left: auto;
+ display: flex;
position: relative;
z-index: 1;
`;
const CommentTrackOptions = styled.div`
- bottom: 5px;
display: flex;
margin-left: 10px;
+ bottom: 5px;
position: relative;
`;
@@ -164,10 +162,10 @@ const NotesAreaContainer = styled.div`
background: #fff;
display: flex;
flex-direction: row;
+ width: 100%;
height: 100%;
overflow-y: scroll;
position: absolute;
- width: 100%;
/* PM styles for note content*/
.ProseMirror {
display: inline;
@@ -178,19 +176,18 @@ const NotesContainer = styled.div`
counter-reset: footnote-view;
display: flex;
flex-direction: column;
- height: 100%;
+ padding-top: 10px;
padding-bottom: ${grid(4)};
padding-left: ${grid(10)};
- padding-top: 10px;
+ height: 100%;
width: 65%;
- /* stylelint-disable-next-line order/properties-alphabetical-order */
- ${EditorElements}
+ ${EditorElements};
`;
const WaxBottomRightInfo = styled.div``;
const InfoContainer = styled.div`
- bottom: 1px;
display: flex;
position: fixed;
+ bottom: 1px;
right: 21px;
z-index: 999;
`;
@@ -219,51 +216,80 @@ const RightArea = ComponentPlugin('rightArea');
const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
const BottomRightInfo = ComponentPlugin('BottomRightInfo');
+const MyComp = ({ name }) => {
+ console.log(name);
+ return (
+ <div>
+ <span>{name}</span>
+ <button
+ onClick={() => {
+ console.log('ffff');
+ }}
+ >
+ {' '}
+ change config
+ </button>
+ </div>
+ );
+};
+
const EditoriaLayout = props => {
- const {
- pmViews: { main },
- options,
- } = useContext(WaxContext);
+ // const {
+ // pmViews: { main },
+ // options,
+ // } = useContext(WaxContext);
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);
- };
-
- const delayedShowedNotes = useCallback(
- setTimeout(() => showNotes(), 100),
- [],
+ // 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(() => {
+ // const delayShowNotes = setTimeout(() => showNotes(), 100);
+ // return clearInterval(delayShowNotes);
+ // }, []);
+
+ // useEffect(() => {}, [delayedShowedNotes]);
+
+ const EditoriaComponent = useMemo(
+ () => {
+ console.log('useMemo');
+ return <MyComp name={props?.name} />;
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [props?.name],
);
+ // return <>{EditoriaComponent}</>;
- useEffect(() => {}, [delayedShowedNotes]);
-
+ console.log(props.app.id, 'layout');
return (
<ThemeProvider theme={cokoTheme}>
<Wrapper style={fullScreenStyles} id="wax-container">
+ {EditoriaComponent}
<TopMenu>
<MainMenuToolBar />
</TopMenu>
@@ -277,20 +303,24 @@ const EditoriaLayout = props => {
<PanelGroup
direction="column"
panelWidths={[
- { size: surfaceHeight, resize: 'stretch' },
- { size: notesHeight, resize: 'resize' },
+ {
+ size: surfaceHeight,
+ resize: 'stretch',
+ },
+ {
+ size: notesHeight,
+ resize: 'resize',
+ },
]}
onResizeEnd={onResizeEnd}
>
- <WaxSurfaceScroll id="wax-surface-scroll" l>
+ <WaxSurfaceScroll>
<EditorContainer>
<WaxView {...props} />
</EditorContainer>
<CommentsContainer>
<CommentTrackToolsContainer>
<CommentTrackTools>
- {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
- SUGGESTIONS
<CommentTrackOptions>
<CommentTrackToolBar />
</CommentTrackOptions>
@@ -299,16 +329,6 @@ const EditoriaLayout = props => {
<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/lerna.json b/lerna.json
index f7658fcb94f5a4b7d6316e476ad713b3b743174f..de7588849f340f4c9356883449760afccc52badd 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
{
"lerna": "2.6.0",
"npmClient": "yarn",
- "version": "0.9.43",
+ "version": "0.9.44",
"useWorkspaces": true
}
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index 45ed6b74ccb3da50f0af2bcbaf0800d7f3c1b895..32d08806750987e9444dc86d9604dae2d00fe484 100644
--- a/wax-prosemirror-core/package.json
+++ b/wax-prosemirror-core/package.json
@@ -1,7 +1,7 @@
{
"name": "wax-prosemirror-core",
"author": "Christos Kokosias & Giannis Kopanas",
- "version": "0.9.43",
+ "version": "0.9.44",
"description": "Wax prosemirror core",
"license": "MIT",
"main": "dist/index.js",
diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json
index 1e536c8a0b08866fe8115478ce59cb2c60e9cb97..014fe0f6b8bd13ba699f2da3720359f6f40ab9eb 100644
--- a/wax-prosemirror-services/package.json
+++ b/wax-prosemirror-services/package.json
@@ -1,7 +1,7 @@
{
"name": "wax-prosemirror-services",
"author": "Christos Kokosias & Giannis Kopanas",
- "version": "0.9.43",
+ "version": "0.9.44",
"description": "Wax prosemirror services",
"license": "MIT",
"main": "dist/index.js",
@@ -36,7 +36,7 @@
"react-i18next": "^13.3.1",
"use-deep-compare-effect": "^1.3.1",
"uuid": "^7.0.3",
- "wax-prosemirror-core": "^0.9.43",
+ "wax-prosemirror-core": "^0.9.44",
"y-prosemirror": "1.2.0",
"y-protocols": "1.0.5",
"y-webrtc": "10.2.0",
diff --git a/wax-questions-service/package.json b/wax-questions-service/package.json
index 1c171fb32c483d0dc2e3dd47831195b70c3d25ea..189283f6d742952858a20d5368b8a9836442dfbb 100644
--- a/wax-questions-service/package.json
+++ b/wax-questions-service/package.json
@@ -1,7 +1,7 @@
{
"name": "wax-questions-service",
"author": "Christos Kokosias & Giannis Kopanas",
- "version": "0.9.43",
+ "version": "0.9.44",
"description": "Wax Questions Service",
"license": "MIT",
"main": "dist/index.js",
@@ -32,7 +32,7 @@
"react-i18next": "^13.3.1",
"use-dynamic-refs": "^1.0.0",
"uuid": "^7.0.3",
- "wax-prosemirror-core": "^0.9.43"
+ "wax-prosemirror-core": "^0.9.44"
},
"devDependencies": {
"mocha": "^3.4.2",
diff --git a/wax-table-service/package.json b/wax-table-service/package.json
index 641cefb67b36c84e8417ce3844c7b1057cd8f34b..2a40245b9336ab6c6aee11f062e26fb98fec3750 100644
--- a/wax-table-service/package.json
+++ b/wax-table-service/package.json
@@ -1,7 +1,7 @@
{
"name": "wax-table-service",
"author": "Christos Kokosias & Giannis Kopanas",
- "version": "0.9.43",
+ "version": "0.9.44",
"description": "Wax Table Service",
"license": "MIT",
"main": "dist/index.js",
@@ -23,7 +23,7 @@
"prosemirror-view": "1.30.2",
"react-i18next": "^13.3.1",
"uuid": "^7.0.3",
- "wax-prosemirror-core": "^0.9.43"
+ "wax-prosemirror-core": "^0.9.44"
},
"devDependencies": {
"mocha": "^3.4.2",