diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index c6f7cde7b4f55120ce741cee08d68c53a3335a8c..9fb4b57d1f4e442011cf346cc3899edbaf975a27 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -1,10 +1,4 @@
-import React, {
- useLayoutEffect,
- useState,
- useMemo,
- useEffect,
- useRef,
-} from 'react';
+import React, { useLayoutEffect, useState, useMemo, useRef } from 'react';
import { Wax } from 'wax-prosemirror-core';
@@ -12,7 +6,6 @@ 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();
@@ -35,9 +28,6 @@ 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;
@@ -50,105 +40,32 @@ const Editoria = () => {
}
const editorRef = useRef();
- 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 = 'Ffdfd';
- 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}
- />
- </>
+ 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],
);
-
- // 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}</>;
+ return <>{EditoriaComponent}</>;
};
function useWindowSize() {
diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js
index 99e18bebc117c74bceb239bc95e709174797817d..a6c01ca9405e70a02f03db619cb380aa73beba84 100644
--- a/editors/demo/src/Editoria/config/config.js
+++ b/editors/demo/src/Editoria/config/config.js
@@ -27,7 +27,6 @@ import {
BlockDropDownToolGroupService,
AskAiContentService,
YjsService,
- BlockQuoteService,
} from 'wax-prosemirror-services';
import { TablesService, tableEditing, columnResizing } from 'wax-table-service';
@@ -53,7 +52,11 @@ 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'
+ : `<p>Hello my friend</p>
+<strong>this is a strong</strong>
+<h1>this a title</h1>`,
citations: ['citation 1', 'citation 2', 'citation 3'],
links: ['https://coko.foundation/', 'https://waxjs.net/about/'],
});
@@ -213,7 +216,7 @@ export default {
templateArea: 'mainMenuToolBar',
toolGroups: [
'Base',
- // 'BlockDropDown',
+ 'BlockDropDown',
// 'TitleTool',
{
name: 'Annotations',
@@ -225,29 +228,28 @@ export default {
'StrikeThrough',
],
},
- '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'],
@@ -292,11 +294,11 @@ export default {
],
ImageService: { showAlt: true },
- // CommentsService: {
- // showTitle: true,
- // getComments,
- // setComments,
- // },
+ CommentsService: {
+ showTitle: true,
+ getComments,
+ setComments,
+ },
CustomTagService: {
tags: [
@@ -308,13 +310,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,
@@ -323,29 +325,28 @@ export default {
// GenerateImages: false,
CustomPromptsOn: true,
FreeTextPromptsOn: true,
- CustomPrompts: [],
+ CustomPrompts: ['custom promt here!!'],
},
services: [
- new YjsService(),
- new BlockQuoteService(),
- // new BlockDropDownToolGroupService(),
+ // new YjsService(),
+ 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 154e2dc0b5562edf465e85ec800a803cafb6ed97..951a115d0ef83505e0f805138acf49721b7e4ba1 100644
--- a/editors/demo/src/Editoria/layout/EditoriaLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaLayout.js
@@ -1,10 +1,5 @@
-import React, {
- useContext,
- useState,
- useCallback,
- useEffect,
- useMemo,
-} from 'react';
+/* stylelint-disable no-descending-specificity */
+import React, { useContext, useState, useCallback, useEffect } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import PanelGroup from 'react-panelgroup';
import {
@@ -21,6 +16,7 @@ const divider = css`
.panelGroup {
background: #fff;
}
+
.divider {
> div {
background: ${th('colorBorder')};
@@ -37,16 +33,17 @@ 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;
- height: 100%;
- width: 100%;
overflow: hidden;
+ width: 100%;
+ /* stylelint-disable-next-line order/properties-alphabetical-order */
${divider}
* {
@@ -61,37 +58,38 @@ 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;
- background: ${th('colorBackgroundToolBar')};
- border-top: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+
+ > div:last-child {
+ margin-left: 0;
+ margin-right: ${grid(5)};
+ }
> div:not(:last-child) {
- border-right: ${th('borderWidth')} ${th('borderStyle')}
- ${th('colorFurniture')};
+ border-right-color: ${th('colorFurniture')};
+ border-right-style: ${th('borderStyle')};
+ border-right-width: ${th('borderWidth')};
}
> div:nth-last-of-type(-n + 2) {
margin-left: auto;
}
- > div:last-child {
- margin-left: 0;
- margin-right: ${grid(5)};
- }
-
> div[data-name='Tables'] {
border-right: none;
}
`;
const SideMenu = styled.div`
- background: ${th('colorBackgroundToolBar')}
+ background: ${th('colorBackgroundToolBar')};
border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
- min-width: 250px;
height: calc(100% - 16px);
+ min-width: 250px;
`;
const EditorArea = styled.div`
@@ -99,19 +97,19 @@ const EditorArea = styled.div`
`;
const WaxSurfaceScroll = styled.div`
- overflow-y: auto;
- display: flex;
box-sizing: border-box;
+ display: flex;
height: 100%;
- width: 100%;
+ overflow-y: auto;
position: absolute;
- /* PM styles for main content*/
- ${EditorElements};
+ width: 100%;
+ /* stylelint-disable-next-line order/properties-alphabetical-order */
+ ${EditorElements}
`;
const EditorContainer = styled.div`
- width: 65%;
height: 100%;
+ width: 65%;
.ProseMirror {
box-shadow: 0 0 8px #ecedf1;
@@ -123,38 +121,38 @@ const EditorContainer = styled.div`
const CommentsContainer = styled.div`
display: flex;
flex-direction: column;
- width: 35%;
height: 100%;
+ width: 35%;
`;
const CommentsContainerNotes = styled.div`
display: flex;
flex-direction: column;
- width: 35%;
height: 100%;
+ width: 35%;
`;
const CommentTrackToolsContainer = styled.div`
+ background: white;
display: flex;
- position: fixed;
padding-top: 5px;
+ position: fixed;
right: 30px;
- z-index: 1;
- background: white;
width: 25%;
+ z-index: 1;
`;
const CommentTrackTools = styled.div`
- margin-left: auto;
display: flex;
+ margin-left: auto;
position: relative;
z-index: 1;
`;
const CommentTrackOptions = styled.div`
+ bottom: 5px;
display: flex;
margin-left: 10px;
- bottom: 5px;
position: relative;
`;
@@ -162,10 +160,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;
@@ -176,18 +174,19 @@ const NotesContainer = styled.div`
counter-reset: footnote-view;
display: flex;
flex-direction: column;
- padding-top: 10px;
+ height: 100%;
padding-bottom: ${grid(4)};
padding-left: ${grid(10)};
- height: 100%;
+ padding-top: 10px;
width: 65%;
- ${EditorElements};
+ /* stylelint-disable-next-line order/properties-alphabetical-order */
+ ${EditorElements}
`;
const WaxBottomRightInfo = styled.div``;
const InfoContainer = styled.div`
+ bottom: 1px;
display: flex;
position: fixed;
- bottom: 1px;
right: 21px;
z-index: 999;
`;
@@ -216,25 +215,7 @@ 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 => {
- console.log('props');
const {
pmViews: { main },
options,
@@ -255,41 +236,30 @@ const EditoriaLayout = props => {
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],
+ 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),
+ [],
);
- // return <>{EditoriaComponent}</>;
+
+ useEffect(() => {}, [delayedShowedNotes]);
return (
<ThemeProvider theme={cokoTheme}>
<Wrapper style={fullScreenStyles} id="wax-container">
- {EditoriaComponent}
<TopMenu>
<MainMenuToolBar />
</TopMenu>
@@ -303,24 +273,20 @@ 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>
+ <WaxSurfaceScroll id="wax-surface-scroll" l>
<EditorContainer>
<WaxView {...props} />
</EditorContainer>
<CommentsContainer>
<CommentTrackToolsContainer>
<CommentTrackTools>
+ {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
+ SUGGESTIONS
<CommentTrackOptions>
<CommentTrackToolBar />
</CommentTrackOptions>
@@ -329,6 +295,16 @@ 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/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 02c1e2bd0d8523adee16c870bfcf727ade1e0919..9227cb24d058f05235db4ac16201367105dbd3d8 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -91,7 +91,7 @@ const Editors = () => {
case 'oen':
return <OEN />;
default:
- return <Editoria />;
+ return <HHMI />;
}
};