diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 9846f6526e36e131555b180f18b24e2a4f1661fd..956b2d8a90c985ef729c79273e102cd0e4a92db0 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -1,24 +1,10 @@
import React from 'react';
-import { createGlobalStyle } from 'styled-components';
import { Wax } from 'wax-prosemirror-core';
import { HhmiLayout } from './layout';
import { config } from './config';
-const GlobalStyle = createGlobalStyle`
- body {
- margin: 0;
- overflow-y: hidden;
- padding: 0;
- }
-
- #root {
- height:100vh;
- width:100vw;
- }
-`;
-
const renderImage = file => {
const reader = new FileReader();
return new Promise((accept, fail) => {
@@ -32,18 +18,15 @@ const renderImage = file => {
const Hhmi = () => {
return (
<>
- <GlobalStyle />
<Wax
config={config}
autoFocus
- placeholder="Type Something..."
fileUpload={file => renderImage(file)}
value=""
targetFormat="JSON"
// readonly
layout={HhmiLayout}
// onChange={source => console.log(source)}
- // user={user}
/>
</>
);
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index deec1057692687c96a3c84d2567ae6642b424c29..bdf538bc6fda880ff6bc5e17096e879e32179f12 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -1,6 +1,6 @@
import { css } from 'styled-components';
-import { lighten, th } from '@pubsweet/ui-toolkit';
+import { th } from '@pubsweet/ui-toolkit';
/* All styles regarding ProseMirror surface and elements */
@@ -54,37 +54,17 @@ export default css`
font-size: 14px;
} */
- .ProseMirror footnote {
- font-variant-numeric: lining-nums proportional-nums;
- display: inline-block;
- text-align: center;
- width: 17px;
- height: 17px;
- background: white;
- border-bottom: 2px solid black;
- color: black;
- cursor: pointer;
- }
-
- .ProseMirror footnote::after {
- content: counter(footnote);
- position: relative;
- bottom: 2px;
- font-size: 16px;
- counter-increment: footnote;
- }
-
hr {
- padding: 2px 10px;
border: none;
margin: 1em 0;
+ padding: 2px 10px;
}
hr:after {
+ background-color: silver;
content: '';
display: block;
height: 1px;
- background-color: silver;
line-height: 2px;
}
@@ -94,10 +74,10 @@ export default css`
}
blockquote {
- padding-left: 1em;
border-left: 3px solid #eee;
margin-left: 0;
margin-right: 0;
+ padding-left: 1em;
}
figure {
@@ -144,15 +124,15 @@ export default css`
/* Tables */
table {
+ border: 1px solid #eee;
border-collapse: initial;
border-spacing: 0;
border-width: 0 thin thin 0;
- border: 1px solid #eee;
- table-layout: fixed;
- width: 100%;
margin: 0;
overflow: hidden;
page-break-inside: avoid;
+ table-layout: fixed;
+ width: 100%;
}
th,
@@ -170,14 +150,14 @@ export default css`
}
.column-resize-handle {
+ background-color: #adf;
+ bottom: 0;
+ pointer-events: none;
position: absolute;
right: -2px;
top: 0;
- bottom: 0;
width: 4px;
z-index: 20;
- background-color: #adf;
- pointer-events: none;
}
.ProseMirror.resize-cursor {
@@ -186,15 +166,15 @@ export default css`
}
/* Give selected cells a blue overlay */
.selectedCell:after {
- z-index: 2;
- position: absolute;
+ background: rgba(200, 200, 255, 0.4);
+ bottom: 0;
content: '';
left: 0;
+ pointer-events: none;
+ position: absolute;
right: 0;
top: 0;
- bottom: 0;
- background: rgba(200, 200, 255, 0.4);
- pointer-events: none;
+ z-index: 2;
}
/* placeholder */
@@ -238,77 +218,6 @@ export default css`
content: '¶';
}
- span.deletion {
- text-decoration: line-through;
- color: ${th('colorError')};
- footnote {
- background: ${th('colorError')};
- }
- }
-
- span.insertion {
- color: royalblue;
- footnote {
- background: royalblue;
- }
- }
-
- .selected-insertion {
- background: ${lighten('royalblue', 0.65)};
- }
-
- .selected-deletion {
- background: ${lighten('indianred', 0.65)};
- }
-
- .selected-format-change,
- .selected-block-change {
- background-color: #eefbfb;
- }
-
- .format-change {
- border-bottom: 2px solid royalblue;
- }
-
- [data-track] {
- position: relative;
- }
-
- [data-track]::before {
- content: '';
- position: absolute;
- border-left: 2px solid royalblue;
- left: -10px;
- height: 100%;
- }
-
- .insertion .show-insertion {
- color: black;
- }
-
- .deletion .hide-deletion {
- display: none;
- }
-
- li[data-track]::before,
- li [data-track]::before {
- left: -5px;
- }
-
- span.comment {
- border-bottom: 2px solid gold;
- border-radius: 3px 3px 0 0;
-
- .active-comment {
- background-color: gold;
- /* color: black; */
- }
- }
-
- span.search-result {
- background: #bee594;
- }
-
/* == Math Nodes ======================================== */
.math-node {
@@ -342,8 +251,8 @@ export default css`
}
.math-node .math-src {
- display: none;
color: rgb(132, 33, 162);
+ display: none;
tab-size: 4;
}
@@ -424,52 +333,6 @@ export default css`
padding-top: 2px;
}
- span[data-type='inline'] {
- display: inline;
- font-weight: 500;
- }
-
- span[data-type='inline']:before {
- color: #006f19;
- content: ' | ';
- font-weight: 600;
- margin-left: 0;
- }
-
- span[data-type='inline']:after {
- color: #006f19;
- content: ' | ';
- display: inline;
- font-weight: 600;
- }
-
- p[data-type='block'] {
- display: block;
- margin-top: 1em;
- }
-
- p[data-type='block']:before {
- color: #006f19;
- content: '⌜';
- display: inline;
- font-weight: 600;
- font-size: 22px;
- position: relative;
- top: 2px;
- left: 6px;
- }
-
- p[data-type='block']:after {
- color: #006f19;
- content: '⌟';
- display: inline;
- font-weight: 600;
- font-size: 22px;
- position: relative;
- top: 5px;
- right: 6px;
- }
-
.transform-icon {
transform: rotate(40deg);
}
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
index e0c14eb82a6709978b66f766bf786ef2ccbd3602..4ad5f65d176cab6b0cc9710dde33c8c6136d0cfa 100644
--- a/editors/demo/src/HHMI/layout/HhmiLayout.js
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -1,7 +1,5 @@
-import React, { useContext, useState, useCallback, useEffect } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
-import PanelGroup from 'react-panelgroup';
-import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import React, { useContext } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
@@ -10,37 +8,16 @@ import EditorElements from './EditorElements';
/* Katex css */
import '~../../katex/dist/katex.min.css';
-const divider = css`
- .panelGroup {
- background: #fff;
- }
- .divider {
- > div {
- background: ${th('colorBorder')};
- height: ${grid(1)};
- max-height: ${grid(1)};
-
- &:hover {
- height: ${grid(2)};
- max-height: ${grid(2)};
- }
- }
- }
-`;
-
const Wrapper = styled.div`
background: ${th('colorBackground')};
- font-family: ${th('fontInterface')};
- font-size: ${th('fontSizeBase')};
- line-height: ${grid(4)};
display: flex;
flex-direction: column;
-
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBase')};
height: 100%;
- width: 100%;
+ line-height: ${grid(4)};
overflow: hidden;
-
- ${divider}
+ width: 100%;
* {
box-sizing: border-box;
@@ -54,12 +31,12 @@ 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:not(:last-child) {
border-right: ${th('borderWidth')} ${th('borderStyle')}
@@ -85,19 +62,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;
+ width: 100%;
/* PM styles for main content*/
${EditorElements};
`;
const EditorContainer = styled.div`
- width: 65%;
height: 100%;
+ width: 65%;
.ProseMirror {
box-shadow: 0 0 8px #ecedf1;
@@ -106,107 +83,11 @@ const EditorContainer = styled.div`
}
`;
-const CommentsContainer = styled.div`
- display: flex;
- flex-direction: column;
- width: 35%;
- height: 100%;
-`;
-
-const CommentsContainerNotes = styled.div`
- display: flex;
- flex-direction: column;
- width: 35%;
- height: 100%;
-`;
-
-const CommentTrackToolsContainer = styled.div`
- display: flex;
- position: fixed;
- padding-top: 5px;
- right: 30px;
- z-index: 1;
- background: white;
- width: 25%;
-`;
-
-const CommentTrackTools = styled.div`
- margin-left: auto;
- display: flex;
- position: relative;
- z-index: 1;
-`;
-
-const CommentTrackOptions = styled.div`
- display: flex;
- margin-left: 10px;
- bottom: 5px;
- position: relative;
-`;
-
-const NotesAreaContainer = styled.div`
- background: #fff;
- display: flex;
- flex-direction: row;
- width: 100%;
- height: 100%;
- overflow-y: scroll;
- position: absolute;
- /* PM styles for note content*/
- ${EditorElements};
- .ProseMirror {
- display: inline;
- }
-`;
-
-const NotesContainer = styled.div`
- box-shadow: 0 0 8px #ecedf1;
- counter-reset: footnote-view;
- display: flex;
- flex-direction: column;
- padding-bottom: ${grid(4)};
- height: 100%;
- width: 65%;
-`;
-const WaxBottomRightInfo = styled.div``;
-const InfoContainer = styled.div`
- display: flex;
- position: fixed;
- bottom: 1px;
- right: 21px;
- z-index: 999;
-`;
-
-let surfaceHeight = (window.innerHeight / 5) * 3;
-let notesHeight = (window.innerHeight / 5) * 2;
-
-const onResizeEnd = arr => {
- surfaceHeight = arr[0].size;
- notesHeight = arr[1].size;
-};
-
-const getNotes = main => {
- const notes = DocumentHelpers.findChildrenByType(
- main.state.doc,
- main.state.schema.nodes.footnote,
- true,
- );
- return notes;
-};
-
-const LeftSideBar = ComponentPlugin('leftSideBar');
const MainMenuToolBar = ComponentPlugin('mainMenuToolBar');
-const NotesArea = ComponentPlugin('notesArea');
-const RightArea = ComponentPlugin('rightArea');
-const CommentTrackToolBar = ComponentPlugin('commentTrackToolBar');
const WaxOverlays = ComponentPlugin('waxOverlays');
-const BottomRightInfo = ComponentPlugin('BottomRightInfo');
const HhmiLayout = ({ editor }) => {
- const {
- view: { main },
- options,
- } = useContext(WaxContext);
+ const { options } = useContext(WaxContext);
let fullScreenStyles = {};
@@ -223,26 +104,6 @@ const HhmiLayout = ({ editor }) => {
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),
- [],
- );
-
- useEffect(() => {}, [delayedShowedNotes]);
return (
<ThemeProvider theme={cokoTheme}>
@@ -253,49 +114,12 @@ const HhmiLayout = ({ editor }) => {
<Main>
<EditorArea>
- <PanelGroup
- direction="column"
- panelWidths={[
- { size: surfaceHeight, resize: 'stretch' },
- { size: notesHeight, resize: 'resize' },
- ]}
- onResizeEnd={onResizeEnd}
- >
- <WaxSurfaceScroll>
- <EditorContainer>{editor}</EditorContainer>
- <CommentsContainer>
- <CommentTrackToolsContainer>
- <CommentTrackTools>
- {commentsTracksCount + trackBlockNodesCount} COMMENTS AND
- SUGGESTIONS
- <CommentTrackOptions>
- <CommentTrackToolBar />
- </CommentTrackOptions>
- </CommentTrackTools>
- </CommentTrackToolsContainer>
- <RightArea area="main" />
- </CommentsContainer>
- </WaxSurfaceScroll>
-
- {hasNotes && (
- <NotesAreaContainer>
- <NotesContainer id="notes-container">
- <NotesArea view={main} />
- </NotesContainer>
- <CommentsContainerNotes>
- <RightArea area="notes" />
- </CommentsContainerNotes>
- </NotesAreaContainer>
- )}
- </PanelGroup>
+ <WaxSurfaceScroll>
+ <EditorContainer>{editor}</EditorContainer>
+ </WaxSurfaceScroll>
</EditorArea>
</Main>
<WaxOverlays />
- <WaxBottomRightInfo>
- <InfoContainer id="info-container">
- <BottomRightInfo />
- </InfoContainer>
- </WaxBottomRightInfo>
</Wrapper>
</ThemeProvider>
);