Commit 0e9c6e4f authored by chris's avatar chris

basic editoria layout

parent c26aefaf
......@@ -6,6 +6,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0",
"wax-prosemirror-core": "0.0.1",
"wax-prosemirror-schema": "0.0.1",
"wax-prosemirror-themes": "0.0.1",
......
......@@ -6,6 +6,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0",
"wax-prosemirror-core": "0.0.1",
"wax-prosemirror-schema": "0.0.1",
"wax-prosemirror-themes": "0.0.1",
......
import React, { Component } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { Wax, CreateSchema } from "wax-prosemirror-core";
import { EditoriaSchema } from "wax-prosemirror-schema";
import { MainMenuBar } from "wax-prosemirror-components";
......@@ -12,23 +13,40 @@ const options = {
schema: new CreateSchema(EditoriaSchema)
};
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
}
`;
const PageWrapper = styled.div`
position: relative;
height: 100vh;
width: 100vw;
`;
class Editoria extends Component {
render() {
return (
<Wax
options={options}
autoFocus
placeholder="Type Something..."
theme="editoria"
layout="editoria"
debug
renderLayout={({ editor, ...props }) => (
<React.Fragment>
<MainMenuBar {...props} />
<div>{editor}</div>
</React.Fragment>
)}
/>
<React.Fragment>
<GlobalStyle />
<PageWrapper>
<Wax
options={options}
autoFocus
placeholder="Type Something..."
theme="editoria"
layout="editoria"
debug
renderLayout={({ editor, ...props }) => (
<React.Fragment>
<MainMenuBar {...props} />
<div className="wax-surface-scroll">{editor}</div>
</React.Fragment>
)}
/>
</PageWrapper>
</React.Fragment>
);
}
}
......
......@@ -11,7 +11,7 @@
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^3.2.5",
"styled-components": "^4.2.0",
"classnames": "^2.2.6",
"lodash": "^4.17.4",
"@fortawesome/fontawesome": "^1.1.2",
......@@ -19,6 +19,6 @@
"@fortawesome/react-fontawesome": "^0.0.17",
"uuid": "^3.3.2",
"react-dropdown": "^1.6.2"
},
},
"devDependencies": {}
}
......@@ -29,15 +29,18 @@ const MainMenuBar = ({
className,
fileUpload
}) => (
<div className={className}>
{children && <span className={classes.group}>{children}</span>}
{
<span className={classes.group}>
{map(setMenuItems(menu, menuItems), item =>
item.menu({ state, dispatch, item, fileUpload })
)}
</span>
}
<div className={`${className} main-menu-container`}>
<div className="main-menu-inner">
<div className="main-menu">
{
<span className={classes.group}>
{map(setMenuItems(menu, menuItems), item =>
item.menu({ state, dispatch, item, fileUpload })
)}
</span>
}
</div>
</div>
</div>
);
......
......@@ -11,7 +11,7 @@
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^3.2.5",
"styled-components": "^4.2.0",
"classnames": "^2.2.6",
"lodash": "^4.17.4",
"prosemirror-commands": "^1.0.7",
......@@ -28,5 +28,8 @@
"prosemirror-view": "^1.8.9",
"prosemirror-dev-tools": "^2.1.1"
},
"devDependencies": {}
"devDependencies": {
"mocha": "^3.4.2",
"prosemirror-test-builder": "^1.0.1"
}
}
.wax-l-editoria {
display: flex;
flex-direction: column;
height: 100%;
}
.wax-l-editoria .main-menu-container {
background: #fff;
height: 36px;
line-height: 32px;
pointer-events: none;
position: relative;
user-select: none;
}
.wax-l-editoria .main-menu-inner {
display: flex;
flex-direction: column;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 9999;
}
.wax-l-editoria .main-menu {
background: #fff;
/*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);*/
box-sizing: border-box;
overflow: hidden;
padding: 2px 2px 2px 0;
position: relative;
}
.wax-l-editoria .wax-surface-container {
flex: 1;
position: relative;
z-index: 1;
}
.wax-l-editoria .wax-surface-scroll {
bottom: 0;
left: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
box-sizing: border-box;
padding-top: 45px;
margin-left: 20px;
}
......@@ -8,11 +8,6 @@
margin: 1em 0;
}
.wax-t-default .epigraph-poetry {
border-left: 2px solid #e0e4e4;
padding-left: 30px;
}
.wax-t-default hr:after {
content: "";
display: block;
......
.wax-t-editoria {
background: #fff;
}
.wax-t-editoria hr {
padding: 2px 10px;
border: none;
margin: 1em 0;
}
.wax-t-editoria .epigraph-poetry {
border-left: 2px solid #e0e4e4;
padding-left: 30px;
}
.wax-t-editoria hr:after {
content: "";
display: block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment