2020-07-17 04:26:23 +00:00
|
|
|
// @flow
|
|
|
|
import * as React from "react";
|
|
|
|
import { inject, observer } from "mobx-react";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import Editor from "components/Editor";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import { parseDocumentSlugFromUrl } from "shared/utils/parseDocumentIds";
|
|
|
|
import DocumentsStore from "stores/DocumentsStore";
|
|
|
|
import DocumentMeta from "components/DocumentMeta";
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
url: string,
|
|
|
|
documents: DocumentsStore,
|
|
|
|
children: React.Node => React.Node,
|
|
|
|
};
|
|
|
|
|
|
|
|
function HoverPreviewDocument({ url, documents, children }: Props) {
|
|
|
|
const slug = parseDocumentSlugFromUrl(url);
|
|
|
|
|
|
|
|
documents.prefetchDocument(slug, {
|
|
|
|
prefetch: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
const document = slug ? documents.getByUrl(slug) : undefined;
|
|
|
|
if (!document) return null;
|
|
|
|
|
|
|
|
return children(
|
|
|
|
<Content to={document.url}>
|
|
|
|
<Heading>{document.title}</Heading>
|
|
|
|
<DocumentMeta isDraft={document.isDraft} document={document} />
|
|
|
|
|
|
|
|
<Editor
|
|
|
|
key={document.id}
|
|
|
|
defaultValue={document.getSummary()}
|
|
|
|
disableEmbeds
|
|
|
|
readOnly
|
|
|
|
/>
|
|
|
|
</Content>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const Content = styled(Link)`
|
|
|
|
cursor: pointer;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Heading = styled.h2`
|
|
|
|
margin: 0 0 0.75em;
|
2020-07-21 02:43:30 +00:00
|
|
|
color: ${props => props.theme.text};
|
2020-07-17 04:26:23 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
export default inject("documents")(observer(HoverPreviewDocument));
|