diff --git a/app/components/component-xpub-manuscript/src/components/Manuscript.js b/app/components/component-xpub-manuscript/src/components/Manuscript.js index 4122bfcf9419d3ddd82aa4b171c6171471e64cf7..e8c4a995262540efe4d4239817d81a3594de2050 100644 --- a/app/components/component-xpub-manuscript/src/components/Manuscript.js +++ b/app/components/component-xpub-manuscript/src/components/Manuscript.js @@ -1,11 +1,11 @@ import React from 'react' import { withRouter } from 'react-router-dom' import styled from 'styled-components' -import { Wax /*, CreateSchema */ } from 'wax-prosemirror-core' -// import { XpubSchema } from 'wax-prosemirror-schema' -// import 'wax-prosemirror-themes/themes/default-theme.css' +import { th } from '@pubsweet/ui-toolkit' +import Wax from '../../../wax-collab/src/Editoria' import MessageContainer from '../../../component-chat/src' +import { Spinner } from '../../../shared' const options = { // schema: new CreateSchema(XpubSchema), @@ -41,7 +41,7 @@ const ManuscriptContainer = styled.div` ` const Chat = styled.div` - border-left: 1px solid black; + border-left: 1px solid ${th('colorFurniture')}; grid-area: chat; height: 100vh; // overflow-y: scroll; @@ -62,14 +62,15 @@ const Manuscript = ({ file.mimeType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ? ( <ManuscriptContainer> - <Wax - key={1} - options={options} - theme="default" - // fileUpload={fileUpload} - // onChange={source => updateManuscript({ source })} - value={content} - /> + {content ? ( + <Wax + // fileUpload={fileUpload} + // onChange={source => updateManuscript({ source })} + content={content} + /> + ) : ( + <Spinner /> + )} </ManuscriptContainer> ) : ( <Info>No supported view of the file</Info> diff --git a/app/components/wax-collab/src/EditorElements.js b/app/components/wax-collab/src/EditorElements.js index 9181ae64de574170170cf6c0c66674448f1aa799..3bb44c3fc0a663ffca99c57ac2923846f9908f14 100644 --- a/app/components/wax-collab/src/EditorElements.js +++ b/app/components/wax-collab/src/EditorElements.js @@ -21,6 +21,15 @@ export default css` cursor: pointer; } + h1 { + font-size: 1em; + font-weight: 500; + margin-bottom: 1em; + } + + p { + margin-bottom: 1em; + } .ProseMirror footnote::after { content: counter(footnote); position: relative; diff --git a/app/components/wax-collab/src/Editoria.js b/app/components/wax-collab/src/Editoria.js index fa7ac3d8f457f56b8188745df29890c1ce494270..06887ee5db55467949af18f7b8460bc59779d47b 100644 --- a/app/components/wax-collab/src/Editoria.js +++ b/app/components/wax-collab/src/Editoria.js @@ -27,7 +27,7 @@ const user = { username: 'demo', } -const Editoria = () => ( +const Editoria = ({ content }) => ( <Fragment> {/* <GlobalStyle /> */} <Wax @@ -35,7 +35,7 @@ const Editoria = () => ( config={config} fileUpload={file => renderImage(file)} layout={EditoriaLayout} - // value={"this is some content"} + value={content} placeholder="Type Something..." // onChange={source => console.log(source)} user={user} diff --git a/app/components/wax-collab/src/EditoriaLayout.js b/app/components/wax-collab/src/EditoriaLayout.js index 07434c0162a0f156c6b5c29728462e1e47cd7f7b..5c53869a3eecf3359d20eddb1f67f7a0644527fe 100644 --- a/app/components/wax-collab/src/EditoriaLayout.js +++ b/app/components/wax-collab/src/EditoriaLayout.js @@ -1,17 +1,24 @@ import React from 'react' import styled from 'styled-components' import { InfoArea } from 'wax-prosemirror-components' -import { componentPlugin } from 'wax-prosemirror-core' +import { componentPlugin } from 'wax-prosemirror-services' +import { th, grid } from '@pubsweet/ui-toolkit' import EditorElements from './EditorElements' + // import { WaxContext } from 'wax-prosemirror-core/src/ioc-react' const Layout = styled.div` + background-color: ${th('colorBackground')}; + border-radius: ${th('borderRadius')}; + max-width: 90rem; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); display: grid; + grid-template-areas: 'menu' 'editor'; grid-template-rows: 40px 1fr; // flex-direction: column; - height: 100vh; - width: 100hh; + // height: 100vh; + // width: 100hh; ` const Editor = styled.div` @@ -31,7 +38,7 @@ const Menu = styled.div` padding-left: 4px; user-select: none; - border-bottom: 1px solid #ecedf1; + border-bottom: 1px solid ${th('colorFurniture')}; display: flex; align-items: center; @@ -40,13 +47,31 @@ const Menu = styled.div` button[title='show more tools'] { display: none; } + button { + padding: ${grid(1)}; + } div { display: flex; align-items: center; justify-content: center; } + + position: sticky; + top: 0; + z-index: 10; + border-top-right-radius: ${th('borderRadius')}; + border-top-left-radius: ${th('borderRadius')}; ` +// export const Container = styled.div` +// background-color: ${th('colorBackground')}; +// border-radius: ${th('borderRadius')}; +// ` + +export const Container = styled.div` + background: ${th('colorBackgroundHue')}; + padding: ${grid(2)}; +` // const LeftSideBar = componentPlugin("leftSideBar"); // const RightSideBar = componentPlugin("rightSideBar"); const TopBar = componentPlugin('topBar') @@ -58,7 +83,7 @@ const EditoriaLayout = ({ editor }) => ( // const { // view: { main }, // } = useContext(WaxContext) - <> + <Container> <Layout> <Menu> <TopBar /> @@ -67,7 +92,7 @@ const EditoriaLayout = ({ editor }) => ( </Layout> <InfoArea /> <WaxOverlays /> - </> + </Container> ) export default EditoriaLayout diff --git a/app/components/wax-collab/src/config/config.js b/app/components/wax-collab/src/config/config.js index 330ab89a0d70f195479e92544a02b4264f0993d8..22337c1901cefe8fca00c5200777c9bebb1029cb 100644 --- a/app/components/wax-collab/src/config/config.js +++ b/app/components/wax-collab/src/config/config.js @@ -1,14 +1,14 @@ -import * as Y from 'yjs' -import { WebsocketProvider } from 'y-websocket' -import { - ySyncPlugin, - yCursorPlugin, - yUndoPlugin, - undo, - redo, -} from 'y-prosemirror' +// import * as Y from 'yjs' +// import { WebsocketProvider } from 'y-websocket' +// import { +// ySyncPlugin, +// yCursorPlugin, +// yUndoPlugin, +// undo, +// redo, +// } from 'y-prosemirror' -import * as sharedTypes from '../provider' +// import * as sharedTypes from '../provider' import { emDash, ellipsis } from 'prosemirror-inputrules' import { @@ -53,7 +53,7 @@ import invisibles, { // const type = ydoc.getXmlFragment("prosemirror"); // const opts = [sharedTypes.prosemirrorEditorContent, { permanentUserData: sharedTypes.permanentUserData, colors }] -const opts = [sharedTypes.prosemirrorEditorContent] +// const opts = [sharedTypes.prosemirrorEditorContent] // sharedTypes.awareness.setLocalStateField('user', _.sample(users)) // console.log(ydoc, provider, type); @@ -78,9 +78,9 @@ export default { PmPlugins: [ invisibles([hardBreak()]), - ySyncPlugin(...opts), - yCursorPlugin(sharedTypes.awareness), - yUndoPlugin(), + // ySyncPlugin(...opts), + // yCursorPlugin(sharedTypes.awareness), + // yUndoPlugin(), ], services: [ diff --git a/package.json b/package.json index acdad424eb18f103e5847a135e065c9150287162..bf903f9cbb4684028c19b38e29367bfcae85223e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@apollo/react-testing": "^3.1.3", "@babel/core": "^7.0.0", + "@guardian/prosemirror-invisibles": "^1.2.1", "@pubsweet/base-model": "^3.5.0", "@pubsweet/component-send-email": "^0.4.2", "@pubsweet/job-xsweet": "^2.0.3", @@ -52,11 +53,12 @@ "recompose": "^0.30.0", "styled-components": "^4.1.1", "supertest": "^3.0.0", - "wax-prosemirror-core": "^0.0.8", - "wax-prosemirror-schema": "^0.0.8", - "wax-prosemirror-services": "^0.0.8", - "wax-prosemirror-themes": "^0.0.8", - "wax-prosemirror-utilities": "^0.0.8", + "wax-prosemirror-core": "^0.0.9", + "wax-prosemirror-plugins": "^0.0.9", + "wax-prosemirror-schema": "^0.0.9", + "wax-prosemirror-services": "^0.0.9", + "wax-prosemirror-themes": "^0.0.9", + "wax-prosemirror-utilities": "^0.0.9", "winston": "^2.4.0", "xpub-edit": "^2.6.10", "xpub-journal": "^0.1.0", diff --git a/yarn.lock b/yarn.lock index aa31da76dd2628e13a7701d604053b13c50d04ea..18dbb91bcd0ac96e07b1e504497410bf3f0f114f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1261,6 +1261,13 @@ dependencies: humps "^2.0.1" +"@guardian/prosemirror-invisibles@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@guardian/prosemirror-invisibles/-/prosemirror-invisibles-1.2.1.tgz#00a04b160c7d711c8f5972969ead79d45a675ffd" + integrity sha512-Xp/fl6notHbHgzViJ7+Y37Ht3FxCTMeqOXEyvnbYlLHLpQWbAJsxdFaTYeZM/WfvFNuC6TPGknoFm2ptFsELAw== + dependencies: + prosemirror-view "^1.5.1" + "@hapi/address@^2.1.2": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -12140,7 +12147,7 @@ prosemirror-tables@^0.7.11: prosemirror-transform "^1.0.0" prosemirror-view "^1.0.0" -prosemirror-tables@^1.0.0: +prosemirror-tables@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.1.0.tgz#e7fc65e57a44759b0b999d8c71294f79e5a4d54b" integrity sha512-E00+KSbDw65966GdiLBpqTNxIextw0RavlGmvdv/dyYbN9OTD0gzaoCU1S8MAbz4GLKmY9Y/g4nSiC1IL1ThQg== @@ -12172,6 +12179,15 @@ prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.11, pro prosemirror-state "^1.0.0" prosemirror-transform "^1.1.0" +prosemirror-view@^1.5.1: + version "1.15.0" + resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.15.0.tgz#372102c91d05b3b0f371b3eb59aeacedb5011bba" + integrity sha512-a7Q76sO/DCZr2UX2Rv1Rbw52cr9kVIz8iJOf/rq4mPN1NA3lugq2BKJgUMwlB3U4utyw3olLigqouRHM48NJyg== + dependencies: + prosemirror-model "^1.1.0" + prosemirror-state "^1.0.0" + prosemirror-transform "^1.1.0" + proxy-addr@~2.0.5: version "2.0.6" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf" @@ -12551,7 +12567,7 @@ react-dock@^0.2.4: lodash.debounce "^3.1.1" prop-types "^15.5.8" -react-dom@^16.3.2, react-dom@^16.8.6, react-dom@^16.9.0: +react-dom@^16.13.1, react-dom@^16.3.2, react-dom@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== @@ -12797,7 +12813,7 @@ react-visibility-sensor@^5.1.1: dependencies: prop-types "^15.7.2" -react@^16.3.2, react@^16.8.6, react@^16.9.0: +react@^16.13.1, react@^16.3.2, react@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== @@ -15382,26 +15398,26 @@ watchpack@^1.6.1: chokidar "^3.4.0" watchpack-chokidar2 "^2.0.0" -wax-prosemirror-components@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-components/-/wax-prosemirror-components-0.0.8.tgz#47fa298305a1f52af978871bb57e4a65dfec4e0e" - integrity sha512-c+KUI8XLqgdYYHyLTkvGoS7BlhEAMTgfsEuHhyMVfSK6pedDwrmyu+NE+TLYbIezaGNWKOmpxrm+2IAXEyLh+w== +wax-prosemirror-components@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-components/-/wax-prosemirror-components-0.0.9.tgz#ca6f9782d86f4e4ff28e73c702052ff8a046464f" + integrity sha512-Cns6/mTqeZd3JsFbO6v0DC+Bg/E/iURcavwRrsS70CnxWynimpMyDIOqrk9K5ZQN++fGl/AZw+Y3SA8F6dJhJQ== dependencies: "@fortawesome/fontawesome" "^1.1.2" "@fortawesome/free-solid-svg-icons" "^5.12.0" "@fortawesome/react-fontawesome" "^0.0.17" lodash "^4.17.4" - react "^16.8.6" - react-dom "^16.8.6" + react "^16.13.1" + react-dom "^16.13.1" react-dropdown "^1.6.2" react-transition-group "^4.3.0" styled-components "^4.2.0" uuid "^7.0.3" -wax-prosemirror-core@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-core/-/wax-prosemirror-core-0.0.8.tgz#59099a519032ce7d6fb5ad6fd36c26deb6f6be78" - integrity sha512-95S7hJowjAEosSCAEHeFZhvJsdPDolsaKI0/EO/BACGgOuoIglqLVqham8BQNCxXCbE79ZCna2BGUUNIoUhgwQ== +wax-prosemirror-core@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-core/-/wax-prosemirror-core-0.0.9.tgz#a5610a38e06bf72d38465c94074ce564175d0531" + integrity sha512-tWuN7hubpujeCPYtm7NrtjDnlOoCD0dnxb066jQOx7uS/+k5j0AAdZx56mqD28yzorvKwF751RSy80NZ0YfQrw== dependencies: deepmerge "^4.2.2" inversify "^5.0.1" @@ -15418,55 +15434,66 @@ wax-prosemirror-core@^0.0.8: prosemirror-state "^1.3.2" prosemirror-transform "^1.2.3" prosemirror-view "^1.13.11" - react "^16.8.6" - react-dom "^16.8.6" + react "^16.13.1" + react-dom "^16.13.1" reflect-metadata "^0.1.13" styled-components "^4.2.0" -wax-prosemirror-layouts@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-layouts/-/wax-prosemirror-layouts-0.0.8.tgz#dd090565894d9021a9181a734ef3e868727bb3e2" - integrity sha512-CTFcH3oyglxZZUCRLQmZC7mt8LR50D5FaGfX8m/cZjaTPkSFu1XDT6ml+fLL5u49p5WW8+4Pnzf0LGadLfXaiQ== +wax-prosemirror-layouts@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-layouts/-/wax-prosemirror-layouts-0.0.9.tgz#88d16ac86f5e709aa89f0f4d1c17612064fe48b9" + integrity sha512-wF8JEzajUcNmE7vLky50cq/1iMOKfaH7BMpVavOCFBxn7gdsD57sjQ10aEj7H+FZVg/9xqrPXK9ByQ4nmXGmDw== dependencies: - react "^16.8.6" - react-dom "^16.8.6" + react "^16.13.1" + react-dom "^16.13.1" react-panelgroup "^1.0.10" styled-components "^4.2.0" -wax-prosemirror-schema@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-schema/-/wax-prosemirror-schema-0.0.8.tgz#16a1a10012ef36212f3e8e12cc0f9e05a5c53614" - integrity sha512-G1xNcs7ZwhCI6fOvvL72Lp90b1p4o8otxkwQq9R8or8Zu+SQjIXQw9+7wbio8CizdDcR58dDAWx9rhi/r60TUQ== +wax-prosemirror-plugins@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-plugins/-/wax-prosemirror-plugins-0.0.9.tgz#e03cd6c8f9afdce61935d40914c452a51dbbdbdf" + integrity sha512-PSk5/wYOCAGcB0zyrcONRHdMvldPwXc6HU7aMXS5XfVJPG7nk5H8GBI/QOyN7+iIulHx1ln8mikOzADEzzIAiQ== + dependencies: + wax-prosemirror-components "^0.0.9" + wax-prosemirror-core "^0.0.9" + wax-prosemirror-layouts "^0.0.9" + +wax-prosemirror-schema@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-schema/-/wax-prosemirror-schema-0.0.9.tgz#caba1c4445e27628b6721f01ee5cd17068512b63" + integrity sha512-p6aWkjhb7YIjo1txb6GVO/8Qqhwyuz+14RdyDQ5UWtZbmce4v+b86kNtaMtq4UCaEeWhtrrf5VdFbSWAz8HHMw== dependencies: prosemirror-schema-list "^1.1.2" - prosemirror-tables "^1.0.0" + prosemirror-tables "^1.1.0" -wax-prosemirror-services@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-services/-/wax-prosemirror-services-0.0.8.tgz#103b7895a0f5ca9d00707162db082c8bb63e386e" - integrity sha512-HyJMFpLVp5BRRoB3tTp7xwC1CDRfNZcKRvEyTt5Avm8yfkmgjrieI5K5VgCKpXZYgUOB11iLRkWpSpj5qOlBtw== +wax-prosemirror-services@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-services/-/wax-prosemirror-services-0.0.9.tgz#77c065e8f82440a4e2bea7400ab3ed4ec0c88657" + integrity sha512-U0Y2dzAaXOHoxyDvx59Q6ORopFTRKeYyIjTlvjAXCUccIHcOUC5E4Kv/xe+YhVIs6KI1hwDpTf+OPmCXUtyhYQ== dependencies: inversify "^5.0.1" inversify-inject-decorators "^3.1.0" + react "^16.13.1" + react-dom "^16.13.1" styled-components "^4.2.0" - wax-prosemirror-components "^0.0.8" - wax-prosemirror-core "^0.0.8" - wax-prosemirror-layouts "^0.0.8" + wax-prosemirror-components "^0.0.9" + wax-prosemirror-core "^0.0.9" + wax-prosemirror-layouts "^0.0.9" -wax-prosemirror-themes@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-themes/-/wax-prosemirror-themes-0.0.8.tgz#99f98ec2585fc2dc905e942386be70f79281f966" - integrity sha512-zsEZgZ4Sp2sCCUZ7NxcTcTcFF/3qRmYCkXOFZuUQDDXZ2Xjdy50YcdsA0XHgzbQ8hLc8mxz1cUOjMUIverfXUA== +wax-prosemirror-themes@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-themes/-/wax-prosemirror-themes-0.0.9.tgz#fa5ef1ecc2bf83821be7446e89b1e5e1f6fee027" + integrity sha512-fqD9mfETZF+DxSnvMYYJW32ZheYvHH8EDQpgMGcdJzN6OgSiVerVAqfZyvPTPN9HK6PQlXdGVVMjJ9y+0HAn9g== dependencies: "@pubsweet/ui-toolkit" "^2.2.13" cokourier-prime-sans "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git" typeface-fira-sans-condensed "^0.0.54" typeface-vollkorn "^0.0.54" -wax-prosemirror-utilities@^0.0.8: - version "0.0.8" - resolved "https://registry.yarnpkg.com/wax-prosemirror-utilities/-/wax-prosemirror-utilities-0.0.8.tgz#3f368305cbbcd0e275bbe731cf1fcc25b83d9eae" - integrity sha512-3u58kLrOa8aPL4mE0MCew4IupJhRhfQ3X262hYIA18xlAcIWGlnfzO7IPLorb2dEWSjUdEhdGqUvRrN3Jh9T4A== +wax-prosemirror-utilities@^0.0.9: + version "0.0.9" + resolved "https://registry.yarnpkg.com/wax-prosemirror-utilities/-/wax-prosemirror-utilities-0.0.9.tgz#2cc5f92ab43d0476b62f42ce95fa32628308c560" + integrity sha512-5oRCgcntr7qolel+rdF/wZ6DIgDq/38lOW6hzTfO5Bj2maHwlQOHHDntiSSN+SQrgR0JodX/TKFF/Vtr1C3GVg== dependencies: prosemirror-utils "^0.9.6"