c202198d61
* fix: Margin on floating toolbar fix: Flash of toolbar on wide screens * fix: Nesting of comment marks * fix: Post button not visible when there is a draft comment, makes it look like the comment is saved fix: Styling of link editor results now matches other menus fix: Allow small link editor in comments sidebar * fix: Cannot use arrow keys to navigate suggested links Added animation to link suggestions Added mixin for text ellipsis * fix: Link input appears non-rounded when no creation option * Accidental removal
120 lines
3.1 KiB
TypeScript
120 lines
3.1 KiB
TypeScript
import { flatten } from "lodash";
|
||
import { observer } from "mobx-react";
|
||
import * as React from "react";
|
||
import { useTranslation, Trans } from "react-i18next";
|
||
import styled from "styled-components";
|
||
import { NavigationNode } from "@shared/types";
|
||
import Document from "~/models/Document";
|
||
import Button from "~/components/Button";
|
||
import DocumentExplorer from "~/components/DocumentExplorer";
|
||
import Flex from "~/components/Flex";
|
||
import Text from "~/components/Text";
|
||
import useCollectionTrees from "~/hooks/useCollectionTrees";
|
||
import useStores from "~/hooks/useStores";
|
||
import useToasts from "~/hooks/useToasts";
|
||
import { ellipsis } from "~/styles";
|
||
import { flattenTree } from "~/utils/tree";
|
||
|
||
type Props = {
|
||
/** Document to publish */
|
||
document: Document;
|
||
};
|
||
|
||
function DocumentPublish({ document }: Props) {
|
||
const { dialogs } = useStores();
|
||
const { showToast } = useToasts();
|
||
const { t } = useTranslation();
|
||
const collectionTrees = useCollectionTrees();
|
||
const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
|
||
null
|
||
);
|
||
const publishOptions = React.useMemo(
|
||
() => flatten(collectionTrees.map(flattenTree)),
|
||
[collectionTrees]
|
||
);
|
||
|
||
const publish = async () => {
|
||
if (!selectedPath) {
|
||
showToast(t("Select a location to publish"), {
|
||
type: "info",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const { type, id: parentDocumentId } = selectedPath;
|
||
|
||
const collectionId = selectedPath.collectionId as string;
|
||
|
||
// Also move it under if selected path corresponds to another doc
|
||
if (type === "document") {
|
||
await document.move(collectionId, parentDocumentId);
|
||
}
|
||
|
||
document.collectionId = collectionId;
|
||
await document.save({ publish: true });
|
||
|
||
showToast(t("Document published"), {
|
||
type: "success",
|
||
});
|
||
|
||
dialogs.closeAllModals();
|
||
} catch (err) {
|
||
showToast(t("Couldn’t publish the document, try again?"), {
|
||
type: "error",
|
||
});
|
||
}
|
||
};
|
||
|
||
return (
|
||
<FlexContainer column>
|
||
<DocumentExplorer
|
||
items={publishOptions}
|
||
onSubmit={publish}
|
||
onSelect={selectPath}
|
||
/>
|
||
<Footer justify="space-between" align="center" gap={8}>
|
||
<StyledText type="secondary">
|
||
{selectedPath ? (
|
||
<Trans
|
||
defaults="Publish in <em>{{ location }}</em>"
|
||
values={{
|
||
location: selectedPath.title,
|
||
}}
|
||
components={{
|
||
em: <strong />,
|
||
}}
|
||
/>
|
||
) : (
|
||
t("Select a location to publish")
|
||
)}
|
||
</StyledText>
|
||
<Button disabled={!selectedPath} onClick={publish}>
|
||
{t("Publish")}
|
||
</Button>
|
||
</Footer>
|
||
</FlexContainer>
|
||
);
|
||
}
|
||
|
||
const FlexContainer = styled(Flex)`
|
||
margin-left: -24px;
|
||
margin-right: -24px;
|
||
margin-bottom: -24px;
|
||
outline: none;
|
||
`;
|
||
|
||
const Footer = styled(Flex)`
|
||
height: 64px;
|
||
border-top: 1px solid ${(props) => props.theme.horizontalRule};
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
`;
|
||
|
||
const StyledText = styled(Text)`
|
||
${ellipsis()}
|
||
margin-bottom: 0;
|
||
`;
|
||
|
||
export default observer(DocumentPublish);
|