wip

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -6,6 +6,7 @@ import { createMentionAction } from "@/features/editor/components/link/internal-
 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 {
   getAttachmentInfo,
   uploadFile,
@@ -34,14 +35,49 @@ export const handlePaste = (
   const integrationMatch = matchIntegrationLink(clipboardData.trim());
   if (integrationMatch && editor.state.selection.empty) {
     event.preventDefault();
+    const pastedUrl = clipboardData.trim();
     editor
       .chain()
       .focus()
       .setIntegrationLink({
-        url: clipboardData.trim(),
+        url: pastedUrl,
         provider: integrationMatch.provider,
         status: "pending",
       })
+      // 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;
   }

apps/client/src/features/editor/components/integration-link/badge-color.ts

@@ -0,0 +1,21 @@
+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;
+}

apps/client/src/features/editor/components/integration-link/integration-link-view.module.css

@@ -12,3 +12,42 @@
 :global([data-mantine-color-scheme="dark"]) .card:hover {
   background-color: var(--mantine-color-dark-5);
 }
+
+.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;
+}

apps/client/src/features/editor/components/integration-link/integration-link-view.tsx

@@ -8,61 +8,194 @@ import {
   Skeleton,
   Anchor,
   Stack,
+  Button,
 } from "@mantine/core";
-import { useEffect, useCallback, memo } from "react";
+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 { unfurlUrl } from "@/features/integration/services/integration-service";
+import { getOAuthAuthorizeUrl } from "@/features/integration/services/integration-service";
+import { timeAgo } from "@/lib/time";
+import { useUnfurl } from "./use-unfurl";
+import { toBadgeColor } from "./badge-color";
 import classes from "./integration-link-view.module.css";
 
-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;
+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 IntegrationLinkView(props: any) {
   const { node, updateAttributes, editor } = props;
   const { url, provider, unfurlData, status } = node.attrs;
+  const { t } = useTranslation();
 
-  const doUnfurl = useCallback(async () => {
-    if (status !== "pending" || !url) return;
+  const { needsConnection } = useUnfurl(url, status, updateAttributes);
+  const [connecting, setConnecting] = useState(false);
 
-    try {
-      const result = await unfurlUrl({ url });
-      if (result) {
-        updateAttributes({
-          unfurlData: result,
-          status: "loaded",
+  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",
         });
-      } else {
-        updateAttributes({ status: "error" });
       }
-    } catch {
-      updateAttributes({ status: "error" });
-    }
-  }, [url, status, updateAttributes]);
+    },
+    [needsConnection, t],
+  );
 
-  useEffect(() => {
-    if (status === "pending") {
-      doUnfurl();
-    }
-  }, [status, doUnfurl]);
+  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 (status === "pending") {
     return (
@@ -92,6 +225,12 @@ function IntegrationLinkView(props: any) {
     );
   }
 
+  // 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} />;
+  }
+
   return (
     <NodeViewWrapper data-drag-handle="">
       <Card

apps/client/src/features/editor/components/integration-link/integration-mention-view.tsx

@@ -0,0 +1,138 @@
+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 { 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, updateAttributes } = props;
+  const { url, provider, unfurlData, status } = node.attrs;
+  const { t } = useTranslation();
+
+  useUnfurl(url, status, updateAttributes);
+
+  const data = unfurlData;
+  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)}
+      className={classes.mentionIcon}
+    >
+      {data.status}
+    </Badge>
+  ) : null;
+
+  let content;
+  if (!data) {
+    // pending / 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"
+            tt="none"
+            className={classes.mentionIcon}
+          >
+            {data.status}
+          </Badge>
+        )}
+      </>
+    );
+  } 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);

apps/client/src/features/editor/components/integration-link/integration-paste-menu.tsx

@@ -0,0 +1,168 @@
+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: "preview" | "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";
+
+      if (target === "preview" && !isBlock) {
+        editor
+          .chain()
+          .focus(undefined, { scrollIntoView: false })
+          .deleteRange({ from, to })
+          .insertContentAt(from, { type: "integrationLink", attrs })
+          .run();
+      } else if (target === "mention" && isBlock) {
+        editor
+          .chain()
+          .focus(undefined, { scrollIntoView: false })
+          .deleteRange({ from, to })
+          .insertContentAt(from, {
+            type: "paragraph",
+            content: [
+              { type: "integrationMention", attrs },
+              { type: "text", text: " " },
+            ],
+          })
+          .run();
+      } else if (target === "url") {
+        const linkText = {
+          type: "text",
+          text: attrs.url,
+          marks: [{ type: "link", attrs: { href: attrs.url } }],
+        };
+        editor
+          .chain()
+          .focus(undefined, { scrollIntoView: false })
+          .deleteRange({ from, to })
+          .insertContentAt(
+            from,
+            isBlock ? { type: "paragraph", content: [linkText] } : linkText,
+          )
+          .run();
+      } else {
+        // already in the requested form
+        dismiss();
+      }
+    },
+    [editor, findTarget, dismiss],
+  );
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey="integration-paste-menu"
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{ placement: "bottom-start", flip: true }}
+      shouldShow={shouldShow}
+    >
+      <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("preview")}
+          >
+            {t("Preview")}
+          </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>
+    </BaseBubbleMenu>
+  );
+}

