fix: code splitting and editor fixes (#2211 )

* fix table * fix code splitting * fix: editor ready check * fix codeblock/mermaid gap cursor * fix callout
2026-05-17 14:54:05 +08:00 · 2026-05-15 02:46:54 +01:00
34 changed files with 76 additions and 1945 deletions
@@ -39,7 +39,6 @@ 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 AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import Webhooks from "@/ee/webhook/pages/webhooks.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
 import TemplateEditor from "@/ee/template/pages/template-editor";
@@ -125,7 +124,6 @@ export default function App() {
            <Route path={"ai"} element={<AiSettings />} />
            <Route path={"ai/mcp"} element={<AiSettings />} />
            <Route path={"audit"} element={<AuditLogs />} />
            <Route path={"webhooks"} element={<Webhooks />} />
            <Route path={"verifications"} element={<VerifiedPages />} />
            {!isCloud() && <Route path={"license"} element={<License />} />}
            {isCloud() && <Route path={"billing"} element={<Billing />} />}
@@ -14,7 +14,6 @@ import { getApiKeys } from "@/ee/api-key";
 import { getAuditLogs } from "@/ee/audit/services/audit-service";
 import { getVerificationList } from "@/ee/page-verification/services/page-verification-service";
 import { getScimTokens } from "@/ee/scim/services/scim-token-service";
 import { getWebhooks } from "@/ee/webhook/services/webhook-service";
 export const prefetchWorkspaceMembers = () => {
  const params: QueryParams = { limit: 100, query: "" };
@@ -107,11 +106,3 @@ export const prefetchScimTokens = () => {
    queryFn: () => getScimTokens({}),
  });
 };
 export const prefetchWebhooks = () => {
  const params = { limit: 50 };
  queryClient.prefetchQuery({
    queryKey: ["webhook-list", params],
    queryFn: () => getWebhooks(params),
  });
 };
@@ -15,7 +15,6 @@ import {
  IconSparkles,
  IconHistory,
  IconShieldCheck,
  IconWebhook,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
@@ -39,7 +38,6 @@ import {
  prefetchWorkspaceMembers,
  prefetchAuditLogs,
  prefetchVerifiedPages,
  prefetchWebhooks,
 } from "@/components/settings/settings-queries.tsx";
 import AppVersion from "@/components/settings/app-version.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
@@ -127,13 +125,6 @@ const groupedData: DataGroup[] = [
        role: "owner",
        env: "selfhosted",
      },
      {
        label: "Webhooks",
        icon: IconWebhook,
        path: "/settings/webhooks",
        feature: Feature.WEBHOOKS,
        role: "admin",
      },
    ],
  },
  {
@@ -231,9 +222,6 @@ export default function SettingsSidebar() {
            case "Audit log":
              prefetchHandler = prefetchAuditLogs;
              break;
            case "Webhooks":
              prefetchHandler = prefetchWebhooks;
              break;
            case "Verified pages":
              prefetchHandler = prefetchVerifiedPages;
              break;
@@ -19,5 +19,4 @@ export const Feature = {
  SHARING_CONTROLS: 'sharing:controls',
  TEMPLATES: 'templates',
  VIEWER_COMMENTS: 'comment:viewer',
  WEBHOOKS: 'webhooks',
 } as const;
@@ -1,140 +0,0 @@
 import {
  Button,
  Group,
  Modal,
  MultiSelect,
  Stack,
  Switch,
  TextInput,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { zod4Resolver } from "mantine-form-zod-resolver";
 import { z } from "zod/v4";
 import { useTranslation } from "react-i18next";
 import { useCreateWebhookMutation } from "@/ee/webhook/queries/webhook-query";
 import {
  EVENT_GROUPS,
  multiSelectData,
 } from "@/ee/webhook/lib/webhook-event-labels";
 import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
 interface CreateWebhookModalProps {
  opened: boolean;
  onClose: () => void;
  onSuccess: (signingSecret: string) => void;
 }
 const allowedEvents: WebhookEvent[] = EVENT_GROUPS.flatMap((g) => g.events);
 const formSchema = z.object({
  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
  url: z
    .string()
    .min(1, "URL is required")
    .refine(
      (value) => /^https?:\/\//i.test(value),
      "URL must start with http:// or https://",
    ),
  subscribedEvents: z
    .array(z.enum(allowedEvents as [WebhookEvent, ...WebhookEvent[]]))
    .min(1, "Select at least one event"),
  isActive: z.boolean(),
 });
 type FormValues = z.infer<typeof formSchema>;
 export function CreateWebhookModal({
  opened,
  onClose,
  onSuccess,
 }: CreateWebhookModalProps) {
  const { t } = useTranslation();
  const createWebhookMutation = useCreateWebhookMutation();
  const form = useForm<FormValues>({
    validate: zod4Resolver(formSchema),
    initialValues: {
      name: "",
      url: "",
      subscribedEvents: [],
      isActive: true,
    },
  });
  const handleClose = () => {
    form.reset();
    onClose();
  };
  const handleSubmit = async (values: FormValues) => {
    try {
      const result = await createWebhookMutation.mutateAsync({
        name: values.name,
        url: values.url,
        subscribedEvents: values.subscribedEvents,
        isActive: values.isActive,
      });
      form.reset();
      onClose();
      onSuccess(result.signingSecret);
    } catch (_err) {
      // notification handled inside mutation
    }
  };
  return (
    <Modal
      opened={opened}
      onClose={handleClose}
      title={t("Create webhook")}
      size="lg"
    >
      <form onSubmit={form.onSubmit(handleSubmit)}>
        <Stack gap="md">
          <TextInput
            label={t("Name")}
            placeholder={t("e.g. Production alerts")}
            required
            data-autofocus
            {...form.getInputProps("name")}
          />
          <TextInput
            label={t("URL")}
            placeholder="https://example.com/webhook"
            required
            {...form.getInputProps("url")}
          />
          <MultiSelect
            label={t("Events")}
            placeholder={t("Select events to subscribe to")}
            data={multiSelectData()}
            searchable
            clearable
            required
            {...form.getInputProps("subscribedEvents")}
          />
          <Switch
            label={t("Active")}
            description={t("Deliveries fire only when the webhook is active")}
            checked={form.values.isActive}
            onChange={(event) =>
              form.setFieldValue("isActive", event.currentTarget.checked)
            }
          />
          <Group justify="flex-end" mt="md">
            <Button variant="default" onClick={handleClose}>
              {t("Cancel")}
            </Button>
            <Button type="submit" loading={createWebhookMutation.isPending}>
              {t("Create")}
            </Button>
          </Group>
        </Stack>
      </form>
    </Modal>
  );
 }
@@ -1,310 +0,0 @@
 import { Fragment, useState } from "react";
 import {
  Badge,
  Box,
  Button,
  Collapse,
  Drawer,
  Group,
  ScrollArea,
  Skeleton,
  Table,
  Text,
 } from "@mantine/core";
 import {
  IconChevronDown,
  IconChevronRight,
  IconRefresh,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import {
  useRedeliverMutation,
  useWebhookDeliveries,
 } from "@/ee/webhook/queries/webhook-query";
 import { formattedDate } from "@/lib/time";
 import NoTableResults from "@/components/common/no-table-results";
 import type {
  IWebhookDelivery,
  WebhookDeliveryStatus,
 } from "@/ee/webhook/types/webhook.types";
 interface DeliveryDrawerProps {
  opened: boolean;
  onClose: () => void;
  webhookId: string | null;
 }
 function statusColor(status: WebhookDeliveryStatus): string {
  switch (status) {
    case "success":
      return "green";
    case "failed":
      return "red";
    case "pending":
      return "yellow";
    case "skipped_cooldown":
    case "skipped_inflight":
    case "skipped_disabled":
    default:
      return "gray";
  }
 }
 function statusLabel(status: WebhookDeliveryStatus): string {
  switch (status) {
    case "skipped_cooldown":
      return "skipped (cooldown)";
    case "skipped_inflight":
      return "skipped (in-flight)";
    case "skipped_disabled":
      return "skipped (disabled)";
    default:
      return status;
  }
 }
 function canRedeliver(status: WebhookDeliveryStatus): boolean {
  return (
    status === "failed" ||
    status === "skipped_cooldown" ||
    status === "skipped_inflight" ||
    status === "skipped_disabled"
  );
 }
 function DeliveryRow({
  delivery,
  expanded,
  onToggle,
  onRedeliver,
  isRedelivering,
 }: {
  delivery: IWebhookDelivery;
  expanded: boolean;
  onToggle: () => void;
  onRedeliver: () => void;
  isRedelivering: boolean;
 }) {
  const { t } = useTranslation();
  return (
    <Fragment>
      <Table.Tr style={{ cursor: "pointer" }} onClick={onToggle}>
        <Table.Td>
          <Group gap="xs" wrap="nowrap">
            {expanded ? (
              <IconChevronDown
                size={16}
                color="var(--mantine-color-dimmed)"
              />
            ) : (
              <IconChevronRight
                size={16}
                color="var(--mantine-color-dimmed)"
              />
            )}
            <Text fz="sm" fw={500}>
              {delivery.event}
            </Text>
          </Group>
        </Table.Td>
        <Table.Td>
          <Badge color={statusColor(delivery.status)} variant="light">
            {statusLabel(delivery.status)}
          </Badge>
        </Table.Td>
        <Table.Td>
          <Text fz="sm">
            {delivery.httpStatus ?? "—"}
          </Text>
        </Table.Td>
        <Table.Td>
          <Text fz="sm">
            {delivery.durationMs != null ? `${delivery.durationMs} ms` : "—"}
          </Text>
        </Table.Td>
        <Table.Td>
          <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
            {formattedDate(new Date(delivery.createdAt))}
          </Text>
        </Table.Td>
        <Table.Td onClick={(e) => e.stopPropagation()}>
          {canRedeliver(delivery.status) ? (
            <Button
              size="compact-xs"
              variant="default"
              leftSection={<IconRefresh size={12} />}
              onClick={onRedeliver}
              loading={isRedelivering}
            >
              {t("Redeliver")}
            </Button>
          ) : null}
        </Table.Td>
      </Table.Tr>
      <Table.Tr>
        <Table.Td colSpan={6} p={0} style={{ border: "none" }}>
          <Collapse in={expanded}>
            <Box
              px="md"
              py="sm"
              style={{ background: "var(--mantine-color-gray-light)" }}
            >
              <Text fz="xs" fw={600} mb={4}>
                {t("Payload")}
              </Text>
              <Box
                component="pre"
                style={{
                  fontSize: 11,
                  margin: 0,
                  padding: 8,
                  background: "var(--mantine-color-body)",
                  borderRadius: 4,
                  overflowX: "auto",
                  whiteSpace: "pre-wrap",
                  wordBreak: "break-word",
                }}
              >
                {JSON.stringify(delivery.payload, null, 2)}
              </Box>
              {delivery.responseBody && (
                <>
                  <Text fz="xs" fw={600} mt="sm" mb={4}>
                    {t("Response body")}
                  </Text>
                  <Box
                    component="pre"
                    style={{
                      fontSize: 11,
                      margin: 0,
                      padding: 8,
                      background: "var(--mantine-color-body)",
                      borderRadius: 4,
                      overflowX: "auto",
                      whiteSpace: "pre-wrap",
                      wordBreak: "break-word",
                    }}
                  >
                    {delivery.responseBody}
                  </Box>
                </>
              )}
              {delivery.errorMessage && (
                <>
                  <Text fz="xs" fw={600} mt="sm" mb={4} c="red">
                    {t("Error")}
                  </Text>
                  <Text fz="xs" c="red">
                    {delivery.errorMessage}
                  </Text>
                </>
              )}
            </Box>
          </Collapse>
        </Table.Td>
      </Table.Tr>
    </Fragment>
  );
 }
 export function DeliveryDrawer({
  opened,
  onClose,
  webhookId,
 }: DeliveryDrawerProps) {
  const { t } = useTranslation();
  const { data, isLoading } = useWebhookDeliveries(opened ? webhookId : null);
  const redeliverMutation = useRedeliverMutation(webhookId ?? undefined);
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [pendingId, setPendingId] = useState<string | null>(null);
  const toggle = (id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  const handleRedeliver = async (deliveryId: string) => {
    setPendingId(deliveryId);
    try {
      await redeliverMutation.mutateAsync({ deliveryId });
    } catch (_err) {
      // notification handled inside mutation
    } finally {
      setPendingId(null);
    }
  };
  return (
    <Drawer
      opened={opened}
      onClose={onClose}
      title={t("Recent deliveries")}
      position="right"
      size="xl"
    >
      <ScrollArea h="calc(100vh - 80px)">
        <Table verticalSpacing="xs" striped={false}>
          <Table.Thead>
            <Table.Tr>
              <Table.Th>{t("Event")}</Table.Th>
              <Table.Th>{t("Status")}</Table.Th>
              <Table.Th>{t("HTTP")}</Table.Th>
              <Table.Th>{t("Duration")}</Table.Th>
              <Table.Th>{t("Timestamp")}</Table.Th>
              <Table.Th aria-label={t("Action")} />
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {isLoading ? (
              Array.from({ length: 6 }).map((_, i) => (
                <Table.Tr key={i}>
                  <Table.Td>
                    <Skeleton height={14} width={120} />
                  </Table.Td>
                  <Table.Td>
                    <Skeleton height={14} width={70} />
                  </Table.Td>
                  <Table.Td>
                    <Skeleton height={14} width={40} />
                  </Table.Td>
                  <Table.Td>
                    <Skeleton height={14} width={60} />
                  </Table.Td>
                  <Table.Td>
                    <Skeleton height={14} width={140} />
                  </Table.Td>
                  <Table.Td>
                    <Skeleton height={14} width={70} />
                  </Table.Td>
                </Table.Tr>
              ))
            ) : data && data.length > 0 ? (
              data.map((delivery) => (
                <DeliveryRow
                  key={delivery.id}
                  delivery={delivery}
                  expanded={expanded.has(delivery.id)}
                  onToggle={() => toggle(delivery.id)}
                  onRedeliver={() => handleRedeliver(delivery.id)}
                  isRedelivering={
                    pendingId === delivery.id && redeliverMutation.isPending
                  }
                />
              ))
            ) : (
              <NoTableResults colSpan={6} text={t("No deliveries yet")} />
            )}
          </Table.Tbody>
        </Table>
      </ScrollArea>
    </Drawer>
  );
 }
@@ -1,240 +0,0 @@
 import { useEffect, useState } from "react";
 import {
  Button,
  Divider,
  Group,
  Modal,
  MultiSelect,
  PasswordInput,
  Stack,
  Switch,
  Text,
  TextInput,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { zod4Resolver } from "mantine-form-zod-resolver";
 import { z } from "zod/v4";
 import { useTranslation } from "react-i18next";
 import {
  useRotateSecretMutation,
  useSendTestMutation,
  useUpdateWebhookMutation,
  useWebhook,
 } from "@/ee/webhook/queries/webhook-query";
 import {
  EVENT_GROUPS,
  multiSelectData,
 } from "@/ee/webhook/lib/webhook-event-labels";
 import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
 import { WebhookSecretModal } from "@/ee/webhook/components/webhook-secret-modal";
 interface EditWebhookModalProps {
  opened: boolean;
  onClose: () => void;
  webhookId: string | null;
 }
 const allowedEvents: WebhookEvent[] = EVENT_GROUPS.flatMap((g) => g.events);
 const formSchema = z.object({
  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
  url: z
    .string()
    .min(1, "URL is required")
    .refine(
      (value) => /^https?:\/\//i.test(value),
      "URL must start with http:// or https://",
    ),
  subscribedEvents: z
    .array(z.enum(allowedEvents as [WebhookEvent, ...WebhookEvent[]]))
    .min(1, "Select at least one event"),
  isActive: z.boolean(),
 });
 type FormValues = z.infer<typeof formSchema>;
 export function EditWebhookModal({
  opened,
  onClose,
  webhookId,
 }: EditWebhookModalProps) {
  const { t } = useTranslation();
  const { data: webhook, isLoading } = useWebhook(opened ? webhookId : null);
  const updateMutation = useUpdateWebhookMutation();
  const rotateMutation = useRotateSecretMutation();
  const sendTestMutation = useSendTestMutation();
  const [revealedSecret, setRevealedSecret] = useState<string | null>(null);
  const form = useForm<FormValues>({
    validate: zod4Resolver(formSchema),
    initialValues: {
      name: "",
      url: "",
      subscribedEvents: [],
      isActive: true,
    },
  });
  useEffect(() => {
    if (opened && webhook) {
      form.setValues({
        name: webhook.name,
        url: webhook.url,
        subscribedEvents: webhook.subscribedEvents,
        isActive: webhook.isActive,
      });
      form.resetDirty();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [opened, webhook?.id]);
  const handleClose = () => {
    form.reset();
    onClose();
  };
  const handleSubmit = async (values: FormValues) => {
    if (!webhookId) return;
    try {
      await updateMutation.mutateAsync({
        webhookId,
        name: values.name,
        url: values.url,
        subscribedEvents: values.subscribedEvents,
        isActive: values.isActive,
      });
      onClose();
    } catch (_err) {
      // notification handled inside mutation
    }
  };
  const handleRotate = async () => {
    if (!webhookId) return;
    try {
      const result = await rotateMutation.mutateAsync({ webhookId });
      setRevealedSecret(result.signingSecret);
    } catch (_err) {
      // notification handled inside mutation
    }
  };
  const handleSendTest = async () => {
    if (!webhookId) return;
    try {
      await sendTestMutation.mutateAsync({ webhookId });
    } catch (_err) {
      // notification handled inside mutation
    }
  };
  return (
    <>
      <Modal
        opened={opened}
        onClose={handleClose}
        title={t("Edit webhook")}
        size="lg"
      >
        <form onSubmit={form.onSubmit(handleSubmit)}>
          <Stack gap="md">
            <TextInput
              label={t("Name")}
              placeholder={t("e.g. Production alerts")}
              required
              disabled={isLoading}
              {...form.getInputProps("name")}
            />
            <TextInput
              label={t("URL")}
              placeholder="https://example.com/webhook"
              required
              disabled={isLoading}
              {...form.getInputProps("url")}
            />
            <MultiSelect
              label={t("Events")}
              placeholder={t("Select events to subscribe to")}
              data={multiSelectData()}
              searchable
              clearable
              required
              disabled={isLoading}
              {...form.getInputProps("subscribedEvents")}
            />
            <Switch
              label={t("Active")}
              description={t(
                "Deliveries fire only when the webhook is active",
              )}
              checked={form.values.isActive}
              disabled={isLoading}
              onChange={(event) =>
                form.setFieldValue("isActive", event.currentTarget.checked)
              }
            />
            <Divider my="xs" />
            <div>
              <Text size="sm" fw={500} mb="xs">
                {t("Signing secret")}
              </Text>
              <Group gap="xs" wrap="nowrap" align="flex-start">
                <PasswordInput
                  value="dm_wh_••••••••••••••••••••••••••••••••"
                  readOnly
                  visible={false}
                  style={{ flex: 1 }}
                />
                <Button
                  variant="default"
                  onClick={handleRotate}
                  loading={rotateMutation.isPending}
                >
                  {t("Rotate")}
                </Button>
              </Group>
              <Text size="xs" c="dimmed" mt={4}>
                {t(
                  "Rotating generates a new signing secret. The previous secret stops working immediately.",
                )}
              </Text>
            </div>
            <Divider my="xs" />
            <Group justify="space-between" mt="md">
              <Button
                variant="default"
                onClick={handleSendTest}
                loading={sendTestMutation.isPending}
              >
                {t("Send test event")}
              </Button>
              <Group>
                <Button variant="default" onClick={handleClose}>
                  {t("Cancel")}
                </Button>
                <Button type="submit" loading={updateMutation.isPending}>
                  {t("Save")}
                </Button>
              </Group>
            </Group>
          </Stack>
        </form>
      </Modal>
      <WebhookSecretModal
        opened={!!revealedSecret}
        onClose={() => setRevealedSecret(null)}
        secret={revealedSecret}
      />
    </>
  );
 }
@@ -1,78 +0,0 @@
 import {
  Alert,
  Button,
  Code,
  Group,
  Modal,
  Stack,
  Text,
 } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import CopyTextButton from "@/components/common/copy";
 interface WebhookSecretModalProps {
  opened: boolean;
  onClose: () => void;
  secret: string | null;
 }
 export function WebhookSecretModal({
  opened,
  onClose,
  secret,
 }: WebhookSecretModalProps) {
  const { t } = useTranslation();
  if (!secret) return null;
  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title={t("Save this signing secret")}
      size="lg"
    >
      <Stack gap="md">
        <Alert
          icon={<IconAlertTriangle size={16} />}
          title={t("Important")}
          color="red"
        >
          {t(
            "We won't show it again. Copy it now and store it somewhere safe. You can rotate it later if needed.",
          )}
        </Alert>
        <div>
          <Text size="sm" fw={500} mb="xs">
            {t("Signing secret")}
          </Text>
          <Group gap="xs" wrap="nowrap" align="center">
            <Code
              block
              style={{
                flex: 1,
                wordBreak: "break-all",
                whiteSpace: "pre-wrap",
              }}
            >
              {secret}
            </Code>
            <CopyTextButton text={secret} />
          </Group>
        </div>
        <Text size="sm" c="dimmed">
          {t(
            "Use this secret to verify the X-Docmost-Signature header on incoming webhook deliveries.",
          )}
        </Text>
        <Button fullWidth onClick={onClose} mt="md">
          {t("I've saved my signing secret")}
        </Button>
      </Stack>
    </Modal>
  );
 }
@@ -1,226 +0,0 @@
 import {
  ActionIcon,
  Anchor,
  Badge,
  Group,
  Menu,
  Skeleton,
  Table,
  Text,
  Tooltip,
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import {
  IconDots,
  IconEdit,
  IconList,
  IconSend,
  IconTrash,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import {
  useDeleteWebhookMutation,
  useSendTestMutation,
 } from "@/ee/webhook/queries/webhook-query";
 import { formattedDate } from "@/lib/time";
 import NoTableResults from "@/components/common/no-table-results";
 import type { IWebhook } from "@/ee/webhook/types/webhook.types";
 interface WebhookTableProps {
  webhooks: IWebhook[] | undefined;
  isLoading: boolean;
  onEdit: (webhook: IWebhook) => void;
  onViewDeliveries: (webhook: IWebhook) => void;
 }
 function truncate(value: string, max: number): string {
  if (value.length <= max) return value;
  return value.slice(0, max) + "…";
 }
 function TableSkeleton() {
  return (
    <>
      {Array.from({ length: 5 }).map((_, i) => (
        <Table.Tr key={i}>
          <Table.Td>
            <Skeleton height={14} width={140} />
          </Table.Td>
          <Table.Td>
            <Skeleton height={14} width={220} />
          </Table.Td>
          <Table.Td>
            <Skeleton height={14} width={70} />
          </Table.Td>
          <Table.Td>
            <Skeleton height={14} width={70} />
          </Table.Td>
          <Table.Td>
            <Skeleton height={14} width={120} />
          </Table.Td>
          <Table.Td>
            <Skeleton height={14} width={24} />
          </Table.Td>
        </Table.Tr>
      ))}
    </>
  );
 }
 export function WebhookTable({
  webhooks,
  isLoading,
  onEdit,
  onViewDeliveries,
 }: WebhookTableProps) {
  const { t } = useTranslation();
  const deleteMutation = useDeleteWebhookMutation();
  const sendTestMutation = useSendTestMutation();
  const handleDelete = (webhook: IWebhook) => {
    modals.openConfirmModal({
      title: t("Delete webhook"),
      children: (
        <Text size="sm">
          {t(
            "Are you sure you want to delete the webhook {{name}}? This action cannot be undone.",
            { name: webhook.name },
          )}
        </Text>
      ),
      labels: { confirm: t("Delete"), cancel: t("Cancel") },
      confirmProps: { color: "red" },
      onConfirm: () => {
        deleteMutation.mutate({ webhookId: webhook.id });
      },
    });
  };
  return (
    <Table.ScrollContainer minWidth={760}>
      <Table highlightOnHover verticalSpacing="sm">
        <Table.Thead>
          <Table.Tr>
            <Table.Th>{t("Name")}</Table.Th>
            <Table.Th>{t("URL")}</Table.Th>
            <Table.Th>{t("Events")}</Table.Th>
            <Table.Th>{t("Status")}</Table.Th>
            <Table.Th>{t("Created")}</Table.Th>
            <Table.Th aria-label={t("Action")} />
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {isLoading ? (
            <TableSkeleton />
          ) : webhooks && webhooks.length > 0 ? (
            webhooks.map((webhook) => (
              <Table.Tr key={webhook.id}>
                <Table.Td>
                  <Anchor
                    component="button"
                    type="button"
                    onClick={() => onEdit(webhook)}
                    underline="never"
                    style={{ color: "var(--mantine-color-text)" }}
                  >
                    <Text fz="sm" fw={500} lineClamp={1}>
                      {webhook.name}
                    </Text>
                  </Anchor>
                </Table.Td>
                <Table.Td>
                  <Tooltip label={webhook.url} withArrow position="top-start">
                    <Text fz="sm" c="dimmed" style={{ fontFamily: "monospace" }}>
                      {truncate(webhook.url, 60)}
                    </Text>
                  </Tooltip>
                </Table.Td>
                <Table.Td>
                  <Tooltip
                    label={webhook.subscribedEvents.join(", ")}
                    withArrow
                    multiline
                    w={280}
                  >
                    <Badge variant="light" color="blue">
                      {t("{{count}} events", {
                        count: webhook.subscribedEvents.length,
                      })}
                    </Badge>
                  </Tooltip>
                </Table.Td>
                <Table.Td>
                  <Badge
                    color={webhook.isActive ? "green" : "gray"}
                    variant="light"
                  >
                    {webhook.isActive ? t("Active") : t("Inactive")}
                  </Badge>
                </Table.Td>
                <Table.Td>
                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
                    {formattedDate(new Date(webhook.createdAt))}
                  </Text>
                </Table.Td>
                <Table.Td>
                  <Menu position="bottom-end" withinPortal>
                    <Menu.Target>
                      <ActionIcon
                        variant="subtle"
                        color="gray"
                        aria-label={t("Webhook menu")}
                      >
                        <IconDots size={16} />
                      </ActionIcon>
                    </Menu.Target>
                    <Menu.Dropdown>
                      <Menu.Item
                        leftSection={<IconEdit size={16} />}
                        onClick={() => onEdit(webhook)}
                      >
                        {t("Edit")}
                      </Menu.Item>
                      <Menu.Item
                        leftSection={<IconSend size={16} />}
                        onClick={() =>
                          sendTestMutation.mutate({ webhookId: webhook.id })
                        }
                      >
                        {t("Send test event")}
                      </Menu.Item>
                      <Menu.Item
                        leftSection={<IconList size={16} />}
                        onClick={() => onViewDeliveries(webhook)}
                      >
                        {t("View deliveries")}
                      </Menu.Item>
                      <Menu.Divider />
                      <Menu.Item
                        leftSection={<IconTrash size={16} />}
                        color="red"
                        onClick={() => handleDelete(webhook)}
                      >
                        {t("Delete")}
                      </Menu.Item>
                    </Menu.Dropdown>
                  </Menu>
                </Table.Td>
              </Table.Tr>
            ))
          ) : (
            <NoTableResults
              colSpan={6}
              text={t("No webhooks yet. Add one to start receiving events.")}
            />
          )}
        </Table.Tbody>
      </Table>
    </Table.ScrollContainer>
  );
 }
@@ -1,43 +0,0 @@
 import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
 export const EVENT_GROUPS: { group: string; events: WebhookEvent[] }[] = [
  {
    group: "Pages",
    events: [
      "page.created",
      "page.updated",
      "page.moved",
      "page.deleted",
      "page.restored",
    ],
  },
  {
    group: "Comments",
    events: [
      "comment.created",
      "comment.updated",
      "comment.deleted",
      "comment.resolved",
    ],
  },
  {
    group: "Spaces",
    events: ["space.created", "space.updated", "space.deleted"],
  },
  {
    group: "Attachments",
    events: ["attachment.uploaded"],
  },
  {
    group: "Members",
    events: ["user.created", "user.deactivated"],
  },
 ];
 export const eventLabel = (event: string): string => event;
 export const multiSelectData = () =>
  EVENT_GROUPS.map(({ group, events }) => ({
    group,
    items: events.map((e) => ({ value: e, label: e })),
  }));
@@ -1,108 +0,0 @@
 import { useMemo, useState } from "react";
 import { Button, Group, Space } from "@mantine/core";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
 import { getAppName } from "@/lib/config";
 import Paginate from "@/components/common/paginate";
 import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import useUserRole from "@/hooks/use-user-role";
 import { useWebhooks } from "@/ee/webhook/queries/webhook-query";
 import { WebhookTable } from "@/ee/webhook/components/webhook-table";
 import { CreateWebhookModal } from "@/ee/webhook/components/create-webhook-modal";
 import { EditWebhookModal } from "@/ee/webhook/components/edit-webhook-modal";
 import { WebhookSecretModal } from "@/ee/webhook/components/webhook-secret-modal";
 import { DeliveryDrawer } from "@/ee/webhook/components/delivery-drawer";
 import type { IWebhook, IListWebhooksParams } from "@/ee/webhook/types/webhook.types";
 export default function Webhooks() {
  const { t } = useTranslation();
  const { isAdmin } = useUserRole();
  const { cursor, goNext, goPrev } = useCursorPaginate();
  const [createOpened, setCreateOpened] = useState(false);
  const [revealedSecret, setRevealedSecret] = useState<string | null>(null);
  const [editingWebhookId, setEditingWebhookId] = useState<string | null>(null);
  const [deliveryWebhookId, setDeliveryWebhookId] = useState<string | null>(
    null,
  );
  const params: IListWebhooksParams = useMemo(
    () => ({ cursor, limit: 50 }),
    [cursor],
  );
  const { data, isLoading } = useWebhooks(params);
  if (!isAdmin) {
    return null;
  }
  const handleEdit = (webhook: IWebhook) => {
    setEditingWebhookId(webhook.id);
  };
  const handleViewDeliveries = (webhook: IWebhook) => {
    setDeliveryWebhookId(webhook.id);
  };
  return (
    <>
      <Helmet>
        <title>
          {t("Webhooks")} - {getAppName()}
        </title>
      </Helmet>
      <SettingsTitle title={t("Webhooks")} />
      <Group justify="flex-end" mb="md">
        <Button onClick={() => setCreateOpened(true)}>
          {t("Add webhook")}
        </Button>
      </Group>
      <WebhookTable
        webhooks={data?.items}
        isLoading={isLoading}
        onEdit={handleEdit}
        onViewDeliveries={handleViewDeliveries}
      />
      <Space h="md" />
      {data?.items && data.items.length > 0 && (
        <Paginate
          hasPrevPage={data?.meta?.hasPrevPage}
          hasNextPage={data?.meta?.hasNextPage}
          onNext={() => goNext(data?.meta?.nextCursor)}
          onPrev={goPrev}
        />
      )}
      <CreateWebhookModal
        opened={createOpened}
        onClose={() => setCreateOpened(false)}
        onSuccess={(signingSecret) => setRevealedSecret(signingSecret)}
      />
      <WebhookSecretModal
        opened={!!revealedSecret}
        onClose={() => setRevealedSecret(null)}
        secret={revealedSecret}
      />
      <EditWebhookModal
        opened={!!editingWebhookId}
        onClose={() => setEditingWebhookId(null)}
        webhookId={editingWebhookId}
      />
      <DeliveryDrawer
        opened={!!deliveryWebhookId}
        onClose={() => setDeliveryWebhookId(null)}
        webhookId={deliveryWebhookId}
      />
    </>
  );
 }
@@ -1,190 +0,0 @@
 import {
  keepPreviousData,
  useMutation,
  useQuery,
  useQueryClient,
  UseQueryResult,
 } from "@tanstack/react-query";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import {
  createWebhook,
  deleteWebhook,
  getWebhook,
  getWebhookDeliveries,
  getWebhooks,
  redeliverWebhook,
  rotateWebhookSecret,
  sendWebhookTest,
  updateWebhook,
 } from "@/ee/webhook/services/webhook-service";
 import {
  ICreateWebhook,
  IListWebhooksParams,
  IUpdateWebhook,
  IWebhook,
  IWebhookCreated,
  IWebhookDelivery,
 } from "@/ee/webhook/types/webhook.types";
 import { IPagination } from "@/lib/types";
 const WEBHOOK_LIST_KEY = "webhook-list";
 const WEBHOOK_INFO_KEY = "webhook-info";
 const WEBHOOK_DELIVERIES_KEY = "webhook-deliveries";
 export function useWebhooks(
  params?: IListWebhooksParams,
 ): UseQueryResult<IPagination<IWebhook>, Error> {
  return useQuery({
    queryKey: [WEBHOOK_LIST_KEY, params],
    queryFn: () => getWebhooks(params),
    placeholderData: keepPreviousData,
  });
 }
 export function useWebhook(
  webhookId: string | null | undefined,
 ): UseQueryResult<IWebhook, Error> {
  return useQuery({
    queryKey: [WEBHOOK_INFO_KEY, webhookId],
    queryFn: () => getWebhook(webhookId as string),
    enabled: !!webhookId,
  });
 }
 export function useWebhookDeliveries(
  webhookId: string | null | undefined,
 ): UseQueryResult<IWebhookDelivery[], Error> {
  return useQuery({
    queryKey: [WEBHOOK_DELIVERIES_KEY, webhookId],
    queryFn: () => getWebhookDeliveries(webhookId as string),
    enabled: !!webhookId,
  });
 }
 function invalidateLists(queryClient: ReturnType<typeof useQueryClient>) {
  queryClient.invalidateQueries({
    predicate: (item) => item.queryKey[0] === WEBHOOK_LIST_KEY,
  });
 }
 export function useCreateWebhookMutation() {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<IWebhookCreated, Error, ICreateWebhook>({
    mutationFn: (data) => createWebhook(data),
    onSuccess: () => {
      notifications.show({ message: t("Webhook created") });
      invalidateLists(queryClient);
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
 export function useUpdateWebhookMutation() {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<IWebhook, Error, IUpdateWebhook>({
    mutationFn: (data) => updateWebhook(data),
    onSuccess: (data) => {
      notifications.show({ message: t("Webhook updated") });
      invalidateLists(queryClient);
      queryClient.invalidateQueries({
        queryKey: [WEBHOOK_INFO_KEY, data.id],
      });
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
 export function useDeleteWebhookMutation() {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<{ success: boolean }, Error, { webhookId: string }>({
    mutationFn: ({ webhookId }) => deleteWebhook(webhookId),
    onSuccess: () => {
      notifications.show({ message: t("Webhook deleted") });
      invalidateLists(queryClient);
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
 export function useRotateSecretMutation() {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<
    { signingSecret: string },
    Error,
    { webhookId: string }
  >({
    mutationFn: ({ webhookId }) => rotateWebhookSecret(webhookId),
    onSuccess: (_data, variables) => {
      notifications.show({ message: t("Signing secret rotated") });
      queryClient.invalidateQueries({
        queryKey: [WEBHOOK_INFO_KEY, variables.webhookId],
      });
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
 export function useSendTestMutation() {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<{ deliveryId: string }, Error, { webhookId: string }>({
    mutationFn: ({ webhookId }) => sendWebhookTest(webhookId),
    onSuccess: (_data, variables) => {
      notifications.show({ message: t("Test event sent") });
      queryClient.invalidateQueries({
        queryKey: [WEBHOOK_DELIVERIES_KEY, variables.webhookId],
      });
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
 export function useRedeliverMutation(webhookId?: string) {
  const queryClient = useQueryClient();
  const { t } = useTranslation();
  return useMutation<{ deliveryId: string }, Error, { deliveryId: string }>({
    mutationFn: ({ deliveryId }) => redeliverWebhook(deliveryId),
    onSuccess: () => {
      notifications.show({ message: t("Redelivery queued") });
      if (webhookId) {
        queryClient.invalidateQueries({
          queryKey: [WEBHOOK_DELIVERIES_KEY, webhookId],
        });
      } else {
        queryClient.invalidateQueries({
          predicate: (item) => item.queryKey[0] === WEBHOOK_DELIVERIES_KEY,
        });
      }
    },
    onError: (error) => {
      const errorMessage = error["response"]?.data?.message;
      notifications.show({ message: errorMessage, color: "red" });
    },
  });
 }
@@ -1,81 +0,0 @@
 import api from "@/lib/api-client";
 import { IPagination } from "@/lib/types";
 import {
  ICreateWebhook,
  IListWebhooksParams,
  IUpdateWebhook,
  IWebhook,
  IWebhookCreated,
  IWebhookDelivery,
 } from "@/ee/webhook/types/webhook.types";
 export async function getWebhooks(
  params?: IListWebhooksParams,
 ): Promise<IPagination<IWebhook>> {
  const req = await api.post("/webhooks", { ...params });
  return req.data;
 }
 export async function getWebhook(webhookId: string): Promise<IWebhook> {
  const req = await api.post<IWebhook>("/webhooks/info", { webhookId });
  return req.data;
 }
 export async function createWebhook(
  data: ICreateWebhook,
 ): Promise<IWebhookCreated> {
  const req = await api.post<IWebhookCreated>("/webhooks/create", data);
  return req.data;
 }
 export async function updateWebhook(data: IUpdateWebhook): Promise<IWebhook> {
  const req = await api.post<IWebhook>("/webhooks/update", data);
  return req.data;
 }
 export async function deleteWebhook(
  webhookId: string,
 ): Promise<{ success: boolean }> {
  const req = await api.post("/webhooks/delete", { webhookId });
  return req.data;
 }
 export async function rotateWebhookSecret(
  webhookId: string,
 ): Promise<{ signingSecret: string }> {
  const req = await api.post<{ signingSecret: string }>(
    "/webhooks/rotate-secret",
    { webhookId },
  );
  return req.data;
 }
 export async function sendWebhookTest(
  webhookId: string,
 ): Promise<{ deliveryId: string }> {
  const req = await api.post<{ deliveryId: string }>("/webhooks/test", {
    webhookId,
  });
  return req.data;
 }
 export async function getWebhookDeliveries(
  webhookId: string,
  limit?: number,
 ): Promise<IWebhookDelivery[]> {
  const req = await api.post<IWebhookDelivery[]>("/webhooks/deliveries", {
    webhookId,
    limit,
  });
  return req.data;
 }
 export async function redeliverWebhook(
  deliveryId: string,
 ): Promise<{ deliveryId: string }> {
  const req = await api.post<{ deliveryId: string }>(
    "/webhooks/deliveries/redeliver",
    { deliveryId },
  );
  return req.data;
 }
@@ -1,77 +0,0 @@
 export type WebhookEvent =
  | "page.created"
  | "page.updated"
  | "page.moved"
  | "page.deleted"
  | "page.restored"
  | "comment.created"
  | "comment.updated"
  | "comment.deleted"
  | "comment.resolved"
  | "space.created"
  | "space.updated"
  | "space.deleted"
  | "attachment.uploaded"
  | "user.created"
  | "user.deactivated";
 export type WebhookDeliveryStatus =
  | "pending"
  | "success"
  | "failed"
  | "skipped_cooldown"
  | "skipped_disabled"
  | "skipped_inflight";
 export interface IWebhook {
  id: string;
  workspaceId: string;
  name: string;
  url: string;
  subscribedEvents: WebhookEvent[];
  isActive: boolean;
  consecutiveFailureCount: number;
  disabledAt: string | null;
  creatorId: string | null;
  createdAt: string;
  updatedAt: string;
 }
 export interface IWebhookCreated extends IWebhook {
  signingSecret: string;
 }
 export interface IWebhookDelivery {
  id: string;
  webhookId: string;
  event: string;
  payload: Record<string, unknown>;
  status: WebhookDeliveryStatus;
  httpStatus: number | null;
  responseBody: string | null;
  errorMessage: string | null;
  attemptCount: number;
  durationMs: number | null;
  deliveredAt: string | null;
  createdAt: string;
 }
 export interface ICreateWebhook {
  name: string;
  url: string;
  subscribedEvents: WebhookEvent[];
  isActive?: boolean;
 }
 export interface IUpdateWebhook {
  webhookId: string;
  name?: string;
  url?: string;
  subscribedEvents?: WebhookEvent[];
  isActive?: boolean;
 }
 export interface IListWebhooksParams {
  cursor?: string;
  limit?: number;
 }
@@ -33,8 +33,6 @@ import {
  HISTORY_INTERVAL,
 } from '../constants';
 import { TransclusionService } from '../../core/page/transclusion/transclusion.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class PersistenceExtension implements Extension {
@@ -49,7 +47,6 @@ export class PersistenceExtension implements Extension {
    @InjectQueue(QueueName.NOTIFICATION_QUEUE) private notificationQueue: Queue,
    private readonly collabHistory: CollabHistoryService,
    private readonly transclusionService: TransclusionService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async onLoadDocument(data: onLoadDocumentPayload) {
@@ -202,19 +199,6 @@ export class PersistenceExtension implements Extension {
      });
      await this.enqueuePageHistory(page);
      this.webhookDispatcher.dispatch(
        page.workspaceId,
        WebhookEvent.PageUpdated,
        {
          id: page.id,
          slugId: page.slugId,
          title: page.title,
          spaceId: page.spaceId,
          workspaceId: page.workspaceId,
          updatedAt: page.updatedAt,
        },
      );
    }
  }
@@ -20,7 +20,6 @@ export const Feature = {
  VIEWER_COMMENTS: 'comment:viewer',
  TEMPLATES: 'templates',
  PDF_EXPORT: 'export:pdf',
  WEBHOOKS: 'webhooks',
 } as const;
 export type FeatureKey = (typeof Feature)[keyof typeof Feature];
@@ -27,8 +27,6 @@ import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
 import { Queue } from 'bullmq';
 import { createByteCountingStream } from '../../../common/helpers/utils';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class AttachmentService {
@@ -41,7 +39,6 @@ export class AttachmentService {
    private readonly spaceRepo: SpaceRepo,
    @InjectKysely() private readonly db: KyselyDB,
    @InjectQueue(QueueName.ATTACHMENT_QUEUE) private attachmentQueue: Queue,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async uploadFile(opts: {
@@ -274,7 +271,7 @@ export class AttachmentService {
      spaceId,
      trx,
    } = opts;
-    const attachment = await this.attachmentRepo.insertAttachment(
+    return this.attachmentRepo.insertAttachment(
      {
        id: attachmentId,
        type: type,
@@ -290,23 +287,6 @@ export class AttachmentService {
      },
      trx,
    );
    this.webhookDispatcher.dispatch(
      workspaceId,
      WebhookEvent.AttachmentUploaded,
      {
        id: attachment.id,
        fileName: attachment.fileName,
        mimeType: attachment.mimeType,
        fileSize: attachment.fileSize,
        pageId: attachment.pageId,
        spaceId: attachment.spaceId,
        workspaceId: attachment.workspaceId,
        creatorId: attachment.creatorId,
      },
    );
    return attachment;
  }
  async handleDeleteAiChatAttachments(aiChatId: string) {
@@ -42,7 +42,6 @@ function buildWorkspaceOwnerAbility() {
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Attachment);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.API);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Audit);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Webhook);
  return build();
 }
@@ -59,7 +58,6 @@ function buildWorkspaceAdminAbility() {
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Member);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Attachment);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.API);
  can(WorkspaceCaslAction.Manage, WorkspaceCaslSubject.Webhook);
  return build();
 }
@@ -13,7 +13,6 @@ export enum WorkspaceCaslSubject {
  Attachment = 'attachment',
  API = 'api_key',
  Audit = 'audit',
  Webhook = 'webhook',
 }
 export type IWorkspaceAbility =
@@ -23,5 +22,4 @@ export type IWorkspaceAbility =
  | [WorkspaceCaslAction, WorkspaceCaslSubject.Group]
  | [WorkspaceCaslAction, WorkspaceCaslSubject.Attachment]
  | [WorkspaceCaslAction, WorkspaceCaslSubject.API]
-  | [WorkspaceCaslAction, WorkspaceCaslSubject.Audit]
+  | [WorkspaceCaslAction, WorkspaceCaslSubject.Audit];
  | [WorkspaceCaslAction, WorkspaceCaslSubject.Webhook];
@@ -32,8 +32,6 @@ import {
  IAuditService,
 } from '../../integrations/audit/audit.service';
 import { WsService } from '../../ws/ws.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@UseGuards(JwtAuthGuard)
@Controller('comments')
@@ -46,7 +44,6 @@ export class CommentController {
    private readonly pageAccessService: PageAccessService,
    private readonly wsService: WsService,
    @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  @HttpCode(HttpStatus.OK)
@@ -195,16 +192,5 @@ export class CommentController {
        },
      },
    });
    this.webhookDispatcher.dispatch(
      comment.workspaceId,
      WebhookEvent.CommentDeleted,
      {
        id: comment.id,
        pageId: comment.pageId,
        spaceId: comment.spaceId,
        workspaceId: comment.workspaceId,
      },
    );
  }
 }
@@ -19,8 +19,6 @@ import { QueueJob, QueueName } from '../../integrations/queue/constants';
 import { extractUserMentionIdsFromJson } from '../../common/helpers/prosemirror/utils';
 import { ICommentNotificationJob } from '../../integrations/queue/constants/queue.interface';
 import { WsService } from '../../ws/ws.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class CommentService {
@@ -35,7 +33,6 @@ export class CommentService {
    private generalQueue: Queue,
    @InjectQueue(QueueName.NOTIFICATION_QUEUE)
    private notificationQueue: Queue,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async findById(commentId: string) {
@@ -145,21 +142,6 @@ export class CommentService {
      comment,
    });
    this.webhookDispatcher.dispatch(
      workspaceId,
      WebhookEvent.CommentCreated,
      {
        id: comment.id,
        pageId: comment.pageId,
        spaceId: comment.spaceId,
        workspaceId: comment.workspaceId,
        type: comment.type,
        content: comment.content,
        creatorId: comment.creatorId,
        createdAt: comment.createdAt,
      },
    );
    return comment;
  }
@@ -221,22 +203,6 @@ export class CommentService {
      comment,
    });
    this.webhookDispatcher.dispatch(
      comment.workspaceId,
      WebhookEvent.CommentUpdated,
      {
        id: comment.id,
        pageId: comment.pageId,
        spaceId: comment.spaceId,
        workspaceId: comment.workspaceId,
        type: comment.type,
        content: comment.content,
        creatorId: comment.creatorId,
        createdAt: comment.createdAt,
        updatedAt: comment.updatedAt,
      },
    );
    return comment;
  }
@@ -52,8 +52,6 @@ import {
  IAuditService,
 } from '../../integrations/audit/audit.service';
 import { getPageTitle } from '../../common/helpers';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@UseGuards(JwtAuthGuard)
@Controller('pages')
@@ -67,7 +65,6 @@ export class PageController {
    private readonly backlinkService: BacklinkService,
    private readonly labelService: LabelService,
    @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  @HttpCode(HttpStatus.OK)
@@ -369,18 +366,6 @@ export class PageController {
          },
        },
      });
      this.webhookDispatcher.dispatch(
        workspace.id,
        WebhookEvent.PageDeleted,
        {
          id: page.id,
          slugId: page.slugId,
          title: page.title,
          spaceId: page.spaceId,
          workspaceId: workspace.id,
        },
      );
    }
  }
@@ -421,18 +406,6 @@ export class PageController {
      },
    });
    this.webhookDispatcher.dispatch(
      workspace.id,
      WebhookEvent.PageRestored,
      {
        id: page.id,
        slugId: page.slugId,
        title: page.title,
        spaceId: page.spaceId,
        workspaceId: workspace.id,
      },
    );
    return this.pageRepo.findById(pageIdDto.pageId, {
      includeHasChildren: true,
    });
@@ -55,8 +55,6 @@ import { markdownToHtml } from '@docmost/editor-ext';
 import { WatcherService } from '../../watcher/watcher.service';
 import { sql } from 'kysely';
 import { TransclusionService } from '../transclusion/transclusion.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class PageService {
@@ -75,7 +73,6 @@ export class PageService {
    private collaborationGateway: CollaborationGateway,
    private readonly watcherService: WatcherService,
    private readonly transclusionService: TransclusionService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async findById(
@@ -159,30 +156,9 @@ export class PageService {
        this.logger.warn(`Failed to queue add-page-watchers: ${err.message}`),
      );
    this.webhookDispatcher.dispatch(
      page.workspaceId,
      WebhookEvent.PageCreated,
      this.toWebhookPagePayload(page),
    );
    return page;
  }
  private toWebhookPagePayload(page: Page) {
    return {
      id: page.id,
      slugId: page.slugId,
      title: page.title,
      icon: page.icon,
      parentPageId: page.parentPageId,
      spaceId: page.spaceId,
      workspaceId: page.workspaceId,
      creatorId: page.creatorId,
      createdAt: page.createdAt,
      updatedAt: page.updatedAt,
    };
  }
  async nextPagePosition(spaceId: string, parentPageId?: string) {
    let pagePosition: string;
@@ -269,21 +245,13 @@ export class PageService {
      );
    }
-    const updatedPage = await this.pageRepo.findById(page.id, {
+    return await this.pageRepo.findById(page.id, {
      includeSpace: true,
      includeContent: true,
      includeCreator: true,
      includeLastUpdatedBy: true,
      includeContributors: true,
    });
    this.webhookDispatcher.dispatch(
      updatedPage.workspaceId,
      WebhookEvent.PageUpdated,
      this.toWebhookPagePayload(updatedPage),
    );
    return updatedPage;
  }
  async updatePageContent(
@@ -519,18 +487,6 @@ export class PageService {
      }
    });
    this.webhookDispatcher.dispatch(
      rootPage.workspaceId,
      WebhookEvent.PageMoved,
      {
        id: rootPage.id,
        slugId: rootPage.slugId,
        fromSpaceId: rootPage.spaceId,
        toSpaceId: spaceId,
        workspaceId: rootPage.workspaceId,
      },
    );
    return { childPageIds };
  }
@@ -1059,14 +1015,6 @@ export class PageService {
        pageIds: pageIds,
        workspaceId,
      });
      for (const id of pageIds) {
        this.webhookDispatcher.dispatch(
          workspaceId,
          WebhookEvent.PageDeleted,
          { id, workspaceId },
        );
      }
    }
  }
@@ -29,8 +29,6 @@ import {
  AUDIT_SERVICE,
  IAuditService,
 } from '../../../integrations/audit/audit.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class SpaceService {
@@ -43,7 +41,6 @@ export class SpaceService {
    @InjectKysely() private readonly db: KyselyDB,
    @InjectQueue(QueueName.ATTACHMENT_QUEUE) private attachmentQueue: Queue,
    @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async createSpace(
@@ -88,17 +85,6 @@ export class SpaceService {
      },
    });
    this.webhookDispatcher.dispatch(
      workspaceId,
      WebhookEvent.SpaceCreated,
      {
        id: space.id,
        name: space.name,
        slug: space.slug,
        workspaceId,
      },
    );
    return { ...space, memberCount: 1 };
  }
@@ -258,17 +244,6 @@ export class SpaceService {
        spaceId: updateSpaceDto.spaceId,
        changes: { before, after },
      });
      this.webhookDispatcher.dispatch(
        workspaceId,
        WebhookEvent.SpaceUpdated,
        {
          id: updatedSpace.id,
          name: updatedSpace.name,
          slug: updatedSpace.slug,
          workspaceId,
        },
      );
    }
    return updatedSpace;
@@ -314,15 +289,5 @@ export class SpaceService {
        },
      },
    });
    this.webhookDispatcher.dispatch(
      workspaceId,
      WebhookEvent.SpaceDeleted,
      {
        id: spaceId,
        name: space.name,
        workspaceId,
      },
    );
  }
 }
@@ -40,8 +40,6 @@ import {
  AUDIT_SERVICE,
  IAuditService,
 } from '../../../integrations/audit/audit.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class WorkspaceInvitationService {
@@ -57,7 +55,6 @@ export class WorkspaceInvitationService {
    @InjectQueue(QueueName.BILLING_QUEUE) private billingQueue: Queue,
    private readonly environmentService: EnvironmentService,
    @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async getInvitations(workspaceId: string, pagination: PaginationOptions) {
@@ -307,18 +304,6 @@ export class WorkspaceInvitationService {
      return;
    }
    this.webhookDispatcher.dispatch(
      workspace.id,
      WebhookEvent.UserCreated,
      {
        id: newUser.id,
        name: newUser.name,
        email: newUser.email,
        role: newUser.role,
        workspaceId: workspace.id,
      },
    );
    // notify the inviter
    const invitedByUser = await this.userRepo.findById(
      invitation.invitedById,
@@ -48,8 +48,6 @@ import {
  AUDIT_SERVICE,
  IAuditService,
 } from '../../../integrations/audit/audit.service';
 import { WebhookDispatcher } from '@docmost/ee/webhook/services/webhook-dispatcher.service';
 import { WebhookEvent } from '@docmost/ee/webhook/constants';
@Injectable()
 export class WorkspaceService {
@@ -74,7 +72,6 @@ export class WorkspaceService {
    @InjectQueue(QueueName.AI_QUEUE) private aiQueue: Queue,
    @Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
    private userSessionRepo: UserSessionRepo,
    private readonly webhookDispatcher: WebhookDispatcher,
  ) {}
  async findById(workspaceId: string) {
@@ -739,17 +736,6 @@ export class WorkspaceService {
        },
      },
    });
    this.webhookDispatcher.dispatch(
      workspaceId,
      WebhookEvent.UserDeactivated,
      {
        id: user.id,
        name: user.name,
        email: user.email,
        workspaceId,
      },
    );
  }
  async activateUser(
@@ -1,93 +0,0 @@
 import { Kysely, sql } from 'kysely';
 export async function up(db: Kysely<any>): Promise<void> {
  await db.schema
    .createTable('webhooks')
    .ifNotExists()
    .addColumn('id', 'uuid', (col) =>
      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
    )
    .addColumn('workspace_id', 'uuid', (col) =>
      col.notNull().references('workspaces.id').onDelete('cascade'),
    )
    .addColumn('name', 'varchar', (col) => col.notNull())
    .addColumn('url', 'text', (col) => col.notNull())
    .addColumn('signing_secret', 'text', (col) => col.notNull())
    .addColumn('subscribed_events', 'jsonb', (col) =>
      col.notNull().defaultTo(sql`'[]'::jsonb`),
    )
    .addColumn('is_active', 'boolean', (col) =>
      col.notNull().defaultTo(true),
    )
    .addColumn('consecutive_failure_count', 'integer', (col) =>
      col.notNull().defaultTo(0),
    )
    .addColumn('disabled_at', 'timestamptz')
    .addColumn('creator_id', 'uuid', (col) =>
      col.references('users.id').onDelete('set null'),
    )
    .addColumn('created_at', 'timestamptz', (col) =>
      col.notNull().defaultTo(sql`now()`),
    )
    .addColumn('updated_at', 'timestamptz', (col) =>
      col.notNull().defaultTo(sql`now()`),
    )
    .execute();
  await db.schema
    .createIndex('idx_webhooks_workspace_id')
    .ifNotExists()
    .on('webhooks')
    .columns(['workspace_id', 'id desc'])
    .execute();
  await db.schema
    .createIndex('idx_webhooks_subscribed_events')
    .ifNotExists()
    .on('webhooks')
    .using('gin')
    .column('subscribed_events')
    .execute();
  await db.schema
    .createTable('webhook_deliveries')
    .ifNotExists()
    .addColumn('id', 'uuid', (col) =>
      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
    )
    .addColumn('webhook_id', 'uuid', (col) =>
      col.notNull().references('webhooks.id').onDelete('cascade'),
    )
    .addColumn('workspace_id', 'uuid', (col) =>
      col.notNull().references('workspaces.id').onDelete('cascade'),
    )
    .addColumn('event', 'varchar', (col) => col.notNull())
    .addColumn('payload', 'jsonb', (col) => col.notNull())
    .addColumn('status', 'varchar', (col) =>
      col.notNull().defaultTo('pending'),
    )
    .addColumn('http_status', 'integer')
    .addColumn('response_body', 'text')
    .addColumn('error_message', 'text')
    .addColumn('attempt_count', 'integer', (col) =>
      col.notNull().defaultTo(0),
    )
    .addColumn('duration_ms', 'integer')
    .addColumn('delivered_at', 'timestamptz')
    .addColumn('created_at', 'timestamptz', (col) =>
      col.notNull().defaultTo(sql`now()`),
    )
    .execute();
  await db.schema
    .createIndex('idx_webhook_deliveries_webhook_id')
    .ifNotExists()
    .on('webhook_deliveries')
    .columns(['webhook_id', 'id desc'])
    .execute();
 }
 export async function down(db: Kysely<any>): Promise<void> {
  await db.schema.dropTable('webhook_deliveries').execute();
  await db.schema.dropTable('webhooks').execute();
 }
@@ -589,37 +589,6 @@ export interface UserSessions {
  createdAt: Generated<Timestamp>;
 }
 export interface Webhooks {
  id: Generated<string>;
  workspaceId: string;
  name: string;
  url: string;
  signingSecret: string;
  subscribedEvents: Generated<Json>;
  isActive: Generated<boolean>;
  consecutiveFailureCount: Generated<number>;
  disabledAt: Timestamp | null;
  creatorId: string | null;
  createdAt: Generated<Timestamp>;
  updatedAt: Generated<Timestamp>;
 }
 export interface WebhookDeliveries {
  id: Generated<string>;
  webhookId: string;
  workspaceId: string;
  event: string;
  payload: Json;
  status: Generated<string>;
  httpStatus: number | null;
  responseBody: string | null;
  errorMessage: string | null;
  attemptCount: Generated<number>;
  durationMs: number | null;
  deliveredAt: Timestamp | null;
  createdAt: Generated<Timestamp>;
 }
 export interface DB {
  aiChats: AiChats;
  aiChatMessages: AiChatMessages;
@@ -656,8 +625,6 @@ export interface DB {
  userSessions: UserSessions;
  userTokens: UserTokens;
  watchers: Watchers;
  webhooks: Webhooks;
  webhookDeliveries: WebhookDeliveries;
  workspaceInvitations: WorkspaceInvitations;
  workspaces: Workspaces;
 }
@@ -37,8 +37,6 @@ import {
  Watchers,
  Audit as _Audit,
  Templates,
  Webhooks,
  WebhookDeliveries,
 } from './db';
 import { PageEmbeddings } from '@docmost/db/types/embeddings.types';
@@ -240,13 +238,3 @@ export type UpdatableAudit = Updateable<Omit<_Audit, 'id'>>;
 export type Template = Selectable<Templates>;
 export type InsertableTemplate = Insertable<Templates>;
 export type UpdatableTemplate = Updateable<Omit<Templates, 'id'>>;
 // Webhook
 export type Webhook = Selectable<Webhooks>;
 export type InsertableWebhook = Insertable<Webhooks>;
 export type UpdatableWebhook = Updateable<Omit<Webhooks, 'id'>>;
 // Webhook delivery
 export type WebhookDelivery = Selectable<WebhookDeliveries>;
 export type InsertableWebhookDelivery = Insertable<WebhookDeliveries>;
 export type UpdatableWebhookDelivery = Updateable<Omit<WebhookDeliveries, 'id'>>;
@@ -9,7 +9,6 @@ export enum QueueName {
  HISTORY_QUEUE = '{history-queue}',
  NOTIFICATION_QUEUE = '{notification-queue}',
  AUDIT_QUEUE = '{audit-queue}',
  WEBHOOK_QUEUE = '{webhook-queue}',
 }
 export enum QueueJob {
@@ -84,7 +83,4 @@ export enum QueueJob {
  PDF_EXPORT_TASK = 'pdf-export-task',
  PDF_EXPORT_CLEANUP = 'pdf-export-cleanup',
  WEBHOOK_DELIVERY = 'webhook-delivery',
  WEBHOOK_DELIVERY_CLEANUP = 'webhook-delivery-cleanup',
 }
@@ -92,18 +92,6 @@ import { GeneralQueueProcessor } from './processors/general-queue.processor';
        attempts: 3,
      },
    }),
    BullModule.registerQueue({
      name: QueueName.WEBHOOK_QUEUE,
      defaultJobOptions: {
        attempts: 5,
        backoff: {
          type: 'exponential',
          delay: 10 * 1000,
        },
        removeOnComplete: { count: 200 },
        removeOnFail: { count: 200 },
      },
    }),
  ],
  exports: [BullModule],
  providers: [GeneralQueueProcessor],
@@ -1,38 +0,0 @@
 import { Section, Text } from 'react-email';
 import * as React from 'react';
 import { content, paragraph } from '../css/styles';
 import { EmailButton, MailBody, getGreetingName } from '../partials/partials';
 interface Props {
  recipientName?: string;
  webhookName: string;
  webhookUrl: string;
  settingsUrl: string;
 }
 export const WebhookDisabledEmail = ({
  recipientName,
  webhookName,
  webhookUrl,
  settingsUrl,
 }: Props) => {
  return (
    <MailBody>
      <Section style={content}>
        <Text style={paragraph}>Hi {getGreetingName(recipientName)},</Text>
        <Text style={paragraph}>
          Your webhook <strong>{webhookName}</strong> to{' '}
          <strong>{webhookUrl}</strong> has been disabled after too many
          consecutive delivery failures.
        </Text>
        <Text style={paragraph}>
          Re-enable it in your workspace settings once the receiving endpoint
          is healthy again.
        </Text>
      </Section>
      <EmailButton href={settingsUrl}>Open webhook settings</EmailButton>
    </MailBody>
  );
 };
 export default WebhookDisabledEmail;
@@ -162,6 +162,28 @@ export const Callout = Node.create<CalloutOptions>({
          return false;
        }
        // Empty callout: delete the whole node so Backspace inside it isn't
        // a no-op (isolating: true blocks the default join with the block
        // above).
        const calloutDepth = $from.depth - 1;
        if (calloutDepth >= 0) {
          const calloutNode = $from.node(calloutDepth);
          if (
            calloutNode.type === this.type &&
            calloutNode.childCount === 1 &&
            calloutNode.firstChild?.content.size === 0
          ) {
            const calloutPos = $from.before(calloutDepth);
            const { tr } = state;
            tr.delete(calloutPos, calloutPos + calloutNode.nodeSize);
            tr.setSelection(
              TextSelection.near(tr.doc.resolve(calloutPos), -1),
            );
            view.dispatch(tr);
            return true;
          }
        }
        const previousPosition = $from.before($from.depth) - 1;
        // If nothing above to join with
@@ -207,6 +229,56 @@ export const Callout = Node.create<CalloutOptions>({
        }
        return false;
      },
      // Exit the callout into a fresh paragraph below when the cursor sits
      // in an empty trailing child. An empty callout (single empty
      // paragraph) exits on the first Enter and keeps the empty callout
      // intact; a callout with content needs the double-Enter pattern
      // (first Enter splits, second Enter on the new trailing empty exits
      // and removes that trailing paragraph).
      Enter: ({ editor }) => {
        const { state, view } = editor;
        const { selection } = state;
        if (!selection.empty) return false;
        const { $from } = selection;
        const calloutDepth = $from.depth - 1;
        if (calloutDepth < 0) return false;
        const calloutNode = $from.node(calloutDepth);
        if (calloutNode.type !== this.type) return false;
        if ($from.parent.content.size !== 0) return false;
        if ($from.index(calloutDepth) !== calloutNode.childCount - 1) {
          return false;
        }
        const paragraphType = state.schema.nodes.paragraph;
        const containerDepth = calloutDepth - 1;
        const container = $from.node(containerDepth);
        const indexAfter = $from.indexAfter(containerDepth);
        if (
          !container.canReplaceWith(indexAfter, indexAfter, paragraphType)
        ) {
          return false;
        }
        const calloutEnd = $from.after(calloutDepth);
        const paragraph = paragraphType.create();
        const { tr } = state;
        if (calloutNode.childCount === 1) {
          tr.insert(calloutEnd, paragraph);
          tr.setSelection(TextSelection.create(tr.doc, calloutEnd + 1));
        } else {
          tr.delete($from.before(), $from.after());
          const insertPos = tr.mapping.map(calloutEnd);
          tr.insert(insertPos, paragraph);
          tr.setSelection(TextSelection.create(tr.doc, insertPos + 1));
        }
        view.dispatch(tr);
        return true;
      },
    };
  },