mirror of
https://github.com/docmost/docmost.git
synced 2026-08-20 02:54:11 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Philipinho
|
0501b334b5 |
@@ -51,17 +51,6 @@ DRAWIO_URL=
|
||||
# Gotenberg URL for server-side PDF export
|
||||
GOTENBERG_URL=
|
||||
|
||||
# Integration OAuth apps (create one per provider you enable)
|
||||
INTEGRATION_GITHUB_CLIENT_ID=
|
||||
INTEGRATION_GITHUB_CLIENT_SECRET=
|
||||
# Set only for GitHub Enterprise Server, e.g https://github.example.com
|
||||
INTEGRATION_GITHUB_BASE_URL=
|
||||
|
||||
INTEGRATION_GITLAB_CLIENT_ID=
|
||||
INTEGRATION_GITLAB_CLIENT_SECRET=
|
||||
# Set only for self-hosted GitLab, e.g https://gitlab.example.com
|
||||
INTEGRATION_GITLAB_BASE_URL=
|
||||
|
||||
DISABLE_TELEMETRY=false
|
||||
|
||||
# Allow other sites to embed Docmost in an iframe.
|
||||
|
||||
+1
-1
@@ -42,7 +42,7 @@ RUN chown -R node:node /app
|
||||
|
||||
USER node
|
||||
|
||||
RUN pnpm install --frozen-lockfile --prod && rm -rf /home/node/.cache/pnpm
|
||||
RUN pnpm install --frozen-lockfile --prod
|
||||
|
||||
RUN mkdir -p /app/data/storage
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
"Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.": "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.",
|
||||
"Are you sure you want to remove this user from the space? The user will lose all access to this space.": "Are you sure you want to remove this user from the space? The user will lose all access to this space.",
|
||||
"Are you sure you want to restore this version? Any changes not versioned will be lost.": "Are you sure you want to restore this version? Any changes not versioned will be lost.",
|
||||
"Assigned to {{name}}": "Assigned to {{name}}",
|
||||
"Can become members of groups and spaces in workspace": "Can become members of groups and spaces in workspace",
|
||||
"Can create and edit pages in space.": "Can create and edit pages in space.",
|
||||
"Can edit": "Can edit",
|
||||
@@ -23,7 +22,6 @@
|
||||
"Can view": "Can view",
|
||||
"Can view pages in space but not edit.": "Can view pages in space but not edit.",
|
||||
"Cancel": "Cancel",
|
||||
"Card": "Card",
|
||||
"Change email": "Change email",
|
||||
"Change password": "Change password",
|
||||
"Change photo": "Change photo",
|
||||
@@ -32,7 +30,6 @@
|
||||
"Choose your preferred interface language.": "Choose your preferred interface language.",
|
||||
"Choose your preferred page width.": "Choose your preferred page width.",
|
||||
"Confirm": "Confirm",
|
||||
"Connect to {{name}} to update": "Connect to {{name}} to update",
|
||||
"Copy as Markdown": "Copy as Markdown",
|
||||
"Copy link": "Copy link",
|
||||
"Create": "Create",
|
||||
@@ -44,12 +41,6 @@
|
||||
"Dark": "Dark",
|
||||
"Date": "Date",
|
||||
"Delete": "Delete",
|
||||
"Initiative": "Initiative",
|
||||
"Last modified by {{name}}": "Last modified by {{name}}",
|
||||
"Open in Slack": "Open in Slack",
|
||||
"Paid": "Paid",
|
||||
"Paste as": "Paste as",
|
||||
"Project": "Project",
|
||||
"Remove from page": "Remove from page",
|
||||
"Base options": "Base options",
|
||||
"Delete group": "Delete group",
|
||||
@@ -159,8 +150,6 @@
|
||||
"page": "page",
|
||||
"Page deleted successfully": "Page deleted successfully",
|
||||
"Page history": "Page history",
|
||||
"replies": "replies",
|
||||
"reply": "reply",
|
||||
"Select version": "Select version",
|
||||
"Highlight changes": "Highlight changes",
|
||||
"Page import is in progress. Please do not close this tab.": "Page import is in progress. Please do not close this tab.",
|
||||
@@ -195,8 +184,6 @@
|
||||
"Invitation sent": "Invitation sent",
|
||||
"Settings": "Settings",
|
||||
"Setup workspace": "Setup workspace",
|
||||
"show less": "show less",
|
||||
"show more": "show more",
|
||||
"Sign In": "Sign In",
|
||||
"Sign Up": "Sign Up",
|
||||
"Slug": "Slug",
|
||||
@@ -219,9 +206,7 @@
|
||||
"Theme": "Theme",
|
||||
"To change your email, you have to enter your password and new email.": "To change your email, you have to enter your password and new email.",
|
||||
"Toggle full page width": "Toggle full page width",
|
||||
"Toggle {{name}} integration": "Toggle {{name}} integration",
|
||||
"Unable to import pages. Please try again.": "Unable to import pages. Please try again.",
|
||||
"Unassigned": "Unassigned",
|
||||
"untitled": "untitled",
|
||||
"Untitled": "Untitled",
|
||||
"Updated successfully": "Updated successfully",
|
||||
@@ -402,8 +387,6 @@
|
||||
"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.",
|
||||
@@ -525,6 +508,11 @@
|
||||
"Allow viewers to comment": "Allow viewers to comment",
|
||||
"Allow viewers to add comments on pages in this space.": "Allow viewers to add comments on pages in this space.",
|
||||
"Toggle viewer comments": "Toggle viewer comments",
|
||||
"Hide comments from viewers": "Hide comments from viewers",
|
||||
"Viewers cannot see or add comments on pages in this space.": "Viewers cannot see or add comments on pages in this space.",
|
||||
"Toggle hide comments from viewers": "Toggle hide comments from viewers",
|
||||
"Turn off 'Allow viewers to comment' first": "Turn off 'Allow viewers to comment' first",
|
||||
"Turn off 'Hide comments from viewers' first": "Turn off 'Hide comments from viewers' first",
|
||||
"Public sharing is disabled at the workspace level": "Public sharing is disabled at the workspace level",
|
||||
"Prevent pages in this space from being shared publicly.": "Prevent pages in this space from being shared publicly.",
|
||||
"Page permissions": "Page permissions",
|
||||
@@ -1306,16 +1294,5 @@
|
||||
"{{count}} rows deleted_one": "1 row deleted",
|
||||
"{{count}} rows deleted_other": "{{count}} rows deleted",
|
||||
"{{count}} selected_one": "1 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}}"
|
||||
"{{count}} selected_other": "{{count}} selected"
|
||||
}
|
||||
|
||||
@@ -38,9 +38,6 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
|
||||
import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
||||
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||
import Integrations from "@/features/integration/pages/integrations.tsx";
|
||||
import Connections from "@/features/integration/pages/connections.tsx";
|
||||
import SlackLinkPage from "@/features/integration/pages/slack-link.tsx";
|
||||
import BasePage from "@/ee/base/pages/base-page.tsx";
|
||||
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
|
||||
import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
|
||||
@@ -90,7 +87,6 @@ export default function App() {
|
||||
<Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
|
||||
<Route path={"/share/:shareId"} element={<ShareRedirect />} />
|
||||
<Route path={"/p/:pageSlug"} element={<PageRedirect />} />
|
||||
<Route path={"/integrations/slack/link"} element={<SlackLinkPage />} />
|
||||
|
||||
<Route element={<Layout />}>
|
||||
<Route path={"/home"} element={<Home />} />
|
||||
@@ -120,7 +116,6 @@ export default function App() {
|
||||
element={<AccountPreferences />}
|
||||
/>
|
||||
<Route path={"account/api-keys"} element={<UserApiKeys />} />
|
||||
<Route path={"account/connections"} element={<Connections />} />
|
||||
<Route path={"workspace"} element={<WorkspaceSettings />} />
|
||||
<Route path={"members"} element={<WorkspaceMembers />} />
|
||||
<Route path={"api-keys"} element={<WorkspaceApiKeys />} />
|
||||
@@ -133,7 +128,6 @@ export default function App() {
|
||||
<Route path={"ai/mcp"} element={<AiSettings />} />
|
||||
<Route path={"audit"} element={<AuditLogs />} />
|
||||
<Route path={"verifications"} element={<VerifiedPages />} />
|
||||
<Route path={"integrations"} element={<Integrations />} />
|
||||
{!isCloud() && <Route path={"license"} element={<License />} />}
|
||||
{isCloud() && <Route path={"billing"} element={<Billing />} />}
|
||||
</Route>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function GithubIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function GitlabIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="93.97 97.52 192.05 184.99"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
fill="#e24329"
|
||||
d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04"
|
||||
/>
|
||||
<path
|
||||
fill="#fc6d26"
|
||||
d="m282.83 170.73-.27-.69a88.3 88.3 0 0 0-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0 0 16.1-56.08"
|
||||
/>
|
||||
<path
|
||||
fill="#fca326"
|
||||
d="m153.43 256.89 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91S209.55 244 190 229.25c-19.55 14.75-36.57 27.64-36.57 27.64"
|
||||
/>
|
||||
<path
|
||||
fill="#fc6d26"
|
||||
d="M132.58 185.84A88.2 88.2 0 0 0 97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82L190 229.21Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function GoogleDocsIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 47 65"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M29.375 0H4.406C1.983 0 0 1.994 0 4.432v56.136C0 63.006 1.983 65 4.406 65h38.188C45.017 65 47 63.006 47 60.568v-42.84L36.719 10.34z"
|
||||
/>
|
||||
<path
|
||||
fill="#A1C2FA"
|
||||
d="M29.375 0v13.295c0 2.449 1.972 4.432 4.406 4.432H47z"
|
||||
/>
|
||||
<path
|
||||
fill="#F1F1F1"
|
||||
d="M11.75 47.273h23.5v-2.955h-23.5zm0 5.909h17.625v-2.955H11.75zm0-20.682v2.955h23.5V32.5zm0 8.864h23.5v-2.955h-23.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,10 @@
|
||||
export { AirtableIcon } from "./airtable-icon.tsx";
|
||||
export { FigmaIcon } from "./figma-icon.tsx";
|
||||
export { GithubIcon } from "./github-icon.tsx";
|
||||
export { GitlabIcon } from "./gitlab-icon.tsx";
|
||||
export { GoogleDocsIcon } from "./google-docs-icon.tsx";
|
||||
export { GoogleDriveIcon } from "./google-drive-icon.tsx";
|
||||
export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
|
||||
export { JiraIcon } from "./jira-icon.tsx";
|
||||
export { LinearIcon } from "./linear-icon.tsx";
|
||||
export { TypeformIcon } from "./typeform-icon.tsx";
|
||||
export { VimeoIcon } from "./vimeo-icon.tsx";
|
||||
export { MiroIcon } from "./miro-icon.tsx";
|
||||
export { SlackIcon } from "./slack-icon.tsx";
|
||||
export { GoogleDriveIcon } from "./google-drive-icon.tsx";
|
||||
export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
|
||||
export { FramerIcon } from "./framer-icon.tsx";
|
||||
export { LoomIcon } from "./loom-icon.tsx";
|
||||
export { YoutubeIcon } from "./youtube-icon.tsx";
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function JiraIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="jira-a" x1="380.896" x2="279.145" y1="390.609" y2="282.574" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset=".176" stopColor="#0052cc" />
|
||||
<stop offset="1" stopColor="#2684ff" />
|
||||
</linearGradient>
|
||||
<linearGradient id="jira-b" x1="265.965" x2="148.117" y1="270.661" y2="152.607" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset=".176" stopColor="#0052cc" />
|
||||
<stop offset="1" stopColor="#2684ff" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill="#2684ff"
|
||||
d="M490.6 7.4H243.9c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V28.1c.1-11.7-9.2-20.7-21.3-20.7"
|
||||
/>
|
||||
<path
|
||||
fill="url(#jira-a)"
|
||||
d="M368.7 126.5H121.9c0 59.6 49.9 108 111.2 108h45.6v42.9c0 59.6 49.9 108 111.2 108V147.3c.2-11.1-9.1-20.8-21.2-20.8"
|
||||
/>
|
||||
<path
|
||||
fill="url(#jira-b)"
|
||||
d="M246.7 246.3H0c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V267.1c.1-11.8-9.9-20.8-21.3-20.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function LinearIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 100 100"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6684-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -8,20 +8,11 @@ export function MiroIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="3 2 395 395"
|
||||
viewBox="0 0 24 24"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
fill="#FFDD33"
|
||||
d="M3 100.754C3 46.2604 47.2435 2 101.754 2H299.246C353.756 2 398 46.2435 398 100.754V298.246C398 352.756 353.756 397 299.246 397H101.754C47.2435 397 3 352.756 3 298.246V100.754Z"
|
||||
/>
|
||||
<path
|
||||
fill="#1C1C1E"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M265.573 77.3491H229.74L259.629 129.85L193.906 77.3491H158.072L190.934 141.468L122.238 77.3491H86.4041L122.238 159.031L86.4041 322.377H122.238L190.934 147.396L158.072 322.377H193.906L259.629 135.693L229.74 322.377H265.573L331.297 118.232L265.573 77.4335V77.3491Z"
|
||||
/>
|
||||
d="M17.392 0H13.9L17 4.808 10.444 0H6.949l3.102 6.3L3.494 0H0l3.05 8.131L0 24h3.494L10.05 6.985 6.949 24h3.494L17 5.494 13.899 24h3.493L24 3.672 17.392 0z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import { rem } from '@mantine/core';
|
||||
|
||||
interface Props {
|
||||
size?: number | string;
|
||||
}
|
||||
|
||||
export function SlackIcon({ size }: Props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
style={{ width: rem(size), height: rem(size) }}
|
||||
>
|
||||
<path
|
||||
d="M107.9 323.6c0 29.7-24 53.8-53.8 53.8S.3 353.4.3 323.6c0-29.7 24-53.8 53.8-53.8h53.8zm26.9 0c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8V458c0 29.7-24 53.8-53.8 53.8s-53.8-24-53.8-53.8z"
|
||||
fill="#e01e5a"
|
||||
/>
|
||||
<path
|
||||
d="M188.6 107.7c-29.7 0-53.8-24-53.8-53.8S158.8.1 188.6.1s53.8 24 53.8 53.8v53.8zm0 27.3c29.7 0 53.8 24 53.8 53.8s-24 53.8-53.8 53.8H53.8C24 242.6 0 218.5 0 188.8S24 135 53.8 135z"
|
||||
fill="#36c5f0"
|
||||
/>
|
||||
<path
|
||||
d="M404.1 188.8c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8-24 53.8-53.8 53.8h-53.8zm-26.9 0c0 29.7-24 53.8-53.8 53.8-29.7 0-53.8-24-53.8-53.8V54c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8z"
|
||||
fill="#2eb67d"
|
||||
/>
|
||||
<path
|
||||
d="M323.4 404.3c29.7 0 53.8 24 53.8 53.8 0 29.7-24 53.8-53.8 53.8-29.7 0-53.8-24-53.8-53.8v-53.8zm0-26.9c-29.7 0-53.8-24-53.8-53.8s24-53.8 53.8-53.8h134.8c29.7 0 53.8 24 53.8 53.8 0 29.7-24 53.8-53.8 53.8z"
|
||||
fill="#ecb22e"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -11,11 +11,13 @@ import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
|
||||
import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
|
||||
import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
|
||||
import { useCanViewComments } from "@/features/comment/hooks/use-can-view-comments.ts";
|
||||
|
||||
export default function Aside() {
|
||||
const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
|
||||
const { t } = useTranslation();
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const canViewComments = useCanViewComments();
|
||||
const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
|
||||
|
||||
useEffect(() => {
|
||||
@@ -23,12 +25,18 @@ export default function Aside() {
|
||||
document.getElementById(ASIDE_PANEL_ID)?.focus();
|
||||
}, [isAsideOpen, tab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAsideOpen && tab === "comments" && !canViewComments) {
|
||||
setAsideState({ tab: "", isAsideOpen: false });
|
||||
}
|
||||
}, [isAsideOpen, tab, canViewComments, setAsideState]);
|
||||
|
||||
let title: string;
|
||||
let component: ReactNode;
|
||||
|
||||
switch (tab) {
|
||||
case "comments":
|
||||
component = <CommentListWithTabs />;
|
||||
component = canViewComments ? <CommentListWithTabs /> : null;
|
||||
title = "Comments";
|
||||
break;
|
||||
case "toc":
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
IconKey,
|
||||
IconWorld,
|
||||
IconSparkles,
|
||||
IconPlug,
|
||||
IconHistory,
|
||||
IconShieldCheck,
|
||||
} from "@tabler/icons-react";
|
||||
@@ -75,11 +74,6 @@ const groupedData: DataGroup[] = [
|
||||
path: "/settings/account/api-keys",
|
||||
feature: Feature.API_KEYS,
|
||||
},
|
||||
{
|
||||
label: "Connections",
|
||||
icon: IconPlug,
|
||||
path: "/settings/account/connections",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -131,12 +125,6 @@ const groupedData: DataGroup[] = [
|
||||
role: "owner",
|
||||
env: "selfhosted",
|
||||
},
|
||||
{
|
||||
label: "Integrations",
|
||||
icon: IconPlug,
|
||||
path: "/settings/integrations",
|
||||
role: "admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -255,7 +255,6 @@ export default function ChatInput({
|
||||
},
|
||||
content: "",
|
||||
editable: true,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
autofocus: autofocus ? "end" : false,
|
||||
|
||||
@@ -19,8 +19,8 @@ export const Feature = {
|
||||
SHARING_CONTROLS: 'sharing:controls',
|
||||
TEMPLATES: 'templates',
|
||||
VIEWER_COMMENTS: 'comment:viewer',
|
||||
HIDE_COMMENTS: 'comment:hide',
|
||||
PERSONAL_SPACES: 'spaces:personal',
|
||||
DOCX_EXPORT: 'export:docx',
|
||||
BASES: 'bases',
|
||||
INTEGRATIONS: 'integrations',
|
||||
} as const;
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Group, Text, Switch, Tooltip } from "@mantine/core";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ISpace } from "@/features/space/types/space.types.ts";
|
||||
import { useUpdateSpaceMutation } from "@/features/space/queries/space-query.ts";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature.ts";
|
||||
import { Feature } from "@/ee/features.ts";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
|
||||
|
||||
type SpaceHideCommentsToggleProps = {
|
||||
space: ISpace;
|
||||
};
|
||||
|
||||
export default function SpaceHideCommentsToggle({
|
||||
space,
|
||||
}: SpaceHideCommentsToggleProps) {
|
||||
const { t } = useTranslation();
|
||||
const hasHideComments = useHasFeature(Feature.HIDE_COMMENTS);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
const allowViewerCommentsEnabled =
|
||||
space.settings?.comments?.allowViewerComments === true;
|
||||
const isDisabled = !hasHideComments || allowViewerCommentsEnabled;
|
||||
const tooltipLabel = !hasHideComments
|
||||
? upgradeLabel
|
||||
: t("Turn off 'Allow viewers to comment' first");
|
||||
const [checked, setChecked] = useState(
|
||||
space.settings?.comments?.hideCommentsFromViewers === true,
|
||||
);
|
||||
const updateSpaceMutation = useUpdateSpaceMutation();
|
||||
|
||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.currentTarget.checked;
|
||||
try {
|
||||
await updateSpaceMutation.mutateAsync({
|
||||
spaceId: space.id,
|
||||
hideCommentsFromViewers: value,
|
||||
});
|
||||
setChecked(value);
|
||||
} catch {
|
||||
// error handled by mutation
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="md">{t("Hide comments from viewers")}</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("Viewers cannot see or add comments on pages in this space.")}
|
||||
</Text>
|
||||
</div>
|
||||
<Tooltip label={tooltipLabel} disabled={!isDisabled} refProp="rootRef">
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
disabled={isDisabled}
|
||||
aria-label={t("Toggle hide comments from viewers")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -17,7 +17,12 @@ export default function SpaceViewerCommentsToggle({
|
||||
const { t } = useTranslation();
|
||||
const hasViewerComments = useHasFeature(Feature.VIEWER_COMMENTS);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
const isDisabled = !hasViewerComments;
|
||||
const hideCommentsEnabled =
|
||||
space.settings?.comments?.hideCommentsFromViewers === true;
|
||||
const isDisabled = !hasViewerComments || hideCommentsEnabled;
|
||||
const tooltipLabel = !hasViewerComments
|
||||
? upgradeLabel
|
||||
: t("Turn off 'Hide comments from viewers' first");
|
||||
const [checked, setChecked] = useState(
|
||||
space.settings?.comments?.allowViewerComments === true,
|
||||
);
|
||||
@@ -45,7 +50,7 @@ export default function SpaceViewerCommentsToggle({
|
||||
</Text>
|
||||
</div>
|
||||
<Tooltip
|
||||
label={upgradeLabel}
|
||||
label={tooltipLabel}
|
||||
disabled={!isDisabled}
|
||||
refProp="rootRef"
|
||||
>
|
||||
|
||||
@@ -41,7 +41,6 @@ export default function ReadonlyTemplateEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={template.content}
|
||||
/>
|
||||
|
||||
@@ -87,7 +87,6 @@ export default function TemplateEditor() {
|
||||
const editor = useEditor({
|
||||
extensions: templateExtensions,
|
||||
content: "",
|
||||
textDirection: "auto",
|
||||
editorProps: {
|
||||
scrollThreshold: 80,
|
||||
scrollMargin: 80,
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,191 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
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,17 +3,7 @@ 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,5 +1,4 @@
|
||||
export {
|
||||
getPageAttachments,
|
||||
uploadIcon,
|
||||
uploadUserAvatar,
|
||||
uploadSpaceIcon,
|
||||
|
||||
@@ -15,15 +15,6 @@ 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,7 +103,6 @@ const CommentEditor = forwardRef(
|
||||
},
|
||||
content: defaultContent,
|
||||
editable,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
autofocus: (autofocus && "end") || false,
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { usePageQuery } from "@/features/page/queries/page-query.ts";
|
||||
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
||||
import { extractPageSlugId } from "@/lib";
|
||||
|
||||
export function useCanViewComments(): boolean {
|
||||
const { pageSlug } = useParams();
|
||||
const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
|
||||
const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
|
||||
|
||||
const canEdit = !page?.deletedAt && (page?.permissions?.canEdit ?? false);
|
||||
return (
|
||||
canEdit || space?.settings?.comments?.hideCommentsFromViewers !== true
|
||||
);
|
||||
}
|
||||
@@ -5,10 +5,6 @@ import { uploadPdfAction } from "../pdf/upload-pdf-action";
|
||||
import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
|
||||
import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
|
||||
import { Editor } from "@tiptap/core";
|
||||
import { matchIntegrationLink } from "@docmost/editor-ext";
|
||||
import { integrationPasteMenuKey } from "@/features/editor/extensions/integration-paste-menu";
|
||||
import { queryClient } from "@/main.tsx";
|
||||
import { Integration } from "@/features/integration/types/integration.types";
|
||||
import {
|
||||
getAttachmentInfo,
|
||||
uploadFile,
|
||||
@@ -26,16 +22,6 @@ const ATTACHMENT_NODE_TYPES = [
|
||||
|
||||
const ATTACHMENT_URL_RE = /\/api\/files\/([0-9a-f-]+)\//;
|
||||
|
||||
// Only installed providers get card treatment; anything else pastes as an
|
||||
// ordinary link. The cache is prefetched when the page editor mounts;
|
||||
// a cold cache also means ordinary link.
|
||||
function isIntegrationInstalled(provider: string): boolean {
|
||||
const installed = queryClient.getQueryData<Integration[]>([
|
||||
"installed-integrations",
|
||||
]);
|
||||
return Boolean(installed?.some((i) => i.type === provider));
|
||||
}
|
||||
|
||||
export const handlePaste = (
|
||||
editor: Editor,
|
||||
event: ClipboardEvent,
|
||||
@@ -44,59 +30,6 @@ export const handlePaste = (
|
||||
) => {
|
||||
const clipboardData = event.clipboardData.getData("text/plain");
|
||||
|
||||
const integrationMatch = matchIntegrationLink(clipboardData.trim());
|
||||
if (
|
||||
integrationMatch &&
|
||||
editor.state.selection.empty &&
|
||||
isIntegrationInstalled(integrationMatch.provider)
|
||||
) {
|
||||
event.preventDefault();
|
||||
const pastedUrl = clipboardData.trim();
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setIntegrationLink({
|
||||
url: pastedUrl,
|
||||
provider: integrationMatch.provider,
|
||||
})
|
||||
// Anchor the "Paste as" menu to the inserted node, in the SAME
|
||||
// transaction: BubbleMenu ignores meta-only transactions (it only
|
||||
// re-evaluates when the doc or selection changed). Locate the node via
|
||||
// the range this transaction's own steps touched, never by url, so a
|
||||
// duplicate of the same link elsewhere in the doc can't steal the menu.
|
||||
.command(({ tr }) => {
|
||||
let start: number | null = null;
|
||||
let end: number | null = null;
|
||||
tr.mapping.maps.forEach((map, index) => {
|
||||
const rest = tr.mapping.slice(index + 1);
|
||||
map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
|
||||
const mappedStart = rest.map(newStart, -1);
|
||||
const mappedEnd = rest.map(newEnd, 1);
|
||||
start = start === null ? mappedStart : Math.min(start, mappedStart);
|
||||
end = end === null ? mappedEnd : Math.max(end, mappedEnd);
|
||||
});
|
||||
});
|
||||
if (start === null || end === null) return true;
|
||||
|
||||
let pastedPos: number | null = null;
|
||||
tr.doc.nodesBetween(
|
||||
start,
|
||||
Math.min(end, tr.doc.content.size),
|
||||
(node, pos) => {
|
||||
if (node.type.name === "integrationLink") {
|
||||
pastedPos = pos;
|
||||
}
|
||||
},
|
||||
);
|
||||
if (pastedPos !== null) {
|
||||
tr.setMeta(integrationPasteMenuKey, { pos: pastedPos });
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.run();
|
||||
return true;
|
||||
}
|
||||
|
||||
if (INTERNAL_LINK_REGEX.test(clipboardData)) {
|
||||
// we have to do this validation here to allow the default link extension to takeover if needs be
|
||||
event.preventDefault();
|
||||
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
IconMathFunction,
|
||||
IconRotate2,
|
||||
IconSitemap,
|
||||
IconSuperscript,
|
||||
IconTable,
|
||||
IconTag,
|
||||
} from "@tabler/icons-react";
|
||||
@@ -271,12 +270,6 @@ 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>
|
||||
);
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
// Light-scheme text per hue, measured to pass 4.5:1 on the light-variant
|
||||
// badge background; hexes are darkened .9 shades for hues whose scale
|
||||
// never gets dark enough.
|
||||
const BADGE_TEXT_LIGHT: Record<string, string> = {
|
||||
dark: "var(--mantine-color-dark-9)",
|
||||
gray: "var(--mantine-color-gray-9)",
|
||||
red: "var(--mantine-color-red-9)",
|
||||
pink: "var(--mantine-color-pink-9)",
|
||||
grape: "var(--mantine-color-grape-9)",
|
||||
violet: "var(--mantine-color-violet-9)",
|
||||
indigo: "var(--mantine-color-indigo-9)",
|
||||
blue: "var(--mantine-color-blue-9)",
|
||||
cyan: "var(--mantine-color-cyan-9)",
|
||||
teal: "var(--mantine-color-teal-9)",
|
||||
green: "#277c38",
|
||||
lime: "#4e7e0b",
|
||||
yellow: "#ad5900",
|
||||
orange: "#c3410e",
|
||||
};
|
||||
|
||||
export function badgeTextColor(color?: string): string | undefined {
|
||||
if (!color) return undefined;
|
||||
const light = BADGE_TEXT_LIGHT[color];
|
||||
if (!light) return undefined;
|
||||
// Dark scheme keeps Mantine's own light-variant text.
|
||||
return `light-dark(${light}, var(--mantine-color-${color}-light-color))`;
|
||||
}
|
||||
|
||||
export function toBadgeColor(raw?: string): string {
|
||||
if (!raw) return "gray";
|
||||
const hex = raw.toLowerCase().replace("#", "");
|
||||
if (/^[0-9a-f]{6}$/.test(hex)) {
|
||||
const r = parseInt(hex.slice(0, 2), 16);
|
||||
const g = parseInt(hex.slice(2, 4), 16);
|
||||
const b = parseInt(hex.slice(4, 6), 16);
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const l = (max + min) / 2 / 255;
|
||||
if (max - min < 30) return l > 0.6 ? "gray" : "dark";
|
||||
if (r > g && r > b) return g > 160 ? "orange" : "red";
|
||||
if (g > r && g > b) return r > 160 ? "lime" : "green";
|
||||
if (b > r && b > g) return r > 100 ? "violet" : "blue";
|
||||
if (r > 200 && g > 200) return "yellow";
|
||||
if (r > 200 && b > 200) return "pink";
|
||||
if (g > 200 && b > 200) return "cyan";
|
||||
return "gray";
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
-65
@@ -1,65 +0,0 @@
|
||||
.card {
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: var(--mantine-color-gray-0);
|
||||
}
|
||||
|
||||
:global([data-mantine-color-scheme="dark"]) .card:hover {
|
||||
background-color: var(--mantine-color-dark-5);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 320px;
|
||||
object-fit: cover;
|
||||
background-color: var(--mantine-color-gray-0);
|
||||
}
|
||||
|
||||
:global([data-mantine-color-scheme="dark"]) .thumbnail {
|
||||
background-color: var(--mantine-color-dark-6);
|
||||
}
|
||||
|
||||
.mention {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
max-width: 100%;
|
||||
vertical-align: text-bottom;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
}
|
||||
|
||||
:global(.node-integrationMention) .mention {
|
||||
border-bottom: none !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mention:hover {
|
||||
background-color: var(--mantine-color-gray-0);
|
||||
}
|
||||
|
||||
:global([data-mantine-color-scheme="dark"]) .mention:hover {
|
||||
background-color: var(--mantine-color-dark-5);
|
||||
}
|
||||
|
||||
.mentionText {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--mantine-color-gray-4);
|
||||
text-underline-offset: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 340px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mentionIcon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
-473
@@ -1,473 +0,0 @@
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import {
|
||||
Card,
|
||||
Group,
|
||||
Text,
|
||||
Badge,
|
||||
Avatar,
|
||||
Skeleton,
|
||||
Anchor,
|
||||
Stack,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import { useCallback, useState, memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { getIntegrationIcon } from "@/features/integration/components/integration-icons";
|
||||
import { getOAuthAuthorizeUrl } from "@/features/integration/services/integration-service";
|
||||
import { timeAgo } from "@/lib/time";
|
||||
import { useUnfurl } from "./use-unfurl";
|
||||
import { badgeTextColor, toBadgeColor } from "./badge-color";
|
||||
import classes from "./integration-link-view.module.css";
|
||||
|
||||
const SLACK_TEXT_CLAMP_LINES = 4;
|
||||
|
||||
function SlackMessageCard({
|
||||
url,
|
||||
unfurlData,
|
||||
}: {
|
||||
url: string;
|
||||
unfurlData: Record<string, any>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const meta = unfurlData.metadata ?? {};
|
||||
const postedAt = meta.ts ? new Date(parseFloat(meta.ts) * 1000) : null;
|
||||
const text: string = unfurlData.description ?? "";
|
||||
const isLong =
|
||||
text.length > 280 || text.split("\n").length > SLACK_TEXT_CLAMP_LINES;
|
||||
|
||||
const footer = [
|
||||
meta.replyCount
|
||||
? `${meta.replyCount} ${meta.replyCount === 1 ? t("reply") : t("replies")}`
|
||||
: null,
|
||||
unfurlData.status,
|
||||
meta.teamName,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" • ");
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
||||
<Group gap="sm" wrap="nowrap" align="flex-start">
|
||||
<Avatar
|
||||
src={unfurlData.authorAvatarUrl}
|
||||
size={28}
|
||||
radius="xl"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{(unfurlData.author ?? "?").charAt(0)}
|
||||
</Avatar>
|
||||
|
||||
<Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{unfurlData.author}
|
||||
</Text>
|
||||
{postedAt && (
|
||||
<Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
|
||||
{timeAgo(postedAt)}
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{text && (
|
||||
<Text
|
||||
size="sm"
|
||||
lineClamp={expanded ? undefined : SLACK_TEXT_CLAMP_LINES}
|
||||
style={{ whiteSpace: "pre-wrap" }}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{isLong && (
|
||||
<Text
|
||||
size="xs"
|
||||
fw={600}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-expanded={expanded}
|
||||
style={{ cursor: "pointer", width: "fit-content" }}
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
setExpanded((v) => !v);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{expanded ? t("show less") : t("show more")}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{footer && (
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{footer}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Anchor
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label={t("Open in Slack")}
|
||||
style={{ flexShrink: 0, lineHeight: 0 }}
|
||||
>
|
||||
{getIntegrationIcon("slack", 18)}
|
||||
</Anchor>
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function JiraIssueCard({
|
||||
url,
|
||||
unfurlData,
|
||||
}: {
|
||||
url: string;
|
||||
unfurlData: Record<string, any>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const meta = unfurlData.metadata ?? {};
|
||||
|
||||
const infoLine = [
|
||||
meta.issueKey,
|
||||
unfurlData.author
|
||||
? t("Assigned to {{name}}", { name: unfurlData.author })
|
||||
: t("Unassigned"),
|
||||
meta.updatedAt
|
||||
? t("Updated {{time}}", { time: timeAgo(new Date(meta.updatedAt)) })
|
||||
: null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" • ");
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card
|
||||
className={classes.card}
|
||||
withBorder
|
||||
padding="sm"
|
||||
radius="sm"
|
||||
component="a"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
>
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
{unfurlData.authorAvatarUrl ? (
|
||||
<Avatar
|
||||
src={unfurlData.authorAvatarUrl}
|
||||
size={28}
|
||||
radius="xl"
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ flexShrink: 0 }}>{getIntegrationIcon("jira", 28)}</div>
|
||||
)}
|
||||
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{unfurlData.title}
|
||||
</Text>
|
||||
{unfurlData.status && (
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color={toBadgeColor(unfurlData.statusColor)}
|
||||
c={badgeTextColor(toBadgeColor(unfurlData.statusColor))}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{unfurlData.status}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Group gap={4} wrap="nowrap">
|
||||
{meta.issueTypeIconUrl && (
|
||||
<img
|
||||
src={meta.issueTypeIconUrl}
|
||||
width={14}
|
||||
height={14}
|
||||
alt=""
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{infoLine}
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<div style={{ flexShrink: 0, alignSelf: "center" }}>
|
||||
{getIntegrationIcon("jira", 18)}
|
||||
</div>
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function FigmaFileCard({
|
||||
url,
|
||||
unfurlData,
|
||||
}: {
|
||||
url: string;
|
||||
unfurlData: Record<string, any>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
// Figma thumbnail links are pre-signed and expire; drop the preview rather
|
||||
// than render a broken image.
|
||||
const [thumbnailFailed, setThumbnailFailed] = useState(false);
|
||||
const meta = unfurlData.metadata ?? {};
|
||||
const thumbnailUrl: string | undefined = meta.thumbnailUrl;
|
||||
const showThumbnail = Boolean(thumbnailUrl) && !thumbnailFailed;
|
||||
|
||||
const subtitle = [
|
||||
unfurlData.author
|
||||
? t("Last modified by {{name}}", { name: unfurlData.author })
|
||||
: unfurlData.description,
|
||||
meta.lastModified ? timeAgo(new Date(meta.lastModified)) : null,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" • ");
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card
|
||||
className={classes.card}
|
||||
withBorder
|
||||
padding="sm"
|
||||
radius="sm"
|
||||
component="a"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
>
|
||||
{showThumbnail && (
|
||||
<Card.Section withBorder>
|
||||
<img
|
||||
src={thumbnailUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className={classes.thumbnail}
|
||||
onError={() => setThumbnailFailed(true)}
|
||||
/>
|
||||
</Card.Section>
|
||||
)}
|
||||
|
||||
<Group gap="sm" wrap="nowrap" mt={showThumbnail ? "sm" : undefined}>
|
||||
<Avatar
|
||||
src={unfurlData.authorAvatarUrl}
|
||||
size={28}
|
||||
radius="xl"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{(unfurlData.author ?? unfurlData.title ?? "F").charAt(0)}
|
||||
</Avatar>
|
||||
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{unfurlData.title}
|
||||
</Text>
|
||||
{subtitle && (
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<div style={{ flexShrink: 0, alignSelf: "center" }}>
|
||||
{getIntegrationIcon("figma", 18)}
|
||||
</div>
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function IntegrationLinkView(props: any) {
|
||||
const { node } = props;
|
||||
const { url, provider } = node.attrs;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const unfurl = useUnfurl(url);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
|
||||
const needsConnection =
|
||||
unfurl.state === "needsConnection" ? unfurl.needsConnection : null;
|
||||
|
||||
const handleConnect = useCallback(
|
||||
async (event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!needsConnection) return;
|
||||
|
||||
setConnecting(true);
|
||||
try {
|
||||
const result = await getOAuthAuthorizeUrl({
|
||||
integrationId: needsConnection.integrationId,
|
||||
returnPath: window.location.pathname,
|
||||
});
|
||||
window.location.href = result.authorizationUrl;
|
||||
} catch (error) {
|
||||
setConnecting(false);
|
||||
notifications.show({
|
||||
message:
|
||||
error?.["response"]?.data?.message ||
|
||||
t("Failed to start OAuth connection"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
},
|
||||
[needsConnection, t],
|
||||
);
|
||||
|
||||
if (needsConnection) {
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
{getIntegrationIcon(provider, 28)}
|
||||
</div>
|
||||
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{needsConnection.title}
|
||||
</Text>
|
||||
{needsConnection.description && (
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
{needsConnection.description}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
size="xs"
|
||||
variant="filled"
|
||||
color="dark"
|
||||
loading={connecting}
|
||||
onClick={handleConnect}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{t("Connect to {{name}} to update", {
|
||||
name: needsConnection.integrationName,
|
||||
})}
|
||||
</Button>
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
if (unfurl.state === "loading") {
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
||||
<Group gap="sm">
|
||||
<Skeleton circle height={24} />
|
||||
<Stack gap={4} style={{ flex: 1 }}>
|
||||
<Skeleton height={14} width="60%" />
|
||||
<Skeleton height={10} width="80%" />
|
||||
</Stack>
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
if (unfurl.state !== "loaded") {
|
||||
// anonymous or error: a plain link card, no third-party data
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card className={classes.card} withBorder padding="sm" radius="sm">
|
||||
<Anchor href={url} target="_blank" rel="noopener" size="sm">
|
||||
{url}
|
||||
</Anchor>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const unfurlData = unfurl.data;
|
||||
|
||||
// metadata.ts marks legacy message unfurls stored before metadata.type existed.
|
||||
const slackMeta = provider === "slack" ? unfurlData.metadata : null;
|
||||
if (slackMeta?.type === "message" || (slackMeta && !slackMeta.type && slackMeta.ts)) {
|
||||
return <SlackMessageCard url={url} unfurlData={unfurlData} />;
|
||||
}
|
||||
|
||||
if (provider === "jira" && unfurlData.metadata?.issueKey) {
|
||||
return <JiraIssueCard url={url} unfurlData={unfurlData} />;
|
||||
}
|
||||
|
||||
if (provider === "figma") {
|
||||
return <FigmaFileCard url={url} unfurlData={unfurlData} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle="">
|
||||
<Card
|
||||
className={classes.card}
|
||||
withBorder
|
||||
padding="sm"
|
||||
radius="sm"
|
||||
component="a"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
>
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
{unfurlData.authorAvatarUrl ? (
|
||||
<Avatar src={unfurlData.authorAvatarUrl} size={28} radius="xl" style={{ flexShrink: 0 }} />
|
||||
) : (
|
||||
<div style={{ flexShrink: 0 }}>{getIntegrationIcon(provider, 28)}</div>
|
||||
)}
|
||||
|
||||
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Text size="sm" fw={600} truncate>
|
||||
{unfurlData.title}
|
||||
</Text>
|
||||
{unfurlData.status && (
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color={toBadgeColor(unfurlData.statusColor)}
|
||||
c={badgeTextColor(toBadgeColor(unfurlData.statusColor))}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{unfurlData.status}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{unfurlData.description && (
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
{unfurlData.description}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{provider && (
|
||||
<div style={{ flexShrink: 0, alignSelf: "center" }}>
|
||||
{getIntegrationIcon(provider, 18)}
|
||||
</div>
|
||||
)}
|
||||
</Group>
|
||||
</Card>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(IntegrationLinkView);
|
||||
-162
@@ -1,162 +0,0 @@
|
||||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { Avatar, Badge, Text } from "@mantine/core";
|
||||
import { memo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getIntegrationIcon } from "@/features/integration/components/integration-icons";
|
||||
import { useUnfurl } from "./use-unfurl";
|
||||
import { badgeTextColor, toBadgeColor } from "./badge-color";
|
||||
import classes from "./integration-link-view.module.css";
|
||||
|
||||
function shortUrl(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
return `${parsed.host}${parsed.pathname}`;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
function IntegrationMentionView(props: any) {
|
||||
const { node } = props;
|
||||
const { url, provider } = node.attrs;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const unfurl = useUnfurl(url);
|
||||
const data = unfurl.state === "loaded" ? unfurl.data : null;
|
||||
const meta = data?.metadata ?? {};
|
||||
const isSlackMessage =
|
||||
provider === "slack" && (meta.type === "message" || (!meta.type && meta.ts));
|
||||
const issueNumber = meta.iid ?? meta.number;
|
||||
const typeLabel =
|
||||
meta.type === "project"
|
||||
? t("Project")
|
||||
: meta.type === "initiative"
|
||||
? t("Initiative")
|
||||
: null;
|
||||
|
||||
const statusBadge = data?.status ? (
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color={toBadgeColor(data.statusColor)}
|
||||
c={badgeTextColor(toBadgeColor(data.statusColor))}
|
||||
className={classes.mentionIcon}
|
||||
>
|
||||
{data.status}
|
||||
</Badge>
|
||||
) : null;
|
||||
|
||||
let content;
|
||||
if (!data) {
|
||||
// anonymous / loading / error / needs-connection: a compact link chip
|
||||
content = (
|
||||
<>
|
||||
{getIntegrationIcon(provider, 14)}
|
||||
<span className={classes.mentionText}>{shortUrl(url)}</span>
|
||||
</>
|
||||
);
|
||||
} else if (isSlackMessage) {
|
||||
content = (
|
||||
<>
|
||||
<Avatar
|
||||
src={data.authorAvatarUrl}
|
||||
size={16}
|
||||
radius="xl"
|
||||
className={classes.mentionIcon}
|
||||
>
|
||||
{(data.author ?? "?").charAt(0)}
|
||||
</Avatar>
|
||||
{data.author && (
|
||||
<Text component="span" size="sm" c="dimmed">
|
||||
{data.author}
|
||||
</Text>
|
||||
)}
|
||||
<span className={classes.mentionText}>
|
||||
{(data.description ?? "").split("\n")[0] || shortUrl(url)}
|
||||
</span>
|
||||
{getIntegrationIcon("slack", 14)}
|
||||
{data.status && (
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="gray"
|
||||
c={badgeTextColor("gray")}
|
||||
tt="none"
|
||||
className={classes.mentionIcon}
|
||||
>
|
||||
{data.status}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else if (meta.issueKey) {
|
||||
// Jira: type icon leads, provider icon trails.
|
||||
content = (
|
||||
<>
|
||||
{meta.issueTypeIconUrl ? (
|
||||
<img
|
||||
src={meta.issueTypeIconUrl}
|
||||
width={14}
|
||||
height={14}
|
||||
alt=""
|
||||
className={classes.mentionIcon}
|
||||
/>
|
||||
) : (
|
||||
getIntegrationIcon(provider, 14)
|
||||
)}
|
||||
<Text component="span" size="sm" c="dimmed">
|
||||
{meta.issueKey}
|
||||
</Text>
|
||||
<span className={classes.mentionText}>{data.title}</span>
|
||||
{statusBadge}
|
||||
{meta.issueTypeIconUrl && getIntegrationIcon(provider, 14)}
|
||||
</>
|
||||
);
|
||||
} else if (issueNumber) {
|
||||
content = (
|
||||
<>
|
||||
{getIntegrationIcon(provider, 14)}
|
||||
<Text component="span" size="sm" c="dimmed">
|
||||
#{issueNumber}
|
||||
</Text>
|
||||
<span className={classes.mentionText}>{data.title}</span>
|
||||
{statusBadge}
|
||||
</>
|
||||
);
|
||||
} else if (typeLabel) {
|
||||
content = (
|
||||
<>
|
||||
{getIntegrationIcon(provider, 14)}
|
||||
<Text component="span" size="sm" c="dimmed">
|
||||
{typeLabel}
|
||||
</Text>
|
||||
<span className={classes.mentionText}>{data.title}</span>
|
||||
{statusBadge}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<>
|
||||
{getIntegrationIcon(provider, 14)}
|
||||
<span className={classes.mentionText}>{data.title || shortUrl(url)}</span>
|
||||
{statusBadge}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NodeViewWrapper as="span" style={{ display: "inline" }}>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
title={url}
|
||||
className={classes.mention}
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(IntegrationMentionView);
|
||||
-164
@@ -1,164 +0,0 @@
|
||||
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { Button, Paper, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
|
||||
import { integrationPasteMenuKey } from "@/features/editor/extensions/integration-paste-menu";
|
||||
|
||||
const INTEGRATION_NODE_TYPES = ["integrationLink", "integrationMention"];
|
||||
|
||||
export function IntegrationPasteMenu({ editor }: EditorMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const menuState = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return null;
|
||||
return integrationPasteMenuKey.getState(ctx.editor.state) ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
const findTarget = useCallback(() => {
|
||||
const state = integrationPasteMenuKey.getState(editor.state);
|
||||
if (!state) return null;
|
||||
const node = editor.state.doc.nodeAt(state.pos);
|
||||
if (!node || !INTEGRATION_NODE_TYPES.includes(node.type.name)) return null;
|
||||
return { node, pos: state.pos };
|
||||
}, [editor]);
|
||||
|
||||
const shouldShow = useCallback(() => Boolean(findTarget()), [findTarget]);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
const target = findTarget();
|
||||
if (!target) return undefined;
|
||||
const dom = editor.view.nodeDOM(target.pos) as HTMLElement | null;
|
||||
const domRect =
|
||||
dom?.getBoundingClientRect?.() ??
|
||||
posToDOMRect(
|
||||
editor.view,
|
||||
target.pos,
|
||||
target.pos + target.node.nodeSize,
|
||||
);
|
||||
return {
|
||||
getBoundingClientRect: () => domRect,
|
||||
getClientRects: () => [domRect],
|
||||
};
|
||||
}, [editor, findTarget]);
|
||||
|
||||
const dismiss = useCallback(() => {
|
||||
editor.view.dispatch(
|
||||
editor.state.tr.setMeta(integrationPasteMenuKey, null),
|
||||
);
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuState) return;
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") dismiss();
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [menuState, dismiss]);
|
||||
|
||||
const convert = useCallback(
|
||||
(target: "card" | "mention" | "url") => {
|
||||
const found = findTarget();
|
||||
if (!found) {
|
||||
dismiss();
|
||||
return;
|
||||
}
|
||||
const { node, pos } = found;
|
||||
const attrs = { ...node.attrs };
|
||||
const from = pos;
|
||||
const to = pos + node.nodeSize;
|
||||
const isBlock = node.type.name === "integrationLink";
|
||||
|
||||
// Always replace, even when the node is already in the requested form:
|
||||
// the menu closes via the doc change, and BubbleMenu never re-evaluates
|
||||
// on meta-only transactions, so a bare dismiss would leave it stuck.
|
||||
let content: Record<string, any>;
|
||||
if (target === "card") {
|
||||
content = { type: "integrationLink", attrs };
|
||||
} else if (target === "mention") {
|
||||
const mention = { type: "integrationMention", attrs };
|
||||
content = isBlock
|
||||
? {
|
||||
type: "paragraph",
|
||||
content: [mention, { type: "text", text: " " }],
|
||||
}
|
||||
: mention;
|
||||
} else {
|
||||
const linkText = {
|
||||
type: "text",
|
||||
text: attrs.url,
|
||||
marks: [{ type: "link", attrs: { href: attrs.url } }],
|
||||
};
|
||||
content = isBlock
|
||||
? { type: "paragraph", content: [linkText] }
|
||||
: linkText;
|
||||
}
|
||||
|
||||
editor
|
||||
.chain()
|
||||
.focus(undefined, { scrollIntoView: false })
|
||||
.deleteRange({ from, to })
|
||||
.insertContentAt(from, content)
|
||||
.run();
|
||||
},
|
||||
[editor, findTarget, dismiss],
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseBubbleMenu
|
||||
editor={editor}
|
||||
pluginKey="integration-paste-menu"
|
||||
updateDelay={0}
|
||||
getReferencedVirtualElement={getReferencedVirtualElement}
|
||||
options={{ placement: "bottom-start", flip: true }}
|
||||
shouldShow={shouldShow}
|
||||
>
|
||||
{/* Content is gated on the plugin state too: meta-only dismissals
|
||||
(Escape) are invisible to BubbleMenu's update cycle. */}
|
||||
{menuState ? (
|
||||
<Paper shadow="md" radius="md" withBorder p={4} miw={140}>
|
||||
<Text size="xs" c="dimmed" px={8} py={4}>
|
||||
{t("Paste as")}
|
||||
</Text>
|
||||
<Stack gap={2}>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="compact-sm"
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
onClick={() => convert("card")}
|
||||
>
|
||||
{t("Card")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="compact-sm"
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
onClick={() => convert("mention")}
|
||||
>
|
||||
{t("Mention")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="compact-sm"
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
onClick={() => convert("url")}
|
||||
>
|
||||
{t("URL")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</BaseBubbleMenu>
|
||||
);
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { renderHook, waitFor } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { createStore, Provider } from "jotai";
|
||||
import { ReactNode } from "react";
|
||||
import { useUnfurl } from "./use-unfurl";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { unfurlUrl } from "@/features/integration/services/integration-service";
|
||||
import {
|
||||
UnfurlNeedsConnection,
|
||||
UnfurlResult,
|
||||
} from "@/features/integration/types/integration.types";
|
||||
|
||||
vi.mock("@/features/integration/services/integration-service", () => ({
|
||||
unfurlUrl: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockedUnfurlUrl = vi.mocked(unfurlUrl);
|
||||
|
||||
const ISSUE_URL = "https://github.com/acme/repo/issues/42";
|
||||
|
||||
const loadedResult: UnfurlResult = {
|
||||
title: "Fix race condition in file watcher",
|
||||
url: ISSUE_URL,
|
||||
provider: "github",
|
||||
status: "open",
|
||||
};
|
||||
|
||||
const needsConnectionResult: UnfurlNeedsConnection = {
|
||||
needsConnection: true,
|
||||
integrationId: "int-1",
|
||||
integrationType: "github",
|
||||
integrationName: "GitHub",
|
||||
title: "GitHub link",
|
||||
description: "github.com/acme/repo/issues/42",
|
||||
};
|
||||
|
||||
function createWrapper(loggedIn: boolean) {
|
||||
const store = createStore();
|
||||
if (loggedIn) {
|
||||
store.set(currentUserAtom, { user: { id: "user-1" } } as any);
|
||||
}
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return ({ children }: { children: ReactNode }) => (
|
||||
<Provider store={store}>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
|
||||
describe("useUnfurl", () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
it("never fetches for anonymous viewers and reports anonymous", () => {
|
||||
const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
|
||||
wrapper: createWrapper(false),
|
||||
});
|
||||
|
||||
expect(result.current.state).toBe("anonymous");
|
||||
expect(mockedUnfurlUrl).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("starts loading then exposes the unfurl result", async () => {
|
||||
mockedUnfurlUrl.mockResolvedValue(loadedResult);
|
||||
|
||||
const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
|
||||
wrapper: createWrapper(true),
|
||||
});
|
||||
|
||||
expect(result.current.state).toBe("loading");
|
||||
await waitFor(() => expect(result.current.state).toBe("loaded"));
|
||||
expect(
|
||||
result.current.state === "loaded" && result.current.data,
|
||||
).toEqual(loadedResult);
|
||||
expect(mockedUnfurlUrl).toHaveBeenCalledWith({ url: ISSUE_URL });
|
||||
});
|
||||
|
||||
it("maps a needsConnection response without treating it as an error", async () => {
|
||||
mockedUnfurlUrl.mockResolvedValue(needsConnectionResult);
|
||||
|
||||
const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
|
||||
wrapper: createWrapper(true),
|
||||
});
|
||||
|
||||
await waitFor(() =>
|
||||
expect(result.current.state).toBe("needsConnection"),
|
||||
);
|
||||
expect(
|
||||
result.current.state === "needsConnection" &&
|
||||
result.current.needsConnection,
|
||||
).toEqual(needsConnectionResult);
|
||||
});
|
||||
|
||||
it("maps a null result (no matching provider) to error", async () => {
|
||||
mockedUnfurlUrl.mockResolvedValue(null);
|
||||
|
||||
const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
|
||||
wrapper: createWrapper(true),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.state).toBe("error"));
|
||||
});
|
||||
|
||||
it("maps a rejected request to error", async () => {
|
||||
mockedUnfurlUrl.mockRejectedValue(new Error("boom"));
|
||||
|
||||
const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
|
||||
wrapper: createWrapper(true),
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current.state).toBe("error"));
|
||||
});
|
||||
});
|
||||
@@ -1,47 +0,0 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { unfurlUrl } from "@/features/integration/services/integration-service";
|
||||
import {
|
||||
UnfurlNeedsConnection,
|
||||
UnfurlResult,
|
||||
} from "@/features/integration/types/integration.types";
|
||||
|
||||
const UNFURL_STALE_TIME = 5 * 60 * 1000; // mirrors the server-side Redis TTL
|
||||
|
||||
export type UnfurlState =
|
||||
| { state: "anonymous" }
|
||||
| { state: "loading" }
|
||||
| { state: "error" }
|
||||
| { state: "needsConnection"; needsConnection: UnfurlNeedsConnection }
|
||||
| { state: "loaded"; data: UnfurlResult };
|
||||
|
||||
// Resolves the unfurl per viewer at render time. Nothing is written back into
|
||||
// the document, so third-party permissions are enforced on every view:
|
||||
// unconnected viewers get needsConnection and anonymous viewers never fetch.
|
||||
export function useUnfurl(url: string): UnfurlState {
|
||||
const currentUser = useAtomValue(currentUserAtom);
|
||||
const isAuthenticated = Boolean(currentUser?.user);
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["unfurl", url],
|
||||
queryFn: () => unfurlUrl({ url }),
|
||||
enabled: isAuthenticated && Boolean(url),
|
||||
staleTime: UNFURL_STALE_TIME,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
if (!isAuthenticated || !url) {
|
||||
return { state: "anonymous" };
|
||||
}
|
||||
if (query.isPending) {
|
||||
return { state: "loading" };
|
||||
}
|
||||
if (query.isError || !query.data) {
|
||||
return { state: "error" };
|
||||
}
|
||||
if ("needsConnection" in query.data) {
|
||||
return { state: "needsConnection", needsConnection: query.data };
|
||||
}
|
||||
return { state: "loaded", data: query.data };
|
||||
}
|
||||
@@ -30,7 +30,6 @@ import {
|
||||
IconTag,
|
||||
IconMoodSmile,
|
||||
IconRotate2,
|
||||
IconSuperscript,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
CommandProps,
|
||||
@@ -178,16 +177,6 @@ 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,7 +40,6 @@ export default function TransclusionContent({ content }: Props) {
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={content as any}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
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";
|
||||
@@ -57,8 +56,6 @@ import {
|
||||
Indent,
|
||||
UniqueID,
|
||||
SharedStorage,
|
||||
IntegrationLink,
|
||||
IntegrationMention,
|
||||
Columns,
|
||||
Column,
|
||||
Status,
|
||||
@@ -66,9 +63,6 @@ import {
|
||||
TransclusionReference,
|
||||
TableView,
|
||||
BaseEmbed as BaseEmbedNode,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
randomElement,
|
||||
@@ -97,9 +91,6 @@ import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-v
|
||||
import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
|
||||
import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
|
||||
import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
|
||||
import IntegrationLinkView from "@/features/editor/components/integration-link/integration-link-view.tsx";
|
||||
import IntegrationMentionView from "@/features/editor/components/integration-link/integration-mention-view.tsx";
|
||||
import { IntegrationPasteMenuExtension } from "@/features/editor/extensions/integration-paste-menu";
|
||||
import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx";
|
||||
import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx";
|
||||
import { BaseEmbedView } from "@/features/editor/components/base-embed/base-embed-view.tsx";
|
||||
@@ -141,7 +132,6 @@ lowlight.register("scala", scala);
|
||||
// @ts-ignore
|
||||
export const mainExtensions = [
|
||||
StarterKit.configure({
|
||||
document: false,
|
||||
heading: false,
|
||||
undoRedo: false,
|
||||
link: false,
|
||||
@@ -153,9 +143,6 @@ 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
|
||||
@@ -216,8 +203,7 @@ export const mainExtensions = [
|
||||
parentName === "tableCell" ||
|
||||
parentName === "tableHeader" ||
|
||||
parentName === "callout" ||
|
||||
parentName === "blockquote" ||
|
||||
parentName === "footnote"
|
||||
parentName === "blockquote"
|
||||
) {
|
||||
return i18n.t("Write...");
|
||||
}
|
||||
@@ -392,13 +378,6 @@ export const mainExtensions = [
|
||||
Subpages.configure({
|
||||
view: SubpagesView,
|
||||
}),
|
||||
IntegrationLink.configure({
|
||||
view: IntegrationLinkView,
|
||||
}),
|
||||
IntegrationMention.configure({
|
||||
view: IntegrationMentionView,
|
||||
}),
|
||||
IntegrationPasteMenuExtension,
|
||||
Status.configure({
|
||||
view: StatusView,
|
||||
}),
|
||||
@@ -438,9 +417,6 @@ export const mainExtensions = [
|
||||
}).configure(),
|
||||
Columns,
|
||||
Column,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
AutoJoiner.configure({
|
||||
elementsToJoin: [],
|
||||
}),
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Extension } from "@tiptap/core";
|
||||
import { Plugin, PluginKey } from "@tiptap/pm/state";
|
||||
|
||||
export type IntegrationPasteMenuState = { pos: number } | null;
|
||||
|
||||
export const integrationPasteMenuKey = new PluginKey<IntegrationPasteMenuState>(
|
||||
"integrationPasteMenu",
|
||||
);
|
||||
|
||||
// Holds the position of a just-pasted integration node so the "Paste as"
|
||||
// menu can anchor to it. Any other edit or selection change dismisses it.
|
||||
export const IntegrationPasteMenuExtension = Extension.create({
|
||||
name: "integrationPasteMenu",
|
||||
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
new Plugin({
|
||||
key: integrationPasteMenuKey,
|
||||
state: {
|
||||
init: (): IntegrationPasteMenuState => null,
|
||||
apply(tr, prev): IntegrationPasteMenuState {
|
||||
const meta = tr.getMeta(integrationPasteMenuKey);
|
||||
if (meta !== undefined) return meta;
|
||||
if (!prev) return null;
|
||||
// Clicking or typing elsewhere dismisses.
|
||||
if (tr.selectionSet) return null;
|
||||
// Structural follow-ups (unique-id assignment, trailing node)
|
||||
// keep the menu anchored: remap and re-validate the position.
|
||||
if (tr.docChanged) {
|
||||
const pos = tr.mapping.map(prev.pos);
|
||||
const node = tr.doc.nodeAt(pos);
|
||||
const isIntegrationNode =
|
||||
node &&
|
||||
(node.type.name === "integrationLink" ||
|
||||
node.type.name === "integrationMention");
|
||||
return isIntegrationNode ? { pos } : null;
|
||||
}
|
||||
return prev;
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
@@ -75,8 +75,6 @@ import { useEditorScroll } from "./hooks/use-editor-scroll";
|
||||
import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
|
||||
import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
|
||||
import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
|
||||
import { IntegrationPasteMenu } from "@/features/editor/components/integration-link/integration-paste-menu.tsx";
|
||||
import { getInstalledIntegrations } from "@/features/integration/services/integration-service";
|
||||
import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
@@ -84,6 +82,8 @@ import {
|
||||
getCollabSocket,
|
||||
releaseCollabSocket,
|
||||
} from "@/features/editor/collab-socket";
|
||||
import clsx from "clsx";
|
||||
import { useCanViewComments } from "@/features/comment/hooks/use-can-view-comments.ts";
|
||||
|
||||
interface PageEditorProps {
|
||||
pageId: string;
|
||||
@@ -198,6 +198,7 @@ function CollabPageEditor({
|
||||
const { pageSlug } = useParams();
|
||||
const slugId = extractPageSlugId(pageSlug);
|
||||
const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
|
||||
const canViewComments = useCanViewComments();
|
||||
const canScroll = useCallback(
|
||||
() => Boolean(isComponentMounted.current && editorRef.current),
|
||||
[isComponentMounted],
|
||||
@@ -251,7 +252,6 @@ function CollabPageEditor({
|
||||
{
|
||||
extensions,
|
||||
editable,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
@@ -328,15 +328,6 @@ function CollabPageEditor({
|
||||
[pageId, editable, extensions],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// Warm the cache the paste handler reads to decide whether a pasted
|
||||
// integration url becomes a card or stays an ordinary link.
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["installed-integrations"],
|
||||
queryFn: getInstalledIntegrations,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (editor && !editor.isDestroyed) {
|
||||
// @ts-ignore
|
||||
@@ -384,6 +375,7 @@ function CollabPageEditor({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!canViewComments) return;
|
||||
document.addEventListener("ACTIVE_COMMENT_EVENT", handleActiveCommentEvent);
|
||||
return () => {
|
||||
document.removeEventListener(
|
||||
@@ -391,7 +383,7 @@ function CollabPageEditor({
|
||||
handleActiveCommentEvent,
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
}, [canViewComments]);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveCommentId(null);
|
||||
@@ -442,7 +434,13 @@ function CollabPageEditor({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="editor-container" style={{ position: "relative" }}>
|
||||
<div
|
||||
className={clsx(
|
||||
"editor-container",
|
||||
!canViewComments && "comments-hidden",
|
||||
)}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<div ref={menuContainerRef}>
|
||||
<EditorContent editor={editor} />
|
||||
|
||||
@@ -465,7 +463,6 @@ function CollabPageEditor({
|
||||
<ExcalidrawMenu editor={editor} />
|
||||
<DrawioMenu editor={editor} />
|
||||
<ColumnsMenu editor={editor} />
|
||||
<IntegrationPasteMenu editor={editor} />
|
||||
</div>
|
||||
)}
|
||||
{editor && !editorIsEditable && (editable || canComment) && (
|
||||
@@ -493,18 +490,21 @@ function StaticPageEditor({
|
||||
content: any;
|
||||
ariaLabel: string;
|
||||
}) {
|
||||
const canViewComments = useCanViewComments();
|
||||
|
||||
return (
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={mainExtensions}
|
||||
content={content}
|
||||
editorProps={{
|
||||
attributes: {
|
||||
"aria-label": ariaLabel,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div className={clsx(!canViewComments && "comments-hidden")}>
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
extensions={mainExtensions}
|
||||
content={content}
|
||||
editorProps={{
|
||||
attributes: {
|
||||
"aria-label": ariaLabel,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -85,7 +85,6 @@ export default function ReadonlyPageEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={titleExtensions}
|
||||
content={title}
|
||||
></EditorProvider>
|
||||
@@ -94,7 +93,6 @@ export default function ReadonlyPageEditor({
|
||||
<EditorProvider
|
||||
editable={false}
|
||||
immediatelyRender={true}
|
||||
textDirection="auto"
|
||||
extensions={extensions}
|
||||
content={content}
|
||||
onCreate={({ editor }) => {
|
||||
|
||||
@@ -315,3 +315,8 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-hidden .ProseMirror .comment-mark {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
.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,4 +18,3 @@
|
||||
@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: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
|
||||
@@ -86,7 +86,6 @@ export function TitleEditor({
|
||||
},
|
||||
editable: editable,
|
||||
content: title,
|
||||
textDirection: "auto",
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Group, Text, Button, Box } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IntegrationDefinition, UserConnection } from "../types/integration.types";
|
||||
import { getIntegrationIcon } from "./integration-icons";
|
||||
|
||||
type ConnectionRowProps = {
|
||||
definition: IntegrationDefinition;
|
||||
connection?: UserConnection;
|
||||
onConnect: (type: string) => void;
|
||||
onDisconnect: (integrationId: string) => void;
|
||||
disconnectingId?: string;
|
||||
};
|
||||
|
||||
export default function ConnectionRow({
|
||||
definition,
|
||||
connection,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
disconnectingId,
|
||||
}: ConnectionRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const isWorkspaceScoped = definition.oauth?.connectionScope === 'workspace';
|
||||
|
||||
return (
|
||||
<Box
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
{getIntegrationIcon(definition.type, 28)}
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
{definition.name}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{definition.description}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
|
||||
{isWorkspaceScoped ? (
|
||||
<>
|
||||
{connection ? (
|
||||
<Text size="xs" c="green">
|
||||
{t("Linked")}
|
||||
{connection.providerUserId && ` as @${connection.providerUserId}`}
|
||||
</Text>
|
||||
) : (
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Use")} <code>/docmost help</code> {t("in")} {definition.name} {t("to link your account.")}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{connection ? (
|
||||
<>
|
||||
{connection.invalidatedAt ? (
|
||||
<>
|
||||
<Text size="xs" c="orange">
|
||||
{t("Connection expired")}
|
||||
</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="orange"
|
||||
onClick={() => onConnect(definition.type)}
|
||||
>
|
||||
{t("Reconnect")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Text size="xs" c="green">
|
||||
{t("Connected")}
|
||||
{connection.providerUserId && ` (${connection.providerUserId})`}
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => onDisconnect(connection.integrationId)}
|
||||
loading={disconnectingId === connection.integrationId}
|
||||
>
|
||||
{t("Disconnect")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
onClick={() => onConnect(definition.type)}
|
||||
>
|
||||
{t("Connect")}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
import {
|
||||
FigmaIcon,
|
||||
GithubIcon,
|
||||
GitlabIcon,
|
||||
GoogleDocsIcon,
|
||||
JiraIcon,
|
||||
LinearIcon,
|
||||
SlackIcon,
|
||||
} from "@/components/icons";
|
||||
import { IconPuzzle } from "@tabler/icons-react";
|
||||
|
||||
const integrationIconMap: Record<string, (size: number) => ReactNode> = {
|
||||
github: (size) => <GithubIcon size={size} />,
|
||||
gitlab: (size) => <GitlabIcon size={size} />,
|
||||
slack: (size) => <SlackIcon size={size} />,
|
||||
linear: (size) => <LinearIcon size={size} />,
|
||||
jira: (size) => <JiraIcon size={size} />,
|
||||
figma: (size) => <FigmaIcon size={size} />,
|
||||
google_docs: (size) => <GoogleDocsIcon size={size} />,
|
||||
};
|
||||
|
||||
export function getIntegrationIcon(
|
||||
type: string,
|
||||
size: number,
|
||||
): ReactNode {
|
||||
const renderIcon = integrationIconMap[type];
|
||||
if (renderIcon) return renderIcon(size);
|
||||
return <IconPuzzle size={size} stroke={1.5} />;
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Box, Group, Skeleton, Stack } from "@mantine/core";
|
||||
|
||||
const TITLE_WIDTHS = [64, 52, 60, 44, 58, 96, 56];
|
||||
const DESCRIPTION_WIDTHS = [300, 250, 320, 180, 290, 270, 260];
|
||||
|
||||
type IntegrationListSkeletonProps = {
|
||||
rows?: number;
|
||||
withBadges?: boolean;
|
||||
};
|
||||
|
||||
export default function IntegrationListSkeleton({
|
||||
rows = 7,
|
||||
withBadges = true,
|
||||
}: IntegrationListSkeletonProps) {
|
||||
return (
|
||||
<Stack gap={0} aria-hidden="true">
|
||||
{Array.from({ length: rows }, (_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
<Skeleton height={28} circle style={{ flexShrink: 0 }} />
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap" h={20}>
|
||||
<Skeleton
|
||||
height={12}
|
||||
width={TITLE_WIDTHS[index % TITLE_WIDTHS.length]}
|
||||
radius="xs"
|
||||
/>
|
||||
{withBadges && (
|
||||
<>
|
||||
<Skeleton height={16} width={52} radius="xl" />
|
||||
<Skeleton height={16} width={52} radius="xl" />
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
<Group h={17}>
|
||||
<Skeleton
|
||||
height={10}
|
||||
width={
|
||||
DESCRIPTION_WIDTHS[index % DESCRIPTION_WIDTHS.length]
|
||||
}
|
||||
maw="100%"
|
||||
radius="xs"
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Skeleton
|
||||
height={30}
|
||||
width={64}
|
||||
radius="sm"
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
</Group>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import {
|
||||
Group,
|
||||
Text,
|
||||
Badge,
|
||||
Button,
|
||||
Box,
|
||||
Stack,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
IntegrationDefinition,
|
||||
Integration,
|
||||
} from "../types/integration.types";
|
||||
import { getIntegrationIcon } from "./integration-icons";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
|
||||
|
||||
type IntegrationRowProps = {
|
||||
definition: IntegrationDefinition;
|
||||
installation?: Integration;
|
||||
onInstall: (type: string) => void;
|
||||
onUninstall: (integrationId: string) => void;
|
||||
};
|
||||
|
||||
export default function IntegrationRow({
|
||||
definition,
|
||||
installation,
|
||||
onInstall,
|
||||
onUninstall,
|
||||
}: IntegrationRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const isInstalled = !!installation;
|
||||
const hasAccess = useHasFeature(Feature.INTEGRATIONS);
|
||||
const locked = !!definition.requiresLicense && !hasAccess;
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
|
||||
return (
|
||||
<Box
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
{getIntegrationIcon(definition.type, 28)}
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Text size="sm" fw={500}>
|
||||
{definition.name}
|
||||
</Text>
|
||||
{locked && (
|
||||
<Badge size="xs" variant="light" color="violet">
|
||||
{t("Paid")}
|
||||
</Badge>
|
||||
)}
|
||||
{definition.capabilities.map((cap) => (
|
||||
<Badge key={cap} size="xs" variant="light">
|
||||
{cap}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{definition.description}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
|
||||
{isInstalled ? (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => onUninstall(installation.id)}
|
||||
>
|
||||
{t("Uninstall")}
|
||||
</Button>
|
||||
) : (
|
||||
<Tooltip label={upgradeLabel} disabled={!locked}>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
disabled={locked}
|
||||
onClick={() => onInstall(definition.type)}
|
||||
>
|
||||
{t("Install")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import { Text, Alert, Stack } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import ConnectionRow from "../components/connection-row";
|
||||
import IntegrationListSkeleton from "../components/integration-list-skeleton";
|
||||
import {
|
||||
useAvailableIntegrations,
|
||||
useInstalledIntegrations,
|
||||
useMyConnections,
|
||||
useDisconnectIntegration,
|
||||
} from "../queries/integration-query";
|
||||
import * as integrationService from "../services/integration-service";
|
||||
|
||||
export default function Connections() {
|
||||
const { t } = useTranslation();
|
||||
const { data: available, isLoading: loadingAvailable } =
|
||||
useAvailableIntegrations();
|
||||
const { data: installed, isLoading: loadingInstalled } =
|
||||
useInstalledIntegrations();
|
||||
const { data: myConnections, isLoading: loadingConnections } =
|
||||
useMyConnections();
|
||||
const disconnectMutation = useDisconnectIntegration();
|
||||
|
||||
const isLoading = loadingAvailable || loadingInstalled || loadingConnections;
|
||||
|
||||
const handleConnect = async (type: string) => {
|
||||
const integration = installed?.find((i) => i.type === type);
|
||||
if (!integration) return;
|
||||
|
||||
try {
|
||||
const result = await integrationService.getOAuthAuthorizeUrl({
|
||||
integrationId: integration.id,
|
||||
});
|
||||
window.location.href = result.authorizationUrl;
|
||||
} catch (error) {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to start OAuth connection"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnect = (integrationId: string) => {
|
||||
disconnectMutation.mutate({ integrationId });
|
||||
};
|
||||
|
||||
// Only the row being disconnected shows a loader; isPending alone is shared by every row.
|
||||
const disconnectingId = disconnectMutation.isPending
|
||||
? disconnectMutation.variables?.integrationId
|
||||
: undefined;
|
||||
|
||||
const error = new URLSearchParams(window.location.search).get("error");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Connections")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Connections")} />
|
||||
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
{t("Manage the apps you have connected to your account.")}
|
||||
</Text>
|
||||
|
||||
{error === "oauth_failed" && (
|
||||
<Alert color="red" mb="md">
|
||||
{t("OAuth connection failed. Please try again.")}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<IntegrationListSkeleton rows={3} withBadges={false} />
|
||||
) : !available?.length ? (
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No integrations available.")}
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{available
|
||||
.filter((def) => {
|
||||
if (!def.capabilities.includes("oauth")) return false;
|
||||
return installed?.some((i) => i.type === def.type);
|
||||
})
|
||||
.map((def) => {
|
||||
const connection = myConnections?.find(
|
||||
(c) => c.type === def.type,
|
||||
);
|
||||
|
||||
return (
|
||||
<ConnectionRow
|
||||
key={def.type}
|
||||
definition={def}
|
||||
connection={connection}
|
||||
onConnect={handleConnect}
|
||||
onDisconnect={handleDisconnect}
|
||||
disconnectingId={disconnectingId}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
import { Text, Alert, Stack } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCallback } from "react";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import IntegrationRow from "../components/integration-row";
|
||||
import IntegrationListSkeleton from "../components/integration-list-skeleton";
|
||||
import {
|
||||
useAvailableIntegrations,
|
||||
useInstalledIntegrations,
|
||||
useInstallIntegration,
|
||||
useUninstallIntegration,
|
||||
} from "../queries/integration-query";
|
||||
import {
|
||||
getOAuthAuthorizeUrl,
|
||||
getOAuthInstallUrl,
|
||||
} from "../services/integration-service";
|
||||
import { Integration } from "../types/integration.types";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
export default function Integrations() {
|
||||
const { t } = useTranslation();
|
||||
const { data: available, isLoading: loadingAvailable } =
|
||||
useAvailableIntegrations();
|
||||
const { data: installed, isLoading: loadingInstalled } =
|
||||
useInstalledIntegrations();
|
||||
const installMutation = useInstallIntegration();
|
||||
const uninstallMutation = useUninstallIntegration();
|
||||
|
||||
const handleInstall = useCallback(
|
||||
async (type: string) => {
|
||||
const definition = available?.find((d) => d.type === type);
|
||||
|
||||
// Workspace-scoped (Slack): the install row is only persisted when the
|
||||
// OAuth callback succeeds. Skip the upfront install API call entirely.
|
||||
if (definition?.oauth?.connectionScope === "workspace") {
|
||||
try {
|
||||
const { authorizationUrl } = await getOAuthInstallUrl({ type });
|
||||
window.location.href = authorizationUrl;
|
||||
} catch (err: any) {
|
||||
notifications.show({
|
||||
message:
|
||||
err?.response?.data?.message ?? t("Failed to start installation"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Per-user OAuth providers (GitLab, Jira, GitHub, ...): create the
|
||||
// integration row, then send the installing admin straight into their
|
||||
// own OAuth so they leave with a working connection. Other members
|
||||
// connect for themselves from /settings/account/connections.
|
||||
let integration: Integration;
|
||||
try {
|
||||
integration = await installMutation.mutateAsync({ type });
|
||||
} catch {
|
||||
return; // the mutation reports its own failure
|
||||
}
|
||||
|
||||
if (!definition?.capabilities?.includes("oauth")) return;
|
||||
|
||||
try {
|
||||
const { authorizationUrl } = await getOAuthAuthorizeUrl({
|
||||
integrationId: integration.id,
|
||||
returnPath: "/settings/integrations",
|
||||
});
|
||||
window.location.href = authorizationUrl;
|
||||
} catch (err: any) {
|
||||
// The integration stays installed; the admin can connect later.
|
||||
notifications.show({
|
||||
message:
|
||||
err?.response?.data?.message ??
|
||||
t("Failed to start OAuth connection"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
},
|
||||
[installMutation, available, t],
|
||||
);
|
||||
|
||||
const handleUninstall = useCallback(
|
||||
(integrationId: string) => {
|
||||
uninstallMutation.mutate({ integrationId });
|
||||
},
|
||||
[uninstallMutation],
|
||||
);
|
||||
|
||||
const isLoading = loadingAvailable || loadingInstalled;
|
||||
const error = new URLSearchParams(window.location.search).get("error");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Integrations")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Integrations")} />
|
||||
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
{t("Manage workspace integrations.")}
|
||||
</Text>
|
||||
|
||||
{error === "oauth_failed" && (
|
||||
<Alert color="red" mb="md">
|
||||
{t("OAuth connection failed. Please try again.")}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<IntegrationListSkeleton />
|
||||
) : !available?.length ? (
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No integrations available.")}
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{available.map((def) => {
|
||||
const installation = installed?.find((i) => i.type === def.type);
|
||||
return (
|
||||
<IntegrationRow
|
||||
key={def.type}
|
||||
definition={def}
|
||||
installation={installation}
|
||||
onInstall={handleInstall}
|
||||
onUninstall={handleUninstall}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||
import { Alert, Button, Card, Group, Loader, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtomValue } from "jotai";
|
||||
import {
|
||||
decodeSlackLinkState,
|
||||
confirmSlackLink,
|
||||
SlackLinkStateInfo,
|
||||
} from "../services/slack-link-service";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import APP_ROUTE from "@/lib/app-route";
|
||||
|
||||
export default function SlackLinkPage() {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const state = searchParams.get("state");
|
||||
const currentUser = useAtomValue(currentUserAtom);
|
||||
|
||||
const [info, setInfo] = useState<SlackLinkStateInfo | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [done, setDone] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser) {
|
||||
const redirectPath = window.location.pathname + window.location.search;
|
||||
navigate(`${APP_ROUTE.AUTH.LOGIN}?redirect=${encodeURIComponent(redirectPath)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state) {
|
||||
setError(t("Missing state parameter"));
|
||||
return;
|
||||
}
|
||||
|
||||
decodeSlackLinkState(state)
|
||||
.then(setInfo)
|
||||
.catch((e) => setError(e?.response?.data?.message ?? e.message));
|
||||
}, [state, t, currentUser, navigate]);
|
||||
|
||||
async function onConfirm() {
|
||||
if (!state) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await confirmSlackLink(state);
|
||||
setDone(true);
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.data?.message ?? e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (done) {
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Stack>
|
||||
<Text fw={600}>{t("Connected")}</Text>
|
||||
<Text c="dimmed">{t("You can close this tab and return to Slack.")}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Alert color="red" title={t("Could not link account")}>
|
||||
{error}
|
||||
</Alert>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!info || !currentUser) {
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", marginTop: 80 }}>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Stack>
|
||||
<Text fw={600}>{t("Link your Docmost account to Slack")}</Text>
|
||||
<Text>
|
||||
{t("Connect Docmost account")}{" "}
|
||||
<b>{currentUser.user.email}</b>{" "}
|
||||
{t("to Slack user")} <b>@{info.slackUserName}</b>
|
||||
{info.slackTeamName && (
|
||||
<>
|
||||
{" "}
|
||||
{t("in")} <b>{info.slackTeamName}</b>
|
||||
</>
|
||||
)}
|
||||
?
|
||||
</Text>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => window.close()}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button onClick={onConfirm} loading={submitting}>
|
||||
{t("Confirm")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import * as integrationService from "../services/integration-service";
|
||||
|
||||
export function useAvailableIntegrations() {
|
||||
return useQuery({
|
||||
queryKey: ["available-integrations"],
|
||||
queryFn: integrationService.getAvailableIntegrations,
|
||||
});
|
||||
}
|
||||
|
||||
export function useInstalledIntegrations() {
|
||||
return useQuery({
|
||||
queryKey: ["installed-integrations"],
|
||||
queryFn: integrationService.getInstalledIntegrations,
|
||||
});
|
||||
}
|
||||
|
||||
export function useInstallIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.installIntegration,
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Integration installed successfully") });
|
||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to install integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUninstallIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.uninstallIntegration,
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
message: t("Integration uninstalled successfully"),
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to uninstall integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useMyConnections() {
|
||||
return useQuery({
|
||||
queryKey: ["my-connections"],
|
||||
queryFn: integrationService.getMyConnections,
|
||||
});
|
||||
}
|
||||
|
||||
export function useConnectionStatus(integrationId: string | undefined) {
|
||||
return useQuery({
|
||||
queryKey: ["integration-connection", integrationId],
|
||||
queryFn: () =>
|
||||
integrationService.getConnectionStatus({
|
||||
integrationId: integrationId!,
|
||||
}),
|
||||
enabled: !!integrationId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useDisconnectIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.disconnectIntegration,
|
||||
onSuccess: (_data, variables) => {
|
||||
notifications.show({ message: t("Integration disconnected") });
|
||||
qc.invalidateQueries({
|
||||
queryKey: ["integration-connection", variables.integrationId],
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["my-connections"] });
|
||||
// removeQueries, not invalidate: refetchOnMount false leaves invalidated inactive queries unrefreshed
|
||||
qc.removeQueries({ queryKey: ["unfurl"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to disconnect integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import api from "@/lib/api-client";
|
||||
import {
|
||||
IntegrationDefinition,
|
||||
Integration,
|
||||
ConnectionStatus,
|
||||
UserConnection,
|
||||
UnfurlResult,
|
||||
UnfurlNeedsConnection,
|
||||
} from "../types/integration.types";
|
||||
|
||||
export async function getAvailableIntegrations(): Promise<
|
||||
IntegrationDefinition[]
|
||||
> {
|
||||
const req = await api.post<IntegrationDefinition[]>(
|
||||
"/integrations/available",
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getInstalledIntegrations(): Promise<Integration[]> {
|
||||
const req = await api.post<Integration[]>("/integrations/list");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function installIntegration(data: {
|
||||
type: string;
|
||||
}): Promise<Integration> {
|
||||
const req = await api.post<Integration>("/integrations/install", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function uninstallIntegration(data: {
|
||||
integrationId: string;
|
||||
}): Promise<void> {
|
||||
await api.post("/integrations/uninstall", data);
|
||||
}
|
||||
|
||||
export async function getMyConnections(): Promise<UserConnection[]> {
|
||||
const req = await api.post<UserConnection[]>("/integrations/connections/mine");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getConnectionStatus(data: {
|
||||
integrationId: string;
|
||||
}): Promise<ConnectionStatus> {
|
||||
const req = await api.post<ConnectionStatus>(
|
||||
"/integrations/connection/status",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getOAuthAuthorizeUrl(data: {
|
||||
integrationId: string;
|
||||
returnPath?: string;
|
||||
}): Promise<{ authorizationUrl: string }> {
|
||||
const req = await api.post<{ authorizationUrl: string }>(
|
||||
"/integrations/oauth/authorize",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* For workspace-scoped providers: returns the authorize URL WITHOUT creating
|
||||
* the integration row. The row is created atomically when the OAuth callback
|
||||
* succeeds; a cancelled OAuth leaves no half-installed state.
|
||||
*/
|
||||
export async function getOAuthInstallUrl(data: {
|
||||
type: string;
|
||||
}): Promise<{ authorizationUrl: string }> {
|
||||
const req = await api.post<{ authorizationUrl: string }>(
|
||||
"/integrations/oauth/install",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function disconnectIntegration(data: {
|
||||
integrationId: string;
|
||||
}): Promise<void> {
|
||||
await api.post("/integrations/oauth/disconnect", data);
|
||||
}
|
||||
|
||||
export async function unfurlUrl(data: {
|
||||
url: string;
|
||||
}): Promise<UnfurlResult | UnfurlNeedsConnection | null> {
|
||||
const req = await api.post<{
|
||||
data: UnfurlResult | UnfurlNeedsConnection | null;
|
||||
}>("/integrations/unfurl", data);
|
||||
return req.data.data;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import api from "@/lib/api-client";
|
||||
|
||||
export type SlackLinkStateInfo = {
|
||||
slackUserName: string;
|
||||
slackUserId: string;
|
||||
slackTeamId: string;
|
||||
slackTeamName: string | null;
|
||||
integrationWorkspaceId: string | undefined;
|
||||
};
|
||||
|
||||
export async function decodeSlackLinkState(
|
||||
state: string,
|
||||
): Promise<SlackLinkStateInfo> {
|
||||
const req = await api.post<SlackLinkStateInfo>(
|
||||
"/integrations/slack/link/state",
|
||||
{ state },
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function confirmSlackLink(state: string): Promise<void> {
|
||||
await api.post("/integrations/slack/link", { state });
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
export type IntegrationCapability = "oauth" | "unfurl" | "actions" | "webhooks";
|
||||
|
||||
export type OAuthConfig = {
|
||||
authUrl: string;
|
||||
tokenUrl: string;
|
||||
scopes: string[];
|
||||
connectionScope?: 'workspace' | 'user';
|
||||
};
|
||||
|
||||
export type IntegrationDefinition = {
|
||||
type: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
capabilities: IntegrationCapability[];
|
||||
oauth?: OAuthConfig;
|
||||
requiresLicense?: boolean;
|
||||
};
|
||||
|
||||
export type Integration = {
|
||||
id: string;
|
||||
workspaceId: string;
|
||||
type: string;
|
||||
settings: Record<string, any> | null;
|
||||
installedById: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type ConnectionStatus = {
|
||||
connected: boolean;
|
||||
providerUserId?: string;
|
||||
};
|
||||
|
||||
export type UserConnection = {
|
||||
integrationId: string;
|
||||
type: string;
|
||||
providerUserId: string | null;
|
||||
connectedAt: string;
|
||||
invalidatedAt: string | null;
|
||||
};
|
||||
|
||||
export type UnfurlResult = {
|
||||
title: string;
|
||||
description?: string;
|
||||
url: string;
|
||||
provider: string;
|
||||
providerIcon?: string;
|
||||
status?: string;
|
||||
statusColor?: string;
|
||||
author?: string;
|
||||
authorAvatarUrl?: string;
|
||||
metadata?: Record<string, any>;
|
||||
};
|
||||
|
||||
// Returned when the link's provider needs a per-user connection the
|
||||
// requesting user has not authorized yet.
|
||||
export type UnfurlNeedsConnection = {
|
||||
needsConnection: true;
|
||||
integrationId: string;
|
||||
integrationType: string;
|
||||
integrationName: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
};
|
||||
@@ -6,13 +6,4 @@ 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 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,
|
||||
);
|
||||
export const diffCountsAtom = atom<DiffCounts | null>(null);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.history {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--mantine-spacing-md);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
||||
|
||||
@mixin hover {
|
||||
@@ -12,28 +12,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -99,8 +77,3 @@
|
||||
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,7 +31,6 @@ export function HistoryEditor({
|
||||
const editor = useEditor({
|
||||
extensions: mainExtensions,
|
||||
editable: false,
|
||||
textDirection: "auto",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -171,6 +170,7 @@ export function HistoryEditor({
|
||||
}
|
||||
|
||||
const total = addedCount + deletedCount;
|
||||
// @ts-ignore
|
||||
setDiffCounts({ added: addedCount, deleted: deletedCount, total });
|
||||
|
||||
editor.setOptions({
|
||||
|
||||
@@ -1,21 +1,10 @@
|
||||
import {
|
||||
Text,
|
||||
Group,
|
||||
UnstyledButton,
|
||||
Avatar,
|
||||
Tooltip,
|
||||
ActionIcon,
|
||||
Checkbox,
|
||||
Menu,
|
||||
} from "@mantine/core";
|
||||
import { IconDots } from "@tabler/icons-react";
|
||||
import { Text, Group, UnstyledButton, Avatar, Tooltip } from "@mantine/core";
|
||||
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;
|
||||
|
||||
@@ -26,13 +15,6 @@ 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({
|
||||
@@ -42,24 +24,10 @@ 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(() => {
|
||||
if (compareMode) {
|
||||
onToggleCompare(historyItem.id);
|
||||
} else {
|
||||
onSelect(historyItem.id, index);
|
||||
}
|
||||
}, [compareMode, onToggleCompare, onSelect, historyItem.id, index]);
|
||||
onSelect(historyItem.id, index);
|
||||
}, [onSelect, historyItem.id, index]);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
onHover?.(historyItem.id, index);
|
||||
@@ -69,115 +37,63 @@ const HistoryItem = memo(function HistoryItem({
|
||||
const hasContributors = contributors && contributors.length > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(classes.history, { [classes.active]: isActive })}
|
||||
<UnstyledButton
|
||||
p="xs"
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={onHoverEnd}
|
||||
className={clsx(classes.history, { [classes.active]: isActive })}
|
||||
>
|
||||
{compareMode && (
|
||||
<Checkbox
|
||||
size="xs"
|
||||
className={classes.compareCheckbox}
|
||||
checked={isChecked}
|
||||
disabled={isCheckboxDisabled}
|
||||
onChange={() => onToggleCompare(historyItem.id)}
|
||||
aria-label={t("Select version from {{date}}", { date })}
|
||||
/>
|
||||
)}
|
||||
<Text size="sm">{formattedDate(new Date(historyItem.createdAt))}</Text>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
))}
|
||||
{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}
|
||||
/>
|
||||
>
|
||||
<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}>
|
||||
{historyItem.lastUpdatedBy?.name}
|
||||
{contributors[0].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>
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
|
||||
name={historyItem.lastUpdatedBy?.name}
|
||||
/>
|
||||
<Text size="sm" c="dimmed" lineClamp={1}>
|
||||
{historyItem.lastUpdatedBy?.name}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -6,12 +6,8 @@ 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 {
|
||||
@@ -36,9 +32,6 @@ 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,
|
||||
@@ -86,58 +79,10 @@ function HistoryList({ pageId }: Props) {
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(id: string, index: number) => {
|
||||
setComparePair(null);
|
||||
setActiveHistoryId(id);
|
||||
setActiveHistoryPrevId(historyItems[index + 1]?.id ?? "");
|
||||
},
|
||||
[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],
|
||||
[historyItems, setActiveHistoryId, setActiveHistoryPrevId],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -193,16 +138,6 @@ 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 }} />}
|
||||
@@ -213,44 +148,22 @@ function HistoryList({ pageId }: Props) {
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{compareMode ? (
|
||||
{canRestore && (
|
||||
<>
|
||||
<Divider />
|
||||
<Group p="xs" wrap="nowrap">
|
||||
<Button
|
||||
variant="default"
|
||||
size="compact-md"
|
||||
onClick={handleCancelCompare}
|
||||
onClick={() => setHistoryModalOpen(false)}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
size="compact-md"
|
||||
disabled={compareSelection.length !== 2}
|
||||
onClick={handleConfirmCompare}
|
||||
>
|
||||
{t("Compare")}
|
||||
<Button size="compact-md" onClick={confirmRestore}>
|
||||
{t("Restore")}
|
||||
</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,6 +1,5 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
CloseButton,
|
||||
Group,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
@@ -13,20 +12,17 @@ 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 { useMemo, useRef } from "react";
|
||||
import { 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;
|
||||
@@ -40,28 +36,6 @@ 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 } =
|
||||
@@ -76,25 +50,6 @@ 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%"
|
||||
@@ -102,18 +57,11 @@ export default function HistoryModalBody({ pageId }: Props) {
|
||||
viewportRef={scrollViewportRef}
|
||||
>
|
||||
<div className={classes.sidebarRightSection}>
|
||||
{comparePair ? (
|
||||
<HistoryView
|
||||
historyId={comparePair.newerId}
|
||||
prevHistoryId={comparePair.olderId}
|
||||
/>
|
||||
) : (
|
||||
activeHistoryId && <HistoryView />
|
||||
)}
|
||||
{activeHistoryId && <HistoryView />}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{(comparePair || (activeHistoryId && activeHistoryPrevId)) && (
|
||||
{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,29 +7,21 @@ import {
|
||||
activeHistoryPrevIdAtom,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
|
||||
interface Props {
|
||||
historyId?: string;
|
||||
prevHistoryId?: string;
|
||||
}
|
||||
|
||||
function HistoryView({ historyId, prevHistoryId }: Props) {
|
||||
function HistoryView() {
|
||||
const { t } = useTranslation();
|
||||
const activeId = useAtomValue(activeHistoryIdAtom);
|
||||
const activePrevId = useAtomValue(activeHistoryPrevIdAtom);
|
||||
|
||||
const resolvedId = historyId ?? activeId;
|
||||
const resolvedPrevId = prevHistoryId ?? activePrevId;
|
||||
const historyId = useAtomValue(activeHistoryIdAtom);
|
||||
const prevHistoryId = useAtomValue(activeHistoryPrevIdAtom);
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading: isLoadingCurrent,
|
||||
isError: isErrorCurrent,
|
||||
} = usePageHistoryQuery(resolvedId);
|
||||
} = usePageHistoryQuery(historyId);
|
||||
const {
|
||||
data: prevData,
|
||||
isLoading: isLoadingPrev,
|
||||
isError: isErrorPrev,
|
||||
} = usePageHistoryQuery(resolvedPrevId);
|
||||
} = usePageHistoryQuery(prevHistoryId);
|
||||
|
||||
if (isLoadingCurrent || isLoadingPrev) {
|
||||
return <></>;
|
||||
|
||||
@@ -3,45 +3,22 @@ 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, diff counts, and compare state.
|
||||
* Compare state also resets on unmount so reopening the modal starts clean.
|
||||
* Clears active selection and diff counts.
|
||||
*/
|
||||
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);
|
||||
resetCompare();
|
||||
|
||||
return resetCompare;
|
||||
}, [
|
||||
pageId,
|
||||
setActiveHistoryId,
|
||||
setActiveHistoryPrevId,
|
||||
setDiffCounts,
|
||||
setCompareMode,
|
||||
setCompareSelection,
|
||||
setComparePair,
|
||||
]);
|
||||
}, [pageId, setActiveHistoryId, setActiveHistoryPrevId, setDiffCounts]);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Text } from "@mantine/core";
|
||||
@@ -9,8 +9,7 @@ import {
|
||||
activeHistoryIdAtom,
|
||||
historyAtoms,
|
||||
} from "@/features/page-history/atoms/history-atoms";
|
||||
import { fetchPageHistory } from "@/features/page-history/queries/page-history-query";
|
||||
import { IPageHistory } from "@/features/page-history/types/page.types";
|
||||
import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
|
||||
import {
|
||||
pageEditorAtom,
|
||||
titleEditorAtom,
|
||||
@@ -26,6 +25,8 @@ 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);
|
||||
@@ -39,66 +40,47 @@ export function useHistoryRestore() {
|
||||
SpaceCaslSubject.Page,
|
||||
);
|
||||
|
||||
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;
|
||||
}
|
||||
const handleRestore = useCallback(() => {
|
||||
if (!activeHistoryData) return;
|
||||
if (
|
||||
!mainEditor ||
|
||||
mainEditor.isDestroyed ||
|
||||
!mainEditorTitle ||
|
||||
mainEditorTitle.isDestroyed
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
!mainEditor ||
|
||||
mainEditor.isDestroyed ||
|
||||
!mainEditorTitle ||
|
||||
mainEditorTitle.isDestroyed
|
||||
) {
|
||||
return;
|
||||
}
|
||||
mainEditorTitle
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(activeHistoryData.title, { emitUpdate: true })
|
||||
.run();
|
||||
|
||||
mainEditorTitle
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(historyData.title, { emitUpdate: true })
|
||||
.run();
|
||||
mainEditor
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(activeHistoryData.content)
|
||||
.run();
|
||||
|
||||
mainEditor
|
||||
.chain()
|
||||
.clearContent()
|
||||
.setContent(historyData.content)
|
||||
.run();
|
||||
setHistoryModalOpen(false);
|
||||
notifications.show({ message: t("Successfully restored") });
|
||||
}, [activeHistoryData, mainEditor, mainEditorTitle, setHistoryModalOpen, t]);
|
||||
|
||||
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],
|
||||
);
|
||||
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]);
|
||||
|
||||
return { canRestore, confirmRestore };
|
||||
}
|
||||
|
||||
@@ -23,14 +23,6 @@ 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>> {
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
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,7 +11,6 @@ import {
|
||||
IconList,
|
||||
IconMarkdown,
|
||||
IconMessage,
|
||||
IconPaperclip,
|
||||
IconPrinter,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
@@ -43,7 +42,6 @@ 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 {
|
||||
@@ -60,6 +58,7 @@ import {
|
||||
useWatchPageMutation,
|
||||
useUnwatchPageMutation,
|
||||
} from "@/features/page/queries/watcher-query";
|
||||
import { useCanViewComments } from "@/features/comment/hooks/use-can-view-comments.ts";
|
||||
|
||||
interface PageHeaderMenuProps {
|
||||
readOnly?: boolean;
|
||||
@@ -67,6 +66,7 @@ interface PageHeaderMenuProps {
|
||||
export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const commentsTriggerProps = useAsideTriggerProps("comments");
|
||||
const canViewComments = useCanViewComments();
|
||||
const tocTriggerProps = useAsideTriggerProps("toc");
|
||||
const { pageSlug } = useParams();
|
||||
const { data: page } = usePageQuery({
|
||||
@@ -107,16 +107,18 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
||||
|
||||
<PageShareModal readOnly={readOnly} />
|
||||
|
||||
<Tooltip label={t("Comments")} openDelay={250} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
aria-label={t("Comments")}
|
||||
{...commentsTriggerProps}
|
||||
>
|
||||
<IconMessage size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
{canViewComments && (
|
||||
<Tooltip label={t("Comments")} openDelay={250} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="dark"
|
||||
aria-label={t("Comments")}
|
||||
{...commentsTriggerProps}
|
||||
>
|
||||
<IconMessage size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{!page?.isBase && (
|
||||
<Tooltip label={t("Table of contents")} openDelay={250} withArrow>
|
||||
@@ -159,10 +161,6 @@ 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);
|
||||
@@ -299,15 +297,6 @@ 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}
|
||||
@@ -410,12 +399,6 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
|
||||
opened={verificationOpened}
|
||||
onClose={closeVerificationModal}
|
||||
/>
|
||||
|
||||
<PageAttachmentsModal
|
||||
pageId={page.id}
|
||||
open={attachmentsOpened}
|
||||
onClose={closeAttachmentsModal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { ISpace } from "@/features/space/types/space.types.ts";
|
||||
import SpacePublicSharingToggle from "@/ee/security/components/space-public-sharing-toggle.tsx";
|
||||
import SpaceViewerCommentsToggle from "@/ee/security/components/space-viewer-comments-toggle.tsx";
|
||||
import SpaceHideCommentsToggle from "@/ee/security/components/space-hide-comments-toggle.tsx";
|
||||
|
||||
type SpaceSecuritySettingsProps = {
|
||||
space: ISpace;
|
||||
@@ -29,6 +30,10 @@ export default function SpaceSecuritySettings({
|
||||
<Divider my="lg" />
|
||||
|
||||
<SpaceViewerCommentsToggle space={space} />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<SpaceHideCommentsToggle space={space} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ export interface ISpaceSharingSettings {
|
||||
|
||||
export interface ISpaceCommentsSettings {
|
||||
allowViewerComments?: boolean;
|
||||
hideCommentsFromViewers?: boolean;
|
||||
}
|
||||
|
||||
export interface ISpaceSettings {
|
||||
@@ -36,6 +37,7 @@ export interface ISpace {
|
||||
// for updates
|
||||
disablePublicSharing?: boolean;
|
||||
allowViewerComments?: boolean;
|
||||
hideCommentsFromViewers?: boolean;
|
||||
}
|
||||
|
||||
interface IMembership {
|
||||
|
||||
@@ -27,7 +27,6 @@ const APP_ROUTE = {
|
||||
SPACES: "/settings/spaces",
|
||||
BILLING: "/settings/billing",
|
||||
SECURITY: "/settings/security",
|
||||
INTEGRATIONS: "/settings/integrations",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
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';
|
||||
@@ -46,18 +45,8 @@ import {
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
BaseEmbed,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
IntegrationLink,
|
||||
IntegrationMention,
|
||||
} from '@docmost/editor-ext';
|
||||
import {
|
||||
extensions as coreExtensions,
|
||||
generateText,
|
||||
getSchema,
|
||||
JSONContent,
|
||||
} from '@tiptap/core';
|
||||
import { 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
|
||||
@@ -68,17 +57,12 @@ 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'],
|
||||
@@ -126,12 +110,7 @@ export const tiptapExtensions = [
|
||||
Status,
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
BaseEmbed,
|
||||
Footnotes,
|
||||
Footnote,
|
||||
FootnoteReference,
|
||||
IntegrationLink,
|
||||
IntegrationMention
|
||||
BaseEmbed
|
||||
] as any;
|
||||
|
||||
export function jsonToHtml(tiptapJson: any) {
|
||||
|
||||
@@ -107,6 +107,7 @@ export const EXCLUDED_AUDIT_EVENTS: Set<string> = new Set([
|
||||
AuditEvent.PAGE_CREATED,
|
||||
AuditEvent.PAGE_MOVED_TO_SPACE,
|
||||
AuditEvent.PAGE_DUPLICATED,
|
||||
AuditEvent.COMMENT_CREATED,
|
||||
AuditEvent.COMMENT_UPDATED,
|
||||
AuditEvent.COMMENT_RESOLVED,
|
||||
AuditEvent.COMMENT_REOPENED,
|
||||
|
||||
@@ -15,7 +15,6 @@ export enum EventName {
|
||||
WORKSPACE_CREATED = 'workspace.created',
|
||||
WORKSPACE_UPDATED = 'workspace.updated',
|
||||
WORKSPACE_DELETED = 'workspace.deleted',
|
||||
NOTIFICATION_CREATED = 'notification.created',
|
||||
|
||||
BASE_CREATED = 'base.created',
|
||||
BASE_UPDATED = 'base.updated',
|
||||
|
||||
@@ -18,12 +18,12 @@ export const Feature = {
|
||||
RETENTION: 'retention',
|
||||
SHARING_CONTROLS: 'sharing:controls',
|
||||
VIEWER_COMMENTS: 'comment:viewer',
|
||||
HIDE_COMMENTS: 'comment:hide',
|
||||
TEMPLATES: 'templates',
|
||||
PDF_EXPORT: 'export:pdf',
|
||||
PERSONAL_SPACES: 'spaces:personal',
|
||||
DOCX_EXPORT: 'export:docx',
|
||||
BASES: 'bases',
|
||||
INTEGRATIONS: 'integrations',
|
||||
} as const;
|
||||
|
||||
export type FeatureKey = (typeof Feature)[keyof typeof Feature];
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { getProxyAwareFetch, proxyFetch } from './proxy-fetch';
|
||||
|
||||
describe('getProxyAwareFetch', () => {
|
||||
const originalEnv = { ...process.env };
|
||||
|
||||
afterEach(() => {
|
||||
process.env = { ...originalEnv };
|
||||
});
|
||||
|
||||
it('returns undefined when no proxy env vars are set', () => {
|
||||
delete process.env.HTTP_PROXY;
|
||||
delete process.env.HTTPS_PROXY;
|
||||
delete process.env.http_proxy;
|
||||
delete process.env.https_proxy;
|
||||
|
||||
expect(getProxyAwareFetch()).toBeUndefined();
|
||||
});
|
||||
|
||||
it('returns a fetch function when HTTP_PROXY is set', () => {
|
||||
delete process.env.HTTPS_PROXY;
|
||||
delete process.env.http_proxy;
|
||||
delete process.env.https_proxy;
|
||||
process.env.HTTP_PROXY = 'http://proxy.example.com:8080';
|
||||
|
||||
expect(typeof getProxyAwareFetch()).toBe('function');
|
||||
});
|
||||
|
||||
it('returns a fetch function when HTTPS_PROXY is set', () => {
|
||||
delete process.env.HTTP_PROXY;
|
||||
delete process.env.http_proxy;
|
||||
delete process.env.https_proxy;
|
||||
process.env.HTTPS_PROXY = 'http://proxy.example.com:8080';
|
||||
|
||||
expect(typeof getProxyAwareFetch()).toBe('function');
|
||||
});
|
||||
|
||||
it('returns a fetch function when lowercase http_proxy is set', () => {
|
||||
delete process.env.HTTP_PROXY;
|
||||
delete process.env.HTTPS_PROXY;
|
||||
delete process.env.https_proxy;
|
||||
process.env.http_proxy = 'http://proxy.example.com:8080';
|
||||
|
||||
expect(typeof getProxyAwareFetch()).toBe('function');
|
||||
});
|
||||
|
||||
it('proxyFetch delegates to the platform fetch when no proxy is configured', async () => {
|
||||
delete process.env.HTTP_PROXY;
|
||||
delete process.env.HTTPS_PROXY;
|
||||
delete process.env.http_proxy;
|
||||
delete process.env.https_proxy;
|
||||
|
||||
const original = globalThis.fetch;
|
||||
const response = new Response('ok');
|
||||
const spy = jest.fn().mockResolvedValue(response);
|
||||
globalThis.fetch = spy as unknown as typeof fetch;
|
||||
|
||||
try {
|
||||
await expect(proxyFetch('https://example.com')).resolves.toBe(response);
|
||||
expect(spy).toHaveBeenCalledWith('https://example.com', undefined);
|
||||
} finally {
|
||||
globalThis.fetch = original;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { EnvHttpProxyAgent, fetch as undiciFetch } from 'undici';
|
||||
|
||||
const LOOPBACK_BYPASS = ['localhost', '127.0.0.1', '::1'];
|
||||
|
||||
let cachedAgent: EnvHttpProxyAgent | undefined;
|
||||
|
||||
function hasProxyEnv(): boolean {
|
||||
return Boolean(
|
||||
process.env.HTTP_PROXY ||
|
||||
process.env.HTTPS_PROXY ||
|
||||
process.env.http_proxy ||
|
||||
process.env.https_proxy,
|
||||
);
|
||||
}
|
||||
|
||||
function buildAgent(): EnvHttpProxyAgent {
|
||||
const existing = process.env.NO_PROXY || process.env.no_proxy || '';
|
||||
const merged = [existing, ...LOOPBACK_BYPASS]
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
.join(',');
|
||||
return new EnvHttpProxyAgent({ noProxy: merged });
|
||||
}
|
||||
|
||||
export function getProxyAwareFetch(): typeof fetch | undefined {
|
||||
if (!hasProxyEnv()) return undefined;
|
||||
cachedAgent ??= buildAgent();
|
||||
const agent = cachedAgent;
|
||||
return ((input, init) =>
|
||||
undiciFetch(input as any, {
|
||||
...(init as any),
|
||||
dispatcher: agent,
|
||||
}) as unknown as Promise<Response>) as typeof fetch;
|
||||
}
|
||||
|
||||
// Drop-in replacement for direct fetch calls: proxies when configured, platform fetch otherwise.
|
||||
export const proxyFetch: typeof fetch = (input, init) =>
|
||||
(getProxyAwareFetch() ?? fetch)(input, init);
|
||||
@@ -53,14 +53,8 @@ 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,
|
||||
PageIdDto,
|
||||
RemoveIconDto,
|
||||
} from './dto/attachment.dto';
|
||||
import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
|
||||
import { AttachmentInfoDto, RemoveIconDto } from './dto/attachment.dto';
|
||||
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,
|
||||
@@ -81,7 +75,6 @@ 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,
|
||||
) {}
|
||||
|
||||
@@ -158,10 +151,7 @@ export class AttachmentController {
|
||||
},
|
||||
});
|
||||
|
||||
return res.send({
|
||||
...fileResponse,
|
||||
url: this.buildFileUrl(workspace, fileResponse),
|
||||
});
|
||||
return res.send(fileResponse);
|
||||
} catch (err: any) {
|
||||
if (err?.statusCode === 413) {
|
||||
const errMessage = `File too large. Exceeds the ${this.environmentService.getFileUploadSizeLimit()} limit`;
|
||||
@@ -421,37 +411,7 @@ export class AttachmentController {
|
||||
|
||||
await this.pageAccessService.validateCanView(page, user);
|
||||
|
||||
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),
|
||||
})),
|
||||
};
|
||||
return attachment;
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@@ -505,10 +465,6 @@ 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,11 +1,4 @@
|
||||
import {
|
||||
IsEnum,
|
||||
IsIn,
|
||||
IsNotEmpty,
|
||||
IsOptional,
|
||||
IsString,
|
||||
IsUUID,
|
||||
} from 'class-validator';
|
||||
import { IsEnum, IsIn, IsNotEmpty, IsOptional, IsUUID } from 'class-validator';
|
||||
import { AttachmentType } from '../attachment.constants';
|
||||
|
||||
export class AttachmentInfoDto {
|
||||
@@ -14,12 +7,6 @@ export class AttachmentInfoDto {
|
||||
attachmentId: string;
|
||||
}
|
||||
|
||||
export class PageIdDto {
|
||||
@IsString()
|
||||
@IsNotEmpty()
|
||||
pageId: string;
|
||||
}
|
||||
|
||||
export class RemoveIconDto {
|
||||
@IsEnum(AttachmentType)
|
||||
@IsIn([
|
||||
|
||||
@@ -89,20 +89,29 @@ export class CommentController {
|
||||
@Body()
|
||||
pagination: PaginationOptions,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const page = await this.pageRepo.findById(input.pageId);
|
||||
if (!page) {
|
||||
throw new NotFoundException('Page not found');
|
||||
}
|
||||
|
||||
await this.pageAccessService.validateCanView(page, user);
|
||||
await this.pageAccessService.validateCanViewComments(
|
||||
page,
|
||||
user,
|
||||
workspace.id,
|
||||
);
|
||||
|
||||
return this.commentService.findByPageId(page.id, pagination);
|
||||
}
|
||||
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('info')
|
||||
async findOne(@Body() input: CommentIdDto, @AuthUser() user: User) {
|
||||
async findOne(
|
||||
@Body() input: CommentIdDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const comment = await this.commentRepo.findById(input.commentId);
|
||||
if (!comment) {
|
||||
throw new NotFoundException('Comment not found');
|
||||
@@ -113,7 +122,11 @@ export class CommentController {
|
||||
throw new NotFoundException('Page not found');
|
||||
}
|
||||
|
||||
await this.pageAccessService.validateCanView(page, user);
|
||||
await this.pageAccessService.validateCanViewComments(
|
||||
page,
|
||||
user,
|
||||
workspace.id,
|
||||
);
|
||||
|
||||
return comment;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,6 @@ import { ShareModule } from './share/share.module';
|
||||
import { LabelModule } from './label/label.module';
|
||||
import { NotificationModule } from './notification/notification.module';
|
||||
import { WatcherModule } from './watcher/watcher.module';
|
||||
import { IntegrationModule } from './integration/integration.module';
|
||||
import { GitHubModule } from './integration/providers/github/github.module';
|
||||
import { GitLabModule } from './integration/providers/gitlab/gitlab.module';
|
||||
import { FavoriteModule } from './favorite/favorite.module';
|
||||
import { SessionModule } from './session/session.module';
|
||||
import { ClsMiddleware } from 'nestjs-cls';
|
||||
@@ -46,9 +43,6 @@ import { ClsMiddleware } from 'nestjs-cls';
|
||||
LabelModule,
|
||||
NotificationModule,
|
||||
WatcherModule,
|
||||
IntegrationModule,
|
||||
GitHubModule,
|
||||
GitLabModule,
|
||||
SessionModule,
|
||||
],
|
||||
})
|
||||
@@ -59,7 +53,6 @@ export class CoreModule implements NestModule {
|
||||
{ path: 'health', method: RequestMethod.GET },
|
||||
{ path: 'health/live', method: RequestMethod.GET },
|
||||
{ path: 'billing/stripe/webhook', method: RequestMethod.POST },
|
||||
{ path: 'integrations/oauth/*/callback', method: RequestMethod.GET },
|
||||
];
|
||||
|
||||
consumer
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
export enum IntegrationType {
|
||||
SLACK = 'slack',
|
||||
GITHUB = 'github',
|
||||
GITLAB = 'gitlab',
|
||||
JIRA = 'jira',
|
||||
LINEAR = 'linear',
|
||||
GOOGLE_DOCS = 'google_docs',
|
||||
FIGMA = 'figma',
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import * as crypto from 'crypto';
|
||||
|
||||
function deriveEncryptionKey(appSecret: string): Buffer {
|
||||
return crypto.createHash('sha256').update(appSecret).digest();
|
||||
}
|
||||
|
||||
export function encryptToken(token: string, appSecret: string): string {
|
||||
const algorithm = 'aes-256-gcm';
|
||||
const key = deriveEncryptionKey(appSecret);
|
||||
const iv = crypto.randomBytes(16);
|
||||
|
||||
const cipher = crypto.createCipheriv(algorithm, key, iv);
|
||||
let encrypted = cipher.update(token, 'utf8', 'hex');
|
||||
encrypted += cipher.final('hex');
|
||||
|
||||
const authTag = cipher.getAuthTag();
|
||||
return iv.toString('hex') + ':' + authTag.toString('hex') + ':' + encrypted;
|
||||
}
|
||||
|
||||
export function decryptToken(encryptedToken: string, appSecret: string): string {
|
||||
const algorithm = 'aes-256-gcm';
|
||||
const key = deriveEncryptionKey(appSecret);
|
||||
|
||||
const parts = encryptedToken.split(':');
|
||||
const iv = Buffer.from(parts[0], 'hex');
|
||||
const authTag = Buffer.from(parts[1], 'hex');
|
||||
const encrypted = parts[2];
|
||||
|
||||
const decipher = crypto.createDecipheriv(algorithm, key, iv);
|
||||
decipher.setAuthTag(authTag);
|
||||
|
||||
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
|
||||
decrypted += decipher.final('utf8');
|
||||
|
||||
return decrypted;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const githubSettingsSchema = z.object({
|
||||
baseUrl: z.string().url().optional(),
|
||||
});
|
||||
|
||||
export const gitlabSettingsSchema = z.object({
|
||||
baseUrl: z.string().url().optional(),
|
||||
});
|
||||
|
||||
export const jiraSettingsSchema = z.object({
|
||||
baseUrl: z.string().url().optional(),
|
||||
});
|
||||
|
||||
const integrationSettingsSchemas: Record<string, z.ZodType> = {
|
||||
github: githubSettingsSchema,
|
||||
gitlab: gitlabSettingsSchema,
|
||||
jira: jiraSettingsSchema,
|
||||
};
|
||||
|
||||
export function validateIntegrationSettings(
|
||||
type: string,
|
||||
settings: unknown,
|
||||
): { success: true; data: Record<string, any> } | { success: false; error: string } {
|
||||
const schema = integrationSettingsSchemas[type];
|
||||
if (!schema) {
|
||||
if (settings && typeof settings === 'object') {
|
||||
return { success: true, data: settings as Record<string, any> };
|
||||
}
|
||||
return { success: true, data: {} };
|
||||
}
|
||||
|
||||
const result = schema.safeParse(settings);
|
||||
if (!result.success) {
|
||||
const messages = result.error.issues.map(
|
||||
(i) => `${i.path.join('.')}: ${i.message}`,
|
||||
);
|
||||
return { success: false, error: messages.join(', ') };
|
||||
}
|
||||
|
||||
return { success: true, data: result.data };
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
import {
|
||||
IsNotEmpty,
|
||||
IsObject,
|
||||
IsOptional,
|
||||
IsString,
|
||||
Matches,
|
||||
MaxLength,
|
||||
} from 'class-validator';
|
||||
|
||||
export class InstallIntegrationDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
type: string;
|
||||
}
|
||||
|
||||
export class UninstallIntegrationDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
integrationId: string;
|
||||
}
|
||||
|
||||
export class UpdateIntegrationDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
integrationId: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsObject()
|
||||
settings?: Record<string, any>;
|
||||
}
|
||||
|
||||
export class IntegrationIdDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
integrationId: string;
|
||||
}
|
||||
|
||||
export class UnfurlDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
url: string;
|
||||
}
|
||||
|
||||
export class OAuthAuthorizeDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
integrationId: string;
|
||||
|
||||
// In-app path to land on after OAuth; single leading slash keeps the
|
||||
// redirect on the workspace origin.
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
@MaxLength(512)
|
||||
@Matches(/^\/(?!\/)[^\s\\]*$/)
|
||||
returnPath?: string;
|
||||
}
|
||||
|
||||
export class OAuthDisconnectDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
integrationId: string;
|
||||
}
|
||||
|
||||
export class OAuthInstallDto {
|
||||
@IsNotEmpty()
|
||||
@IsString()
|
||||
type: string;
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { Injectable, NotFoundException } from '@nestjs/common';
|
||||
import { IntegrationConnectionRepo } from './repos/integration-connection.repo';
|
||||
import { IntegrationRepo } from './repos/integration.repo';
|
||||
import { IntegrationConnection } from '@docmost/db/types/entity.types';
|
||||
import { UnfurlService } from './unfurl/unfurl.service';
|
||||
|
||||
@Injectable()
|
||||
export class IntegrationConnectionService {
|
||||
constructor(
|
||||
private readonly connectionRepo: IntegrationConnectionRepo,
|
||||
private readonly integrationRepo: IntegrationRepo,
|
||||
private readonly unfurlService: UnfurlService,
|
||||
) {}
|
||||
|
||||
async getConnectionStatus(
|
||||
integrationId: string,
|
||||
userId: string,
|
||||
workspaceId: string,
|
||||
): Promise<{ connected: boolean; providerUserId?: string }> {
|
||||
const integration = await this.integrationRepo.findById(integrationId);
|
||||
if (!integration || integration.workspaceId !== workspaceId) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
|
||||
const connection = await this.connectionRepo.findByIntegrationAndUser(
|
||||
integrationId,
|
||||
userId,
|
||||
);
|
||||
|
||||
return {
|
||||
connected: !!connection && !connection.invalidatedAt,
|
||||
providerUserId: connection?.providerUserId ?? undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async findByIntegrationAndUser(
|
||||
integrationId: string,
|
||||
userId: string,
|
||||
): Promise<IntegrationConnection | undefined> {
|
||||
return this.connectionRepo.findByIntegrationAndUser(integrationId, userId);
|
||||
}
|
||||
|
||||
async findByWorkspaceTypeAndUser(
|
||||
workspaceId: string,
|
||||
integrationType: string,
|
||||
userId: string,
|
||||
): Promise<IntegrationConnection | undefined> {
|
||||
return this.connectionRepo.findByWorkspaceTypeAndUser(
|
||||
workspaceId,
|
||||
integrationType,
|
||||
userId,
|
||||
);
|
||||
}
|
||||
|
||||
async getUserConnections(userId: string, workspaceId: string) {
|
||||
const rows = await this.connectionRepo.findByUserAndWorkspace(
|
||||
userId,
|
||||
workspaceId,
|
||||
);
|
||||
|
||||
return rows.map((row) => ({
|
||||
integrationId: row.integrationId,
|
||||
type: row.type,
|
||||
providerUserId: row.providerUserId ?? null,
|
||||
connectedAt: row.createdAt,
|
||||
invalidatedAt: row.invalidatedAt ?? null,
|
||||
}));
|
||||
}
|
||||
|
||||
async disconnect(
|
||||
integrationId: string,
|
||||
userId: string,
|
||||
workspaceId: string,
|
||||
): Promise<void> {
|
||||
const integration = await this.integrationRepo.findById(integrationId);
|
||||
if (!integration || integration.workspaceId !== workspaceId) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
|
||||
await this.connectionRepo.deleteByIntegrationAndUser(
|
||||
integrationId,
|
||||
userId,
|
||||
);
|
||||
|
||||
await this.unfurlService.purgeUserCache(workspaceId, userId);
|
||||
}
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import {
|
||||
Body,
|
||||
Controller,
|
||||
ForbiddenException,
|
||||
HttpCode,
|
||||
HttpStatus,
|
||||
Post,
|
||||
UseGuards,
|
||||
} from '@nestjs/common';
|
||||
import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
|
||||
import { AuthUser } from '../../common/decorators/auth-user.decorator';
|
||||
import { AuthWorkspace } from '../../common/decorators/auth-workspace.decorator';
|
||||
import { User, Workspace } from '@docmost/db/types/entity.types';
|
||||
import { IntegrationService } from './integration.service';
|
||||
import { IntegrationConnectionService } from './integration-connection.service';
|
||||
import {
|
||||
InstallIntegrationDto,
|
||||
UninstallIntegrationDto,
|
||||
UpdateIntegrationDto,
|
||||
IntegrationIdDto,
|
||||
} from './dto/integration.dto';
|
||||
import { IntegrationRegistry } from './registry/integration-registry';
|
||||
import WorkspaceAbilityFactory from '../casl/abilities/workspace-ability.factory';
|
||||
import {
|
||||
WorkspaceCaslAction,
|
||||
WorkspaceCaslSubject,
|
||||
} from '../casl/interfaces/workspace-ability.type';
|
||||
import { LicenseCheckService } from '../../integrations/environment/license-check.service';
|
||||
import { Feature } from '../../common/features';
|
||||
|
||||
@Controller('integrations')
|
||||
export class IntegrationController {
|
||||
constructor(
|
||||
private readonly integrationService: IntegrationService,
|
||||
private readonly connectionService: IntegrationConnectionService,
|
||||
private readonly workspaceAbility: WorkspaceAbilityFactory,
|
||||
private readonly licenseCheckService: LicenseCheckService,
|
||||
private readonly registry: IntegrationRegistry,
|
||||
) {}
|
||||
|
||||
private assertIntegrationsLicensed(workspace: Workspace) {
|
||||
if (
|
||||
!this.licenseCheckService.hasFeature(
|
||||
workspace.licenseKey,
|
||||
Feature.INTEGRATIONS,
|
||||
workspace.plan,
|
||||
)
|
||||
) {
|
||||
throw new ForbiddenException('This feature requires a valid license');
|
||||
}
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('available')
|
||||
async getAvailableIntegrations() {
|
||||
return this.integrationService.getAvailableIntegrations();
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('list')
|
||||
async getInstalledIntegrations(
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
return this.integrationService.getInstalledIntegrations(workspace.id);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('install')
|
||||
async install(
|
||||
@Body() dto: InstallIntegrationDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const ability = this.workspaceAbility.createForUser(user, workspace);
|
||||
if (
|
||||
ability.cannot(
|
||||
WorkspaceCaslAction.Manage,
|
||||
WorkspaceCaslSubject.Settings,
|
||||
)
|
||||
) {
|
||||
throw new ForbiddenException();
|
||||
}
|
||||
|
||||
if (this.registry.getProvider(dto.type)?.definition.requiresLicense) {
|
||||
this.assertIntegrationsLicensed(workspace);
|
||||
}
|
||||
return this.integrationService.install(dto.type, workspace.id, user.id);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('uninstall')
|
||||
async uninstall(
|
||||
@Body() dto: UninstallIntegrationDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const ability = this.workspaceAbility.createForUser(user, workspace);
|
||||
if (
|
||||
ability.cannot(
|
||||
WorkspaceCaslAction.Manage,
|
||||
WorkspaceCaslSubject.Settings,
|
||||
)
|
||||
) {
|
||||
throw new ForbiddenException();
|
||||
}
|
||||
|
||||
await this.integrationService.uninstall(dto.integrationId, workspace.id);
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('update')
|
||||
async update(
|
||||
@Body() dto: UpdateIntegrationDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const ability = this.workspaceAbility.createForUser(user, workspace);
|
||||
if (
|
||||
ability.cannot(
|
||||
WorkspaceCaslAction.Manage,
|
||||
WorkspaceCaslSubject.Settings,
|
||||
)
|
||||
) {
|
||||
throw new ForbiddenException();
|
||||
}
|
||||
|
||||
return this.integrationService.update(dto.integrationId, workspace.id, {
|
||||
settings: dto.settings,
|
||||
});
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('connections/mine')
|
||||
async getMyConnections(
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
return this.connectionService.getUserConnections(user.id, workspace.id);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('connection/status')
|
||||
async getConnectionStatus(
|
||||
@Body() dto: IntegrationIdDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
return this.connectionService.getConnectionStatus(
|
||||
dto.integrationId,
|
||||
user.id,
|
||||
workspace.id,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { Injectable, Logger, OnApplicationBootstrap } from '@nestjs/common';
|
||||
import { OnEvent } from '@nestjs/event-emitter';
|
||||
import { InjectQueue } from '@nestjs/bullmq';
|
||||
import { Queue } from 'bullmq';
|
||||
import { QueueJob, QueueName } from '../../integrations/queue/constants';
|
||||
import { EventName } from '../../common/events/event.contants';
|
||||
|
||||
const TOKEN_REFRESH_SCHEDULER_ID = 'integration-token-refresh-scheduler';
|
||||
const TOKEN_REFRESH_INTERVAL_MS = 10 * 60 * 1000; // 10 minutes
|
||||
|
||||
@Injectable()
|
||||
export class IntegrationListener implements OnApplicationBootstrap {
|
||||
private readonly logger = new Logger(IntegrationListener.name);
|
||||
|
||||
constructor(
|
||||
@InjectQueue(QueueName.INTEGRATION_QUEUE)
|
||||
private readonly integrationQueue: Queue,
|
||||
) {}
|
||||
|
||||
async onApplicationBootstrap() {
|
||||
await this.integrationQueue.upsertJobScheduler(
|
||||
TOKEN_REFRESH_SCHEDULER_ID,
|
||||
{ every: TOKEN_REFRESH_INTERVAL_MS },
|
||||
{
|
||||
name: QueueJob.INTEGRATION_TOKEN_REFRESH,
|
||||
data: {},
|
||||
},
|
||||
);
|
||||
this.logger.debug('Integration token refresh scheduler created');
|
||||
}
|
||||
|
||||
@OnEvent(EventName.PAGE_CREATED)
|
||||
async onPageCreated(payload: any) {
|
||||
await this.integrationQueue.add(QueueJob.INTEGRATION_EVENT, {
|
||||
eventName: EventName.PAGE_CREATED,
|
||||
...payload,
|
||||
});
|
||||
}
|
||||
|
||||
@OnEvent(EventName.PAGE_UPDATED)
|
||||
async onPageUpdated(payload: any) {
|
||||
await this.integrationQueue.add(QueueJob.INTEGRATION_EVENT, {
|
||||
eventName: EventName.PAGE_UPDATED,
|
||||
...payload,
|
||||
});
|
||||
}
|
||||
|
||||
@OnEvent(EventName.PAGE_DELETED)
|
||||
async onPageDeleted(payload: any) {
|
||||
await this.integrationQueue.add(QueueJob.INTEGRATION_EVENT, {
|
||||
eventName: EventName.PAGE_DELETED,
|
||||
...payload,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { IntegrationRegistry } from './registry/integration-registry';
|
||||
import { IntegrationService } from './integration.service';
|
||||
import { IntegrationConnectionService } from './integration-connection.service';
|
||||
import { IntegrationController } from './integration.controller';
|
||||
import { OAuthController } from './oauth/oauth.controller';
|
||||
import { OAuthService } from './oauth/oauth.service';
|
||||
import { UnfurlController } from './unfurl/unfurl.controller';
|
||||
import { UnfurlService } from './unfurl/unfurl.service';
|
||||
import { IntegrationRepo } from './repos/integration.repo';
|
||||
import { IntegrationConnectionRepo } from './repos/integration-connection.repo';
|
||||
import { IntegrationWebhookRepo } from './repos/integration-webhook.repo';
|
||||
import { IntegrationListener } from './integration.listener';
|
||||
import { IntegrationProcessor } from './integration.processor';
|
||||
|
||||
@Module({
|
||||
controllers: [IntegrationController, OAuthController, UnfurlController],
|
||||
providers: [
|
||||
IntegrationRegistry,
|
||||
IntegrationService,
|
||||
IntegrationConnectionService,
|
||||
OAuthService,
|
||||
UnfurlService,
|
||||
IntegrationRepo,
|
||||
IntegrationConnectionRepo,
|
||||
IntegrationWebhookRepo,
|
||||
IntegrationListener,
|
||||
IntegrationProcessor,
|
||||
],
|
||||
exports: [
|
||||
IntegrationRegistry,
|
||||
IntegrationService,
|
||||
IntegrationConnectionService,
|
||||
OAuthService,
|
||||
IntegrationRepo,
|
||||
IntegrationConnectionRepo,
|
||||
],
|
||||
})
|
||||
export class IntegrationModule {}
|
||||
@@ -1,133 +0,0 @@
|
||||
import { OnWorkerEvent, Processor, WorkerHost } from '@nestjs/bullmq';
|
||||
import { Logger, NotFoundException } from '@nestjs/common';
|
||||
import { IntegrationConnection } from '@docmost/db/types/entity.types';
|
||||
import { TokenInvalidError } from './registry/integration-provider.interface';
|
||||
import { Job } from 'bullmq';
|
||||
import { QueueJob, QueueName } from '../../integrations/queue/constants/queue.constants';
|
||||
import { IntegrationRegistry } from './registry/integration-registry';
|
||||
import { IntegrationRepo } from './repos/integration.repo';
|
||||
import { IntegrationConnectionRepo } from './repos/integration-connection.repo';
|
||||
import { OAuthService } from './oauth/oauth.service';
|
||||
|
||||
const TOKEN_REFRESH_WINDOW_MS = 15 * 60 * 1000; // 15 minutes
|
||||
|
||||
@Processor(QueueName.INTEGRATION_QUEUE)
|
||||
export class IntegrationProcessor extends WorkerHost {
|
||||
private readonly logger = new Logger(IntegrationProcessor.name);
|
||||
|
||||
constructor(
|
||||
private readonly registry: IntegrationRegistry,
|
||||
private readonly integrationRepo: IntegrationRepo,
|
||||
private readonly connectionRepo: IntegrationConnectionRepo,
|
||||
private readonly oauthService: OAuthService,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
async process(job: Job): Promise<void> {
|
||||
switch (job.name) {
|
||||
case QueueJob.INTEGRATION_EVENT:
|
||||
await this.handleIntegrationEvent(job);
|
||||
break;
|
||||
case QueueJob.INTEGRATION_TOKEN_REFRESH:
|
||||
await this.handleTokenRefresh();
|
||||
break;
|
||||
default:
|
||||
this.logger.warn(`Unknown job: ${job.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Route worker-level errors (e.g. lock renewal after laptop sleep) through
|
||||
// the logger instead of bullmq's raw console.error fallback.
|
||||
@OnWorkerEvent('error')
|
||||
onError(err: Error): void {
|
||||
this.logger.error(`Worker error: ${err.message}`);
|
||||
}
|
||||
|
||||
private async handleTokenRefresh(): Promise<void> {
|
||||
const connections = await this.connectionRepo.findExpiringTokens(
|
||||
TOKEN_REFRESH_WINDOW_MS,
|
||||
);
|
||||
|
||||
if (connections.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.logger.log(
|
||||
`Refreshing tokens for ${connections.length} connection(s)`,
|
||||
);
|
||||
|
||||
for (const connection of connections) {
|
||||
try {
|
||||
await this.oauthService.getValidAccessToken(connection);
|
||||
} catch (err) {
|
||||
this.logger.error(
|
||||
`Token refresh failed for connection ${connection.id}: ${(err as Error).message}`,
|
||||
);
|
||||
// Dead credential or orphaned row: retire it so findExpiringTokens stops selecting it.
|
||||
if (
|
||||
err instanceof NotFoundException ||
|
||||
err instanceof TokenInvalidError
|
||||
) {
|
||||
await this.connectionRepo
|
||||
.invalidate(connection.id)
|
||||
.catch(() => undefined);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async handleIntegrationEvent(job: Job): Promise<void> {
|
||||
const { eventName, workspaceId, ...payload } = job.data;
|
||||
|
||||
if (!workspaceId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const integrations =
|
||||
await this.integrationRepo.findAllByWorkspace(workspaceId);
|
||||
|
||||
for (const integration of integrations) {
|
||||
const provider = this.registry.getProvider(integration.type);
|
||||
if (!provider?.handleEvent) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let connection: IntegrationConnection | undefined;
|
||||
try {
|
||||
const connections = await this.connectionRepo.findByIntegration(
|
||||
integration.id,
|
||||
);
|
||||
|
||||
connection = connections[0];
|
||||
let accessToken: string | undefined;
|
||||
|
||||
if (connection) {
|
||||
accessToken = await this.oauthService.getValidAccessToken(connection);
|
||||
}
|
||||
|
||||
await provider.handleEvent({
|
||||
eventName,
|
||||
payload,
|
||||
integration: {
|
||||
id: integration.id,
|
||||
type: integration.type,
|
||||
settings: integration.settings as Record<string, any> | null,
|
||||
},
|
||||
connection: connection
|
||||
? { accessToken, userId: connection.userId }
|
||||
: undefined,
|
||||
});
|
||||
} catch (err) {
|
||||
this.logger.error(
|
||||
`Integration event handler failed for ${integration.type}: ${(err as Error).message}`,
|
||||
);
|
||||
if (err instanceof TokenInvalidError && connection) {
|
||||
await this.connectionRepo
|
||||
.invalidate(connection.id)
|
||||
.catch(() => undefined);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common';
|
||||
import { InjectKysely } from 'nestjs-kysely';
|
||||
import { KyselyDB } from '@docmost/db/types/kysely.types';
|
||||
import { executeTx } from '@docmost/db/utils';
|
||||
import { IntegrationRepo } from './repos/integration.repo';
|
||||
import { IntegrationConnectionRepo } from './repos/integration-connection.repo';
|
||||
import { IntegrationWebhookRepo } from './repos/integration-webhook.repo';
|
||||
import { IntegrationRegistry } from './registry/integration-registry';
|
||||
import { Integration } from '@docmost/db/types/entity.types';
|
||||
import { validateIntegrationSettings } from './dto/integration-settings.schema';
|
||||
|
||||
@Injectable()
|
||||
export class IntegrationService {
|
||||
constructor(
|
||||
@InjectKysely() private readonly db: KyselyDB,
|
||||
private readonly integrationRepo: IntegrationRepo,
|
||||
private readonly connectionRepo: IntegrationConnectionRepo,
|
||||
private readonly webhookRepo: IntegrationWebhookRepo,
|
||||
private readonly registry: IntegrationRegistry,
|
||||
) {}
|
||||
|
||||
async getAvailableIntegrations() {
|
||||
return this.registry.getAvailableIntegrations();
|
||||
}
|
||||
|
||||
async getInstalledIntegrations(workspaceId: string): Promise<Integration[]> {
|
||||
return this.integrationRepo.findAllByWorkspace(workspaceId);
|
||||
}
|
||||
|
||||
async findById(integrationId: string): Promise<Integration | undefined> {
|
||||
return this.integrationRepo.findById(integrationId);
|
||||
}
|
||||
|
||||
async install(
|
||||
type: string,
|
||||
workspaceId: string,
|
||||
userId: string,
|
||||
): Promise<Integration> {
|
||||
const provider = this.registry.getProvider(type);
|
||||
if (!provider || provider.definition.hidden) {
|
||||
throw new BadRequestException(`Unknown integration type: ${type}`);
|
||||
}
|
||||
|
||||
const existing = await this.integrationRepo.findByWorkspaceAndType(
|
||||
workspaceId,
|
||||
type,
|
||||
);
|
||||
if (existing) {
|
||||
throw new BadRequestException(
|
||||
`Integration "${type}" is already installed`,
|
||||
);
|
||||
}
|
||||
|
||||
return this.integrationRepo.insertOrRestore({
|
||||
type,
|
||||
workspaceId,
|
||||
installedById: userId,
|
||||
});
|
||||
}
|
||||
|
||||
async uninstall(integrationId: string, workspaceId: string): Promise<void> {
|
||||
const integration = await this.integrationRepo.findById(integrationId);
|
||||
if (!integration || integration.workspaceId !== workspaceId) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
// Delete child rows first so no orphan connections keep feeding the token refresh scheduler.
|
||||
await executeTx(this.db, async (trx) => {
|
||||
await this.connectionRepo.deleteByIntegration(integrationId, trx);
|
||||
await this.webhookRepo.deleteByIntegration(integrationId, trx);
|
||||
await this.integrationRepo.softDelete(integrationId, trx);
|
||||
});
|
||||
}
|
||||
|
||||
async update(
|
||||
integrationId: string,
|
||||
workspaceId: string,
|
||||
data: { settings?: Record<string, any> },
|
||||
): Promise<Integration> {
|
||||
const integration = await this.integrationRepo.findById(integrationId);
|
||||
if (!integration || integration.workspaceId !== workspaceId) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
|
||||
if (data.settings !== undefined) {
|
||||
const validation = validateIntegrationSettings(
|
||||
integration.type,
|
||||
data.settings,
|
||||
);
|
||||
if (validation.success === false) {
|
||||
throw new BadRequestException(`Invalid settings: ${validation.error}`);
|
||||
}
|
||||
data.settings = validation.data;
|
||||
}
|
||||
|
||||
return this.integrationRepo.update(integrationId, {
|
||||
...(data.settings !== undefined && { settings: data.settings }),
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Body,
|
||||
Controller,
|
||||
Get,
|
||||
HttpCode,
|
||||
HttpStatus,
|
||||
Logger,
|
||||
Param,
|
||||
Post,
|
||||
Query,
|
||||
Res,
|
||||
UseGuards,
|
||||
} from '@nestjs/common';
|
||||
import { FastifyReply } from 'fastify';
|
||||
import { JwtAuthGuard } from '../../../common/guards/jwt-auth.guard';
|
||||
import { AuthUser } from '../../../common/decorators/auth-user.decorator';
|
||||
import { AuthWorkspace } from '../../../common/decorators/auth-workspace.decorator';
|
||||
import { User, Workspace } from '@docmost/db/types/entity.types';
|
||||
import { OAuthService } from './oauth.service';
|
||||
import {
|
||||
OAuthAuthorizeDto,
|
||||
OAuthDisconnectDto,
|
||||
OAuthInstallDto,
|
||||
} from '../dto/integration.dto';
|
||||
import { IntegrationConnectionService } from '../integration-connection.service';
|
||||
import { IntegrationRegistry } from '../registry/integration-registry';
|
||||
import { LicenseCheckService } from '../../../integrations/environment/license-check.service';
|
||||
import { Feature } from '../../../common/features';
|
||||
import { ForbiddenException } from '@nestjs/common';
|
||||
|
||||
@Controller('integrations/oauth')
|
||||
export class OAuthController {
|
||||
private readonly logger = new Logger(OAuthController.name);
|
||||
|
||||
constructor(
|
||||
private readonly oauthService: OAuthService,
|
||||
private readonly connectionService: IntegrationConnectionService,
|
||||
private readonly licenseCheckService: LicenseCheckService,
|
||||
private readonly registry: IntegrationRegistry,
|
||||
) {}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('authorize')
|
||||
async authorize(
|
||||
@Body() dto: OAuthAuthorizeDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
const { authorizationUrl } = await this.oauthService.getAuthorizationUrl(
|
||||
dto.integrationId,
|
||||
workspace.id,
|
||||
user.id,
|
||||
dto.returnPath,
|
||||
);
|
||||
|
||||
return { authorizationUrl };
|
||||
}
|
||||
|
||||
/**
|
||||
* Install-and-authorize for workspace-scoped providers (Slack model).
|
||||
* Returns the authorize URL without first creating the integration row;
|
||||
* the row is created atomically on successful OAuth callback so a cancelled
|
||||
* OAuth flow leaves no half-installed state.
|
||||
*/
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('install')
|
||||
async installAndAuthorize(
|
||||
@Body() dto: OAuthInstallDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
// This flow creates the integration row on callback success; gate it
|
||||
// like a plain install.
|
||||
if (
|
||||
this.registry.getProvider(dto.type)?.definition.requiresLicense &&
|
||||
!this.licenseCheckService.hasFeature(
|
||||
workspace.licenseKey,
|
||||
Feature.INTEGRATIONS,
|
||||
workspace.plan,
|
||||
)
|
||||
) {
|
||||
throw new ForbiddenException('This feature requires a valid license');
|
||||
}
|
||||
|
||||
const { authorizationUrl } = await this.oauthService.getInstallAuthorizationUrl(
|
||||
dto.type,
|
||||
workspace.id,
|
||||
user.id,
|
||||
);
|
||||
|
||||
return { authorizationUrl };
|
||||
}
|
||||
|
||||
@Get(':type/callback')
|
||||
async callback(
|
||||
@Param('type') type: string,
|
||||
@Query('code') code: string,
|
||||
@Query('state') state: string,
|
||||
@Res() res: FastifyReply,
|
||||
) {
|
||||
if (!code || !state) {
|
||||
throw new BadRequestException('Missing code or state parameter');
|
||||
}
|
||||
|
||||
const statePayload = this.oauthService.verifySignedState(state);
|
||||
if (!statePayload) {
|
||||
throw new BadRequestException('Invalid or expired OAuth state');
|
||||
}
|
||||
|
||||
// returnUrl is derived server-side at authorize time from the workspace's
|
||||
// own hostname/customDomain (canonical DB truth, not user input), then
|
||||
// signed into the state JWT. Tampering would invalidate the signature.
|
||||
const returnUrl = statePayload.returnUrl;
|
||||
// States signed before returnPath existed fall back to the admin page.
|
||||
const returnPath = statePayload.returnPath ?? '/settings/integrations';
|
||||
|
||||
try {
|
||||
await this.oauthService.exchangeCodeForTokens(
|
||||
type,
|
||||
code,
|
||||
statePayload.integrationId,
|
||||
statePayload.userId,
|
||||
statePayload.workspaceId,
|
||||
);
|
||||
|
||||
return res.redirect(`${returnUrl}${returnPath}`, 302).send();
|
||||
} catch (err) {
|
||||
this.logger.error(`OAuth callback error for ${type}: ${(err as Error).message}`);
|
||||
return res
|
||||
.redirect(`${returnUrl}${returnPath}?error=oauth_failed`, 302)
|
||||
.send();
|
||||
}
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@Post('disconnect')
|
||||
async disconnect(
|
||||
@Body() dto: OAuthDisconnectDto,
|
||||
@AuthUser() user: User,
|
||||
@AuthWorkspace() workspace: Workspace,
|
||||
) {
|
||||
await this.connectionService.disconnect(
|
||||
dto.integrationId,
|
||||
user.id,
|
||||
workspace.id,
|
||||
);
|
||||
return { success: true };
|
||||
}
|
||||
}
|
||||
@@ -1,478 +0,0 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
Logger,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common';
|
||||
import { EnvironmentService } from '../../../integrations/environment/environment.service';
|
||||
import { DomainService } from '../../../integrations/environment/domain.service';
|
||||
import { IntegrationRegistry } from '../registry/integration-registry';
|
||||
import { IntegrationRepo } from '../repos/integration.repo';
|
||||
import { IntegrationConnectionRepo } from '../repos/integration-connection.repo';
|
||||
import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
|
||||
import { encryptToken, decryptToken } from '../crypto/token-crypto';
|
||||
import { IntegrationConnection } from '@docmost/db/types/entity.types';
|
||||
import {
|
||||
OAuthConfig,
|
||||
TokenInvalidError,
|
||||
} from '../registry/integration-provider.interface';
|
||||
import { proxyFetch } from '../../../common/proxy-fetch';
|
||||
import * as crypto from 'crypto';
|
||||
|
||||
const OAUTH_HTTP_TIMEOUT_MS = 10_000;
|
||||
|
||||
type OAuthTokenResponse = {
|
||||
access_token: string;
|
||||
refresh_token?: string;
|
||||
expires_in?: number;
|
||||
token_type?: string;
|
||||
scope?: string;
|
||||
};
|
||||
|
||||
export type OAuthStatePayload = {
|
||||
// For "authorize-only" flows (per-user OAuth on an already-installed
|
||||
// integration) integrationId is set; for "install-and-authorize" flows
|
||||
// (workspace-scoped providers like Slack) it's null until the callback
|
||||
// resolves-or-creates the row atomically with token exchange success.
|
||||
integrationId: string | null;
|
||||
type: string;
|
||||
userId: string;
|
||||
workspaceId: string;
|
||||
// Workspace's canonical URL at authorize time. Cloud workspaces are routed
|
||||
// through a single central OAuth callback (the only redirect_uri Slack/etc.
|
||||
// accept), and this lets the callback redirect the user back to their own
|
||||
// workspace host (subdomain or custom domain) after token exchange.
|
||||
returnUrl: string;
|
||||
// Settings page (relative to returnUrl) to land on after the callback.
|
||||
// Derived server-side from the flow that started it, never from user input.
|
||||
returnPath?: string;
|
||||
exp: number;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class OAuthService {
|
||||
private readonly logger = new Logger(OAuthService.name);
|
||||
|
||||
constructor(
|
||||
private readonly environmentService: EnvironmentService,
|
||||
private readonly domainService: DomainService,
|
||||
private readonly registry: IntegrationRegistry,
|
||||
private readonly integrationRepo: IntegrationRepo,
|
||||
private readonly connectionRepo: IntegrationConnectionRepo,
|
||||
private readonly workspaceRepo: WorkspaceRepo,
|
||||
) {}
|
||||
|
||||
async getAuthorizationUrl(
|
||||
integrationId: string,
|
||||
workspaceId: string,
|
||||
userId: string,
|
||||
returnPathOverride?: string,
|
||||
): Promise<{ authorizationUrl: string }> {
|
||||
const integration = await this.integrationRepo.findById(integrationId);
|
||||
if (!integration || integration.workspaceId !== workspaceId) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
|
||||
const provider = this.registry.getProvider(integration.type);
|
||||
if (!provider || !provider.definition.oauth) {
|
||||
throw new BadRequestException('Integration does not support OAuth');
|
||||
}
|
||||
|
||||
const oauthConfig = provider.getOAuthConfig
|
||||
? provider.getOAuthConfig((integration.settings as Record<string, any>) ?? {})
|
||||
: provider.definition.oauth;
|
||||
|
||||
const callbackUrl = this.buildCallbackUrl(integration.type);
|
||||
|
||||
const workspace = await this.workspaceRepo.findById(workspaceId);
|
||||
const returnUrl = this.domainService.getWorkspaceUrl(
|
||||
workspace ?? { hostname: null, customDomain: null },
|
||||
);
|
||||
|
||||
// Per-user connects are initiated from the account connections page;
|
||||
// workspace-scoped authorizes from the admin integrations page. A connect
|
||||
// started elsewhere (e.g. an editor connect card) passes its own path.
|
||||
const returnPath =
|
||||
returnPathOverride ??
|
||||
((provider.definition.oauth.connectionScope ?? 'user') === 'workspace'
|
||||
? '/settings/integrations'
|
||||
: '/settings/account/connections');
|
||||
|
||||
const state = this.createSignedState({
|
||||
integrationId,
|
||||
type: integration.type,
|
||||
userId,
|
||||
workspaceId,
|
||||
returnUrl,
|
||||
returnPath,
|
||||
exp: Date.now() + 10 * 60 * 1000,
|
||||
});
|
||||
|
||||
const params = new URLSearchParams({
|
||||
client_id: this.getClientId(integration.type),
|
||||
redirect_uri: callbackUrl,
|
||||
response_type: 'code',
|
||||
state,
|
||||
});
|
||||
|
||||
const scope = oauthConfig.scopes
|
||||
.map((s) => encodeURIComponent(s))
|
||||
.join('%20');
|
||||
|
||||
return {
|
||||
authorizationUrl: `${oauthConfig.authUrl}?${params.toString()}&scope=${scope}`,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Install-and-authorize for workspace-scoped providers (Slack model).
|
||||
*
|
||||
* Skips creating the integration row up front. The callback (atomic with
|
||||
* token exchange success) is what actually persists the integration; if the
|
||||
* user cancels at Slack's consent screen, nothing is written. Refusing the
|
||||
* already-installed case here keeps the install button idempotent.
|
||||
*/
|
||||
async getInstallAuthorizationUrl(
|
||||
type: string,
|
||||
workspaceId: string,
|
||||
userId: string,
|
||||
): Promise<{ authorizationUrl: string }> {
|
||||
const provider = this.registry.getProvider(type);
|
||||
if (!provider || !provider.definition.oauth) {
|
||||
throw new BadRequestException('Integration does not support OAuth');
|
||||
}
|
||||
if (provider.definition.oauth.connectionScope !== 'workspace') {
|
||||
throw new BadRequestException(
|
||||
'This integration uses per-user OAuth; use the standard install + authorize flow',
|
||||
);
|
||||
}
|
||||
|
||||
const existing = await this.integrationRepo.findByWorkspaceAndType(
|
||||
workspaceId,
|
||||
type,
|
||||
);
|
||||
if (existing) {
|
||||
throw new BadRequestException(
|
||||
`Integration "${type}" is already installed`,
|
||||
);
|
||||
}
|
||||
|
||||
const oauthConfig = provider.getOAuthConfig
|
||||
? provider.getOAuthConfig({})
|
||||
: provider.definition.oauth;
|
||||
|
||||
const callbackUrl = this.buildCallbackUrl(type);
|
||||
|
||||
const workspace = await this.workspaceRepo.findById(workspaceId);
|
||||
const returnUrl = this.domainService.getWorkspaceUrl(
|
||||
workspace ?? { hostname: null, customDomain: null },
|
||||
);
|
||||
|
||||
const state = this.createSignedState({
|
||||
integrationId: null,
|
||||
type,
|
||||
userId,
|
||||
workspaceId,
|
||||
returnUrl,
|
||||
returnPath: '/settings/integrations',
|
||||
exp: Date.now() + 10 * 60 * 1000,
|
||||
});
|
||||
|
||||
const params = new URLSearchParams({
|
||||
client_id: this.getClientId(type),
|
||||
redirect_uri: callbackUrl,
|
||||
response_type: 'code',
|
||||
state,
|
||||
});
|
||||
|
||||
const scope = oauthConfig.scopes
|
||||
.map((s) => encodeURIComponent(s))
|
||||
.join('%20');
|
||||
|
||||
return {
|
||||
authorizationUrl: `${oauthConfig.authUrl}?${params.toString()}&scope=${scope}`,
|
||||
};
|
||||
}
|
||||
|
||||
verifySignedState(state: string): OAuthStatePayload | null {
|
||||
const dotIndex = state.lastIndexOf('.');
|
||||
if (dotIndex === -1) return null;
|
||||
|
||||
const data = state.substring(0, dotIndex);
|
||||
const signature = state.substring(dotIndex + 1);
|
||||
|
||||
const secret = this.environmentService.getAppSecret();
|
||||
const expected = crypto
|
||||
.createHmac('sha256', secret)
|
||||
.update(data)
|
||||
.digest('base64url');
|
||||
|
||||
if (signature !== expected) return null;
|
||||
|
||||
try {
|
||||
const payload: OAuthStatePayload = JSON.parse(
|
||||
Buffer.from(data, 'base64url').toString(),
|
||||
);
|
||||
|
||||
if (payload.exp < Date.now()) return null;
|
||||
|
||||
return payload;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async exchangeCodeForTokens(
|
||||
type: string,
|
||||
code: string,
|
||||
integrationId: string | null,
|
||||
userId: string,
|
||||
workspaceId: string,
|
||||
): Promise<IntegrationConnection> {
|
||||
const provider = this.registry.getProvider(type);
|
||||
if (!provider || !provider.definition.oauth) {
|
||||
throw new BadRequestException('Integration does not support OAuth');
|
||||
}
|
||||
|
||||
// Install-and-authorize flow (workspace-scoped providers): no integration
|
||||
// row exists yet. Create or restore it now that OAuth has succeeded.
|
||||
let integration = integrationId
|
||||
? await this.integrationRepo.findById(integrationId)
|
||||
: null;
|
||||
|
||||
if (!integration) {
|
||||
integration = await this.integrationRepo.insertOrRestore({
|
||||
type,
|
||||
workspaceId,
|
||||
installedById: userId,
|
||||
});
|
||||
integrationId = integration.id;
|
||||
}
|
||||
|
||||
const settings = (integration.settings as Record<string, any>) ?? {};
|
||||
|
||||
const oauthConfig = provider.getOAuthConfig
|
||||
? provider.getOAuthConfig(settings)
|
||||
: provider.definition.oauth;
|
||||
|
||||
const tokenResponse = await this.requestTokens(
|
||||
oauthConfig,
|
||||
type,
|
||||
code,
|
||||
);
|
||||
|
||||
const appSecret = this.environmentService.getAppSecret();
|
||||
const encryptedAccessToken = encryptToken(
|
||||
tokenResponse.access_token,
|
||||
appSecret,
|
||||
);
|
||||
const encryptedRefreshToken = tokenResponse.refresh_token
|
||||
? encryptToken(tokenResponse.refresh_token, appSecret)
|
||||
: null;
|
||||
|
||||
const tokenExpiresAt = tokenResponse.expires_in
|
||||
? new Date(Date.now() + tokenResponse.expires_in * 1000)
|
||||
: null;
|
||||
|
||||
const connectionScope =
|
||||
provider.definition.oauth?.connectionScope ?? 'user';
|
||||
|
||||
const connection =
|
||||
connectionScope === 'workspace'
|
||||
? await this.connectionRepo.upsertWorkspaceConnection({
|
||||
integrationId,
|
||||
userId,
|
||||
workspaceId,
|
||||
accessToken: encryptedAccessToken,
|
||||
refreshToken: encryptedRefreshToken,
|
||||
tokenExpiresAt,
|
||||
scopes: tokenResponse.scope ?? null,
|
||||
})
|
||||
: await this.connectionRepo.upsert({
|
||||
integrationId,
|
||||
userId,
|
||||
workspaceId,
|
||||
accessToken: encryptedAccessToken,
|
||||
refreshToken: encryptedRefreshToken,
|
||||
tokenExpiresAt,
|
||||
scopes: tokenResponse.scope ?? null,
|
||||
});
|
||||
|
||||
if (provider.onConnected) {
|
||||
await provider.onConnected({
|
||||
integrationId,
|
||||
workspaceId,
|
||||
accessToken: tokenResponse.access_token,
|
||||
refreshToken: tokenResponse.refresh_token,
|
||||
providerUserId: '',
|
||||
metadata: tokenResponse,
|
||||
});
|
||||
}
|
||||
|
||||
return connection;
|
||||
}
|
||||
|
||||
async getValidAccessToken(
|
||||
connection: IntegrationConnection,
|
||||
): Promise<string> {
|
||||
if (connection.invalidatedAt) {
|
||||
throw new TokenInvalidError();
|
||||
}
|
||||
const appSecret = this.environmentService.getAppSecret();
|
||||
const accessToken = decryptToken(connection.accessToken, appSecret);
|
||||
|
||||
const needsRefresh =
|
||||
connection.tokenExpiresAt &&
|
||||
connection.refreshToken &&
|
||||
new Date(connection.tokenExpiresAt).getTime() - Date.now() < 5 * 60 * 1000;
|
||||
|
||||
if (!needsRefresh) {
|
||||
return accessToken;
|
||||
}
|
||||
|
||||
return this.refreshAccessToken(connection);
|
||||
}
|
||||
|
||||
private async refreshAccessToken(
|
||||
connection: IntegrationConnection,
|
||||
): Promise<string> {
|
||||
const appSecret = this.environmentService.getAppSecret();
|
||||
const refreshToken = decryptToken(connection.refreshToken, appSecret);
|
||||
|
||||
const integration = await this.integrationRepo.findById(
|
||||
connection.integrationId,
|
||||
);
|
||||
if (!integration) {
|
||||
throw new NotFoundException('Integration not found');
|
||||
}
|
||||
|
||||
const provider = this.registry.getProvider(integration.type);
|
||||
if (!provider || !provider.definition.oauth) {
|
||||
throw new BadRequestException('Integration does not support OAuth');
|
||||
}
|
||||
|
||||
const oauthConfig = provider.getOAuthConfig
|
||||
? provider.getOAuthConfig((integration.settings as Record<string, any>) ?? {})
|
||||
: provider.definition.oauth;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
grant_type: 'refresh_token',
|
||||
client_id: this.getClientId(integration.type),
|
||||
client_secret: this.getClientSecret(integration.type),
|
||||
refresh_token: refreshToken,
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await proxyFetch(oauthConfig.tokenUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded', Accept: 'application/json' },
|
||||
body: params.toString(),
|
||||
signal: AbortSignal.timeout(OAUTH_HTTP_TIMEOUT_MS),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
this.logger.error(
|
||||
`Token refresh failed for ${integration.type}: ${response.status}`,
|
||||
);
|
||||
// 400/401 from the token endpoint means invalid_grant/invalid_client:
|
||||
// the refresh token is dead, not a transient failure.
|
||||
if (response.status === 400 || response.status === 401) {
|
||||
throw new TokenInvalidError(
|
||||
`Refresh token rejected for ${integration.type}`,
|
||||
);
|
||||
}
|
||||
throw new BadRequestException('Token refresh failed');
|
||||
}
|
||||
|
||||
const data: OAuthTokenResponse = await response.json();
|
||||
const encryptedAccessToken = encryptToken(data.access_token, appSecret);
|
||||
const encryptedRefreshToken = data.refresh_token
|
||||
? encryptToken(data.refresh_token, appSecret)
|
||||
: connection.refreshToken;
|
||||
const tokenExpiresAt = data.expires_in
|
||||
? new Date(Date.now() + data.expires_in * 1000)
|
||||
: null;
|
||||
|
||||
await this.connectionRepo.update(connection.id, {
|
||||
accessToken: encryptedAccessToken,
|
||||
refreshToken: encryptedRefreshToken,
|
||||
tokenExpiresAt,
|
||||
invalidatedAt: null,
|
||||
});
|
||||
|
||||
return data.access_token;
|
||||
} catch (err) {
|
||||
if (err instanceof TokenInvalidError) {
|
||||
throw err;
|
||||
}
|
||||
this.logger.error(`Token refresh error: ${(err as Error).message}`);
|
||||
throw new BadRequestException('Failed to refresh token');
|
||||
}
|
||||
}
|
||||
|
||||
private async requestTokens(
|
||||
oauthConfig: OAuthConfig,
|
||||
type: string,
|
||||
code: string,
|
||||
): Promise<OAuthTokenResponse> {
|
||||
const params = new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
client_id: this.getClientId(type),
|
||||
client_secret: this.getClientSecret(type),
|
||||
code,
|
||||
redirect_uri: this.buildCallbackUrl(type),
|
||||
});
|
||||
|
||||
const response = await proxyFetch(oauthConfig.tokenUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded', Accept: 'application/json' },
|
||||
body: params.toString(),
|
||||
signal: AbortSignal.timeout(OAUTH_HTTP_TIMEOUT_MS),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const body = await response.text();
|
||||
this.logger.error(`Token exchange failed for ${type}: ${response.status} ${body}`);
|
||||
throw new BadRequestException('OAuth token exchange failed');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
buildCallbackUrl(type: string): string {
|
||||
const appUrl = this.environmentService.getAppUrl();
|
||||
return `${appUrl}/api/integrations/oauth/${type}/callback`;
|
||||
}
|
||||
|
||||
private createSignedState(payload: OAuthStatePayload): string {
|
||||
const data = Buffer.from(JSON.stringify(payload)).toString('base64url');
|
||||
const secret = this.environmentService.getAppSecret();
|
||||
const signature = crypto
|
||||
.createHmac('sha256', secret)
|
||||
.update(data)
|
||||
.digest('base64url');
|
||||
return `${data}.${signature}`;
|
||||
}
|
||||
|
||||
private getClientId(type: string): string {
|
||||
const envKey = `INTEGRATION_${type.toUpperCase()}_CLIENT_ID`;
|
||||
const value = process.env[envKey];
|
||||
if (!value) {
|
||||
throw new BadRequestException(
|
||||
`Missing environment variable: ${envKey}`,
|
||||
);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
private getClientSecret(type: string): string {
|
||||
const envKey = `INTEGRATION_${type.toUpperCase()}_CLIENT_SECRET`;
|
||||
const value = process.env[envKey];
|
||||
if (!value) {
|
||||
throw new BadRequestException(
|
||||
`Missing environment variable: ${envKey}`,
|
||||
);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { UnfurlPattern } from '../../registry/integration-provider.interface';
|
||||
|
||||
function escapeForRegex(str: string): string {
|
||||
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
|
||||
export function buildGitHubPatterns(baseUrl: string): UnfurlPattern[] {
|
||||
const escaped = escapeForRegex(baseUrl);
|
||||
return [
|
||||
// Commit within a PR: /:owner/:repo/pull/:num/commits/:sha
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/pull\\/(\\d+)\\/commits\\/([a-f0-9]+)`,
|
||||
),
|
||||
type: 'github-pr-commit',
|
||||
},
|
||||
// PR sub-pages: /:owner/:repo/pull/:num(/checks|/commits|/files)?
|
||||
{
|
||||
regex: new RegExp(`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/pull\\/(\\d+)`),
|
||||
type: 'github-pr',
|
||||
},
|
||||
// Single issue: /:owner/:repo/issues/:num
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/issues\\/(\\d+)`,
|
||||
),
|
||||
type: 'github-issue',
|
||||
},
|
||||
// Commit: /:owner/:repo/commit(s)/:sha
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/commits?\\/([a-f0-9]+)`,
|
||||
),
|
||||
type: 'github-commit',
|
||||
},
|
||||
// File/blob: /:owner/:repo/blob/:ref/:path(#L:start(-L:end))?
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/blob\\/([^\\/]+)\\/(.+?)(?:#L(\\d+)(?:-L(\\d+))?)?$`,
|
||||
),
|
||||
type: 'github-file',
|
||||
},
|
||||
// Pulls list: /:owner/:repo/pulls
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/pulls(?:\\/.*)?(?:\\?.*)?$`,
|
||||
),
|
||||
type: 'github-pulls-list',
|
||||
},
|
||||
// Issues list: /:owner/:repo/issues(/created_by/...|/assigned/...)?
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/issues(?:\\/(?:created_by|assigned)\\/[\\w.\\/-]+)?\\/?(?:\\?.*)?$`,
|
||||
),
|
||||
type: 'github-issues-list',
|
||||
},
|
||||
// Releases: /:owner/:repo/releases
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([^\\/]+)\\/([^\\/]+)\\/releases(?:\\/.*)?(?:\\?.*)?$`,
|
||||
),
|
||||
type: 'github-releases-list',
|
||||
},
|
||||
// Repo: /:owner/:repo
|
||||
{
|
||||
regex: new RegExp(
|
||||
`^${escaped}\\/([a-zA-Z0-9\\-_.]+)\\/([a-zA-Z0-9\\-_.]+)\\/?$`,
|
||||
),
|
||||
type: 'github-repo',
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Module, OnModuleInit } from '@nestjs/common';
|
||||
import { GitHubProvider } from './github.provider';
|
||||
import { GitHubService } from './github.service';
|
||||
import { IntegrationRegistry } from '../../registry/integration-registry';
|
||||
import { IntegrationModule } from '../../integration.module';
|
||||
|
||||
@Module({
|
||||
imports: [IntegrationModule],
|
||||
providers: [GitHubProvider, GitHubService],
|
||||
exports: [GitHubProvider],
|
||||
})
|
||||
export class GitHubModule implements OnModuleInit {
|
||||
constructor(
|
||||
private readonly registry: IntegrationRegistry,
|
||||
private readonly githubProvider: GitHubProvider,
|
||||
) {}
|
||||
|
||||
onModuleInit() {
|
||||
this.registry.register(this.githubProvider);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user