apps/client/src/features/editor/components/integration-link/use-unfurl.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from "react";
+import { unfurlUrl } from "@/features/integration/services/integration-service";
+import { UnfurlNeedsConnection } from "@/features/integration/types/integration.types";
+
+// Fetches the unfurl for a node still in "pending" and writes the result into
+// its attrs. A needs-connection response stays local, never in the attrs: the
+// doc keeps status "pending" so a viewer who IS connected still unfurls and
+// materializes the card for everyone.
+export function useUnfurl(
+  url: string,
+  status: string,
+  updateAttributes: (attrs: Record<string, any>) => void,
+) {
+  const [needsConnection, setNeedsConnection] =
+    useState<UnfurlNeedsConnection | null>(null);
+
+  const doUnfurl = useCallback(async () => {
+    if (status !== "pending" || !url) return;
+
+    try {
+      const result = await unfurlUrl({ url });
+      if (result && "needsConnection" in result) {
+        setNeedsConnection(result);
+      } else if (result) {
+        updateAttributes({
+          unfurlData: result,
+          status: "loaded",
+        });
+      } else {
+        updateAttributes({ status: "error" });
+      }
+    } catch {
+      updateAttributes({ status: "error" });
+    }
+  }, [url, status, updateAttributes]);
+
+  useEffect(() => {
+    if (status === "pending") {
+      doUnfurl();
+    }
+  }, [status, doUnfurl]);
+
+  return { needsConnection };
+}

apps/client/src/features/editor/extensions/extensions.ts

@@ -57,6 +57,7 @@ import {
   UniqueID,
   SharedStorage,
   IntegrationLink,
+  IntegrationMention,
   Columns,
   Column,
   Status,
@@ -93,6 +94,8 @@ 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";
@@ -383,6 +386,10 @@ export const mainExtensions = [
   IntegrationLink.configure({
     view: IntegrationLinkView,
   }),
+  IntegrationMention.configure({
+    view: IntegrationMentionView,
+  }),
+  IntegrationPasteMenuExtension,
   Status.configure({
     view: StatusView,
   }),

apps/client/src/features/editor/extensions/integration-paste-menu.ts

@@ -0,0 +1,44 @@
+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;
+          },
+        },
+      }),
+    ];
+  },
+});

apps/client/src/features/editor/page-editor.tsx

@@ -75,6 +75,7 @@ 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 { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
 import { useTranslation } from "react-i18next";
 import {
@@ -453,6 +454,7 @@ function CollabPageEditor({
             <ExcalidrawMenu editor={editor} />
             <DrawioMenu editor={editor} />
             <ColumnsMenu editor={editor} />
+            <IntegrationPasteMenu editor={editor} />
           </div>
         )}
         {editor && !editorIsEditable && (editable || canComment) && (

apps/client/src/features/integration/components/integration-list-skeleton.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}

apps/client/src/features/integration/pages/connections.tsx

@@ -1,10 +1,11 @@
-import { Text, Loader, Center, Alert, Stack } from "@mantine/core";
+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,
@@ -70,9 +71,7 @@ export default function Connections() {
       )}
 
       {isLoading ? (
-        <Center py="xl">
-          <Loader />
-        </Center>
+        <IntegrationListSkeleton rows={3} withBadges={false} />
       ) : !available?.length ? (
         <Text c="dimmed" size="sm">
           {t("No integrations available.")}

apps/client/src/features/integration/pages/integrations.tsx

@@ -1,10 +1,11 @@
-import { Text, Loader, Center, Alert, Stack } from "@mantine/core";
+import { Text, Alert, Stack } from "@mantine/core";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useState, 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 IntegrationSettingsModal from "../components/integration-settings-modal";
 import {
   useAvailableIntegrations,
@@ -105,9 +106,7 @@ export default function Integrations() {
       )}
 
       {isLoading ? (
-        <Center py="xl">
-          <Loader />
-        </Center>
+        <IntegrationListSkeleton />
       ) : !available?.length ? (
         <Text c="dimmed" size="sm">
           {t("No integrations available.")}

apps/client/src/features/integration/services/integration-service.ts

@@ -5,6 +5,7 @@ import {
   ConnectionStatus,
   UserConnection,
   UnfurlResult,
+  UnfurlNeedsConnection,
 } from "../types/integration.types";
 
 export async function getAvailableIntegrations(): Promise<
@@ -60,6 +61,7 @@ export async function getConnectionStatus(data: {
 
 export async function getOAuthAuthorizeUrl(data: {
   integrationId: string;
+  returnPath?: string;
 }): Promise<{ authorizationUrl: string }> {
   const req = await api.post<{ authorizationUrl: string }>(
     "/integrations/oauth/authorize",
@@ -91,10 +93,9 @@ export async function disconnectIntegration(data: {
 
 export async function unfurlUrl(data: {
   url: string;
-}): Promise<UnfurlResult | null> {
-  const req = await api.post<{ data: UnfurlResult | null }>(
-    "/integrations/unfurl",
-    data,
-  );
+}): Promise<UnfurlResult | UnfurlNeedsConnection | null> {
+  const req = await api.post<{
+    data: UnfurlResult | UnfurlNeedsConnection | null;
+  }>("/integrations/unfurl", data);
   return req.data.data;
 }

apps/client/src/features/integration/types/integration.types.ts

@@ -52,3 +52,14 @@ export type UnfurlResult = {
   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;
+};