63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import styled from "styled-components";
|
|
import { s } from "@shared/styles";
|
|
import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
|
|
import DocumentMeta from "~/components/DocumentMeta";
|
|
import Editor from "~/components/Editor";
|
|
import useStores from "~/hooks/useStores";
|
|
|
|
type Props = {
|
|
/* The document associated with the editor, if any */
|
|
id?: string;
|
|
/* The URL we want a preview for */
|
|
url: string;
|
|
children: (content: React.ReactNode) => React.ReactNode;
|
|
};
|
|
|
|
function HoverPreviewDocument({ url, id, children }: Props) {
|
|
const { documents } = useStores();
|
|
const slug = parseDocumentSlug(url);
|
|
|
|
if (slug) {
|
|
documents.prefetchDocument(slug);
|
|
}
|
|
|
|
const document = slug ? documents.getByUrl(slug) : undefined;
|
|
if (!document || document.id === id) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{children(
|
|
<Content to={document.url}>
|
|
<Heading>{document.titleWithDefault}</Heading>
|
|
<DocumentMeta document={document} />
|
|
|
|
<React.Suspense fallback={<div />}>
|
|
<Editor
|
|
key={document.id}
|
|
defaultValue={document.getSummary()}
|
|
embedsDisabled
|
|
readOnly
|
|
/>
|
|
</React.Suspense>
|
|
</Content>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const Content = styled(Link)`
|
|
cursor: var(--pointer);
|
|
`;
|
|
|
|
const Heading = styled.h2`
|
|
margin: 0 0 0.75em;
|
|
color: ${s("text")};
|
|
`;
|
|
|
|
export default observer(HoverPreviewDocument);
|