diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js index 7dd2c2bf7c9c6b848fef125f2c76d9904ac15c15..c3a2218c6d0ed3f4347d549b225334435739494e 100644 --- a/editors/editoria/src/Editoria.js +++ b/editors/editoria/src/Editoria.js @@ -59,7 +59,6 @@ class Editoria extends Component { autoFocus placeholder="Type Something..." fileUpload={file => renderImage(file)} - debug value="" user={user} > diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js index b6ff5fa9f2be359c97e9d8358ccad931f0d0494f..2f77e790c5835042bada8f2d082b0957472f4581 100644 --- a/wax-prosemirror-core/src/Wax.js +++ b/wax-prosemirror-core/src/Wax.js @@ -1,5 +1,6 @@ import React, { Fragment, Component } from "react"; import debounce from "lodash/debounce"; +import styled from "styled-components"; import { DOMParser, DOMSerializer } from "prosemirror-model"; @@ -30,6 +31,12 @@ const serializer = schema => { }; }; +const LayoutWrapper = styled.div` + display: flex; + flex-direction: column; + height: 99%; +`; + class Wax extends Component { componentWillMount() { const { value, onChange, options } = this.props; @@ -94,7 +101,7 @@ class Wax extends Component { const WaxRender = children ? children : defaultRender; return ( - <div className={`${className}`}> + <LayoutWrapper className={`${className} wax-editor`}> <WaxView autoFocus={autoFocus} readonly={readonly} @@ -109,7 +116,7 @@ class Wax extends Component { > {WaxRender} </WaxView> - </div> + </LayoutWrapper> ); } } diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js index 1aef6190d2edc6b8880c565968891e79a90e0228..be8403f46f506dd889f04d13648ff2236c4859b6 100644 --- a/wax-prosemirror-core/src/WaxView.js +++ b/wax-prosemirror-core/src/WaxView.js @@ -105,7 +105,7 @@ class WaxView extends Component { }; render() { - const editor = <div ref={this.editorRef} />; + const editor = <span ref={this.editorRef} />; return this.props.children({ view: this.view, fileUpload: this.uploadImage, diff --git a/wax-prosemirror-layouts/package.json b/wax-prosemirror-layouts/package.json index 5fa8b0426273ffc98fe59e0b68c4f563dac7ae0d..039715452cfa299fc86a1292303b8ff53c0e4b81 100644 --- a/wax-prosemirror-layouts/package.json +++ b/wax-prosemirror-layouts/package.json @@ -9,7 +9,6 @@ "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { - "@pubsweet/ui-toolkit": "^2.2.13", - "styled-components": "^4.1.1" + "@pubsweet/ui-toolkit": "^2.2.13" } } diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js index 282c09c3e00b778337a4467d45815d6ba4ed2c25..27981e58f62b5e0e9f14054135ff8845f3eca671 100644 --- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js +++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js @@ -14,6 +14,9 @@ const WaxSurfaceContainer = styled.div` flex: 1; position: relative; z-index: 1; + display: flex; + flex-direction: column; + height: 100%; `; const WaxSurfaceScroll = styled.div` @@ -24,9 +27,9 @@ const WaxSurfaceScroll = styled.div` right: 0; top: 0; box-sizing: border-box; - padding: 0; margin-left: 14%; padding: 2px; + height: 100%; ${EditorElements}; `; @@ -36,7 +39,9 @@ const EditoriaLayout = ({ editor, view, ...props }) => ( <MainMenuBar view={view} {...props} /> <WaxSurfaceContainer> <SideMenuBar view={view} {...props} /> - <WaxSurfaceScroll>{editor}</WaxSurfaceScroll> + <WaxSurfaceScroll className="wax-surface-scroll"> + {editor} + </WaxSurfaceScroll> </WaxSurfaceContainer> </LayoutWrapper> </ThemeProvider> diff --git a/wax-prosemirror-themes/package.json b/wax-prosemirror-themes/package.json index 7b3decf88f4a4fb8fa78e5448e19b53804cbfd19..b208a60c815928190a7358d854300d1efc8f94a0 100644 --- a/wax-prosemirror-themes/package.json +++ b/wax-prosemirror-themes/package.json @@ -12,7 +12,6 @@ "@pubsweet/ui-toolkit": "^2.2.13", "cokourier-prime-sans": "git+https://gitlab.coko.foundation/julientaq/cokourier-sans-prime.git", - "styled-components": "^4.1.1", "typeface-fira-sans-condensed": "^0.0.54", "typeface-vollkorn": "^0.0.54" }