Cleanup
This commit is contained in:
Jori Lallo
parent
43a312825b
commit
42e54a3a54
@ -99,7 +99,8 @@ export default class MarkdownEditor extends Component {
|
||||
render = () => {
|
||||
return (
|
||||
<span>
|
||||
<ClickablePadding onClick={this.focusAtStart} />
|
||||
{!this.props.readOnly &&
|
||||
<ClickablePadding onClick={this.focusAtStart} />}
|
||||
<Toolbar state={this.state.state} onChange={this.onChange} />
|
||||
<Editor
|
||||
ref={ref => (this.editor = ref)}
|
||||
@ -114,7 +115,8 @@ export default class MarkdownEditor extends Component {
|
||||
onSave={this.props.onSave}
|
||||
readOnly={this.props.readOnly}
|
||||
/>
|
||||
<ClickablePadding onClick={this.focusAtEnd} grow />
|
||||
{!this.props.readOnly &&
|
||||
<ClickablePadding onClick={this.focusAtEnd} grow />}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@ -72,9 +72,6 @@ type Props = {
|
||||
<Header>
|
||||
<Flex align="center">
|
||||
<LogoLink to="/">Atlas</LogoLink>
|
||||
<Title>
|
||||
{this.props.title}
|
||||
</Title>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Flex>
|
||||
@ -120,21 +117,23 @@ type Props = {
|
||||
}
|
||||
|
||||
const Container = styled(Flex)`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const Header = styled(Flex)`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
height: ${headerHeight};
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@ -148,18 +147,6 @@ const LogoLink = styled(Link)`
|
||||
font-size: 16px;
|
||||
`;
|
||||
|
||||
const Title = styled.span`
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: ${textColor};
|
||||
}
|
||||
`;
|
||||
|
||||
const Search = styled(Flex)`
|
||||
margin: 0 5px;
|
||||
padding: 15px 5px 0 5px;
|
||||
|
||||
@ -1,139 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React from 'react';
|
||||
|
||||
import styles from './Tree.scss';
|
||||
import classNames from 'classnames/bind';
|
||||
const cx = classNames.bind(styles);
|
||||
|
||||
class Node extends React.Component {
|
||||
displayName: 'UITreeNode';
|
||||
|
||||
renderCollapse = () => {
|
||||
const index = this.props.index;
|
||||
|
||||
if (index.children && index.children.length) {
|
||||
const collapsed = index.node.collapsed;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cx(
|
||||
styles.collapse,
|
||||
collapsed ? styles.caretRight : styles.caretDown
|
||||
)}
|
||||
onMouseDown={function(e) {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={this.handleCollapse}
|
||||
>
|
||||
<img alt="Expand" src={require('./assets/chevron.svg')} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
renderChildren = () => {
|
||||
const index = this.props.index;
|
||||
const tree = this.props.tree;
|
||||
const dragging = this.props.dragging;
|
||||
|
||||
if (index.children && index.children.length) {
|
||||
const childrenStyles = {};
|
||||
|
||||
if (!this.props.rootNode) {
|
||||
if (index.node.collapsed) childrenStyles.display = 'none';
|
||||
childrenStyles.paddingLeft = `${this.props.paddingLeft}px`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.children} style={childrenStyles}>
|
||||
{index.children.map(child => {
|
||||
const childIndex = tree.getIndex(child);
|
||||
return (
|
||||
<Node
|
||||
tree={tree}
|
||||
index={childIndex}
|
||||
key={childIndex.id}
|
||||
dragging={dragging}
|
||||
allowUpdates={this.props.allowUpdates}
|
||||
paddingLeft={this.props.paddingLeft}
|
||||
onCollapse={this.props.onCollapse}
|
||||
onDragStart={this.props.onDragStart}
|
||||
history={this.props.history}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
isModifying = () => {
|
||||
return this.props.allowUpdates && !this.props.rootNode;
|
||||
};
|
||||
|
||||
onClick = () => {
|
||||
const index = this.props.index;
|
||||
const node = index.node;
|
||||
if (!this.isModifying()) this.props.history.push(node.url);
|
||||
};
|
||||
|
||||
render() {
|
||||
const index = this.props.index;
|
||||
const dragging = this.props.dragging;
|
||||
const node = index.node;
|
||||
const style = {};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(styles.node, {
|
||||
placeholder: index.id === dragging,
|
||||
rootNode: this.props.rootNode,
|
||||
})}
|
||||
style={style}
|
||||
>
|
||||
<div
|
||||
className={styles.inner}
|
||||
ref="inner"
|
||||
onMouseDown={
|
||||
this.props.rootNode || !this.props.allowUpdates
|
||||
? e => e.stopPropagation()
|
||||
: this.handleMouseDown
|
||||
}
|
||||
>
|
||||
{!this.props.rootNode && this.renderCollapse()}
|
||||
<span
|
||||
className={cx(styles.nodeLabel, {
|
||||
rootLabel: this.props.rootNode,
|
||||
isModifying: this.isModifying(),
|
||||
})}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{node.title}
|
||||
</span>
|
||||
</div>
|
||||
{this.renderChildren()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
handleCollapse = e => {
|
||||
e.stopPropagation();
|
||||
const nodeId = this.props.index.id;
|
||||
if (this.props.onCollapse) this.props.onCollapse(nodeId);
|
||||
};
|
||||
|
||||
handleMouseDown = e => {
|
||||
const nodeId = this.props.index.id;
|
||||
const dom = this.refs.inner;
|
||||
|
||||
if (this.props.onDragStart) {
|
||||
this.props.onDragStart(nodeId, dom, e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = Node;
|
||||
@ -1,74 +0,0 @@
|
||||
/* eslint-disable */
|
||||
const Tree = require('js-tree');
|
||||
const proto = Tree.prototype;
|
||||
|
||||
proto.updateNodesPosition = function() {
|
||||
let top = 1;
|
||||
let left = 1;
|
||||
const root = this.getIndex(1);
|
||||
const self = this;
|
||||
|
||||
root.top = top++;
|
||||
root.left = left++;
|
||||
|
||||
if (root.children && root.children.length) {
|
||||
walk(root.children, root, left, root.node.collapsed);
|
||||
}
|
||||
|
||||
function walk(children, parent, left, collapsed) {
|
||||
let height = 1;
|
||||
children.forEach(id => {
|
||||
const node = self.getIndex(id);
|
||||
if (collapsed) {
|
||||
node.top = null;
|
||||
node.left = null;
|
||||
} else {
|
||||
node.top = top++;
|
||||
node.left = left;
|
||||
}
|
||||
|
||||
if (node.children && node.children.length) {
|
||||
height += walk(
|
||||
node.children,
|
||||
node,
|
||||
left + 1,
|
||||
collapsed || node.node.collapsed
|
||||
);
|
||||
} else {
|
||||
node.height = 1;
|
||||
height += 1;
|
||||
}
|
||||
});
|
||||
|
||||
if (parent.node.collapsed) parent.height = 1;
|
||||
else parent.height = height;
|
||||
return parent.height;
|
||||
}
|
||||
};
|
||||
|
||||
proto.move = function(fromId, toId, placement) {
|
||||
if (fromId === toId || toId === 1) return;
|
||||
|
||||
const obj = this.remove(fromId);
|
||||
let index = null;
|
||||
|
||||
if (placement === 'before') index = this.insertBefore(obj, toId);
|
||||
else if (placement === 'after') index = this.insertAfter(obj, toId);
|
||||
else if (placement === 'prepend') index = this.prepend(obj, toId);
|
||||
else if (placement === 'append') index = this.append(obj, toId);
|
||||
|
||||
// todo: perf
|
||||
this.updateNodesPosition();
|
||||
return index;
|
||||
};
|
||||
|
||||
proto.getNodeByTop = function(top) {
|
||||
const indexes = this.indexes;
|
||||
for (const id in indexes) {
|
||||
if (indexes.hasOwnProperty(id)) {
|
||||
if (indexes[id].top === top) return indexes[id];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Tree;
|
||||
@ -1,87 +0,0 @@
|
||||
@mixin no-select {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tree {
|
||||
@include no-select;
|
||||
padding: 20px 20px 20px 5px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
@include no-select;
|
||||
}
|
||||
|
||||
.node {
|
||||
&.placeholder > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.placeholder {
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.caretRight {
|
||||
margin-top: 3px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.caretDown {
|
||||
transform: rotate(90deg);
|
||||
margin-left: -4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.node {
|
||||
&.placeholder {
|
||||
border: 1px dashed #1385e5;
|
||||
}
|
||||
|
||||
.nodeLabel {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 4px 5px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&.isModifying {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
&.isActive {
|
||||
background-color: #31363F;
|
||||
}
|
||||
}
|
||||
|
||||
.rootLabel {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
@ -1,275 +0,0 @@
|
||||
/* eslint-disable */
|
||||
const React = require('react');
|
||||
const Tree = require('./Tree');
|
||||
const Node = require('./Node');
|
||||
|
||||
import styles from './Tree.scss';
|
||||
|
||||
export default React.createClass({
|
||||
displayName: 'UITree',
|
||||
|
||||
propTypes: {
|
||||
tree: React.PropTypes.object.isRequired,
|
||||
paddingLeft: React.PropTypes.number,
|
||||
onCollapse: React.PropTypes.func,
|
||||
allowUpdates: React.PropTypes.bool,
|
||||
history: React.PropTypes.object,
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
paddingLeft: 20,
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return this.init(this.props);
|
||||
},
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!this._updated) this.setState(this.init(nextProps));
|
||||
else this._updated = false;
|
||||
},
|
||||
|
||||
init(props) {
|
||||
const tree = new Tree(props.tree);
|
||||
tree.isNodeCollapsed = props.isNodeCollapsed;
|
||||
tree.changeNodeCollapsed = props.changeNodeCollapsed;
|
||||
tree.updateNodesPosition();
|
||||
|
||||
return {
|
||||
tree,
|
||||
dragging: {
|
||||
id: null,
|
||||
x: null,
|
||||
y: null,
|
||||
w: null,
|
||||
h: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getDraggingDom() {
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
|
||||
if (dragging && dragging.id) {
|
||||
const draggingIndex = tree.getIndex(dragging.id);
|
||||
const draggingStyles = {
|
||||
top: dragging.y,
|
||||
left: dragging.x,
|
||||
width: dragging.w,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.draggable} style={draggingStyles}>
|
||||
<Node
|
||||
tree={tree}
|
||||
index={draggingIndex}
|
||||
paddingLeft={this.props.paddingLeft}
|
||||
allowUpdates={this.props.allowUpdates}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
render() {
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
const draggingDom = this.getDraggingDom();
|
||||
|
||||
return (
|
||||
<div className={styles.tree}>
|
||||
{draggingDom}
|
||||
<Node
|
||||
rootNode
|
||||
tree={tree}
|
||||
index={tree.getIndex(1)}
|
||||
key={1}
|
||||
paddingLeft={this.props.paddingLeft}
|
||||
allowUpdates={this.props.allowUpdates}
|
||||
onDragStart={this.dragStart}
|
||||
onCollapse={this.toggleCollapse}
|
||||
dragging={dragging && dragging.id}
|
||||
history={this.props.history}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
dragStart(id, dom, e) {
|
||||
this.dragging = {
|
||||
id,
|
||||
w: dom.offsetWidth,
|
||||
h: dom.offsetHeight,
|
||||
x: dom.offsetLeft,
|
||||
y: dom.offsetTop,
|
||||
};
|
||||
|
||||
this._startX = dom.offsetLeft;
|
||||
this._startY = dom.offsetTop;
|
||||
this._offsetX = e.clientX;
|
||||
this._offsetY = e.clientY;
|
||||
this._start = true;
|
||||
|
||||
window.addEventListener('mousemove', this.drag);
|
||||
window.addEventListener('mouseup', this.dragEnd);
|
||||
},
|
||||
|
||||
// oh
|
||||
drag(e) {
|
||||
if (this._start) {
|
||||
this.setState({
|
||||
dragging: this.dragging,
|
||||
});
|
||||
this._start = false;
|
||||
}
|
||||
|
||||
const tree = this.state.tree;
|
||||
const dragging = this.state.dragging;
|
||||
const paddingLeft = this.props.paddingLeft;
|
||||
let newIndex = null;
|
||||
let index = tree.getIndex(dragging.id);
|
||||
const collapsed = index.node.collapsed;
|
||||
|
||||
const _startX = this._startX;
|
||||
const _startY = this._startY;
|
||||
const _offsetX = this._offsetX;
|
||||
const _offsetY = this._offsetY;
|
||||
|
||||
const pos = {
|
||||
x: _startX + e.clientX - _offsetX,
|
||||
y: _startY + e.clientY - _offsetY,
|
||||
};
|
||||
dragging.x = pos.x;
|
||||
dragging.y = pos.y;
|
||||
|
||||
const diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft;
|
||||
const diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h;
|
||||
|
||||
if (diffX < 0) {
|
||||
// left
|
||||
if (index.parent && !index.next) {
|
||||
newIndex = tree.move(index.id, index.parent, 'after');
|
||||
}
|
||||
} else if (diffX > paddingLeft) {
|
||||
// right
|
||||
if (index.prev) {
|
||||
const prevNode = tree.getIndex(index.prev).node;
|
||||
if (!prevNode.collapsed && !prevNode.leaf) {
|
||||
newIndex = tree.move(index.id, index.prev, 'append');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newIndex) {
|
||||
index = newIndex;
|
||||
newIndex.node.collapsed = collapsed;
|
||||
dragging.id = newIndex.id;
|
||||
}
|
||||
|
||||
if (diffY < 0) {
|
||||
// up
|
||||
const above = tree.getNodeByTop(index.top - 1);
|
||||
newIndex = tree.move(index.id, above.id, 'before');
|
||||
} else if (diffY > dragging.h) {
|
||||
// down
|
||||
if (index.next) {
|
||||
let below = tree.getIndex(index.next);
|
||||
if (below.children && below.children.length && !below.node.collapsed) {
|
||||
newIndex = tree.move(index.id, index.next, 'prepend');
|
||||
} else {
|
||||
newIndex = tree.move(index.id, index.next, 'after');
|
||||
}
|
||||
} else {
|
||||
let below = tree.getNodeByTop(index.top + index.height);
|
||||
if (below && below.parent !== index.id) {
|
||||
if (below.children && below.children.length) {
|
||||
newIndex = tree.move(index.id, below.id, 'prepend');
|
||||
} else {
|
||||
newIndex = tree.move(index.id, below.id, 'after');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newIndex) {
|
||||
newIndex.node.collapsed = collapsed;
|
||||
dragging.id = newIndex.id;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
tree,
|
||||
dragging,
|
||||
});
|
||||
},
|
||||
|
||||
dragEnd() {
|
||||
this.setState({
|
||||
dragging: {
|
||||
id: null,
|
||||
x: null,
|
||||
y: null,
|
||||
w: null,
|
||||
h: null,
|
||||
},
|
||||
});
|
||||
|
||||
this.change(this.state.tree);
|
||||
window.removeEventListener('mousemove', this.drag);
|
||||
window.removeEventListener('mouseup', this.dragEnd);
|
||||
},
|
||||
|
||||
change(tree) {
|
||||
this._updated = true;
|
||||
if (this.props.onChange) this.props.onChange(tree.obj);
|
||||
},
|
||||
|
||||
toggleCollapse(nodeId) {
|
||||
const tree = this.state.tree;
|
||||
const index = tree.getIndex(nodeId);
|
||||
const node = index.node;
|
||||
node.collapsed = !node.collapsed;
|
||||
tree.updateNodesPosition();
|
||||
|
||||
this.setState({
|
||||
tree,
|
||||
});
|
||||
|
||||
if (this.props.onCollapse) this.props.onCollapse(node.id, node.collapsed);
|
||||
},
|
||||
|
||||
// buildTreeNumbering(tree) {
|
||||
// const numberBuilder = (index, node, parentNumbering) => {
|
||||
// let numbering = parentNumbering ? `${parentNumbering}.${index}` : index;
|
||||
// let children;
|
||||
// if (node.children) {
|
||||
// children = node.children.map((child, childIndex) => {
|
||||
// return numberBuilder(childIndex+1, child, numbering);
|
||||
// });
|
||||
// }
|
||||
|
||||
// const data = {
|
||||
// module: {
|
||||
// ...node.module,
|
||||
// index: numbering,
|
||||
// }
|
||||
// }
|
||||
// if (children) {
|
||||
// data.children = children;
|
||||
// }
|
||||
|
||||
// return data;
|
||||
// };
|
||||
|
||||
// const newTree = {...tree};
|
||||
// newTree.children = [];
|
||||
// tree.children.forEach((child, index) => {
|
||||
// newTree.children.push(numberBuilder(index+1, child));
|
||||
// })
|
||||
// return newTree;
|
||||
// }
|
||||
});
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 30" x="0px" y="0px"><path d="M8.59,18.16L14.25,12.5L8.59,6.84L7.89,7.55L12.84,12.5L7.89,17.45L8.59,18.16Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 227 B |
@ -1,3 +0,0 @@
|
||||
// @flow
|
||||
import UiTree from './UiTree';
|
||||
export default UiTree;
|
||||
@ -98,6 +98,7 @@ render(
|
||||
<Route exact path="/dashboard" component={Dashboard} />
|
||||
<Route exact path="/collections/:id" component={Collection} />
|
||||
<Route exact path="/d/:id" component={Document} />
|
||||
|
||||
<Route exact path="/d/:id/:edit" component={Document} />
|
||||
<Route
|
||||
exact
|
||||
|
||||
@ -21,20 +21,6 @@ You have unsaved changes.
|
||||
Are you sure you want to discard them?
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
padding: 0 3em;
|
||||
width: 50em;
|
||||
`;
|
||||
|
||||
const Meta = styled.div`
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
match: Object,
|
||||
history: Object,
|
||||
@ -129,37 +115,52 @@ type Props = {
|
||||
search={false}
|
||||
fixed
|
||||
>
|
||||
<PageTitle title={titleText} />
|
||||
<Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
|
||||
{this.store.isFetching &&
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>}
|
||||
{this.store.document &&
|
||||
<Container>
|
||||
{!isEditing &&
|
||||
<Meta>
|
||||
<PagePadding>
|
||||
<PageTitle title={titleText} />
|
||||
<Prompt
|
||||
when={this.store.hasPendingChanges}
|
||||
message={DISCARD_CHANGES}
|
||||
/>
|
||||
{this.store.isFetching &&
|
||||
<CenteredContent>
|
||||
<PreviewLoading />
|
||||
</CenteredContent>}
|
||||
{this.store.document &&
|
||||
<Container>
|
||||
{!isEditing &&
|
||||
<PublishingInfo
|
||||
collaborators={this.store.document.collaborators}
|
||||
createdAt={this.store.document.createdAt}
|
||||
createdBy={this.store.document.createdBy}
|
||||
updatedAt={this.store.document.updatedAt}
|
||||
updatedBy={this.store.document.updatedBy}
|
||||
/>
|
||||
</Meta>}
|
||||
<Editor
|
||||
text={this.store.document.text}
|
||||
onImageUploadStart={this.onImageUploadStart}
|
||||
onImageUploadStop={this.onImageUploadStop}
|
||||
onChange={this.store.updateText}
|
||||
onSave={this.onSave}
|
||||
onCancel={this.onCancel}
|
||||
readOnly={!isEditing}
|
||||
/>
|
||||
</Container>}
|
||||
/>}
|
||||
<Editor
|
||||
text={this.store.document.text}
|
||||
onImageUploadStart={this.onImageUploadStart}
|
||||
onImageUploadStop={this.onImageUploadStop}
|
||||
onChange={this.store.updateText}
|
||||
onSave={this.onSave}
|
||||
onCancel={this.onCancel}
|
||||
readOnly={!isEditing}
|
||||
/>
|
||||
</Container>}
|
||||
</PagePadding>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const PagePadding = styled(Flex)`
|
||||
margin: 80px; 0
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
padding: 0 3em;
|
||||
width: 50em;
|
||||
`;
|
||||
|
||||
export default withRouter(Document);
|
||||
|
||||
@ -20,7 +20,7 @@ html, body, .viewport {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Atlas Grotesk', -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
@ -47,7 +47,7 @@ a {
|
||||
}
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
margin-top: 1em;
|
||||
margin-bottom: .5em;
|
||||
|
||||
Reference in New Issue
Block a user