mirror of
https://github.com/docmost/docmost.git
synced 2026-08-20 02:54:11 +08:00
Compare commits
10
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9f5a7d76d9 | ||
|
|
ea59912c7e | ||
|
|
db3ff54da1 | ||
|
|
9414a38215 | ||
|
|
089286f6cf | ||
|
|
737cd67965 | ||
|
|
a0b2ac6ae3 | ||
|
|
7439da2f6e | ||
|
|
305fd40686 | ||
|
|
4bd51d7404 |
+1
-1
@@ -42,7 +42,7 @@ RUN chown -R node:node /app
|
||||
|
||||
USER node
|
||||
|
||||
RUN pnpm install --frozen-lockfile --prod
|
||||
RUN pnpm install --frozen-lockfile --prod && rm -rf /home/node/.cache/pnpm
|
||||
|
||||
RUN mkdir -p /app/data/storage
|
||||
|
||||
|
||||
@@ -50,9 +50,9 @@
|
||||
"katex": "0.16.40",
|
||||
"lowlight": "3.3.0",
|
||||
"mantine-form-zod-resolver": "1.3.0",
|
||||
"mermaid": "11.15.0",
|
||||
"mermaid": "11.16.1",
|
||||
"mitt": "3.0.1",
|
||||
"nanoid": "3.3.8",
|
||||
"nanoid": "3.3.17",
|
||||
"posthog-js": "1.391.2",
|
||||
"react": "19.2.7",
|
||||
"react-clear-modal": "^2.0.18",
|
||||
|
||||
@@ -387,6 +387,8 @@
|
||||
"Insert horizontal rule divider": "Insert horizontal rule divider",
|
||||
"Page break": "Page break",
|
||||
"Insert a page break for printing.": "Insert a page break for printing.",
|
||||
"Footnote": "Footnote",
|
||||
"Insert a footnote reference.": "Insert a footnote reference.",
|
||||
"Upload any image from your device.": "Upload any image from your device.",
|
||||
"Upload any video from your device.": "Upload any video from your device.",
|
||||
"Upload any audio from your device.": "Upload any audio from your device.",
|
||||
@@ -1289,5 +1291,16 @@
|
||||
"{{count}} rows deleted_one": "1 row deleted",
|
||||
"{{count}} rows deleted_other": "{{count}} rows deleted",
|
||||
"{{count}} selected_one": "1 selected",
|
||||
"{{count}} selected_other": "{{count}} selected"
|
||||
"{{count}} selected_other": "{{count}} selected",
|
||||
"Compare": "Compare",
|
||||
"Compare versions": "Compare versions",
|
||||
"Select version from {{date}}": "Select version from {{date}}",
|
||||
"Version actions for {{date}}": "Version actions for {{date}}",
|
||||
"Comparing {{newer}} and {{older}}": "Comparing {{newer}} and {{older}}",
|
||||
"Exit compare": "Exit compare",
|
||||
"Search attachments...": "Search attachments...",
|
||||
"Error loading attachments.": "Error loading attachments.",
|
||||
"No attachments on this page yet.": "No attachments on this page yet.",
|
||||
"Uploaded by {{name}}": "Uploaded by {{name}}",
|
||||
"Download {{name}}": "Download {{name}}"
|
||||
}
|
||||
|
||||
@@ -40,7 +40,6 @@ import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||
import BasePage from "@/ee/base/pages/base-page.tsx";
|
||||
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
|
||||
import PageAnalytics from "@/ee/page-analytics/pages/page-analytics.tsx";
|
||||
import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
|
||||
import TemplateList from "@/ee/template/pages/template-list";
|
||||
import TemplateEditor from "@/ee/template/pages/template-editor";
|
||||
@@ -128,7 +127,6 @@ export default function App() {
|
||||
<Route path={"ai"} element={<AiSettings />} />
|
||||
<Route path={"ai/mcp"} element={<AiSettings />} />
|
||||
<Route path={"audit"} element={<AuditLogs />} />
|
||||
<Route path={"analytics"} element={<PageAnalytics />} />
|
||||
<Route path={"verifications"} element={<VerifiedPages />} />
|
||||
{!isCloud() && <Route path={"license"} element={<License />} />}
|
||||
{isCloud() && <Route path={"billing"} element={<Billing />} />}
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
} from "@/ee/billing/services/billing-service.ts";
|
||||
import { getSpaces } from "@/features/space/services/space-service.ts";
|
||||
import { getGroups } from "@/features/group/services/group-service.ts";
|
||||
import type { QueryParams } from "@/lib/types.ts";
|
||||
import { QueryParams } from "@/lib/types.ts";
|
||||
import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service.ts";
|
||||
import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
|
||||
import { getSsoProviders } from "@/ee/security/services/security-service.ts";
|
||||
@@ -14,11 +14,6 @@ import { getApiKeys } from "@/ee/api-key";
|
||||
import { getAuditLogs } from "@/ee/audit/services/audit-service";
|
||||
import { getVerificationList } from "@/ee/page-verification/services/page-verification-service";
|
||||
import { getScimTokens } from "@/ee/scim/services/scim-token-service";
|
||||
import {
|
||||
getWorkspacePageAnalyticsDailyStats,
|
||||
getWorkspacePageAnalyticsTopPages,
|
||||
getWorkspacePageAnalyticsTotals,
|
||||
} from "@/ee/page-analytics/services/page-analytics-service";
|
||||
|
||||
export const prefetchWorkspaceMembers = () => {
|
||||
const params: QueryParams = { limit: 100, query: "" };
|
||||
@@ -105,31 +100,6 @@ export const prefetchVerifiedPages = () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const prefetchPageAnalytics = () => {
|
||||
const dateRange = {
|
||||
startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
|
||||
.toISOString()
|
||||
.slice(0, 10),
|
||||
endDate: new Date().toISOString().slice(0, 10),
|
||||
};
|
||||
const listParams = { ...dateRange, cursor: undefined, limit: 10 };
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["workspace-page-analytics-totals", dateRange],
|
||||
queryFn: () => getWorkspacePageAnalyticsTotals(dateRange),
|
||||
});
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["workspace-page-analytics-top-pages", listParams],
|
||||
queryFn: () => getWorkspacePageAnalyticsTopPages(listParams),
|
||||
});
|
||||
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["workspace-page-analytics-daily-stats", listParams],
|
||||
queryFn: () => getWorkspacePageAnalyticsDailyStats(listParams),
|
||||
});
|
||||
};
|
||||
|
||||
export const prefetchScimTokens = () => {
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["scim-token-list", { cursor: undefined }],
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
IconSparkles,
|
||||
IconHistory,
|
||||
IconShieldCheck,
|
||||
IconChartBar,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import classes from "./settings.module.css";
|
||||
@@ -39,7 +38,6 @@ import {
|
||||
prefetchWorkspaceMembers,
|
||||
prefetchAuditLogs,
|
||||
prefetchVerifiedPages,
|
||||
prefetchPageAnalytics,
|
||||
} from "@/components/settings/settings-queries.tsx";
|
||||
import AppVersion from "@/components/settings/app-version.tsx";
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
@@ -127,13 +125,6 @@ const groupedData: DataGroup[] = [
|
||||
role: "owner",
|
||||
env: "selfhosted",
|
||||
},
|
||||
{
|
||||
label: "Page analytics",
|
||||
icon: IconChartBar,
|
||||
path: "/settings/analytics",
|
||||
feature: Feature.PAGE_ANALYTICS,
|
||||
role: "owner",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -234,9 +225,6 @@ export default function SettingsSidebar() {
|
||||
case "Verified pages":
|
||||
prefetchHandler = prefetchVerifiedPages;
|
||||
break;
|
||||
case "Page analytics":
|
||||
prefetchHandler = prefetchPageAnalytics;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { describe, expect, it, beforeEach } from "vitest";
|
||||
import { render } from "@testing-library/react";
|
||||
import { HelmetProvider } from "react-helmet-async";
|
||||
import { DocumentTitle } from "./document-title.tsx";
|
||||
|
||||
const renderTitle = (ui: React.ReactNode) =>
|
||||
render(<HelmetProvider>{ui}</HelmetProvider>);
|
||||
|
||||
describe("DocumentTitle", () => {
|
||||
beforeEach(() => {
|
||||
document.head.innerHTML = "<title>Docmost</title>";
|
||||
});
|
||||
|
||||
it("appends the app name", () => {
|
||||
renderTitle(<DocumentTitle title="Home" />);
|
||||
expect(document.title).toBe("Home - Docmost");
|
||||
});
|
||||
|
||||
it("omits the app name when asked", () => {
|
||||
renderTitle(<DocumentTitle title="My page" withAppName={false} />);
|
||||
expect(document.title).toBe("My page");
|
||||
});
|
||||
|
||||
it("falls back to the app name without a title", () => {
|
||||
renderTitle(<DocumentTitle />);
|
||||
expect(document.title).toBe("Docmost");
|
||||
});
|
||||
|
||||
it("never renders an empty title", () => {
|
||||
renderTitle(<DocumentTitle title="Spaces" />);
|
||||
const titles = Array.from(document.querySelectorAll("head > title"));
|
||||
expect(titles.every((node) => node.textContent !== "")).toBe(true);
|
||||
});
|
||||
|
||||
it("renders extra head children", () => {
|
||||
renderTitle(
|
||||
<DocumentTitle title="Shared">
|
||||
<meta name="robots" content="noindex" />
|
||||
</DocumentTitle>,
|
||||
);
|
||||
expect(
|
||||
document.querySelector('head > meta[name="robots"]')?.getAttribute("content"),
|
||||
).toBe("noindex");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
|
||||
type DocumentTitleProps = {
|
||||
title?: string;
|
||||
withAppName?: boolean;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function DocumentTitle({
|
||||
title,
|
||||
withAppName = true,
|
||||
children,
|
||||
}: DocumentTitleProps) {
|
||||
const appName = getAppName();
|
||||
|
||||
let documentTitle = appName;
|
||||
if (title) {
|
||||
documentTitle = withAppName ? `${title} - ${appName}` : title;
|
||||
}
|
||||
|
||||
return (
|
||||
<Helmet>
|
||||
<title>{documentTitle}</title>
|
||||
{children}
|
||||
</Helmet>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,15 @@
|
||||
import { Title, Text, Button, Container, Group } from "@mantine/core";
|
||||
import classes from "./error-404.module.css";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export function Error404() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t("404 page not found")} - Docmost</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("404 page not found")} />
|
||||
<Container className={classes.root}>
|
||||
<Title className={classes.title}>{t("404 page not found")}</Title>
|
||||
<Text c="dimmed" size="lg" ta="center" className={classes.description}>
|
||||
|
||||
@@ -255,6 +255,7 @@ export default function ChatInput({
|
||||
},
|
||||
content: "",
|
||||
editable: true,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
autofocus: autofocus ? "end" : false,
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import React from "react";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
@@ -15,6 +13,7 @@ import { Feature } from "@/ee/features";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
|
||||
import { isCloud } from "@/lib/config.ts";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function AiSettings() {
|
||||
const { t } = useTranslation();
|
||||
@@ -40,9 +39,7 @@ export default function AiSettings() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>AI settings - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="AI settings" />
|
||||
<SettingsTitle title={t("AI settings")} />
|
||||
|
||||
<Tabs color="dark" value={activeTab} onChange={handleTabChange}>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import { Anchor, Alert, Button, Group, Space, Text } from "@mantine/core";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName, getAppUrl } from "@/lib/config";
|
||||
import { getAppUrl } from "@/lib/config";
|
||||
import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
|
||||
import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
|
||||
import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
|
||||
@@ -17,6 +16,7 @@ import { IApiKey } from "@/ee/api-key";
|
||||
import { useAtom } from "jotai";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function UserApiKeys() {
|
||||
const { t } = useTranslation();
|
||||
@@ -49,11 +49,7 @@ export default function UserApiKeys() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("API keys")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("API keys")} />
|
||||
|
||||
<SettingsTitle title={t("API keys")} />
|
||||
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { Anchor, Button, Divider, Group, Space, Text } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
|
||||
import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
|
||||
import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
|
||||
@@ -15,6 +13,7 @@ import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
|
||||
import { IApiKey } from "@/ee/api-key";
|
||||
import useUserRole from '@/hooks/use-user-role.tsx';
|
||||
import RestrictApiToAdmins from "@/ee/api-key/components/restrict-api-to-admins";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function WorkspaceApiKeys() {
|
||||
const { t } = useTranslation();
|
||||
@@ -47,11 +46,7 @@ export default function WorkspaceApiKeys() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("API management")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("API management")} />
|
||||
|
||||
<SettingsTitle title={t("API management")} />
|
||||
|
||||
|
||||
@@ -10,11 +10,9 @@ import {
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IconSettings } from "@tabler/icons-react";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import Paginate from "@/components/common/paginate";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import {
|
||||
@@ -26,8 +24,25 @@ import { IAuditLogParams } from "@/ee/audit/types/audit.types";
|
||||
import { eventFilterOptions } from "@/ee/audit/lib/audit-event-labels";
|
||||
import AuditLogsTable from "@/ee/audit/components/audit-logs-table";
|
||||
import useUserRole from "@/hooks/use-user-role";
|
||||
import { daysToRetention, retentionToDays, RetentionUnit } from "@/ee/utils";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
type RetentionUnit = "days" | "months" | "years";
|
||||
|
||||
function daysToRetention(days: number): { amount: number; unit: RetentionUnit } {
|
||||
if (days >= 365 && days % 365 === 0) {
|
||||
return { amount: days / 365, unit: "years" };
|
||||
}
|
||||
if (days >= 30 && days % 30 === 0) {
|
||||
return { amount: days / 30, unit: "months" };
|
||||
}
|
||||
return { amount: days, unit: "days" };
|
||||
}
|
||||
|
||||
function retentionToDays(amount: number, unit: RetentionUnit): number {
|
||||
if (unit === "years") return amount * 365;
|
||||
if (unit === "months") return amount * 30;
|
||||
return amount;
|
||||
}
|
||||
|
||||
export default function AuditLogs() {
|
||||
const { t } = useTranslation();
|
||||
@@ -81,11 +96,7 @@ export default function AuditLogs() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Audit log")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Audit log")} />
|
||||
|
||||
<SettingsTitle title={t("Audit log")} />
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import BillingPlans from "@/ee/billing/components/billing-plans.tsx";
|
||||
import BillingTrial from "@/ee/billing/components/billing-trial.tsx";
|
||||
@@ -9,6 +7,7 @@ import React from "react";
|
||||
import BillingDetails from "@/ee/billing/components/billing-details.tsx";
|
||||
import { useBillingQuery } from "@/ee/billing/queries/billing-query.ts";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Billing() {
|
||||
const { data: billing, isError: isBillingError } = useBillingQuery();
|
||||
@@ -20,9 +19,7 @@ export default function Billing() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Billing - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="Billing" />
|
||||
<SettingsTitle title="Billing" />
|
||||
|
||||
<BillingTrial />
|
||||
|
||||
@@ -15,7 +15,6 @@ export const Feature = {
|
||||
SCIM: 'scim',
|
||||
PAGE_VERIFICATION: 'page:verification',
|
||||
AUDIT_LOGS: 'audit:logs',
|
||||
PAGE_ANALYTICS: 'analytics:page-analytics',
|
||||
RETENTION: 'retention',
|
||||
SHARING_CONTROLS: 'sharing:controls',
|
||||
TEMPLATES: 'templates',
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import React from "react";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
@@ -9,6 +7,7 @@ import InstallationDetails from "@/ee/licence/components/installation-details.ts
|
||||
import OssDetails from "@/ee/licence/components/oss-details.tsx";
|
||||
import { useAtom } from "jotai/index";
|
||||
import { entitlementAtom } from "@/ee/entitlement/entitlement-atom";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function License() {
|
||||
const [entitlements] = useAtom(entitlementAtom);
|
||||
@@ -21,9 +20,7 @@ export default function License() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>License - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="License" />
|
||||
<SettingsTitle title="License" />
|
||||
|
||||
<ActivateLicenseForm />
|
||||
|
||||
@@ -1,421 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
NumberInput,
|
||||
Popover,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import Paginate from "@/components/common/paginate";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import {
|
||||
usePageAnalyticsRetentionQuery,
|
||||
useUpdatePageAnalyticsRetentionMutation,
|
||||
useWorkspacePageAnalyticsDailyStatsQuery,
|
||||
useWorkspacePageAnalyticsTopPagesQuery,
|
||||
useWorkspacePageAnalyticsTotalsQuery,
|
||||
} from "@/ee/page-analytics/queries/page-analytics-query";
|
||||
import { Link } from "react-router-dom";
|
||||
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale";
|
||||
import { IconSettings } from "@tabler/icons-react";
|
||||
import {
|
||||
daysToRetention,
|
||||
formatNumber,
|
||||
retentionToDays,
|
||||
RetentionUnit,
|
||||
toISODate,
|
||||
} from "@/ee/utils";
|
||||
|
||||
type RangePreset = "7" | "30" | "90";
|
||||
|
||||
const DAILY_PAGE_SIZE = 10;
|
||||
|
||||
export default function PageAnalytics() {
|
||||
const { t } = useTranslation();
|
||||
const locale = useDateFnsLocale();
|
||||
const [rangePreset, setRangePreset] = useState<RangePreset>("30");
|
||||
const [topPagesLimit, setTopPagesLimit] = useState("10");
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const { data: retentionData } = usePageAnalyticsRetentionQuery();
|
||||
const updateRetention = useUpdatePageAnalyticsRetentionMutation();
|
||||
|
||||
const parsed = useMemo(
|
||||
() => daysToRetention(retentionData?.retentionDays ?? 365),
|
||||
[retentionData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (settingsOpen) return;
|
||||
|
||||
setRetentionAmount(parsed.amount);
|
||||
setRetentionUnit(parsed.unit);
|
||||
}, [parsed]);
|
||||
|
||||
const [retentionAmount, setRetentionAmount] = useState<number | string>(
|
||||
parsed.amount
|
||||
);
|
||||
const [retentionUnit, setRetentionUnit] = useState<RetentionUnit>(parsed.unit);
|
||||
|
||||
const resetRetentionForm = useCallback(() => {
|
||||
const { amount, unit } = daysToRetention(retentionData?.retentionDays ?? 365);
|
||||
setRetentionAmount(amount);
|
||||
setRetentionUnit(unit);
|
||||
}, [setRetentionAmount, setRetentionUnit, retentionData]);
|
||||
|
||||
const {
|
||||
cursor: topPagesCursor,
|
||||
goNext: goNextTopPages,
|
||||
goPrev: goPrevTopPages,
|
||||
resetCursor: resetTopPagesCursor,
|
||||
} = useCursorPaginate();
|
||||
|
||||
const {
|
||||
cursor: dailyCursor,
|
||||
goNext: goNextDaily,
|
||||
goPrev: goPrevDaily,
|
||||
resetCursor: resetDailyCursor,
|
||||
} = useCursorPaginate();
|
||||
|
||||
const dateRange = useMemo(
|
||||
() => ({
|
||||
startDate: toISODate(rangePreset),
|
||||
endDate: new Date().toISOString().slice(0, 10),
|
||||
}),
|
||||
[rangePreset]
|
||||
);
|
||||
|
||||
const topPagesParams = useMemo(
|
||||
() => ({
|
||||
...dateRange,
|
||||
cursor: topPagesCursor,
|
||||
limit: Number(topPagesLimit),
|
||||
}),
|
||||
[dateRange, topPagesCursor, topPagesLimit]
|
||||
);
|
||||
|
||||
const formatDate = useCallback(
|
||||
(value?: Date | string | null) => {
|
||||
if (!value) return "-";
|
||||
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "-";
|
||||
|
||||
return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
|
||||
},
|
||||
[locale]
|
||||
);
|
||||
|
||||
const dailyParams = useMemo(
|
||||
() => ({
|
||||
...dateRange,
|
||||
cursor: dailyCursor,
|
||||
limit: DAILY_PAGE_SIZE,
|
||||
}),
|
||||
[dateRange, dailyCursor]
|
||||
);
|
||||
|
||||
const { data: totalsData } = useWorkspacePageAnalyticsTotalsQuery(dateRange);
|
||||
const { data: topPagesData, isLoading: isTopPagesLoading } =
|
||||
useWorkspacePageAnalyticsTopPagesQuery(topPagesParams);
|
||||
const { data: dailyData, isLoading: isDailyLoading } =
|
||||
useWorkspacePageAnalyticsDailyStatsQuery(dailyParams);
|
||||
|
||||
const handleRangeChange = (value: RangePreset) => {
|
||||
if (value) {
|
||||
setRangePreset(value);
|
||||
resetTopPagesCursor();
|
||||
resetDailyCursor();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTopPagesLimitChange = (value: string | null) => {
|
||||
if (value) {
|
||||
setTopPagesLimit(value);
|
||||
resetTopPagesCursor();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Page analytics")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Page analytics")} />
|
||||
|
||||
<Group justify="space-between" mb="md">
|
||||
<Select
|
||||
value={rangePreset}
|
||||
onChange={handleRangeChange}
|
||||
data={[
|
||||
{ value: "7", label: t("Last 7 days") },
|
||||
{ value: "30", label: t("Last 30 days") },
|
||||
{ value: "90", label: t("Last 90 days") },
|
||||
]}
|
||||
w={160}
|
||||
size="sm"
|
||||
allowDeselect={false}
|
||||
/>
|
||||
<Popover
|
||||
position="bottom-end"
|
||||
shadow="md"
|
||||
width={260}
|
||||
withArrow
|
||||
opened={settingsOpen}
|
||||
onChange={(opened) => {
|
||||
if (!opened) resetRetentionForm();
|
||||
setSettingsOpen(opened);
|
||||
}}
|
||||
>
|
||||
<Popover.Target>
|
||||
<Tooltip label={t("Audit settings")}>
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
size="input-sm"
|
||||
ml="auto"
|
||||
onClick={() => setSettingsOpen((o) => !o)}
|
||||
>
|
||||
<IconSettings size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Text fz="sm" fw={500} mb={4}>
|
||||
{t("Retention")}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed" mb="sm">
|
||||
{t("Logs older than this period are automatically deleted.")}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap" mb="sm">
|
||||
<NumberInput
|
||||
value={retentionAmount}
|
||||
onChange={(val) => setRetentionAmount(val)}
|
||||
min={1}
|
||||
hideControls
|
||||
size="sm"
|
||||
w={60}
|
||||
/>
|
||||
<Select
|
||||
data={[
|
||||
{ value: "days", label: t("days") },
|
||||
{ value: "months", label: t("months") },
|
||||
{ value: "years", label: t("years") },
|
||||
]}
|
||||
value={retentionUnit}
|
||||
onChange={(value) => {
|
||||
if (value === "days" || value === "months" || value === "years") {
|
||||
setRetentionUnit(value);
|
||||
}
|
||||
}}
|
||||
size="sm"
|
||||
style={{ flex: 1 }}
|
||||
comboboxProps={{ withinPortal: false }}
|
||||
/>
|
||||
</Group>
|
||||
<Group gap="xs" grow>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
resetRetentionForm();
|
||||
setSettingsOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
const num =
|
||||
typeof retentionAmount === "number" ? retentionAmount : 1;
|
||||
const clamped = Math.max(1, num);
|
||||
setRetentionAmount(clamped);
|
||||
const days = retentionToDays(clamped, retentionUnit);
|
||||
|
||||
if (days !== (retentionData?.retentionDays ?? 365)) {
|
||||
updateRetention.mutate({
|
||||
pageAnalyticsRetentionDays: Number(days),
|
||||
});
|
||||
}
|
||||
setSettingsOpen(false);
|
||||
}}
|
||||
loading={updateRetention.isPending}
|
||||
>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} mb="md">
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Total views")}
|
||||
</Text>
|
||||
<Text fw={700} fz="xl">
|
||||
{formatNumber(totalsData?.totals.totalViews)}
|
||||
</Text>
|
||||
</Card>
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Unique visitors")}
|
||||
</Text>
|
||||
<Text fw={700} fz="xl">
|
||||
{formatNumber(totalsData?.totals.uniqueVisitors)}
|
||||
</Text>
|
||||
</Card>
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Authenticated visitors")}
|
||||
</Text>
|
||||
<Text fw={700} fz="xl">
|
||||
{formatNumber(totalsData?.totals.authenticatedVisitors)}
|
||||
</Text>
|
||||
</Card>
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Shared-link views")}
|
||||
</Text>
|
||||
<Text fw={700} fz="xl">
|
||||
{formatNumber(totalsData?.totals.sharedViews)}
|
||||
</Text>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Text fw={600}>{t("Top pages")}</Text>
|
||||
<Group gap="xs">
|
||||
{isTopPagesLoading && <Badge variant="light">{t("Loading")}</Badge>}
|
||||
<Select
|
||||
aria-label={t("Number of top pages")}
|
||||
data={[
|
||||
{ value: "10", label: t("Top 10") },
|
||||
{ value: "20", label: t("Top 20") },
|
||||
{ value: "50", label: t("Top 50") },
|
||||
{ value: "100", label: t("Top 100") },
|
||||
]}
|
||||
value={topPagesLimit}
|
||||
onChange={handleTopPagesLimitChange}
|
||||
w={100}
|
||||
size="xs"
|
||||
allowDeselect={false}
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Page")}</Table.Th>
|
||||
<Table.Th>{t("Views")}</Table.Th>
|
||||
<Table.Th>{t("Visitors")}</Table.Th>
|
||||
<Table.Th>{t("Last viewed")}</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{(topPagesData?.items ?? []).map((item) => (
|
||||
<Table.Tr key={item.pageId}>
|
||||
<Table.Td>
|
||||
{item.pageSlugId ? (
|
||||
<Link to={`/p/${item.pageSlugId}`}>
|
||||
{item.pageTitle || t("Untitled")}
|
||||
</Link>
|
||||
) : (
|
||||
item.pageTitle || t("Untitled")
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td>{formatNumber(item.totalViews)}</Table.Td>
|
||||
<Table.Td>{formatNumber(item.uniqueVisitors)}</Table.Td>
|
||||
<Table.Td>{formatDate(item.lastViewedAt)}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{!isTopPagesLoading && (topPagesData?.items.length ?? 0) === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={4}>
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No analytics data for this range.")}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
{topPagesData?.items &&
|
||||
topPagesData.items.length > 0 &&
|
||||
(topPagesData.meta.hasPrevPage || topPagesData.meta.hasNextPage) && (
|
||||
<Paginate
|
||||
hasPrevPage={topPagesData.meta.hasPrevPage}
|
||||
hasNextPage={topPagesData.meta.hasNextPage}
|
||||
onPrev={goPrevTopPages}
|
||||
onNext={() => goNextTopPages(topPagesData.meta.nextCursor)}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card withBorder radius="md" p="md">
|
||||
<Group justify="space-between" mb="sm">
|
||||
<Text fw={600}>{t("Daily breakdown")}</Text>
|
||||
{isDailyLoading && <Badge variant="light">{t("Loading")}</Badge>}
|
||||
</Group>
|
||||
<Stack gap="xs">
|
||||
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Date")}</Table.Th>
|
||||
<Table.Th>{t("Views")}</Table.Th>
|
||||
<Table.Th>{t("Visitors")}</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{(dailyData?.items ?? []).map((item) => (
|
||||
<Table.Tr key={item.viewDate}>
|
||||
<Table.Td>{item.viewDate}</Table.Td>
|
||||
<Table.Td>{formatNumber(item.totalViews)}</Table.Td>
|
||||
<Table.Td>{formatNumber(item.uniqueVisitors)}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
{!isDailyLoading && (dailyData?.items.length ?? 0) === 0 && (
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={3}>
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No analytics data for this range.")}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
|
||||
{dailyData?.items &&
|
||||
dailyData.items.length > 0 &&
|
||||
(dailyData.meta.hasPrevPage || dailyData.meta.hasNextPage) && (
|
||||
<Paginate
|
||||
hasPrevPage={dailyData.meta.hasPrevPage}
|
||||
hasNextPage={dailyData.meta.hasNextPage}
|
||||
onPrev={goPrevDaily}
|
||||
onNext={() => goNextDaily(dailyData.meta.nextCursor)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
getPageAnalyticsRetention,
|
||||
getWorkspacePageAnalyticsDailyStats,
|
||||
getWorkspacePageAnalyticsTopPages,
|
||||
getWorkspacePageAnalyticsTotals,
|
||||
updatePageAnalyticsRetention,
|
||||
} from "@/ee/page-analytics/services/page-analytics-service";
|
||||
import type { IPagination } from "@/lib/types";
|
||||
import type {
|
||||
WorkspaceAnalyticsDailyStat,
|
||||
WorkspaceAnalyticsListParams,
|
||||
WorkspaceAnalyticsParams,
|
||||
WorkspaceAnalyticsTopPage,
|
||||
WorkspaceAnalyticsTotals,
|
||||
} from "@/ee/page-analytics/types/page-analytics.types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
export function useWorkspacePageAnalyticsTotalsQuery(
|
||||
params?: WorkspaceAnalyticsParams,
|
||||
) {
|
||||
return useQuery<WorkspaceAnalyticsTotals, Error>({
|
||||
queryKey: ["workspace-page-analytics-totals", params],
|
||||
queryFn: () => getWorkspacePageAnalyticsTotals(params),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkspacePageAnalyticsDailyStatsQuery(
|
||||
params?: WorkspaceAnalyticsListParams,
|
||||
) {
|
||||
return useQuery<IPagination<WorkspaceAnalyticsDailyStat>, Error>({
|
||||
queryKey: ["workspace-page-analytics-daily-stats", params],
|
||||
queryFn: () => getWorkspacePageAnalyticsDailyStats(params),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkspacePageAnalyticsTopPagesQuery(
|
||||
params?: WorkspaceAnalyticsListParams,
|
||||
) {
|
||||
return useQuery<IPagination<WorkspaceAnalyticsTopPage>, Error>({
|
||||
queryKey: ["workspace-page-analytics-top-pages", params],
|
||||
queryFn: () => getWorkspacePageAnalyticsTopPages(params),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
export function usePageAnalyticsRetentionQuery() {
|
||||
return useQuery({
|
||||
queryKey: ["page-analytics-retention"],
|
||||
queryFn: () => getPageAnalyticsRetention(),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdatePageAnalyticsRetentionMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (data: { pageAnalyticsRetentionDays: number }) =>
|
||||
updatePageAnalyticsRetention(data),
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Page analytics retention updated") });
|
||||
queryClient.invalidateQueries({ queryKey: ["page-analytics-retention"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import api from "@/lib/api-client";
|
||||
import type { IPagination } from "@/lib/types";
|
||||
import type {
|
||||
WorkspaceAnalyticsDailyStat,
|
||||
WorkspaceAnalyticsListParams,
|
||||
WorkspaceAnalyticsParams,
|
||||
WorkspaceAnalyticsTopPage,
|
||||
WorkspaceAnalyticsTotals,
|
||||
} from "@/ee/page-analytics/types/page-analytics.types";
|
||||
|
||||
export async function getWorkspacePageAnalyticsTotals(
|
||||
params?: WorkspaceAnalyticsParams,
|
||||
): Promise<WorkspaceAnalyticsTotals> {
|
||||
const req = await api.post("/page-analytics/workspace-stats", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getWorkspacePageAnalyticsDailyStats(
|
||||
params?: WorkspaceAnalyticsListParams,
|
||||
): Promise<IPagination<WorkspaceAnalyticsDailyStat>> {
|
||||
const req = await api.post("/page-analytics/workspace-daily-stats", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getWorkspacePageAnalyticsTopPages(
|
||||
params?: WorkspaceAnalyticsListParams,
|
||||
): Promise<IPagination<WorkspaceAnalyticsTopPage>> {
|
||||
const req = await api.post("/page-analytics/workspace-top-pages", params);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getPageAnalyticsRetention(): Promise<{ retentionDays: number }> {
|
||||
const req = await api.post("/page-analytics/retention");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function updatePageAnalyticsRetention(data: {
|
||||
pageAnalyticsRetentionDays: number;
|
||||
}): Promise<{ retentionDays: number }> {
|
||||
|
||||
const req = await api.post("/page-analytics/retention/update", data);
|
||||
return req.data;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { QueryParams } from "@/lib/types";
|
||||
|
||||
export type WorkspaceAnalyticsParams = {
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
};
|
||||
|
||||
export type WorkspaceAnalyticsListParams = WorkspaceAnalyticsParams &
|
||||
QueryParams;
|
||||
|
||||
export type BasicStats = {
|
||||
totalViews: number;
|
||||
uniqueVisitors: number;
|
||||
authenticatedVisitors: number;
|
||||
sharedViews: number;
|
||||
};
|
||||
|
||||
export type WorkspaceAnalyticsDailyStat = BasicStats & {
|
||||
viewDate: string;
|
||||
};
|
||||
|
||||
export type WorkspaceAnalyticsTopPage = BasicStats & {
|
||||
pageId: string;
|
||||
pageTitle: string | null;
|
||||
pageSlugId: string | null;
|
||||
lastViewedAt: string | null;
|
||||
};
|
||||
|
||||
export type WorkspaceAnalyticsTotals = {
|
||||
range: { startDate: string; endDate: string };
|
||||
totals: BasicStats;
|
||||
};
|
||||
@@ -1,17 +1,16 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { Group, MultiSelect, Select, Space, TextInput } from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import Paginate from "@/components/common/paginate";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import { useVerificationListQuery } from "@/ee/page-verification/queries/page-verification-query";
|
||||
import { IVerificationListParams } from "@/ee/page-verification/types/page-verification.types";
|
||||
import VerificationListTable from "@/ee/page-verification/components/verification-list-table";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function VerifiedPages() {
|
||||
const { t } = useTranslation();
|
||||
@@ -68,11 +67,7 @@ export default function VerifiedPages() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Verified pages")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Verified pages")} />
|
||||
|
||||
<SettingsTitle title={t("Verified pages")} />
|
||||
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { CloudLoginForm } from "@/ee/components/cloud-login-form.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function CloudLogin() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Login")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Login")} />
|
||||
|
||||
<CloudLoginForm />
|
||||
</>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import { SetupWorkspaceForm } from "@/features/auth/components/setup-workspace-form.tsx";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import React from "react";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function CreateWorkspace() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Create Workspace - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="Create Workspace" />
|
||||
<SetupWorkspaceForm />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName, isCloud } from "@/lib/config.ts";
|
||||
import { isCloud } from "@/lib/config.ts";
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import {
|
||||
Alert,
|
||||
@@ -37,6 +36,7 @@ import EnableScim from "@/ee/scim/components/enable-scim";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import Paginate from "@/components/common/paginate";
|
||||
import { IScimToken } from "@/ee/scim/types/scim-token.types";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
const SCIM_TOKEN_LIMIT = 5;
|
||||
|
||||
@@ -64,9 +64,7 @@ export default function Security() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Security - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="Security" />
|
||||
<SettingsTitle title={t("Security")} />
|
||||
|
||||
<EnforceMfa />
|
||||
|
||||
@@ -41,6 +41,7 @@ export default function ReadonlyTemplateEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={template.content}
|
||||
/>
|
||||
|
||||
@@ -22,8 +22,6 @@ import { useTranslation } from "react-i18next";
|
||||
import { useDisclosure, useWindowEvent } from "@mantine/hooks";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import { useEditor, EditorContent } from "@tiptap/react";
|
||||
import { templateExtensions } from "@/features/editor/extensions/extensions";
|
||||
import {
|
||||
@@ -44,6 +42,7 @@ import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
|
||||
import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
|
||||
|
||||
import classes from "./template-editor.module.css";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function TemplateEditor() {
|
||||
const { t } = useTranslation();
|
||||
@@ -88,6 +87,7 @@ export default function TemplateEditor() {
|
||||
const editor = useEditor({
|
||||
extensions: templateExtensions,
|
||||
content: "",
|
||||
textDirection: "auto",
|
||||
editorProps: {
|
||||
scrollThreshold: 80,
|
||||
scrollMargin: 80,
|
||||
@@ -247,11 +247,7 @@ export default function TemplateEditor() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Edit template")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Edit template")} />
|
||||
|
||||
{editorToolbarEnabled && editor && (
|
||||
<FixedToolbar editor={editor} templateMode />
|
||||
|
||||
@@ -13,11 +13,9 @@ import {
|
||||
} from "@mantine/core";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import {
|
||||
useGetTemplatesQuery,
|
||||
useDeleteTemplateMutation,
|
||||
@@ -31,6 +29,7 @@ import useUserRole from "@/hooks/use-user-role";
|
||||
import CreateTemplateModal from "@/ee/template/components/create-template-modal";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function TemplateList() {
|
||||
const { t } = useTranslation();
|
||||
@@ -102,11 +101,7 @@ export default function TemplateList() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Templates")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Templates")} />
|
||||
|
||||
<Container size="900" pt="xl">
|
||||
<Group justify="space-between" mb="xl">
|
||||
|
||||
@@ -14,33 +14,3 @@ export function exchangeTokenRedirectUrl(
|
||||
) {
|
||||
return getHostnameUrl(hostname) + "/api/auth/exchange?token=" + exchangeToken;
|
||||
}
|
||||
|
||||
export type RetentionUnit = "days" | "months" | "years";
|
||||
|
||||
export function daysToRetention(days: number): { amount: number; unit: RetentionUnit } {
|
||||
if (days >= 365 && days % 365 === 0) {
|
||||
return { amount: days / 365, unit: "years" };
|
||||
}
|
||||
if (days >= 30 && days % 30 === 0) {
|
||||
return { amount: days / 30, unit: "months" };
|
||||
}
|
||||
return { amount: days, unit: "days" };
|
||||
}
|
||||
|
||||
export function retentionToDays(amount: number, unit: RetentionUnit): number {
|
||||
if (unit === "years") return amount * 365;
|
||||
if (unit === "months") return amount * 30;
|
||||
return amount;
|
||||
}
|
||||
|
||||
export function toISODate(daysAgo: number | string): string {
|
||||
const daysNum = Number(daysAgo);
|
||||
|
||||
return new Date(Date.now() - daysNum * 24 * 60 * 60 * 1000)
|
||||
.toISOString()
|
||||
.slice(0, 10);
|
||||
}
|
||||
|
||||
export function formatNumber(value: number | null | undefined): string {
|
||||
return Number(value ?? 0).toLocaleString();
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { ThemeIcon } from "@mantine/core";
|
||||
import {
|
||||
IconFile,
|
||||
IconFileTypeCsv,
|
||||
IconFileTypeDocx,
|
||||
IconFileTypePdf,
|
||||
IconFileTypePpt,
|
||||
IconFileTypeXls,
|
||||
IconFileZip,
|
||||
IconMovie,
|
||||
IconMusic,
|
||||
IconPhoto,
|
||||
type Icon,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
const EXT_ICONS: Record<string, { icon: Icon; color: string }> = {
|
||||
".pdf": { icon: IconFileTypePdf, color: "red" },
|
||||
".doc": { icon: IconFileTypeDocx, color: "blue" },
|
||||
".docx": { icon: IconFileTypeDocx, color: "blue" },
|
||||
".xls": { icon: IconFileTypeXls, color: "teal" },
|
||||
".xlsx": { icon: IconFileTypeXls, color: "teal" },
|
||||
".csv": { icon: IconFileTypeCsv, color: "teal" },
|
||||
".ppt": { icon: IconFileTypePpt, color: "orange" },
|
||||
".pptx": { icon: IconFileTypePpt, color: "orange" },
|
||||
".zip": { icon: IconFileZip, color: "gray" },
|
||||
".rar": { icon: IconFileZip, color: "gray" },
|
||||
".7z": { icon: IconFileZip, color: "gray" },
|
||||
".tar": { icon: IconFileZip, color: "gray" },
|
||||
".gz": { icon: IconFileZip, color: "gray" },
|
||||
};
|
||||
|
||||
const MIME_ICONS: Array<{ prefix: string; icon: Icon; color: string }> = [
|
||||
{ prefix: "image/", icon: IconPhoto, color: "grape" },
|
||||
{ prefix: "video/", icon: IconMovie, color: "violet" },
|
||||
{ prefix: "audio/", icon: IconMusic, color: "pink" },
|
||||
];
|
||||
|
||||
interface AttachmentFileIconProps {
|
||||
fileExt?: string;
|
||||
mimeType?: string;
|
||||
}
|
||||
|
||||
export function AttachmentFileIcon({
|
||||
fileExt,
|
||||
mimeType,
|
||||
}: AttachmentFileIconProps) {
|
||||
const byExt = fileExt ? EXT_ICONS[fileExt.toLowerCase()] : undefined;
|
||||
const byMime = mimeType
|
||||
? MIME_ICONS.find((entry) => mimeType.startsWith(entry.prefix))
|
||||
: undefined;
|
||||
const { icon: FileIcon, color } = byExt ??
|
||||
byMime ?? { icon: IconFile, color: "gray" };
|
||||
|
||||
return (
|
||||
<ThemeIcon variant="light" color={color} size={40} radius="md">
|
||||
<FileIcon size={22} stroke={1.5} />
|
||||
</ThemeIcon>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
Center,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { IconDownload } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { SearchInput } from "@/components/common/search-input.tsx";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import { usePageAttachmentsQuery } from "@/features/attachments/queries/attachment-query.ts";
|
||||
import { IPageAttachment } from "@/features/attachments/types/attachment.types.ts";
|
||||
import { AttachmentFileIcon } from "@/features/attachments/components/attachment-file-icon.tsx";
|
||||
import { formatBytes } from "@/lib";
|
||||
import { getFileUrl } from "@/lib/config.ts";
|
||||
import { formattedDate } from "@/lib/time.ts";
|
||||
|
||||
interface PageAttachmentsModalProps {
|
||||
pageId: string;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function PageAttachmentsModal({
|
||||
pageId,
|
||||
open,
|
||||
onClose,
|
||||
}: PageAttachmentsModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={onClose}
|
||||
title={t("Attachments")}
|
||||
size={800}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<PageAttachmentsList pageId={pageId} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function PageAttachmentsList({ pageId }: { pageId: string }) {
|
||||
const { t } = useTranslation();
|
||||
const [search, setSearch] = useState("");
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
isError,
|
||||
isFetching,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = usePageAttachmentsQuery(pageId, search);
|
||||
|
||||
const attachments = useMemo(
|
||||
() => data?.pages.flatMap((page) => page.items) ?? [],
|
||||
[data],
|
||||
);
|
||||
|
||||
const loadMoreRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const sentinel = loadMoreRef.current;
|
||||
if (!sentinel || !hasNextPage) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && !isFetching) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
);
|
||||
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [fetchNextPage, hasNextPage, isFetching]);
|
||||
|
||||
const handleSearch = useCallback((value: string) => setSearch(value), []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
onSearch={handleSearch}
|
||||
placeholder={t("Search attachments...")}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<Center py="xl">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
) : isError ? (
|
||||
<Center py="xl">
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("Error loading attachments.")}
|
||||
</Text>
|
||||
</Center>
|
||||
) : attachments.length === 0 ? (
|
||||
<Center py="xl">
|
||||
<Text size="sm" c="dimmed">
|
||||
{search
|
||||
? t("No results found")
|
||||
: t("No attachments on this page yet.")}
|
||||
</Text>
|
||||
</Center>
|
||||
) : (
|
||||
<ScrollArea.Autosize mah={480} type="scroll" scrollbarSize={5}>
|
||||
{attachments.map((attachment) => (
|
||||
<AttachmentRow key={attachment.id} attachment={attachment} />
|
||||
))}
|
||||
{hasNextPage && <div ref={loadMoreRef} style={{ height: 1 }} />}
|
||||
{isFetchingNextPage && (
|
||||
<Center py="sm">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
)}
|
||||
</ScrollArea.Autosize>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AttachmentRow({ attachment }: { attachment: IPageAttachment }) {
|
||||
const { t } = useTranslation();
|
||||
const fileUrl = getFileUrl(attachment.url);
|
||||
|
||||
return (
|
||||
<Group wrap="nowrap" gap="md" py="sm" pr="xs">
|
||||
<AttachmentFileIcon
|
||||
fileExt={attachment.fileExt}
|
||||
mimeType={attachment.mimeType}
|
||||
/>
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<Anchor
|
||||
href={fileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
size="sm"
|
||||
fw={500}
|
||||
c="inherit"
|
||||
truncate="end"
|
||||
style={{ display: "block" }}
|
||||
>
|
||||
{attachment.fileName}
|
||||
</Anchor>
|
||||
<Text size="xs" c="dimmed" mt={2} truncate="end">
|
||||
{formatBytes(Number(attachment.fileSize))}
|
||||
{" · "}
|
||||
{formattedDate(new Date(attachment.createdAt))}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{attachment.creator && (
|
||||
<Tooltip
|
||||
label={t("Uploaded by {{name}}", { name: attachment.creator.name })}
|
||||
withArrow
|
||||
>
|
||||
<CustomAvatar
|
||||
avatarUrl={attachment.creator.avatarUrl}
|
||||
name={attachment.creator.name}
|
||||
size="sm"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<Tooltip label={t("Download attachment")} withArrow>
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href={fileUrl}
|
||||
download={attachment.fileName}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Download {{name}}", { name: attachment.fileName })}
|
||||
>
|
||||
<IconDownload size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import {
|
||||
InfiniteData,
|
||||
keepPreviousData,
|
||||
useInfiniteQuery,
|
||||
UseInfiniteQueryResult,
|
||||
} from "@tanstack/react-query";
|
||||
import { getPageAttachments } from "@/features/attachments/services/attachment-service.ts";
|
||||
import { IPageAttachment } from "@/features/attachments/types/attachment.types.ts";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
|
||||
export function usePageAttachmentsQuery(
|
||||
pageId: string,
|
||||
search?: string,
|
||||
): UseInfiniteQueryResult<InfiniteData<IPagination<IPageAttachment>, unknown>> {
|
||||
return useInfiniteQuery({
|
||||
queryKey: ["page-attachments", pageId, search],
|
||||
queryFn: ({ pageParam }) =>
|
||||
getPageAttachments(pageId, { cursor: pageParam, query: search }),
|
||||
enabled: !!pageId,
|
||||
gcTime: 0,
|
||||
placeholderData: keepPreviousData,
|
||||
initialPageParam: undefined,
|
||||
getNextPageParam: (lastPage) => lastPage.meta?.nextCursor ?? undefined,
|
||||
});
|
||||
}
|
||||
@@ -3,7 +3,17 @@ import loadImage from "blueimp-load-image";
|
||||
import {
|
||||
AvatarIconType,
|
||||
IAttachment,
|
||||
IPageAttachment,
|
||||
} from "@/features/attachments/types/attachment.types.ts";
|
||||
import { IPagination, QueryParams } from "@/lib/types.ts";
|
||||
|
||||
export async function getPageAttachments(
|
||||
pageId: string,
|
||||
params?: QueryParams,
|
||||
): Promise<IPagination<IPageAttachment>> {
|
||||
const req = await api.post("/pages/attachments", { pageId, ...params });
|
||||
return req.data;
|
||||
}
|
||||
|
||||
async function compressAndResizeIcon(
|
||||
file: File,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export {
|
||||
getPageAttachments,
|
||||
uploadIcon,
|
||||
uploadUserAvatar,
|
||||
uploadSpaceIcon,
|
||||
|
||||
@@ -15,6 +15,15 @@ export interface IAttachment {
|
||||
deletedAt: string | null;
|
||||
}
|
||||
|
||||
export interface IPageAttachment extends IAttachment {
|
||||
url: string;
|
||||
creator: {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export enum AvatarIconType {
|
||||
AVATAR = "avatar",
|
||||
SPACE_ICON = "space-icon",
|
||||
|
||||
@@ -103,6 +103,7 @@ const CommentEditor = forwardRef(
|
||||
},
|
||||
content: defaultContent,
|
||||
editable,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
autofocus: (autofocus && "end") || false,
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
IconMathFunction,
|
||||
IconRotate2,
|
||||
IconSitemap,
|
||||
IconSuperscript,
|
||||
IconTable,
|
||||
IconTag,
|
||||
} from "@tabler/icons-react";
|
||||
@@ -270,6 +271,12 @@ export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
|
||||
>
|
||||
{t("Math block")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSuperscript size={16} />}
|
||||
onClick={() => editor.chain().focus().addFootnote().run()}
|
||||
>
|
||||
{t("Footnote")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@@ -30,6 +30,7 @@ import {
|
||||
IconTag,
|
||||
IconMoodSmile,
|
||||
IconRotate2,
|
||||
IconSuperscript,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
CommandProps,
|
||||
@@ -177,6 +178,16 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
||||
command: ({ editor, range }: CommandProps) =>
|
||||
editor.chain().focus().deleteRange(range).setPageBreak().run(),
|
||||
},
|
||||
{
|
||||
title: "Footnote",
|
||||
description: "Insert a footnote reference.",
|
||||
searchTerms: ["footnote", "reference", "citation", "note"],
|
||||
icon: IconSuperscript,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).run();
|
||||
editor.commands.addFootnote();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Image",
|
||||
description: "Upload any image from your device.",
|
||||
|
||||
@@ -40,6 +40,7 @@ export default function TransclusionContent({ content }: Props) {
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={content as any}
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { markInputRule } from "@tiptap/core";
|
||||
import { StarterKit } from "@tiptap/starter-kit";
|
||||
import { Document } from "@tiptap/extension-document";
|
||||
import { Code } from "@tiptap/extension-code";
|
||||
import { TextAlign } from "@tiptap/extension-text-align";
|
||||
import { TaskList, TaskItem } from "@tiptap/extension-list";
|
||||
@@ -63,6 +64,9 @@ import {
|
||||
TransclusionReference,
|
||||
TableView,
|
||||
BaseEmbed as BaseEmbedNode,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
randomElement,
|
||||
@@ -132,6 +136,7 @@ lowlight.register("scala", scala);
|
||||
// @ts-ignore
|
||||
export const mainExtensions = [
|
||||
StarterKit.configure({
|
||||
document: false,
|
||||
heading: false,
|
||||
undoRedo: false,
|
||||
link: false,
|
||||
@@ -143,6 +148,9 @@ export const mainExtensions = [
|
||||
codeBlock: false,
|
||||
code: false,
|
||||
}),
|
||||
Document.extend({
|
||||
content: "block+ footnotes?",
|
||||
}),
|
||||
// Override TipTap's Code extension to fix the inline code input rule.
|
||||
// The upstream regex /(^|[^`])`([^`]+)`(?!`)$/ captures the character
|
||||
// before the opening backtick as part of the match, causing markInputRule
|
||||
@@ -203,7 +211,8 @@ export const mainExtensions = [
|
||||
parentName === "tableCell" ||
|
||||
parentName === "tableHeader" ||
|
||||
parentName === "callout" ||
|
||||
parentName === "blockquote"
|
||||
parentName === "blockquote" ||
|
||||
parentName === "footnote"
|
||||
) {
|
||||
return i18n.t("Write...");
|
||||
}
|
||||
@@ -417,6 +426,9 @@ export const mainExtensions = [
|
||||
}).configure(),
|
||||
Columns,
|
||||
Column,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
AutoJoiner.configure({
|
||||
elementsToJoin: [],
|
||||
}),
|
||||
|
||||
@@ -249,6 +249,7 @@ function CollabPageEditor({
|
||||
{
|
||||
extensions,
|
||||
editable,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
@@ -484,6 +485,7 @@ function StaticPageEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={mainExtensions}
|
||||
content={content}
|
||||
editorProps={{
|
||||
|
||||
@@ -85,6 +85,7 @@ export default function ReadonlyPageEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={titleExtensions}
|
||||
content={title}
|
||||
></EditorProvider>
|
||||
@@ -93,6 +94,7 @@ export default function ReadonlyPageEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={content}
|
||||
onCreate={({ editor }) => {
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
.ProseMirror sup a.footnote-ref {
|
||||
color: var(--mantine-primary-color-filled);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ProseMirror sup:has(a.footnote-ref) {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.ProseMirror ol.footnotes {
|
||||
margin-top: 2rem;
|
||||
padding-top: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--mantine-color-dimmed);
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.ProseMirror ol.footnotes:has(li) {
|
||||
border-top: 1px solid var(--mantine-color-default-border);
|
||||
}
|
||||
|
||||
.ProseMirror ol.footnotes li p {
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
@@ -18,3 +18,4 @@
|
||||
@import "./columns.css";
|
||||
@import "./status.css";
|
||||
@import "./base-embed.css";
|
||||
@import "./footnotes.css";
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
|
||||
@@ -86,6 +86,7 @@ export function TitleEditor({
|
||||
},
|
||||
editable: editable,
|
||||
content: title,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
|
||||
@@ -6,4 +6,13 @@ export const activeHistoryPrevIdAtom = atom<string>("");
|
||||
export const highlightChangesAtom = atom<boolean>(true);
|
||||
|
||||
export type DiffCounts = { added: number; deleted: number; total: number };
|
||||
export const diffCountsAtom = atom<DiffCounts | null>(null);
|
||||
export const diffCountsAtom = atom<DiffCounts | null>(
|
||||
null as DiffCounts | null,
|
||||
);
|
||||
|
||||
export type ComparePair = { newerId: string; olderId: string };
|
||||
export const compareModeAtom = atom<boolean>(false);
|
||||
export const compareSelectionAtom = atom<string[]>([]);
|
||||
export const comparePairAtom = atom<ComparePair | null>(
|
||||
null as ComparePair | null,
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.history {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--mantine-spacing-md);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
||||
|
||||
@mixin hover {
|
||||
@@ -12,6 +12,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.historyButton {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.compareCheckbox {
|
||||
padding-left: var(--mantine-spacing-xs);
|
||||
}
|
||||
|
||||
.itemMenu {
|
||||
opacity: 0;
|
||||
margin-right: var(--mantine-spacing-xs);
|
||||
}
|
||||
|
||||
.history:hover .itemMenu,
|
||||
.history:focus-within .itemMenu,
|
||||
.history.active .itemMenu,
|
||||
.itemMenu[aria-expanded="true"] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.historyEditor {
|
||||
:global(.ProseMirror) {
|
||||
padding: 0 !important;
|
||||
@@ -77,3 +99,8 @@
|
||||
flex: 1;
|
||||
padding: rem(16px) rem(40px);
|
||||
}
|
||||
|
||||
.compareBanner {
|
||||
border-bottom: rem(1px) solid
|
||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ export function HistoryEditor({
|
||||
const editor = useEditor({
|
||||
extensions: mainExtensions,
|
||||
editable: false,
|
||||
textDirection: "auto",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -170,7 +171,6 @@ export function HistoryEditor({
|
||||
}
|
||||
|
||||
const total = addedCount + deletedCount;
|
||||
// @ts-ignore
|
||||
setDiffCounts({ added: addedCount, deleted: deletedCount, total });
|
||||
|
||||
editor.setOptions({
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
import { Text, Group, UnstyledButton, Avatar, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
Text,
|
||||
Group,
|
||||
UnstyledButton,
|
||||
Avatar,
|
||||
Tooltip,
|
||||
ActionIcon,
|
||||
Checkbox,
|
||||
Menu,
|
||||
} from "@mantine/core";
|
||||
import { IconDots } from "@tabler/icons-react";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
import { formattedDate } from "@/lib/time";
|
||||
import classes from "./css/history.module.css";
|
||||
import clsx from "clsx";
|
||||
import { IPageHistory } from "@/features/page-history/types/page.types";
|
||||
import { memo, useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const MAX_VISIBLE_AVATARS = 5;
|
||||
|
||||
@@ -15,6 +26,13 @@ interface HistoryItemProps {
|
||||
onHover?: (id: string, index: number) => void;
|
||||
onHoverEnd?: () => void;
|
||||
isActive: boolean;
|
||||
compareMode: boolean;
|
||||
isChecked: boolean;
|
||||
isCheckboxDisabled: boolean;
|
||||
canCompare: boolean;
|
||||
onToggleCompare: (id: string) => void;
|
||||
onStartCompare: (id: string) => void;
|
||||
onRestore?: (id: string, index: number) => void;
|
||||
}
|
||||
|
||||
const HistoryItem = memo(function HistoryItem({
|
||||
@@ -24,10 +42,24 @@ const HistoryItem = memo(function HistoryItem({
|
||||
onHover,
|
||||
onHoverEnd,
|
||||
isActive,
|
||||
compareMode,
|
||||
isChecked,
|
||||
isCheckboxDisabled,
|
||||
canCompare,
|
||||
onToggleCompare,
|
||||
onStartCompare,
|
||||
onRestore,
|
||||
}: HistoryItemProps) {
|
||||
const { t } = useTranslation();
|
||||
const date = formattedDate(new Date(historyItem.createdAt));
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
onSelect(historyItem.id, index);
|
||||
}, [onSelect, historyItem.id, index]);
|
||||
if (compareMode) {
|
||||
onToggleCompare(historyItem.id);
|
||||
} else {
|
||||
onSelect(historyItem.id, index);
|
||||
}
|
||||
}, [compareMode, onToggleCompare, onSelect, historyItem.id, index]);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
onHover?.(historyItem.id, index);
|
||||
@@ -37,63 +69,115 @@ const HistoryItem = memo(function HistoryItem({
|
||||
const hasContributors = contributors && contributors.length > 0;
|
||||
|
||||
return (
|
||||
<UnstyledButton
|
||||
p="xs"
|
||||
onClick={handleClick}
|
||||
<div
|
||||
className={clsx(classes.history, { [classes.active]: isActive })}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={onHoverEnd}
|
||||
className={clsx(classes.history, { [classes.active]: isActive })}
|
||||
>
|
||||
<Text size="sm">{formattedDate(new Date(historyItem.createdAt))}</Text>
|
||||
{compareMode && (
|
||||
<Checkbox
|
||||
size="xs"
|
||||
className={classes.compareCheckbox}
|
||||
checked={isChecked}
|
||||
disabled={isCheckboxDisabled}
|
||||
onChange={() => onToggleCompare(historyItem.id)}
|
||||
aria-label={t("Select version from {{date}}", { date })}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Group gap={6} wrap="nowrap" mt={4}>
|
||||
{hasContributors ? (
|
||||
<>
|
||||
<Tooltip.Group openDelay={300} closeDelay={100}>
|
||||
<Avatar.Group spacing={8}>
|
||||
{contributors.slice(0, MAX_VISIBLE_AVATARS).map((contributor) => (
|
||||
<Tooltip key={contributor.id} label={contributor.name} withArrow>
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={contributor.avatarUrl}
|
||||
name={contributor.name}
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
{contributors.length > MAX_VISIBLE_AVATARS && (
|
||||
<Tooltip
|
||||
withArrow
|
||||
label={contributors.slice(MAX_VISIBLE_AVATARS).map((c) => (
|
||||
<div key={c.id}>{c.name}</div>
|
||||
<UnstyledButton
|
||||
p="xs"
|
||||
onClick={handleClick}
|
||||
className={classes.historyButton}
|
||||
>
|
||||
<Text size="sm">{date}</Text>
|
||||
|
||||
<Group gap={6} wrap="nowrap" mt={4}>
|
||||
{hasContributors ? (
|
||||
<>
|
||||
<Tooltip.Group openDelay={300} closeDelay={100}>
|
||||
<Avatar.Group spacing={8}>
|
||||
{contributors
|
||||
.slice(0, MAX_VISIBLE_AVATARS)
|
||||
.map((contributor) => (
|
||||
<Tooltip
|
||||
key={contributor.id}
|
||||
label={contributor.name}
|
||||
withArrow
|
||||
>
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={contributor.avatarUrl}
|
||||
name={contributor.name}
|
||||
/>
|
||||
</Tooltip>
|
||||
))}
|
||||
>
|
||||
<Avatar size="sm" color="gray">
|
||||
+{contributors.length - MAX_VISIBLE_AVATARS}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Avatar.Group>
|
||||
</Tooltip.Group>
|
||||
{contributors.length === 1 && (
|
||||
{contributors.length > MAX_VISIBLE_AVATARS && (
|
||||
<Tooltip
|
||||
withArrow
|
||||
label={contributors
|
||||
.slice(MAX_VISIBLE_AVATARS)
|
||||
.map((c) => (
|
||||
<div key={c.id}>{c.name}</div>
|
||||
))}
|
||||
>
|
||||
<Avatar size="sm" color="gray">
|
||||
+{contributors.length - MAX_VISIBLE_AVATARS}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Avatar.Group>
|
||||
</Tooltip.Group>
|
||||
{contributors.length === 1 && (
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
||||
{contributors[0].name}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
|
||||
name={historyItem.lastUpdatedBy?.name}
|
||||
/>
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
||||
{contributors[0].name}
|
||||
{historyItem.lastUpdatedBy?.name}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
|
||||
{!compareMode && (
|
||||
<Menu shadow="md" width={180} position="bottom-end">
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
className={classes.itemMenu}
|
||||
aria-label={t("Version actions for {{date}}", { date })}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<IconDots size={18} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
disabled={!canCompare}
|
||||
onClick={() => onStartCompare(historyItem.id)}
|
||||
>
|
||||
{t("Compare")}
|
||||
</Menu.Item>
|
||||
{onRestore && (
|
||||
<Menu.Item onClick={() => onRestore(historyItem.id, index)}>
|
||||
{t("Restore")}
|
||||
</Menu.Item>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
|
||||
name={historyItem.lastUpdatedBy?.name}
|
||||
/>
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
||||
{historyItem.lastUpdatedBy?.name}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -6,8 +6,12 @@ import HistoryItem from "@/features/page-history/components/history-item";
|
||||
import {
|
||||
activeHistoryIdAtom,
|
||||
activeHistoryPrevIdAtom,
|
||||
compareModeAtom,
|
||||
comparePairAtom,
|
||||
compareSelectionAtom,
|
||||
historyAtoms,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
import { resolveComparePair } from "@/features/page-history/utils/resolve-compare-pair";
|
||||
import { useAtom, useSetAtom } from "jotai";
|
||||
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import {
|
||||
@@ -32,6 +36,9 @@ function HistoryList({ pageId }: Props) {
|
||||
const [activeHistoryId, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
|
||||
const setActiveHistoryPrevId = useSetAtom(activeHistoryPrevIdAtom);
|
||||
const setHistoryModalOpen = useSetAtom(historyAtoms);
|
||||
const [compareMode, setCompareMode] = useAtom(compareModeAtom);
|
||||
const [compareSelection, setCompareSelection] = useAtom(compareSelectionAtom);
|
||||
const setComparePair = useSetAtom(comparePairAtom);
|
||||
|
||||
const {
|
||||
data: pageHistoryData,
|
||||
@@ -79,10 +86,58 @@ function HistoryList({ pageId }: Props) {
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(id: string, index: number) => {
|
||||
setComparePair(null);
|
||||
setActiveHistoryId(id);
|
||||
setActiveHistoryPrevId(historyItems[index + 1]?.id ?? "");
|
||||
},
|
||||
[historyItems, setActiveHistoryId, setActiveHistoryPrevId],
|
||||
[historyItems, setActiveHistoryId, setActiveHistoryPrevId, setComparePair],
|
||||
);
|
||||
|
||||
const handleToggleCompare = useCallback(
|
||||
(id: string) => {
|
||||
setCompareSelection((prev) => {
|
||||
if (prev.includes(id)) return prev.filter((item) => item !== id);
|
||||
if (prev.length >= 2) return prev;
|
||||
return [...prev, id];
|
||||
});
|
||||
},
|
||||
[setCompareSelection],
|
||||
);
|
||||
|
||||
const handleStartCompare = useCallback(
|
||||
(id: string) => {
|
||||
setComparePair(null);
|
||||
setCompareMode(true);
|
||||
setCompareSelection([id]);
|
||||
},
|
||||
[setComparePair, setCompareMode, setCompareSelection],
|
||||
);
|
||||
|
||||
const handleCancelCompare = useCallback(() => {
|
||||
setCompareMode(false);
|
||||
setCompareSelection([]);
|
||||
}, [setCompareMode, setCompareSelection]);
|
||||
|
||||
const handleConfirmCompare = useCallback(() => {
|
||||
const pair = resolveComparePair(historyItems, compareSelection);
|
||||
if (!pair) return;
|
||||
setComparePair(pair);
|
||||
setCompareMode(false);
|
||||
setCompareSelection([]);
|
||||
}, [
|
||||
historyItems,
|
||||
compareSelection,
|
||||
setComparePair,
|
||||
setCompareMode,
|
||||
setCompareSelection,
|
||||
]);
|
||||
|
||||
const handleRestoreItem = useCallback(
|
||||
(id: string, index: number) => {
|
||||
handleSelect(id, index);
|
||||
confirmRestore(id);
|
||||
},
|
||||
[handleSelect, confirmRestore],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -138,6 +193,16 @@ function HistoryList({ pageId }: Props) {
|
||||
onHover={handleHover}
|
||||
onHoverEnd={clearPrefetchTimeout}
|
||||
isActive={historyItem.id === activeHistoryId}
|
||||
compareMode={compareMode}
|
||||
isChecked={compareSelection.includes(historyItem.id)}
|
||||
isCheckboxDisabled={
|
||||
!compareSelection.includes(historyItem.id) &&
|
||||
compareSelection.length >= 2
|
||||
}
|
||||
canCompare={historyItems.length >= 2}
|
||||
onToggleCompare={handleToggleCompare}
|
||||
onStartCompare={handleStartCompare}
|
||||
onRestore={canRestore ? handleRestoreItem : undefined}
|
||||
/>
|
||||
))}
|
||||
{hasNextPage && <div ref={loadMoreRef} style={{ height: 1 }} />}
|
||||
@@ -148,22 +213,44 @@ function HistoryList({ pageId }: Props) {
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{canRestore && (
|
||||
{compareMode ? (
|
||||
<>
|
||||
<Divider />
|
||||
<Group p="xs" wrap="nowrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="compact-md"
|
||||
onClick={() => setHistoryModalOpen(false)}
|
||||
onClick={handleCancelCompare}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="compact-md" onClick={confirmRestore}>
|
||||
{t("Restore")}
|
||||
<Button
|
||||
size="compact-md"
|
||||
disabled={compareSelection.length !== 2}
|
||||
onClick={handleConfirmCompare}
|
||||
>
|
||||
{t("Compare")}
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
) : (
|
||||
canRestore && (
|
||||
<>
|
||||
<Divider />
|
||||
<Group p="xs" wrap="nowrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="compact-md"
|
||||
onClick={() => setHistoryModalOpen(false)}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="compact-md" onClick={() => confirmRestore()}>
|
||||
{t("Restore")}
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
CloseButton,
|
||||
Group,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
@@ -12,17 +13,20 @@ import { useAtom, useAtomValue } from "jotai";
|
||||
import {
|
||||
activeHistoryIdAtom,
|
||||
activeHistoryPrevIdAtom,
|
||||
comparePairAtom,
|
||||
diffCountsAtom,
|
||||
highlightChangesAtom,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
import HistoryView from "@/features/page-history/components/history-view";
|
||||
import { useRef } from "react";
|
||||
import { useMemo, useRef } from "react";
|
||||
import { IconChevronUp, IconChevronDown } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useDiffNavigation,
|
||||
useHistoryReset,
|
||||
} from "@/features/page-history/hooks";
|
||||
import { usePageHistoryListQuery } from "@/features/page-history/queries/page-history-query";
|
||||
import { formattedDate } from "@/lib/time";
|
||||
|
||||
interface Props {
|
||||
pageId: string;
|
||||
@@ -36,6 +40,28 @@ export default function HistoryModalBody({ pageId }: Props) {
|
||||
const activeHistoryPrevId = useAtomValue(activeHistoryPrevIdAtom);
|
||||
const [highlightChanges, setHighlightChanges] = useAtom(highlightChangesAtom);
|
||||
const diffCounts = useAtomValue(diffCountsAtom);
|
||||
const [comparePair, setComparePair] = useAtom(comparePairAtom);
|
||||
|
||||
const { data: pageHistoryData } = usePageHistoryListQuery(pageId);
|
||||
const historyItems = useMemo(
|
||||
() => pageHistoryData?.pages.flatMap((page) => page.items) ?? [],
|
||||
[pageHistoryData],
|
||||
);
|
||||
|
||||
const compareLabel = useMemo(() => {
|
||||
if (!comparePair) return null;
|
||||
const newerItem = historyItems.find(
|
||||
(item) => item.id === comparePair.newerId,
|
||||
);
|
||||
const olderItem = historyItems.find(
|
||||
(item) => item.id === comparePair.olderId,
|
||||
);
|
||||
if (!newerItem || !olderItem) return null;
|
||||
return t("Comparing {{newer}} and {{older}}", {
|
||||
newer: formattedDate(new Date(newerItem.createdAt)),
|
||||
older: formattedDate(new Date(olderItem.createdAt)),
|
||||
});
|
||||
}, [comparePair, historyItems, t]);
|
||||
|
||||
useHistoryReset(pageId);
|
||||
const { currentChangeIndex, handlePrevChange, handleNextChange } =
|
||||
@@ -50,6 +76,25 @@ export default function HistoryModalBody({ pageId }: Props) {
|
||||
</nav>
|
||||
|
||||
<div style={{ position: "relative", flex: 1 }}>
|
||||
{comparePair && (
|
||||
<Group
|
||||
justify="space-between"
|
||||
wrap="nowrap"
|
||||
px="md"
|
||||
py={4}
|
||||
className={classes.compareBanner}
|
||||
>
|
||||
<Text size="sm" fw={500} lineClamp={1}>
|
||||
{compareLabel ?? t("Compare versions")}
|
||||
</Text>
|
||||
<CloseButton
|
||||
size="sm"
|
||||
aria-label={t("Exit compare")}
|
||||
onClick={() => setComparePair(null)}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
<ScrollArea
|
||||
h={650}
|
||||
w="100%"
|
||||
@@ -57,11 +102,18 @@ export default function HistoryModalBody({ pageId }: Props) {
|
||||
viewportRef={scrollViewportRef}
|
||||
>
|
||||
<div className={classes.sidebarRightSection}>
|
||||
{activeHistoryId && <HistoryView />}
|
||||
{comparePair ? (
|
||||
<HistoryView
|
||||
historyId={comparePair.newerId}
|
||||
prevHistoryId={comparePair.olderId}
|
||||
/>
|
||||
) : (
|
||||
activeHistoryId && <HistoryView />
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{activeHistoryId && activeHistoryPrevId && (
|
||||
{(comparePair || (activeHistoryId && activeHistoryPrevId)) && (
|
||||
<Paper
|
||||
shadow="md"
|
||||
radius="xl"
|
||||
|
||||
@@ -166,7 +166,7 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
|
||||
<Button variant="default" onClick={() => setHistoryModalOpen(false)}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button onClick={confirmRestore}>{t("Restore")}</Button>
|
||||
<Button onClick={() => confirmRestore()}>{t("Restore")}</Button>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
|
||||
@@ -7,21 +7,29 @@ import {
|
||||
activeHistoryPrevIdAtom,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
|
||||
function HistoryView() {
|
||||
interface Props {
|
||||
historyId?: string;
|
||||
prevHistoryId?: string;
|
||||
}
|
||||
|
||||
function HistoryView({ historyId, prevHistoryId }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const historyId = useAtomValue(activeHistoryIdAtom);
|
||||
const prevHistoryId = useAtomValue(activeHistoryPrevIdAtom);
|
||||
const activeId = useAtomValue(activeHistoryIdAtom);
|
||||
const activePrevId = useAtomValue(activeHistoryPrevIdAtom);
|
||||
|
||||
const resolvedId = historyId ?? activeId;
|
||||
const resolvedPrevId = prevHistoryId ?? activePrevId;
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading: isLoadingCurrent,
|
||||
isError: isErrorCurrent,
|
||||
} = usePageHistoryQuery(historyId);
|
||||
} = usePageHistoryQuery(resolvedId);
|
||||
const {
|
||||
data: prevData,
|
||||
isLoading: isLoadingPrev,
|
||||
isError: isErrorPrev,
|
||||
} = usePageHistoryQuery(prevHistoryId);
|
||||
} = usePageHistoryQuery(resolvedPrevId);
|
||||
|
||||
if (isLoadingCurrent || isLoadingPrev) {
|
||||
return <></>;
|
||||
|
||||
@@ -3,22 +3,45 @@ import { useEffect } from "react";
|
||||
import {
|
||||
activeHistoryIdAtom,
|
||||
activeHistoryPrevIdAtom,
|
||||
compareModeAtom,
|
||||
comparePairAtom,
|
||||
compareSelectionAtom,
|
||||
diffCountsAtom,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
|
||||
/**
|
||||
* Resets history state when pageId changes.
|
||||
* Clears active selection and diff counts.
|
||||
* Clears active selection, diff counts, and compare state.
|
||||
* Compare state also resets on unmount so reopening the modal starts clean.
|
||||
*/
|
||||
export function useHistoryReset(pageId: string) {
|
||||
const [, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
|
||||
const [, setActiveHistoryPrevId] = useAtom(activeHistoryPrevIdAtom);
|
||||
const [, setDiffCounts] = useAtom(diffCountsAtom);
|
||||
const [, setCompareMode] = useAtom(compareModeAtom);
|
||||
const [, setCompareSelection] = useAtom(compareSelectionAtom);
|
||||
const [, setComparePair] = useAtom(comparePairAtom);
|
||||
|
||||
useEffect(() => {
|
||||
const resetCompare = () => {
|
||||
setCompareMode(false);
|
||||
setCompareSelection([]);
|
||||
setComparePair(null);
|
||||
};
|
||||
|
||||
setActiveHistoryId("");
|
||||
setActiveHistoryPrevId("");
|
||||
// @ts-ignore
|
||||
setDiffCounts(null);
|
||||
}, [pageId, setActiveHistoryId, setActiveHistoryPrevId, setDiffCounts]);
|
||||
resetCompare();
|
||||
|
||||
return resetCompare;
|
||||
}, [
|
||||
pageId,
|
||||
setActiveHistoryId,
|
||||
setActiveHistoryPrevId,
|
||||
setDiffCounts,
|
||||
setCompareMode,
|
||||
setCompareSelection,
|
||||
setComparePair,
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import { useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Text } from "@mantine/core";
|
||||
@@ -9,7 +9,8 @@ import {
|
||||
activeHistoryIdAtom,
|
||||
historyAtoms,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
|
||||
import { fetchPageHistory } from "@/features/page-history/queries/page-history-query";
|
||||
import { IPageHistory } from "@/features/page-history/types/page.types";
|
||||
import {
|
||||
pageEditorAtom,
|
||||
titleEditorAtom,
|
||||
@@ -25,8 +26,6 @@ export function useHistoryRestore() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const activeHistoryId = useAtomValue(activeHistoryIdAtom);
|
||||
const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
|
||||
|
||||
const mainEditor = useAtomValue(pageEditorAtom);
|
||||
const mainEditorTitle = useAtomValue(titleEditorAtom);
|
||||
const setHistoryModalOpen = useSetAtom(historyAtoms);
|
||||
@@ -40,47 +39,66 @@ export function useHistoryRestore() {
|
||||
SpaceCaslSubject.Page,
|
||||
);
|
||||
|
||||
const handleRestore = useCallback(() => {
|
||||
if (!activeHistoryData) return;
|
||||
if (
|
||||
!mainEditor ||
|
||||
mainEditor.isDestroyed ||
|
||||
!mainEditorTitle ||
|
||||
mainEditorTitle.isDestroyed
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const handleRestore = useCallback(
|
||||
async (historyId: string) => {
|
||||
let historyData: IPageHistory;
|
||||
try {
|
||||
historyData = await fetchPageHistory(historyId);
|
||||
} catch {
|
||||
notifications.show({
|
||||
message: t("Error fetching page data."),
|
||||
color: "red",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
mainEditorTitle
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(activeHistoryData.title, { emitUpdate: true })
|
||||
.run();
|
||||
if (
|
||||
!mainEditor ||
|
||||
mainEditor.isDestroyed ||
|
||||
!mainEditorTitle ||
|
||||
mainEditorTitle.isDestroyed
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
mainEditor
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(activeHistoryData.content)
|
||||
.run();
|
||||
mainEditorTitle
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(historyData.title, { emitUpdate: true })
|
||||
.run();
|
||||
|
||||
setHistoryModalOpen(false);
|
||||
notifications.show({ message: t("Successfully restored") });
|
||||
}, [activeHistoryData, mainEditor, mainEditorTitle, setHistoryModalOpen, t]);
|
||||
mainEditor
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(historyData.content)
|
||||
.run();
|
||||
|
||||
const confirmRestore = useCallback(() => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Please confirm your action"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"Are you sure you want to restore this version? Any changes not versioned will be lost.",
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Confirm"), cancel: t("Cancel") },
|
||||
onConfirm: handleRestore,
|
||||
});
|
||||
}, [t, handleRestore]);
|
||||
setHistoryModalOpen(false);
|
||||
notifications.show({ message: t("Successfully restored") });
|
||||
},
|
||||
[mainEditor, mainEditorTitle, setHistoryModalOpen, t],
|
||||
);
|
||||
|
||||
const confirmRestore = useCallback(
|
||||
(historyId?: string) => {
|
||||
const targetId = historyId ?? activeHistoryId;
|
||||
if (!targetId) return;
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: t("Please confirm your action"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"Are you sure you want to restore this version? Any changes not versioned will be lost.",
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Confirm"), cancel: t("Cancel") },
|
||||
onConfirm: () => handleRestore(targetId),
|
||||
});
|
||||
},
|
||||
[t, handleRestore, activeHistoryId],
|
||||
);
|
||||
|
||||
return { canRestore, confirmRestore };
|
||||
}
|
||||
|
||||
@@ -23,6 +23,14 @@ export function prefetchPageHistory(historyId: string) {
|
||||
});
|
||||
}
|
||||
|
||||
export function fetchPageHistory(historyId: string): Promise<IPageHistory> {
|
||||
return queryClient.fetchQuery({
|
||||
queryKey: ["page-history", historyId],
|
||||
queryFn: () => getPageHistoryById(historyId),
|
||||
staleTime: HISTORY_STALE_TIME,
|
||||
});
|
||||
}
|
||||
|
||||
export function usePageHistoryListQuery(
|
||||
pageId: string,
|
||||
): UseInfiniteQueryResult<InfiniteData<IPagination<IPageHistory>, unknown>> {
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { resolveComparePair } from "./resolve-compare-pair";
|
||||
|
||||
// list is newest-first, matching usePageHistoryListQuery order
|
||||
const items = [{ id: "v3" }, { id: "v2" }, { id: "v1" }];
|
||||
|
||||
describe("resolveComparePair", () => {
|
||||
it("orders newer before older regardless of selection order", () => {
|
||||
expect(resolveComparePair(items, ["v1", "v3"])).toEqual({
|
||||
newerId: "v3",
|
||||
olderId: "v1",
|
||||
});
|
||||
expect(resolveComparePair(items, ["v3", "v1"])).toEqual({
|
||||
newerId: "v3",
|
||||
olderId: "v1",
|
||||
});
|
||||
});
|
||||
|
||||
it("returns null unless exactly two versions are selected", () => {
|
||||
expect(resolveComparePair(items, [])).toBeNull();
|
||||
expect(resolveComparePair(items, ["v1"])).toBeNull();
|
||||
expect(resolveComparePair(items, ["v1", "v2", "v3"])).toBeNull();
|
||||
});
|
||||
|
||||
it("returns null when a selected id is not in the list", () => {
|
||||
expect(resolveComparePair(items, ["v1", "missing"])).toBeNull();
|
||||
});
|
||||
|
||||
it("returns null when the same id is selected twice", () => {
|
||||
expect(resolveComparePair(items, ["v2", "v2"])).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
import { ComparePair } from "@/features/page-history/atoms/history-atoms";
|
||||
|
||||
/**
|
||||
* Resolves which of the two selected versions is newer using their position
|
||||
* in the history list (list is newest-first: lower index = newer).
|
||||
*/
|
||||
export function resolveComparePair(
|
||||
historyItems: { id: string }[],
|
||||
selection: string[],
|
||||
): ComparePair | null {
|
||||
if (selection.length !== 2) return null;
|
||||
const indexA = historyItems.findIndex((item) => item.id === selection[0]);
|
||||
const indexB = historyItems.findIndex((item) => item.id === selection[1]);
|
||||
if (indexA === -1 || indexB === -1 || indexA === indexB) return null;
|
||||
return indexA < indexB
|
||||
? { newerId: selection[0], olderId: selection[1] }
|
||||
: { newerId: selection[1], olderId: selection[0] };
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
IconList,
|
||||
IconMarkdown,
|
||||
IconMessage,
|
||||
IconPaperclip,
|
||||
IconPrinter,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
@@ -42,6 +43,7 @@ import {
|
||||
import { formattedDate } from "@/lib/time.ts";
|
||||
import { PageEditModeToggle } from "@/features/user/components/page-state-pref.tsx";
|
||||
import MovePageModal from "@/features/page/components/move-page-modal.tsx";
|
||||
import PageAttachmentsModal from "@/features/attachments/components/page-attachments-modal.tsx";
|
||||
import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
|
||||
import { PageShareModal } from "@/ee/page-permission";
|
||||
import {
|
||||
@@ -157,6 +159,10 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
verificationOpened,
|
||||
{ open: openVerificationModal, close: closeVerificationModal },
|
||||
] = useDisclosure(false);
|
||||
const [
|
||||
attachmentsOpened,
|
||||
{ open: openAttachmentsModal, close: closeAttachmentsModal },
|
||||
] = useDisclosure(false);
|
||||
const [pageEditor] = useAtom(pageEditorAtom);
|
||||
const pageUpdatedAt = useTimeAgo(page?.updatedAt);
|
||||
const favoriteIds = useFavoriteIds("page", page?.spaceId);
|
||||
@@ -293,6 +299,15 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
</Menu.Item>
|
||||
)}
|
||||
|
||||
{!page?.isBase && (
|
||||
<Menu.Item
|
||||
leftSection={<IconPaperclip size={16} />}
|
||||
onClick={openAttachmentsModal}
|
||||
>
|
||||
{t("Attachments")}
|
||||
</Menu.Item>
|
||||
)}
|
||||
|
||||
{!readOnly && !page?.isBase && (
|
||||
<PageVerificationMenuItem
|
||||
pageId={page?.id}
|
||||
@@ -395,6 +410,12 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
opened={verificationOpened}
|
||||
onClose={closeVerificationModal}
|
||||
/>
|
||||
|
||||
<PageAttachmentsModal
|
||||
pageId={page.id}
|
||||
open={attachmentsOpened}
|
||||
onClose={closeAttachmentsModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { ForgotPasswordForm } from "@/features/auth/components/forgot-password-form";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function ForgotPassword() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Forgot Password - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="Forgot Password" />
|
||||
<ForgotPasswordForm />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { InviteSignUpForm } from "@/features/auth/components/invite-sign-up-form.tsx";
|
||||
import {getAppName} from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function InviteSignup() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t("Invitation Signup")} - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Invitation Signup")} />
|
||||
<InviteSignUpForm />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
import { LoginForm } from "@/features/auth/components/login-form";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function LoginPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Login")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Login")} />
|
||||
<LoginForm />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { PasswordResetForm } from "@/features/auth/components/password-reset-form";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
import { useVerifyUserTokenQuery } from "@/features/auth/queries/auth-query";
|
||||
import { Button, Container, Group, Text } from "@mantine/core";
|
||||
import APP_ROUTE from "@/lib/app-route";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function PasswordReset() {
|
||||
const { t } = useTranslation();
|
||||
@@ -23,11 +22,7 @@ export default function PasswordReset() {
|
||||
if (isError || !resetToken) {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Password Reset")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Password Reset")} />
|
||||
<Container my={40}>
|
||||
<Text size="lg" ta="center">
|
||||
{t("Invalid or expired password reset link")}
|
||||
@@ -49,11 +44,7 @@ export default function PasswordReset() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Password Reset")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Password Reset")} />
|
||||
<PasswordResetForm resetToken={resetToken} />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
|
||||
import { SetupWorkspaceForm } from "@/features/auth/components/setup-workspace-form.tsx";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import React, { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import APP_ROUTE from "@/lib/app-route.ts";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function SetupWorkspace() {
|
||||
const { t } = useTranslation();
|
||||
@@ -35,11 +34,7 @@ export default function SetupWorkspace() {
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Setup Workspace")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Setup Workspace")} />
|
||||
<SetupWorkspaceForm />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -2,20 +2,15 @@ import { Container, Space } from "@mantine/core";
|
||||
import HomeTabs from "@/features/home/components/home-tabs";
|
||||
import HomeAiPrompt from "@/features/home/components/home-ai-prompt";
|
||||
import SpaceCarousel from "@/features/space/components/space-carousel.tsx";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Home() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Home")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Home")} />
|
||||
<Container size={"900"} pt="xl">
|
||||
<HomeAiPrompt />
|
||||
|
||||
|
||||
@@ -17,9 +17,7 @@ import {
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import { useLabelPagesQuery } from "@/features/label/queries/label-query.ts";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
|
||||
import { getLabelColor } from "@/features/label/utils/label-colors.ts";
|
||||
@@ -29,6 +27,7 @@ import { normalizeLabelName } from "@/features/label/utils/normalize-label.ts";
|
||||
import { SpaceFilterMenu } from "@/features/space/components/space-filter-menu.tsx";
|
||||
import { EmptyState } from "@/components/ui/empty-state";
|
||||
import classes from "@/features/label/label.module.css";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function LabelPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -82,11 +81,7 @@ export default function LabelPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{labelName} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={labelName} />
|
||||
|
||||
<Container size={820} py="xl">
|
||||
<Stack gap="lg">
|
||||
|
||||
@@ -3,7 +3,6 @@ import { usePageQuery } from "@/features/page/queries/page-query";
|
||||
import { FullEditor } from "@/features/editor/full-editor";
|
||||
import { TitleEditor } from "@/features/editor/title-editor";
|
||||
import HistoryModal from "@/features/page-history/components/history-modal";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import PageHeader from "@/features/page/components/header/page-header.tsx";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
||||
@@ -18,6 +17,7 @@ import { BaseView } from "@/ee/base/components/base-view";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { getPageTitle } from "@/features/page/page.utils";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
const MemoizedFullEditor = React.memo(FullEditor);
|
||||
const MemoizedTitleEditor = React.memo(TitleEditor);
|
||||
const MemoizedPageHeader = React.memo(PageHeader);
|
||||
@@ -110,9 +110,10 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
||||
paddingTop: "calc(var(--page-header-height) + 6px)",
|
||||
}}
|
||||
>
|
||||
<Helmet>
|
||||
<title>{`${page?.icon || ""} ${getPageTitle(page?.title, page?.isBase, t)}`}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle
|
||||
title={`${page?.icon || ""} ${getPageTitle(page?.title, page?.isBase, t)}`}
|
||||
withAppName={false}
|
||||
/>
|
||||
<MemoizedPageHeader readOnly={!canEdit} />
|
||||
<div
|
||||
style={{
|
||||
@@ -159,9 +160,10 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
||||
return (
|
||||
page && (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>{`${page?.icon || ""} ${getPageTitle(page?.title, page?.isBase, t)}`}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle
|
||||
title={`${page?.icon || ""} ${getPageTitle(page?.title, page?.isBase, t)}`}
|
||||
withAppName={false}
|
||||
/>
|
||||
|
||||
<MemoizedPageHeader readOnly={!canEdit} />
|
||||
|
||||
|
||||
@@ -5,21 +5,16 @@ import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
|
||||
import PageEditPref from "@/features/user/components/page-state-pref";
|
||||
import FixedToolbarPref from "@/features/user/components/fixed-toolbar-pref";
|
||||
import NotificationPref from "@/features/user/components/notification-pref";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { Divider } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function AccountPreferences() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Preferences")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Preferences")} />
|
||||
<SettingsTitle title={t("Preferences")} />
|
||||
|
||||
<AccountTheme />
|
||||
|
||||
@@ -4,22 +4,17 @@ import ChangePassword from "@/features/user/components/change-password";
|
||||
import { Divider } from "@mantine/core";
|
||||
import AccountAvatar from "@/features/user/components/account-avatar";
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AccountMfaSection } from "@/features/user/components/account-mfa-section";
|
||||
import SessionList from "@/features/session/components/session-list";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function AccountSettings() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("My Profile")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("My Profile")} />
|
||||
<SettingsTitle title={t("My Profile")} />
|
||||
|
||||
<AccountAvatar />
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import GroupMembersList from "@/features/group/components/group-members";
|
||||
import GroupDetails from "@/features/group/components/group-details";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function GroupInfo() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Manage Group")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Manage Group")} />
|
||||
<SettingsTitle title={t("Manage Group")} />
|
||||
<GroupDetails />
|
||||
<GroupMembersList />
|
||||
|
||||
@@ -3,9 +3,8 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import { Group } from "@mantine/core";
|
||||
import CreateGroupModal from "@/features/group/components/create-group-modal";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
import {getAppName} from "@/lib/config.ts";
|
||||
import {Helmet} from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Groups() {
|
||||
const { t } = useTranslation();
|
||||
@@ -13,9 +12,7 @@ export default function Groups() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t("Groups")} - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Groups")} />
|
||||
<SettingsTitle title={t("Groups")} />
|
||||
|
||||
<Group my="md" justify="flex-end">
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ShareList from "@/features/share/components/share-list.tsx";
|
||||
import { Alert, Text } from "@mantine/core";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
import React from "react";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Shares() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Public sharing")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Public sharing")} />
|
||||
<SettingsTitle title={t("Public sharing")} />
|
||||
|
||||
<Alert variant="light" color="blue" icon={<IconInfoCircle />}>
|
||||
|
||||
@@ -3,9 +3,8 @@ import SpaceList from "@/features/space/components/space-list.tsx";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
import { Group } from "@mantine/core";
|
||||
import CreateSpaceModal from "@/features/space/components/create-space-modal.tsx";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Spaces() {
|
||||
const { t } = useTranslation();
|
||||
@@ -13,11 +12,7 @@ export default function Spaces() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Spaces")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Spaces")} />
|
||||
<SettingsTitle title={t("Spaces")} />
|
||||
|
||||
<Group my="md" justify="flex-end">
|
||||
|
||||
@@ -6,11 +6,10 @@ import { useEffect, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import WorkspaceInvitesTable from "@/features/workspace/components/members/components/workspace-invites-table.tsx";
|
||||
import useUserRole from "@/hooks/use-user-role.tsx";
|
||||
import { getAppName } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtom } from "jotai";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function WorkspaceMembers() {
|
||||
const { t } = useTranslation();
|
||||
@@ -38,11 +37,7 @@ export default function WorkspaceMembers() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Members")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Members")} />
|
||||
<SettingsTitle title={t("Members")} />
|
||||
|
||||
{/* <WorkspaceInviteSection /> */}
|
||||
|
||||
@@ -2,21 +2,19 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
|
||||
import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
|
||||
import WorkspaceIcon from "@/features/workspace/components/settings/components/workspace-icon.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getAppName, isCloud } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { isCloud } from "@/lib/config.ts";
|
||||
import ManageHostname from "@/ee/components/manage-hostname.tsx";
|
||||
import { Divider } from "@mantine/core";
|
||||
import AllowMemberTemplates from "@/ee/security/components/allow-member-templates.tsx";
|
||||
import WorkspaceDefaultPageEditMode from "@/features/workspace/components/settings/components/workspace-default-page-edit-mode.tsx";
|
||||
import PersonalSpacesSetting from "@/ee/personal-space/components/personal-spaces-setting.tsx";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function WorkspaceSettings() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Workspace Settings - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title="Workspace Settings" />
|
||||
<SettingsTitle title={t("General")} />
|
||||
<WorkspaceIcon />
|
||||
<WorkspaceNameForm />
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
|
||||
import { Container } from "@mantine/core";
|
||||
@@ -14,6 +13,7 @@ import {
|
||||
sharedTreeDataAtom,
|
||||
} from "@/features/share/atoms/shared-page-atom.ts";
|
||||
import { isPageInTree } from "@/features/share/utils.ts";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function SharedPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -56,12 +56,14 @@ export default function SharedPage() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>{`${data?.page?.title || t("untitled")}`}</title>
|
||||
<DocumentTitle
|
||||
title={data?.page?.title || t("untitled")}
|
||||
withAppName={false}
|
||||
>
|
||||
{!data?.share.searchIndexing && (
|
||||
<meta name="robots" content="noindex" />
|
||||
)}
|
||||
</Helmet>
|
||||
</DocumentTitle>
|
||||
|
||||
<Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
|
||||
<ReadonlyPageEditor
|
||||
|
||||
@@ -2,8 +2,7 @@ import {Container} from "@mantine/core";
|
||||
import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useGetSpaceBySlugQuery} from "@/features/space/queries/space-query.ts";
|
||||
import {getAppName} from "@/lib/config.ts";
|
||||
import {Helmet} from "react-helmet-async";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function SpaceHome() {
|
||||
const {spaceSlug} = useParams();
|
||||
@@ -11,9 +10,7 @@ export default function SpaceHome() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{space?.name || 'Overview'} - {getAppName()}</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={space?.name || 'Overview'} />
|
||||
<Container size={"900"} pt="xl">
|
||||
{space && <SpaceHomeTabs/>}
|
||||
</Container>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { Container, Title, Text, Group, Box } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import CreateSpaceModal from "@/features/space/components/create-space-modal";
|
||||
import { AllSpacesList } from "@/features/space/components/spaces-page";
|
||||
import FavoriteSpacesGrid from "@/features/space/components/spaces-page/favorite-spaces-grid";
|
||||
import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
|
||||
import useUserRole from "@/hooks/use-user-role";
|
||||
import { DocumentTitle } from "@/components/ui/document-title.tsx";
|
||||
|
||||
export default function Spaces() {
|
||||
const { t } = useTranslation();
|
||||
@@ -22,11 +21,7 @@ export default function Spaces() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Spaces")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
<DocumentTitle title={t("Spaces")} />
|
||||
|
||||
<Container size={"800"} pt="xl">
|
||||
<Group justify="space-between" mb="xl">
|
||||
|
||||
@@ -51,19 +51,19 @@
|
||||
"@nestjs-labs/nestjs-ioredis": "11.0.4",
|
||||
"@nestjs/bullmq": "11.0.4",
|
||||
"@nestjs/cache-manager": "3.1.3",
|
||||
"@nestjs/common": "11.1.27",
|
||||
"@nestjs/common": "11.1.28",
|
||||
"@nestjs/config": "4.0.4",
|
||||
"@nestjs/core": "11.1.27",
|
||||
"@nestjs/event-emitter": "3.1.0",
|
||||
"@nestjs/jwt": "11.0.2",
|
||||
"@nestjs/mapped-types": "2.1.1",
|
||||
"@nestjs/passport": "11.0.5",
|
||||
"@nestjs/platform-fastify": "11.1.27",
|
||||
"@nestjs/platform-socket.io": "11.1.27",
|
||||
"@nestjs/platform-fastify": "11.1.28",
|
||||
"@nestjs/platform-socket.io": "11.1.28",
|
||||
"@nestjs/schedule": "6.1.3",
|
||||
"@nestjs/terminus": "11.1.1",
|
||||
"@nestjs/throttler": "6.5.0",
|
||||
"@nestjs/websockets": "11.1.27",
|
||||
"@nestjs/websockets": "11.1.28",
|
||||
"@node-saml/passport-saml": "5.1.0",
|
||||
"@socket.io/redis-adapter": "8.3.0",
|
||||
"ai": "6.0.134",
|
||||
@@ -90,8 +90,8 @@
|
||||
"ldapts": "8.1.7",
|
||||
"mammoth": "1.12.0",
|
||||
"mime-types": "3.0.2",
|
||||
"msgpackr": "^1.11.9",
|
||||
"nanoid": "5.1.7",
|
||||
"msgpackr": "1.11.9",
|
||||
"nanoid": "5.1.16",
|
||||
"nestjs-cls": "6.2.0",
|
||||
"nestjs-kysely": "3.1.2",
|
||||
"nestjs-pino": "4.6.1",
|
||||
@@ -102,7 +102,7 @@
|
||||
"passport-google-oauth20": "2.0.0",
|
||||
"passport-jwt": "4.0.1",
|
||||
"pg-tsquery": "8.4.2",
|
||||
"pgvector": "^0.2.1",
|
||||
"pgvector": "0.2.1",
|
||||
"pino-http": "11.0.0",
|
||||
"pino-pretty": "13.1.3",
|
||||
"postgres": "3.4.8",
|
||||
|
||||
@@ -26,8 +26,8 @@ import KeyvRedis from '@keyv/redis';
|
||||
import { LoggerModule } from './common/logger/logger.module';
|
||||
import { ClsModule } from 'nestjs-cls';
|
||||
import { NoopAuditModule } from './integrations/audit/audit.module';
|
||||
import { NoopPageAnalyticsModule } from './integrations/page-analytics/page-analytics.module';
|
||||
import { ThrottleModule } from './integrations/throttle/throttle.module';
|
||||
import { EncryptionModule } from './integrations/encryption/encryption.module';
|
||||
|
||||
const enterpriseModules = [];
|
||||
try {
|
||||
@@ -51,10 +51,10 @@ try {
|
||||
}),
|
||||
LoggerModule,
|
||||
NoopAuditModule,
|
||||
NoopPageAnalyticsModule,
|
||||
CoreModule,
|
||||
DatabaseModule,
|
||||
EnvironmentModule,
|
||||
EncryptionModule,
|
||||
RedisModule.forRootAsync({
|
||||
useClass: RedisConfigService,
|
||||
}),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { StarterKit } from '@tiptap/starter-kit';
|
||||
import { Document } from '@tiptap/extension-document';
|
||||
import { TextAlign } from '@tiptap/extension-text-align';
|
||||
import { Superscript } from '@tiptap/extension-superscript';
|
||||
import SubScript from '@tiptap/extension-subscript';
|
||||
@@ -45,8 +46,16 @@ import {
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
BaseEmbed,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
} from '@docmost/editor-ext';
|
||||
import { generateText, getSchema, JSONContent } from '@tiptap/core';
|
||||
import {
|
||||
extensions as coreExtensions,
|
||||
generateText,
|
||||
getSchema,
|
||||
JSONContent,
|
||||
} from '@tiptap/core';
|
||||
import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
|
||||
// @tiptap/html library works best for generating prosemirror json state but not HTML
|
||||
// see: https://github.com/ueberdosis/tiptap/issues/5352
|
||||
@@ -57,12 +66,17 @@ import * as Y from 'yjs';
|
||||
import { Logger } from '@nestjs/common';
|
||||
|
||||
export const tiptapExtensions = [
|
||||
coreExtensions.TextDirection.configure({ direction: 'auto' }),
|
||||
StarterKit.configure({
|
||||
document: false,
|
||||
codeBlock: false,
|
||||
link: false,
|
||||
trailingNode: false,
|
||||
heading: false,
|
||||
}),
|
||||
Document.extend({
|
||||
content: 'block+ footnotes?',
|
||||
}),
|
||||
Heading,
|
||||
UniqueID.configure({
|
||||
types: ['heading', 'paragraph', 'transclusionSource'],
|
||||
@@ -110,7 +124,10 @@ export const tiptapExtensions = [
|
||||
Status,
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
BaseEmbed
|
||||
BaseEmbed,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
] as any;
|
||||
|
||||
export function jsonToHtml(tiptapJson: any) {
|
||||
|
||||
@@ -15,7 +15,6 @@ export const Feature = {
|
||||
SCIM: 'scim',
|
||||
PAGE_VERIFICATION: 'page:verification',
|
||||
AUDIT_LOGS: 'audit:logs',
|
||||
PAGE_ANALYTICS: 'analytics:page-analytics',
|
||||
RETENTION: 'retention',
|
||||
SHARING_CONTROLS: 'sharing:controls',
|
||||
VIEWER_COMMENTS: 'comment:viewer',
|
||||
|
||||
@@ -53,8 +53,14 @@ import { EnvironmentService } from '../../integrations/environment/environment.s
|
||||
import { TokenService } from '../auth/services/token.service';
|
||||
import { JwtAttachmentPayload, JwtType } from '../auth/dto/jwt-payload';
|
||||
import * as path from 'path';
|
||||
import { AttachmentInfoDto, RemoveIconDto } from './dto/attachment.dto';
|
||||
import {
|
||||
AttachmentInfoDto,
|
||||
PageIdDto,
|
||||
RemoveIconDto,
|
||||
} from './dto/attachment.dto';
|
||||
import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
|
||||
import { PageAccessService } from '../page/page-access/page-access.service';
|
||||
import { DomainService } from '../../integrations/environment/domain.service';
|
||||
import { AuditEvent, AuditResource } from '../../common/events/audit-events';
|
||||
import {
|
||||
AUDIT_SERVICE,
|
||||
@@ -75,6 +81,7 @@ export class AttachmentController {
|
||||
private readonly environmentService: EnvironmentService,
|
||||
private readonly tokenService: TokenService,
|
||||
private readonly pageAccessService: PageAccessService,
|
||||
private readonly domainService: DomainService,
|
||||
@Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
|
||||
) {}
|
||||
|
||||
@@ -151,7 +158,10 @@ export class AttachmentController {
|
||||
},
|
||||
});
|
||||
|
||||
return res.send(fileResponse);
|
||||
return res.send({
|
||||
...fileResponse,
|
||||
url: this.buildFileUrl(workspace, fileResponse),
|
||||
});
|
||||
} catch (err: any) {
|
||||
if (err?.statusCode === 413) {
|
||||
const errMessage = `File too large. Exceeds the ${this.environmentService.getFileUploadSizeLimit()} limit`;
|
||||
@@ -411,7 +421,37 @@ export class AttachmentController {
|
||||
|
||||
await this.pageAccessService.validateCanView(page, user);
|
||||
|
||||
return attachment;
|
||||
return { ...attachment, url: this.buildFileUrl(workspace, attachment) };
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('pages/attachments')
|
||||
async getPageAttachments(
|
||||
@Body() dto: PageIdDto,
|
||||
@Body() pagination: PaginationOptions,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const page = await this.pageRepo.findById(dto.pageId);
|
||||
if (!page || page.workspaceId !== workspace.id) {
|
||||
throw new NotFoundException('Page not found');
|
||||
}
|
||||
|
||||
await this.pageAccessService.validateCanView(page, user);
|
||||
|
||||
const result = await this.attachmentRepo.findPageAttachments(
|
||||
page.id,
|
||||
pagination,
|
||||
);
|
||||
|
||||
return {
|
||||
...result,
|
||||
items: result.items.map((attachment) => ({
|
||||
...attachment,
|
||||
url: this.buildFileUrl(workspace, attachment),
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@@ -465,6 +505,10 @@ export class AttachmentController {
|
||||
}
|
||||
}
|
||||
|
||||
private buildFileUrl(workspace: Workspace, attachment: Attachment): string {
|
||||
return `${this.domainService.getUrl(workspace.hostname)}/api/files/${attachment.id}/${encodeURIComponent(attachment.fileName)}`;
|
||||
}
|
||||
|
||||
private async sendFileResponse(
|
||||
req: FastifyRequest,
|
||||
res: FastifyReply,
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
import { IsEnum, IsIn, IsNotEmpty, IsOptional, IsUUID } from 'class-validator';
|
||||
import {
|
||||
IsEnum,
|
||||
IsIn,
|
||||
IsNotEmpty,
|
||||
IsOptional,
|
||||
IsString,
|
||||
IsUUID,
|
||||
} from 'class-validator';
|
||||
import { AttachmentType } from '../attachment.constants';
|
||||
|
||||
export class AttachmentInfoDto {
|
||||
@@ -7,6 +14,12 @@ export class AttachmentInfoDto {
|
||||
attachmentId: string;
|
||||
}
|
||||
|
||||
export class PageIdDto {
|
||||
@IsString()
|
||||
@IsNotEmpty()
|
||||
pageId: string;
|
||||
}
|
||||
|
||||
export class RemoveIconDto {
|
||||
@IsEnum(AttachmentType)
|
||||
@IsIn([
|
||||
|
||||
@@ -42,7 +42,6 @@ function buildWorkspaceOwnerAbility() {
|
||||
can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Attachment);
|
||||
can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.API);
|
||||
can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Audit);
|
||||
can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.PageAnalytics);
|
||||
|
||||
return build();
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@ export enum WorkspaceCaslSubject {
|
||||
Attachment = 'attachment',
|
||||
API = 'api_key',
|
||||
Audit = 'audit',
|
||||
PageAnalytics = 'page_analytics'
|
||||
}
|
||||
|
||||
export type IWorkspaceAbility =
|
||||
@@ -23,5 +22,4 @@ export type IWorkspaceAbility =
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.Group]
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.Attachment]
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.API]
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.Audit]
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.PageAnalytics];
|
||||
| [WorkspaceCaslAction, WorkspaceCaslSubject.Audit];
|
||||
|
||||
@@ -51,10 +51,6 @@ import {
|
||||
AUDIT_SERVICE,
|
||||
IAuditService,
|
||||
} from '../../integrations/audit/audit.service';
|
||||
import {
|
||||
PAGE_ANALYTICS_SERVICE,
|
||||
IPageAnalyticsService,
|
||||
} from '../../integrations/page-analytics/page-analytics.service';
|
||||
import { getPageTitle } from '../../common/helpers';
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@@ -69,7 +65,6 @@ export class PageController {
|
||||
private readonly backlinkService: BacklinkService,
|
||||
private readonly labelService: LabelService,
|
||||
@Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
|
||||
@Inject(PAGE_ANALYTICS_SERVICE) private readonly pageAnalyticsService: IPageAnalyticsService,
|
||||
) {}
|
||||
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@@ -93,13 +88,6 @@ export class PageController {
|
||||
|
||||
const permissions = { canEdit, hasRestriction };
|
||||
|
||||
void this.pageAnalyticsService.track({
|
||||
pageId: page.id,
|
||||
workspaceId: page.workspaceId,
|
||||
spaceId: page.spaceId,
|
||||
userId: user.id,
|
||||
});
|
||||
|
||||
if (dto.format && dto.format !== 'json' && page.content) {
|
||||
const contentOutput =
|
||||
dto.format === 'markdown'
|
||||
|
||||
@@ -810,6 +810,10 @@ export class PageService {
|
||||
throw new BadRequestException('Invalid move position');
|
||||
}
|
||||
|
||||
if (dto.parentPageId && dto.parentPageId === dto.pageId) {
|
||||
throw new BadRequestException('A page cannot be its own parent');
|
||||
}
|
||||
|
||||
let parentPageId = null;
|
||||
if (movedPage.parentPageId === dto.parentPageId) {
|
||||
parentPageId = undefined;
|
||||
|
||||
@@ -35,10 +35,6 @@ import {
|
||||
AUDIT_SERVICE,
|
||||
IAuditService,
|
||||
} from '../../integrations/audit/audit.service';
|
||||
import {
|
||||
PAGE_ANALYTICS_SERVICE,
|
||||
IPageAnalyticsService,
|
||||
} from '../../integrations/page-analytics/page-analytics.service';
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Controller('shares')
|
||||
@@ -51,8 +47,6 @@ export class ShareController {
|
||||
private readonly pageAccessService: PageAccessService,
|
||||
private readonly licenseCheckService: LicenseCheckService,
|
||||
@Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
|
||||
@Inject(PAGE_ANALYTICS_SERVICE)
|
||||
private readonly pageAnalyticsService: IPageAnalyticsService,
|
||||
) {}
|
||||
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@@ -85,14 +79,6 @@ export class ShareController {
|
||||
throw new NotFoundException('Shared page not found');
|
||||
}
|
||||
|
||||
void this.pageAnalyticsService.track({
|
||||
pageId: shareData.page.id,
|
||||
workspaceId: workspace.id,
|
||||
spaceId: shareData.page.spaceId,
|
||||
shareId: shareData.share.id,
|
||||
userId: null,
|
||||
});
|
||||
|
||||
return {
|
||||
...shareData,
|
||||
features: this.licenseCheckService.resolveFeatures(
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { Kysely, sql } from 'kysely';
|
||||
|
||||
export async function up(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.createTable('page_analytics')
|
||||
.ifNotExists()
|
||||
.addColumn('id', 'uuid', (col) =>
|
||||
col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
|
||||
)
|
||||
.addColumn('workspace_id', 'uuid', (col) =>
|
||||
col.references('workspaces.id').onDelete('cascade').notNull(),
|
||||
)
|
||||
.addColumn('page_id', 'uuid', (col) =>
|
||||
col.references('pages.id').onDelete('cascade').notNull(),
|
||||
)
|
||||
.addColumn('space_id', 'uuid', (col) =>
|
||||
col.references('spaces.id').onDelete('cascade'),
|
||||
)
|
||||
.addColumn('user_id', 'uuid', (col) =>
|
||||
col.references('users.id').onDelete('set null'),
|
||||
)
|
||||
.addColumn('share_id', 'uuid')
|
||||
.addColumn('visitor_id', 'varchar', (col) => col.notNull())
|
||||
.addColumn('view_date', 'varchar', (col) => col.notNull())
|
||||
.addColumn('hits', 'int8', (col) => col.notNull().defaultTo(1))
|
||||
.addColumn('last_viewed_at', 'timestamptz', (col) =>
|
||||
col.notNull().defaultTo(sql`now()`),
|
||||
)
|
||||
.addColumn('created_at', 'timestamptz', (col) =>
|
||||
col.notNull().defaultTo(sql`now()`),
|
||||
)
|
||||
.execute();
|
||||
|
||||
await db.schema
|
||||
.createIndex('idx_page_analytics_workspace_page_date')
|
||||
.ifNotExists()
|
||||
.on('page_analytics')
|
||||
.columns(['workspace_id', 'page_id', 'view_date'])
|
||||
.execute();
|
||||
|
||||
await sql`
|
||||
CREATE UNIQUE INDEX IF NOT EXISTS
|
||||
uq_page_analytics_workspace_page_identity
|
||||
ON page_analytics (
|
||||
workspace_id,
|
||||
page_id,
|
||||
COALESCE(user_id::text, visitor_id)
|
||||
)
|
||||
`.execute(db);
|
||||
|
||||
await db.schema
|
||||
.alterTable('workspaces')
|
||||
.addColumn('page_analytics_retention_days', 'int8', (col) => col)
|
||||
.execute();
|
||||
}
|
||||
|
||||
export async function down(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.alterTable('workspaces')
|
||||
.dropColumn('page_analytics_retention_days')
|
||||
.execute();
|
||||
|
||||
await db.schema.dropTable('page_analytics').ifExists().execute();
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import { InjectKysely } from 'nestjs-kysely';
|
||||
import { ExpressionBuilder, sql } from 'kysely';
|
||||
import { jsonObjectFrom } from 'kysely/helpers/postgres';
|
||||
import { DB } from '@docmost/db/types/db';
|
||||
import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
|
||||
import { dbOrTx } from '@docmost/db/utils';
|
||||
import {
|
||||
@@ -8,6 +11,8 @@ import {
|
||||
UpdatableAttachment,
|
||||
} from '@docmost/db/types/entity.types';
|
||||
import { AttachmentType } from '../../../core/attachment/attachment.constants';
|
||||
import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
|
||||
import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
|
||||
|
||||
@Injectable()
|
||||
export class AttachmentRepo {
|
||||
@@ -89,6 +94,41 @@ export class AttachmentRepo {
|
||||
.execute();
|
||||
}
|
||||
|
||||
async findPageAttachments(pageId: string, pagination: PaginationOptions) {
|
||||
let query = this.db
|
||||
.selectFrom('attachments')
|
||||
.select(this.baseFields)
|
||||
.select((eb) => this.withCreator(eb))
|
||||
.where('pageId', '=', pageId)
|
||||
.where('type', '=', AttachmentType.File)
|
||||
.where('deletedAt', 'is', null);
|
||||
|
||||
if (pagination.query) {
|
||||
query = query.where(
|
||||
sql`f_unaccent(file_name)`,
|
||||
'ilike',
|
||||
sql`f_unaccent(${'%' + pagination.query + '%'})`,
|
||||
);
|
||||
}
|
||||
|
||||
return executeWithCursorPagination(query, {
|
||||
perPage: pagination.limit,
|
||||
cursor: pagination.cursor,
|
||||
beforeCursor: pagination.beforeCursor,
|
||||
fields: [{ expression: 'id', direction: 'desc' }],
|
||||
parseCursor: (cursor) => ({ id: cursor.id }),
|
||||
});
|
||||
}
|
||||
|
||||
withCreator(eb: ExpressionBuilder<DB, 'attachments'>) {
|
||||
return jsonObjectFrom(
|
||||
eb
|
||||
.selectFrom('users')
|
||||
.select(['users.id', 'users.name', 'users.avatarUrl'])
|
||||
.whereRef('users.id', '=', 'attachments.creatorId'),
|
||||
).as('creator');
|
||||
}
|
||||
|
||||
async findByIds(
|
||||
ids: string[],
|
||||
opts?: {
|
||||
|
||||
-16
@@ -437,7 +437,6 @@ export interface WorkspaceInvitations {
|
||||
}
|
||||
|
||||
export interface Workspaces {
|
||||
pageAnalyticsRetentionDays: Generated<number>;
|
||||
auditRetentionDays: Generated<number>;
|
||||
trashRetentionDays: Generated<number>;
|
||||
billingEmail: string | null;
|
||||
@@ -545,20 +544,6 @@ export interface PagePermissions {
|
||||
updatedAt: Generated<Timestamp>;
|
||||
}
|
||||
|
||||
export interface PageAnalytics {
|
||||
id: Generated<string>;
|
||||
workspaceId: string;
|
||||
pageId: string;
|
||||
spaceId: string | null;
|
||||
shareId: string | null;
|
||||
userId: string | null;
|
||||
visitorId: string;
|
||||
viewDate: string;
|
||||
hits: Generated<number>;
|
||||
lastViewedAt: Generated<Timestamp>;
|
||||
createdAt: Generated<Timestamp>;
|
||||
}
|
||||
|
||||
export interface PageVerifications {
|
||||
id: Generated<string>;
|
||||
pageId: string;
|
||||
@@ -677,7 +662,6 @@ export interface DB {
|
||||
pagePermissions: PagePermissions;
|
||||
pageHistory: PageHistory;
|
||||
pageLabels: PageLabels;
|
||||
pageAnalytics: PageAnalytics;
|
||||
pageVerifications: PageVerifications;
|
||||
pageVerifiers: PageVerifiers;
|
||||
pages: Pages;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Insertable, Selectable, Updateable } from 'kysely';
|
||||
import {
|
||||
AiChats,
|
||||
PageAnalytics as _PageAnalytics,
|
||||
AiChatMessages,
|
||||
Attachments,
|
||||
BaseProperties,
|
||||
@@ -108,10 +107,6 @@ export type PageHistory = Selectable<History>;
|
||||
export type InsertablePageHistory = Insertable<History>;
|
||||
export type UpdatablePageHistory = Updateable<Omit<History, 'id'>>;
|
||||
|
||||
export type PageAnalytics = Selectable<_PageAnalytics>;
|
||||
export type InsertablePageAnalytics = Insertable<_PageAnalytics>;
|
||||
export type UpdatablePageAnalytics = Updateable<Omit<_PageAnalytics, 'id'>>;
|
||||
|
||||
// Comment
|
||||
export type Comment = Selectable<Comments>;
|
||||
export type InsertableComment = Insertable<Comments>;
|
||||
|
||||
+1
-1
Submodule apps/server/src/ee updated: fc81ff7eb6...b38dc5ecd1
@@ -0,0 +1,13 @@
|
||||
export class UnableToInitialize extends Error {
|
||||
constructor(message: string) {
|
||||
super(`Unable to initialize the encryption service: ${message}`);
|
||||
this.name = 'UnableToInitialize';
|
||||
}
|
||||
}
|
||||
|
||||
export class UnableToDecrypt extends Error {
|
||||
constructor(reason: string) {
|
||||
super(`Unable to decrypt the ciphertext: ${reason}`);
|
||||
this.name = 'UnableToDecrypt';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Global, Module } from '@nestjs/common';
|
||||
import { EncryptionService } from './encryption.service';
|
||||
|
||||
@Global()
|
||||
@Module({
|
||||
providers: [EncryptionService],
|
||||
exports: [EncryptionService],
|
||||
})
|
||||
export class EncryptionModule {}
|
||||
@@ -0,0 +1,184 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { EncryptionService } from './encryption.service';
|
||||
import { UnableToDecrypt, UnableToInitialize } from './encryption.errors';
|
||||
import { EnvironmentService } from '../environment/environment.service';
|
||||
|
||||
const APP_SECRET = 'test-app-secret-with-plenty-of-entropy-1234567890';
|
||||
|
||||
const buildService = (appSecret: string | undefined) => {
|
||||
const env = { getAppSecret: () => appSecret } as EnvironmentService;
|
||||
return new EncryptionService(env);
|
||||
};
|
||||
|
||||
const decodeEnvelope = (encrypted: string) =>
|
||||
JSON.parse(Buffer.from(encrypted, 'base64').toString()) as {
|
||||
iv: string;
|
||||
authTag: string;
|
||||
cipherText: string;
|
||||
};
|
||||
|
||||
const encodeEnvelope = (envelope: {
|
||||
iv: string;
|
||||
authTag: string;
|
||||
cipherText: string;
|
||||
}) => Buffer.from(JSON.stringify(envelope)).toString('base64');
|
||||
|
||||
describe('EncryptionService', () => {
|
||||
let service: EncryptionService;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
providers: [
|
||||
EncryptionService,
|
||||
{
|
||||
provide: EnvironmentService,
|
||||
useValue: { getAppSecret: () => APP_SECRET },
|
||||
},
|
||||
],
|
||||
}).compile();
|
||||
|
||||
service = module.get<EncryptionService>(EncryptionService);
|
||||
});
|
||||
|
||||
describe('initialization', () => {
|
||||
it('compiles via Nest DI', () => {
|
||||
expect(service).toBeDefined();
|
||||
});
|
||||
|
||||
it('throws UnableToInitialize when APP_SECRET is missing', () => {
|
||||
expect(() => buildService(undefined)).toThrow(UnableToInitialize);
|
||||
expect(() => buildService('')).toThrow(UnableToInitialize);
|
||||
});
|
||||
});
|
||||
|
||||
describe('encrypt + decrypt round-trip', () => {
|
||||
it('decrypts back to the original plaintext', () => {
|
||||
const plaintext = 'hello world';
|
||||
const encrypted = service.encrypt(plaintext);
|
||||
expect(service.decrypt(encrypted)).toBe(plaintext);
|
||||
});
|
||||
|
||||
it('handles empty string', () => {
|
||||
const encrypted = service.encrypt('');
|
||||
expect(service.decrypt(encrypted)).toBe('');
|
||||
});
|
||||
|
||||
it('handles unicode (multi-byte UTF-8)', () => {
|
||||
const plaintext = 'héllo 🔐 世界';
|
||||
const encrypted = service.encrypt(plaintext);
|
||||
expect(service.decrypt(encrypted)).toBe(plaintext);
|
||||
});
|
||||
|
||||
it('handles long plaintext (>1 block)', () => {
|
||||
const plaintext = 'a'.repeat(10_000);
|
||||
const encrypted = service.encrypt(plaintext);
|
||||
expect(service.decrypt(encrypted)).toBe(plaintext);
|
||||
});
|
||||
|
||||
it('produces distinct ciphertexts for the same plaintext (random IV)', () => {
|
||||
const plaintext = 'same input';
|
||||
const a = service.encrypt(plaintext);
|
||||
const b = service.encrypt(plaintext);
|
||||
expect(a).not.toBe(b);
|
||||
expect(service.decrypt(a)).toBe(plaintext);
|
||||
expect(service.decrypt(b)).toBe(plaintext);
|
||||
});
|
||||
});
|
||||
|
||||
describe('cross-key isolation', () => {
|
||||
it('cannot decrypt ciphertext produced under a different APP_SECRET', () => {
|
||||
const other = buildService('totally-different-secret-value-9876543210');
|
||||
const encrypted = service.encrypt('secret');
|
||||
expect(() => other.decrypt(encrypted)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
});
|
||||
|
||||
describe('tamper detection', () => {
|
||||
it('rejects modified ciphertext', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
const tamperedCipher = Buffer.from(env.cipherText, 'base64');
|
||||
tamperedCipher[0] ^= 0x01;
|
||||
const tampered = encodeEnvelope({
|
||||
...env,
|
||||
cipherText: tamperedCipher.toString('base64'),
|
||||
});
|
||||
expect(() => service.decrypt(tampered)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
|
||||
it('rejects modified auth tag', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
const tamperedTag = Buffer.from(env.authTag, 'base64');
|
||||
tamperedTag[0] ^= 0x01;
|
||||
const tampered = encodeEnvelope({
|
||||
...env,
|
||||
authTag: tamperedTag.toString('base64'),
|
||||
});
|
||||
expect(() => service.decrypt(tampered)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
|
||||
it('rejects modified IV', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
const tamperedIV = Buffer.from(env.iv, 'base64');
|
||||
tamperedIV[0] ^= 0x01;
|
||||
const tampered = encodeEnvelope({
|
||||
...env,
|
||||
iv: tamperedIV.toString('base64'),
|
||||
});
|
||||
expect(() => service.decrypt(tampered)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
});
|
||||
|
||||
describe('malformed payloads', () => {
|
||||
it('rejects non-base64 garbage', () => {
|
||||
expect(() => service.decrypt('!!!not-valid-base64!!!')).toThrow(
|
||||
UnableToDecrypt,
|
||||
);
|
||||
});
|
||||
|
||||
it('rejects base64 of non-JSON', () => {
|
||||
const garbage = Buffer.from('not json at all').toString('base64');
|
||||
expect(() => service.decrypt(garbage)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
|
||||
it('rejects JSON missing required fields', () => {
|
||||
const partial = encodeEnvelope({
|
||||
iv: Buffer.alloc(12).toString('base64'),
|
||||
authTag: Buffer.alloc(16).toString('base64'),
|
||||
} as never);
|
||||
expect(() => service.decrypt(partial)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
|
||||
it('rejects wrong-length IV', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
const bad = encodeEnvelope({
|
||||
...env,
|
||||
iv: Buffer.alloc(8).toString('base64'),
|
||||
});
|
||||
expect(() => service.decrypt(bad)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
|
||||
it('rejects wrong-length auth tag', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
const bad = encodeEnvelope({
|
||||
...env,
|
||||
authTag: Buffer.alloc(8).toString('base64'),
|
||||
});
|
||||
expect(() => service.decrypt(bad)).toThrow(UnableToDecrypt);
|
||||
});
|
||||
});
|
||||
|
||||
describe('envelope format', () => {
|
||||
it('returns base64 of JSON envelope with iv (12B), authTag (16B), cipherText', () => {
|
||||
const encrypted = service.encrypt('hello');
|
||||
const env = decodeEnvelope(encrypted);
|
||||
expect(Buffer.from(env.iv, 'base64')).toHaveLength(12);
|
||||
expect(Buffer.from(env.authTag, 'base64')).toHaveLength(16);
|
||||
expect(Buffer.from(env.cipherText, 'base64').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
// https://github.com/nhedger/nestjs-encryption - MIT
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import {
|
||||
createCipheriv,
|
||||
createDecipheriv,
|
||||
createHash,
|
||||
randomBytes,
|
||||
} from 'node:crypto';
|
||||
import { UnableToDecrypt, UnableToInitialize } from './encryption.errors';
|
||||
import { EnvironmentService } from '../environment/environment.service';
|
||||
|
||||
const ALGORITHM = 'aes-256-gcm';
|
||||
const KEY_DOMAIN = 'docmost:encryption:v1';
|
||||
const IV_LENGTH = 12;
|
||||
const AUTH_TAG_LENGTH = 16;
|
||||
|
||||
type AEADPayload<TFormat = string | Buffer> = {
|
||||
iv: TFormat;
|
||||
authTag: TFormat;
|
||||
cipherText: TFormat;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class EncryptionService {
|
||||
private readonly key: Buffer;
|
||||
|
||||
constructor(environmentService: EnvironmentService) {
|
||||
const appSecret = environmentService.getAppSecret();
|
||||
if (!appSecret) {
|
||||
throw new UnableToInitialize('APP_SECRET is not set.');
|
||||
}
|
||||
this.key = createHash('sha256')
|
||||
.update(KEY_DOMAIN)
|
||||
.update(appSecret)
|
||||
.digest();
|
||||
}
|
||||
|
||||
public encrypt(plaintext: string): string {
|
||||
const iv = randomBytes(IV_LENGTH);
|
||||
const cipher = createCipheriv(ALGORITHM, this.key, iv);
|
||||
const cipherText = Buffer.concat([
|
||||
cipher.update(plaintext, 'utf8'),
|
||||
cipher.final(),
|
||||
]);
|
||||
const authTag = cipher.getAuthTag();
|
||||
|
||||
const aead: AEADPayload<string> = {
|
||||
iv: iv.toString('base64'),
|
||||
authTag: authTag.toString('base64'),
|
||||
cipherText: cipherText.toString('base64'),
|
||||
};
|
||||
|
||||
return Buffer.from(JSON.stringify(aead)).toString('base64');
|
||||
}
|
||||
|
||||
public decrypt(encrypted: string): string {
|
||||
try {
|
||||
const { iv, authTag, cipherText } = this.decodeAEADPayload(encrypted);
|
||||
const decipher = createDecipheriv(ALGORITHM, this.key, iv);
|
||||
decipher.setAuthTag(authTag);
|
||||
const decrypted = Buffer.concat([
|
||||
decipher.update(cipherText),
|
||||
decipher.final(),
|
||||
]);
|
||||
return decrypted.toString('utf8');
|
||||
} catch (e: unknown) {
|
||||
throw new UnableToDecrypt((e as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
private decodeAEADPayload(encodedPayload: string): AEADPayload<Buffer> {
|
||||
const payload = Buffer.from(encodedPayload, 'base64');
|
||||
|
||||
let deserializedPkg: Record<string, unknown>;
|
||||
try {
|
||||
deserializedPkg = JSON.parse(payload.toString());
|
||||
} catch {
|
||||
throw new Error('The decoded AEAD payload is not a valid JSON string.');
|
||||
}
|
||||
|
||||
for (const field of ['iv', 'authTag', 'cipherText']) {
|
||||
if (!Object.prototype.hasOwnProperty.call(deserializedPkg, field)) {
|
||||
throw new Error(`The AEAD payload is missing the ${field} field.`);
|
||||
}
|
||||
}
|
||||
|
||||
const iv = Buffer.from(deserializedPkg.iv as string, 'base64');
|
||||
if (iv.length !== IV_LENGTH) {
|
||||
throw new Error(
|
||||
`The decoded IV is not the correct length. Expected ${IV_LENGTH} bytes, got ${iv.length} bytes.`,
|
||||
);
|
||||
}
|
||||
|
||||
const authTag = Buffer.from(deserializedPkg.authTag as string, 'base64');
|
||||
if (authTag.length !== AUTH_TAG_LENGTH) {
|
||||
throw new Error(
|
||||
`The decoded auth tag is not the correct length. Expected ${AUTH_TAG_LENGTH} bytes, got ${authTag.length} bytes.`,
|
||||
);
|
||||
}
|
||||
|
||||
const cipherText = Buffer.from(
|
||||
deserializedPkg.cipherText as string,
|
||||
'base64',
|
||||
);
|
||||
|
||||
return { iv, authTag, cipherText };
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { Global, Module } from '@nestjs/common';
|
||||
import { PAGE_ANALYTICS_SERVICE, NoopPageAnalyticsService } from './page-analytics.service';
|
||||
|
||||
@Global()
|
||||
@Module({
|
||||
providers: [
|
||||
{
|
||||
provide: PAGE_ANALYTICS_SERVICE,
|
||||
useClass: NoopPageAnalyticsService,
|
||||
},
|
||||
],
|
||||
exports: [PAGE_ANALYTICS_SERVICE],
|
||||
})
|
||||
export class NoopPageAnalyticsModule {}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user