mirror of
https://github.com/docmost/docmost.git
synced 2026-05-17 23:14:07 +08:00
feat: public page sharing (#1012)
* Share - WIP * - public attachment links - WIP * WIP * WIP * Share - WIP * WIP * WIP * include userRole in space object * WIP * Server render shared page meta tags * disable user select * Close Navbar on outside click on mobile * update shared page spaceId * WIP * fix * close sidebar on click * close sidebar * defaults * update copy * Store share key in lowercase * refactor page breadcrumbs * Change copy * add link ref * open link button * add meta og:title * add twitter tags * WIP * make shares/info endpoint public * fix * * add /p/ segment to share urls * minore fixes * change mobile breadcrumb icon
This commit is contained in:
Philip Okugbe
GitHub
@@ -0,0 +1,106 @@
|
||||
import { Menu, ActionIcon, Text } from "@mantine/core";
|
||||
import React from "react";
|
||||
import {
|
||||
IconCopy,
|
||||
IconDots,
|
||||
IconFileDescription,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ISharedItem } from "@/features/share/types/share.types.ts";
|
||||
import {
|
||||
buildPageUrl,
|
||||
buildSharedPageUrl,
|
||||
} from "@/features/page/page.utils.ts";
|
||||
import { useClipboard } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useDeleteShareMutation } from "@/features/share/queries/share-query.ts";
|
||||
|
||||
interface Props {
|
||||
share: ISharedItem;
|
||||
}
|
||||
export default function ShareActionMenu({ share }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const clipboard = useClipboard();
|
||||
const deleteShareMutation = useDeleteShareMutation();
|
||||
|
||||
const openPage = () => {
|
||||
const pageLink = buildPageUrl(
|
||||
share.space.slug,
|
||||
share.page.slugId,
|
||||
share.page.title,
|
||||
);
|
||||
navigate(pageLink);
|
||||
};
|
||||
|
||||
const copyLink = () => {
|
||||
const shareLink = buildSharedPageUrl({
|
||||
shareId: share.key,
|
||||
pageTitle: share.page.title,
|
||||
pageSlugId: share.page.slugId,
|
||||
});
|
||||
|
||||
clipboard.copy(shareLink);
|
||||
notifications.show({ message: t("Link copied") });
|
||||
};
|
||||
const onDelete = async () => {
|
||||
deleteShareMutation.mutateAsync(share.key);
|
||||
};
|
||||
|
||||
const openDeleteModal = () =>
|
||||
modals.openConfirmModal({
|
||||
title: t("Delete public share link"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("Are you sure you want to delete this shared link?")}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Delete"), cancel: t("Don't") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: onDelete,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
shadow="xl"
|
||||
position="bottom-end"
|
||||
offset={20}
|
||||
width={200}
|
||||
withArrow
|
||||
arrowPosition="center"
|
||||
>
|
||||
<Menu.Target>
|
||||
<ActionIcon variant="subtle" c="gray">
|
||||
<IconDots size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item onClick={copyLink} leftSection={<IconCopy size={16} />}>
|
||||
{t("Copy link")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item
|
||||
onClick={openPage}
|
||||
leftSection={<IconFileDescription size={16} />}
|
||||
>
|
||||
{t("Open page")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
c="red"
|
||||
onClick={openDeleteModal}
|
||||
leftSection={<IconTrash size={16} />}
|
||||
disabled={share.space?.userRole === "reader"}
|
||||
>
|
||||
{t("Delete share")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import ShareShell from "@/features/share/components/share-shell.tsx";
|
||||
|
||||
export default function ShareLayout() {
|
||||
return (
|
||||
<ShareShell>
|
||||
<Outlet />
|
||||
</ShareShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { Table, Group, Text, Anchor } from "@mantine/core";
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Paginate from "@/components/common/paginate.tsx";
|
||||
import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
|
||||
import { ISharedItem } from "@/features/share/types/share.types.ts";
|
||||
import { format } from "date-fns";
|
||||
import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
|
||||
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
|
||||
import { getPageIcon } from "@/lib";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import classes from "./share.module.css";
|
||||
|
||||
export default function ShareList() {
|
||||
const { t } = useTranslation();
|
||||
const [page, setPage] = useState(1);
|
||||
const { data, isLoading } = useGetSharesQuery({ page });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table.ScrollContainer minWidth={500}>
|
||||
<Table verticalSpacing="xs">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Page")}</Table.Th>
|
||||
<Table.Th>{t("Shared by")}</Table.Th>
|
||||
<Table.Th>{t("Shared at")}</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
{data?.items.map((share: ISharedItem, index: number) => (
|
||||
<Table.Tr key={index}>
|
||||
<Table.Td>
|
||||
<Anchor
|
||||
size="sm"
|
||||
underline="never"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: "var(--mantine-color-text)",
|
||||
}}
|
||||
component={Link}
|
||||
target="_blank"
|
||||
to={buildSharedPageUrl({
|
||||
shareId: share.key,
|
||||
pageTitle: share.page.title,
|
||||
pageSlugId: share.page.slugId,
|
||||
})}
|
||||
>
|
||||
<Group gap="4" wrap="nowrap">
|
||||
{getPageIcon(share.page.icon)}
|
||||
<div className={classes.shareLinkText}>
|
||||
<Text fz="sm" fw={500} lineClamp={1}>
|
||||
{share.page.title || t("untitled")}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Anchor>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="4" wrap="nowrap">
|
||||
<CustomAvatar
|
||||
avatarUrl={share.creator?.avatarUrl}
|
||||
name={share.creator.name}
|
||||
size="sm"
|
||||
/>
|
||||
<Text fz="sm" lineClamp={1}>
|
||||
{share.creator.name}
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{format(new Date(share.createdAt), "MMM dd, yyyy")}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<ShareActionMenu share={share} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
|
||||
{data?.items.length > 0 && (
|
||||
<Paginate
|
||||
currentPage={page}
|
||||
hasPrevPage={data?.meta.hasPrevPage}
|
||||
hasNextPage={data?.meta.hasNextPage}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
Button,
|
||||
Group,
|
||||
Indicator,
|
||||
Popover,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { IconExternalLink, IconWorld } from "@tabler/icons-react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
useCreateShareMutation,
|
||||
useDeleteShareMutation,
|
||||
useShareForPageQuery,
|
||||
useUpdateShareMutation,
|
||||
} from "@/features/share/queries/share-query.ts";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { extractPageSlugId, getPageIcon } from "@/lib";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CopyTextButton from "@/components/common/copy.tsx";
|
||||
import { getAppUrl } from "@/lib/config.ts";
|
||||
import { buildPageUrl } from "@/features/page/page.utils.ts";
|
||||
import classes from "@/features/share/components/share.module.css";
|
||||
|
||||
interface ShareModalProps {
|
||||
readOnly: boolean;
|
||||
}
|
||||
export default function ShareModal({ readOnly }: ShareModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { pageSlug } = useParams();
|
||||
const pageId = extractPageSlugId(pageSlug);
|
||||
const { data: share } = useShareForPageQuery(pageId);
|
||||
const { spaceSlug } = useParams();
|
||||
const createShareMutation = useCreateShareMutation();
|
||||
const updateShareMutation = useUpdateShareMutation();
|
||||
const deleteShareMutation = useDeleteShareMutation();
|
||||
// pageIsShared means that the share exists and its level equals zero.
|
||||
const pageIsShared = share && share.level === 0;
|
||||
// if level is greater than zero, then it is a descendant page from a shared page
|
||||
const isDescendantShared = share && share.level > 0;
|
||||
|
||||
const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
|
||||
|
||||
const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
|
||||
useEffect(() => {
|
||||
if (share) {
|
||||
setIsPagePublic(true);
|
||||
} else {
|
||||
setIsPagePublic(false);
|
||||
}
|
||||
}, [share, pageId]);
|
||||
|
||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.currentTarget.checked;
|
||||
|
||||
if (value) {
|
||||
createShareMutation.mutateAsync({
|
||||
pageId: pageId,
|
||||
includeSubPages: true,
|
||||
searchIndexing: true,
|
||||
});
|
||||
setIsPagePublic(value);
|
||||
} else {
|
||||
if (share && share.id) {
|
||||
deleteShareMutation.mutateAsync(share.id);
|
||||
setIsPagePublic(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubPagesChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const value = event.currentTarget.checked;
|
||||
updateShareMutation.mutateAsync({
|
||||
shareId: share.id,
|
||||
includeSubPages: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleIndexSearchChange = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const value = event.currentTarget.checked;
|
||||
updateShareMutation.mutateAsync({
|
||||
shareId: share.id,
|
||||
searchIndexing: value,
|
||||
});
|
||||
};
|
||||
|
||||
const shareLink = useMemo(() => (
|
||||
<Group my="sm" gap={4} wrap="nowrap">
|
||||
<TextInput
|
||||
variant="filled"
|
||||
value={publicLink}
|
||||
readOnly
|
||||
rightSection={<CopyTextButton text={publicLink} />}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<ActionIcon
|
||||
component="a"
|
||||
variant="default"
|
||||
target="_blank"
|
||||
href={publicLink}
|
||||
size="sm"
|
||||
>
|
||||
<IconExternalLink size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
), [publicLink]);
|
||||
|
||||
return (
|
||||
<Popover width={350} position="bottom" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button
|
||||
style={{ border: "none" }}
|
||||
size="compact-sm"
|
||||
leftSection={
|
||||
<Indicator
|
||||
color="green"
|
||||
offset={5}
|
||||
disabled={!isPagePublic}
|
||||
withBorder
|
||||
>
|
||||
<IconWorld size={20} stroke={1.5} />
|
||||
</Indicator>
|
||||
}
|
||||
variant="default"
|
||||
>
|
||||
{t("Share")}
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown style={{ userSelect: "none" }}>
|
||||
{isDescendantShared ? (
|
||||
<>
|
||||
<Text size="sm">{t("Inherits public sharing from")}</Text>
|
||||
<Anchor
|
||||
size="sm"
|
||||
underline="never"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: "var(--mantine-color-text)",
|
||||
}}
|
||||
component={Link}
|
||||
to={buildPageUrl(
|
||||
spaceSlug,
|
||||
share.sharedPage.slugId,
|
||||
share.sharedPage.title,
|
||||
)}
|
||||
>
|
||||
<Group gap="4" wrap="nowrap" my="sm">
|
||||
{getPageIcon(share.sharedPage.icon)}
|
||||
<div className={classes.shareLinkText}>
|
||||
<Text fz="sm" fw={500} lineClamp={1}>
|
||||
{share.sharedPage.title || t("untitled")}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Anchor>
|
||||
|
||||
{shareLink}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="sm">
|
||||
{isPagePublic ? t("Shared to web") : t("Share to web")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{isPagePublic
|
||||
? t("Anyone with the link can view this page")
|
||||
: t("Make this page publicly accessible")}
|
||||
</Text>
|
||||
</div>
|
||||
<Switch
|
||||
onChange={handleChange}
|
||||
defaultChecked={isPagePublic}
|
||||
disabled={readOnly}
|
||||
size="xs"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{pageIsShared && (
|
||||
<>
|
||||
{shareLink}
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="sm">{t("Include sub-pages")}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Make sub-pages public too")}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
onChange={handleSubPagesChange}
|
||||
checked={share.includeSubPages}
|
||||
size="xs"
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl" mt="sm">
|
||||
<div>
|
||||
<Text size="sm">{t("Search engine indexing")}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Allow search engines to index page")}
|
||||
</Text>
|
||||
</div>
|
||||
<Switch
|
||||
onChange={handleIndexSearchChange}
|
||||
checked={share.searchIndexing}
|
||||
size="xs"
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Affix,
|
||||
AppShell,
|
||||
Button,
|
||||
Group,
|
||||
ScrollArea,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
|
||||
import { useParams } from "react-router-dom";
|
||||
import SharedTree from "@/features/share/components/shared-tree.tsx";
|
||||
import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
|
||||
import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import { ThemeToggle } from "@/components/theme-toggle.tsx";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
desktopSidebarAtom,
|
||||
mobileSidebarAtom,
|
||||
} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
|
||||
import {
|
||||
mobileTableOfContentAsideAtom,
|
||||
tableOfContentAsideAtom,
|
||||
} from "@/features/share/atoms/sidebar-atom.ts";
|
||||
import { IconList } from "@tabler/icons-react";
|
||||
import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
|
||||
import classes from "./share.module.css";
|
||||
import { useClickOutside } from "@mantine/hooks";
|
||||
|
||||
const MemoizedSharedTree = React.memo(SharedTree);
|
||||
|
||||
export default function ShareShell({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [mobileOpened] = useAtom(mobileSidebarAtom);
|
||||
const [desktopOpened] = useAtom(desktopSidebarAtom);
|
||||
const toggleMobile = useToggleSidebar(mobileSidebarAtom);
|
||||
const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
|
||||
|
||||
const [tocOpened] = useAtom(tableOfContentAsideAtom);
|
||||
const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
|
||||
const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
|
||||
const toggleToc = useToggleToc(tableOfContentAsideAtom);
|
||||
|
||||
const { shareId } = useParams();
|
||||
const { data } = useGetSharedPageTreeQuery(shareId);
|
||||
const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
|
||||
|
||||
const [navbarOutside, setNavbarOutside] = useState<HTMLElement | null>(null);
|
||||
const [asideOutside, setAsideOutside] = useState<HTMLElement | null>(null);
|
||||
|
||||
useClickOutside(
|
||||
() => {
|
||||
if (mobileOpened) {
|
||||
toggleMobile();
|
||||
}
|
||||
if (mobileTocOpened) {
|
||||
toggleTocMobile();
|
||||
}
|
||||
},
|
||||
null,
|
||||
[navbarOutside, asideOutside],
|
||||
);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 48 }}
|
||||
{...(data?.pageTree?.length > 1 && {
|
||||
navbar: {
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: {
|
||||
mobile: !mobileOpened,
|
||||
desktop: !desktopOpened,
|
||||
},
|
||||
},
|
||||
})}
|
||||
aside={{
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: {
|
||||
mobile: !mobileTocOpened,
|
||||
desktop: !tocOpened,
|
||||
},
|
||||
}}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header>
|
||||
<Group wrap="nowrap" justify="space-between" py="sm" px="xl">
|
||||
<Group>
|
||||
{data?.pageTree?.length > 1 && (
|
||||
<>
|
||||
<Tooltip label={t("Sidebar toggle")}>
|
||||
<SidebarToggle
|
||||
aria-label={t("Sidebar toggle")}
|
||||
opened={mobileOpened}
|
||||
onClick={toggleMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={t("Sidebar toggle")}>
|
||||
<SidebarToggle
|
||||
aria-label={t("Sidebar toggle")}
|
||||
opened={desktopOpened}
|
||||
onClick={toggleDesktop}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
/>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
<Group>
|
||||
<>
|
||||
<Tooltip label={t("Table of contents")} withArrow>
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
style={{ border: "none" }}
|
||||
onClick={toggleTocMobile}
|
||||
hiddenFrom="sm"
|
||||
size="sm"
|
||||
>
|
||||
<IconList size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={t("Table of contents")} withArrow>
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
style={{ border: "none" }}
|
||||
onClick={toggleToc}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
>
|
||||
<IconList size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
|
||||
<ThemeToggle />
|
||||
</Group>
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
|
||||
{data?.pageTree?.length > 1 && (
|
||||
<AppShell.Navbar
|
||||
p="md"
|
||||
className={classes.navbar}
|
||||
ref={setNavbarOutside}
|
||||
>
|
||||
<MemoizedSharedTree sharedPageTree={data} />
|
||||
</AppShell.Navbar>
|
||||
)}
|
||||
|
||||
<AppShell.Main>
|
||||
{children}
|
||||
|
||||
<Affix position={{ bottom: 20, right: 20 }}>
|
||||
<Button
|
||||
variant="default"
|
||||
component="a"
|
||||
target="_blank"
|
||||
href="https://docmost.com?ref=public-share"
|
||||
>
|
||||
Powered by Docmost
|
||||
</Button>
|
||||
</Affix>
|
||||
</AppShell.Main>
|
||||
|
||||
<AppShell.Aside
|
||||
p="md"
|
||||
withBorder={mobileTocOpened}
|
||||
className={classes.aside}
|
||||
ref={setAsideOutside}
|
||||
>
|
||||
<ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
|
||||
<div style={{ paddingBottom: "50px" }}>
|
||||
{readOnlyEditor && (
|
||||
<TableOfContents isShare={true} editor={readOnlyEditor} />
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</AppShell.Aside>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.shareLinkText {
|
||||
@mixin light {
|
||||
border-bottom: 0.05em solid var(--mantine-color-dark-0);
|
||||
}
|
||||
@mixin dark {
|
||||
border-bottom: 0.05em solid var(--mantine-color-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.treeNode {
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.navbar,
|
||||
.aside {
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import { ISharedPageTree } from "@/features/share/types/share.types.ts";
|
||||
import { NodeApi, NodeRendererProps, Tree, TreeApi } from "react-arborist";
|
||||
import {
|
||||
buildSharedPageTree,
|
||||
SharedPageTreeNode,
|
||||
} from "@/features/share/utils.ts";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useElementSize, useMergedRef } from "@mantine/hooks";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { atom, useAtom } from "jotai/index";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronRight,
|
||||
IconPointFilled,
|
||||
} from "@tabler/icons-react";
|
||||
import { ActionIcon, Box } from "@mantine/core";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { OpenMap } from "react-arborist/dist/main/state/open-slice";
|
||||
import classes from "@/features/page/tree/styles/tree.module.css";
|
||||
import styles from "./share.module.css";
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
|
||||
interface SharedTree {
|
||||
sharedPageTree: ISharedPageTree;
|
||||
}
|
||||
|
||||
const openSharedTreeNodesAtom = atom<OpenMap>({});
|
||||
|
||||
export default function SharedTree({ sharedPageTree }: SharedTree) {
|
||||
const [tree, setTree] = useState<
|
||||
TreeApi<SharedPageTreeNode> | null | undefined
|
||||
>(null);
|
||||
const rootElement = useRef<HTMLDivElement>();
|
||||
const { ref: sizeRef, width, height } = useElementSize();
|
||||
const mergedRef = useMergedRef(rootElement, sizeRef);
|
||||
const { pageSlug } = useParams();
|
||||
const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
|
||||
openSharedTreeNodesAtom,
|
||||
);
|
||||
|
||||
const currentNodeId = extractPageSlugId(pageSlug);
|
||||
|
||||
const treeData: SharedPageTreeNode[] = useMemo(() => {
|
||||
if (!sharedPageTree?.pageTree) return;
|
||||
return buildSharedPageTree(sharedPageTree.pageTree);
|
||||
}, [sharedPageTree?.pageTree]);
|
||||
|
||||
useEffect(() => {
|
||||
const parentNodeId = treeData?.[0]?.slugId;
|
||||
|
||||
if (parentNodeId && tree) {
|
||||
const parentNode = tree.get(parentNodeId);
|
||||
|
||||
setTimeout(() => {
|
||||
if (parentNode) {
|
||||
tree.openSiblings(parentNode);
|
||||
}
|
||||
});
|
||||
|
||||
// open direct children of parent node
|
||||
parentNode?.children.forEach((node) => {
|
||||
tree.openSiblings(node);
|
||||
});
|
||||
}
|
||||
}, [treeData, tree]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentNodeId && tree) {
|
||||
setTimeout(() => {
|
||||
// focus on node and open all parents
|
||||
tree?.select(currentNodeId, { align: "auto" });
|
||||
}, 200);
|
||||
} else {
|
||||
tree?.deselectAll();
|
||||
}
|
||||
}, [currentNodeId, tree]);
|
||||
|
||||
if (!sharedPageTree || !sharedPageTree?.pageTree) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={mergedRef} className={classes.treeContainer}>
|
||||
{rootElement.current && (
|
||||
<Tree
|
||||
data={treeData}
|
||||
disableDrag={true}
|
||||
disableDrop={true}
|
||||
disableEdit={true}
|
||||
width={width}
|
||||
height={rootElement.current.clientHeight}
|
||||
ref={(t) => setTree(t)}
|
||||
openByDefault={false}
|
||||
disableMultiSelection={true}
|
||||
className={classes.tree}
|
||||
rowClassName={classes.row}
|
||||
rowHeight={30}
|
||||
overscanCount={10}
|
||||
dndRootElement={rootElement.current}
|
||||
onToggle={() => {
|
||||
setOpenTreeNodes(tree?.openState);
|
||||
}}
|
||||
initialOpenState={openTreeNodes}
|
||||
onClick={(e) => {
|
||||
if (tree && tree.focusedNode) {
|
||||
tree.select(tree.focusedNode);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{Node}
|
||||
</Tree>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Node({ node, style, tree }: NodeRendererProps<any>) {
|
||||
const { shareId } = useParams();
|
||||
const { t } = useTranslation();
|
||||
const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
|
||||
|
||||
const pageUrl = buildSharedPageUrl({
|
||||
shareId: shareId,
|
||||
pageSlugId: node.data.slugId,
|
||||
pageTitle: node.data.name,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={style}
|
||||
className={clsx(classes.node, node.state, styles.treeNode)}
|
||||
component={Link}
|
||||
to={pageUrl}
|
||||
onClick={() => {
|
||||
setMobileSidebarState(false);
|
||||
}}
|
||||
>
|
||||
<PageArrow node={node} />
|
||||
<span className={classes.text}>{node.data.name || t("untitled")}</span>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface PageArrowProps {
|
||||
node: NodeApi<SpaceTreeNode>;
|
||||
}
|
||||
|
||||
function PageArrow({ node }: PageArrowProps) {
|
||||
return (
|
||||
<ActionIcon
|
||||
size={20}
|
||||
variant="subtle"
|
||||
c="gray"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
node.toggle();
|
||||
}}
|
||||
>
|
||||
{node.isInternal ? (
|
||||
node.children && (node.children.length > 0 || node.data.hasChildren) ? (
|
||||
node.isOpen ? (
|
||||
<IconChevronDown stroke={2} size={16} />
|
||||
) : (
|
||||
<IconChevronRight stroke={2} size={16} />
|
||||
)
|
||||
) : (
|
||||
<IconPointFilled size={4} />
|
||||
)
|
||||
) : null}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user