@liveblocks/emails 2.25.0-aiprivatebeta9 → 3.1.0-alpha1

package/dist/index.js

@@ -3,9 +3,15 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/emails";
-var PKG_VERSION = "2.25.0-aiprivatebeta9";
+var PKG_VERSION = "3.1.0-alpha1";
 var PKG_FORMAT = "esm";
 
+// src/text-mention-notification.tsx
+import {
+  html,
+  htmlSafe
+} from "@liveblocks/core";
+
 // ../../node_modules/lib0/map.js
 var create = () => /* @__PURE__ */ new Map();
 var copy = (m) => {
@@ -7693,9 +7699,6 @@ function createBatchUsersResolver({
   };
 }
 
-// src/liveblocks-text-editor.tsx
-import { html, htmlSafe } from "@liveblocks/core";
-
 // src/lib/constants.ts
 var MENTION_CHARACTER = "@";
 
@@ -7927,8 +7930,7 @@ function findTiptapMentionNodeWithContext({
   };
 }
 
-// src/liveblocks-text-editor.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/liveblocks-text-editor.ts
 var baseLiveblocksTextEditorTextFormat = {
   bold: false,
   italic: false,
@@ -7967,7 +7969,8 @@ var transformLexicalMentionNodeWithContext = (mentionNodeWithContext) => {
       } else if (node.group === "decorator" && isSerializedMentionNode(node)) {
         textEditorNodes.push({
           type: "mention",
-          userId: node.attributes.__userId
+          kind: "user",
+          id: node.attributes.__userId
         });
       }
     }
@@ -7975,7 +7978,8 @@ var transformLexicalMentionNodeWithContext = (mentionNodeWithContext) => {
   transform(before);
   textEditorNodes.push({
     type: "mention",
-    userId: mention.attributes.__userId
+    kind: "user",
+    id: mention.attributes.__userId
   });
   transform(after);
   return textEditorNodes;
@@ -8008,7 +8012,8 @@ var transformTiptapMentionNodeWithContext = (mentionNodeWithContext) => {
       } else if (isSerializedMentionNode2(node)) {
         textEditorNodes.push({
           type: "mention",
-          userId: node.attrs.id
+          kind: "user",
+          id: node.attrs.id
         });
       }
     }
@@ -8016,7 +8021,8 @@ var transformTiptapMentionNodeWithContext = (mentionNodeWithContext) => {
   transform(before);
   textEditorNodes.push({
     type: "mention",
-    userId: mention.attrs.id
+    kind: "user",
+    id: mention.attrs.id
   });
   transform(after);
   return textEditorNodes;
@@ -8042,8 +8048,8 @@ var resolveUsersInLiveblocksTextEditorNodes = async (nodes, resolveUsers) => {
   }
   const mentionedUserIds = /* @__PURE__ */ new Set();
   for (const node of nodes) {
-    if (node.type === "mention") {
-      mentionedUserIds.add(node.userId);
+    if (node.type === "mention" && node.kind === "user") {
+      mentionedUserIds.add(node.id);
     }
   }
   const userIds = Array.from(mentionedUserIds);
@@ -8058,119 +8064,35 @@ var resolveUsersInLiveblocksTextEditorNodes = async (nodes, resolveUsers) => {
   }
   return resolvedUsers;
 };
-var baseComponents = {
-  Container: ({ children }) => /* @__PURE__ */ jsx("div", { children }),
-  Mention: ({ element, user }) => /* @__PURE__ */ jsxs("span", { "data-mention": true, children: [
-    MENTION_CHARACTER,
-    user?.name ?? element.userId
-  ] }),
-  Text: ({ element }) => {
-    let children = element.text;
-    if (element.bold) {
-      children = /* @__PURE__ */ jsx("strong", { children });
-    }
-    if (element.italic) {
-      children = /* @__PURE__ */ jsx("em", { children });
-    }
-    if (element.strikethrough) {
-      children = /* @__PURE__ */ jsx("s", { children });
-    }
-    if (element.code) {
-      children = /* @__PURE__ */ jsx("code", { children });
-    }
-    return /* @__PURE__ */ jsx("span", { children });
-  }
-};
-async function convertTextEditorNodesAsReact(nodes, options) {
-  const Components = {
-    ...baseComponents,
-    ...options?.components
-  };
-  const resolvedUsers = await resolveUsersInLiveblocksTextEditorNodes(
-    nodes,
-    options?.resolveUsers
-  );
-  const children = nodes.map((node, index) => {
-    switch (node.type) {
-      case "mention":
-        return /* @__PURE__ */ jsx(
-          Components.Mention,
-          {
-            element: node,
-            user: resolvedUsers.get(node.userId)
-          },
-          `lb-text-editor-mention-${index}-${node.userId}`
-        );
-      case "text":
-        return /* @__PURE__ */ jsx(
-          Components.Text,
-          {
-            element: node
-          },
-          `lb-text-editor-text-${index}`
-        );
-    }
-  });
-  return /* @__PURE__ */ jsx(Components.Container, { children }, "lb-text-editor-container");
-}
-var baseStyles = {
-  container: {
-    fontSize: "14px"
-  },
-  strong: {
-    fontWeight: 500
-  },
-  code: {
-    fontFamily: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace',
-    backgroundColor: "rgba(0,0,0,0.05)",
-    border: "solid 1px rgba(0,0,0,0.1)",
-    borderRadius: "4px"
-  },
-  mention: {
-    color: "blue"
-  }
-};
-async function convertTextEditorNodesAsHtml(nodes, options) {
-  const styles = { ...baseStyles, ...options?.styles };
+
+// src/mention-content.tsx
+import { assertNever } from "@liveblocks/core";
+async function convertMentionContent(nodes, options) {
   const resolvedUsers = await resolveUsersInLiveblocksTextEditorNodes(
     nodes,
     options?.resolveUsers
   );
-  const children = nodes.map((node) => {
+  const blocks = nodes.map((node, index) => {
     switch (node.type) {
       case "mention": {
-        const user = resolvedUsers.get(node.userId);
-        return html`<span data-mention style="${toInlineCSSString(styles.mention)}">${MENTION_CHARACTER}${user?.name ? html`${user?.name}` : node.userId}</span>`;
+        if (node.kind !== "user") {
+          return assertNever(node.kind, "Unknown mention kind");
+        }
+        return options.elements.mention(
+          { node, user: resolvedUsers.get(node.id) },
+          index
+        );
       }
       case "text": {
-        let children2 = node.text;
-        if (!children2) {
-          return html`${children2}`;
-        }
-        if (node.bold) {
-          children2 = html`<strong style="${toInlineCSSString(styles.strong)}">${children2}</strong>`;
-        }
-        if (node.italic) {
-          children2 = html`<em>${children2}</em>`;
-        }
-        if (node.strikethrough) {
-          children2 = html`<s>${children2}</s>`;
-        }
-        if (node.code) {
-          children2 = html`<code style="${toInlineCSSString(styles.code)}">${children2}</code>`;
-        }
-        return html`${children2}`;
+        return options.elements.text({ node }, index);
       }
     }
-  }).join("");
-  const content = [
-    // prettier-ignore
-    html`<div style="${toInlineCSSString(styles.container)}">${htmlSafe(children)}</div>`
-  ];
-  return content.join("\n");
+  });
+  return options.elements.container({ children: blocks });
 }
 
 // src/text-mention-notification.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var extractTextMentionNotificationData = async ({
   client,
   event
@@ -8213,7 +8135,8 @@ var extractTextMentionNotificationData = async ({
         editor: "lexical",
         mentionNodeWithContext,
         createdAt: mentionCreatedAt,
-        userId: mentionAuthorUserId
+        userId,
+        createdBy: mentionAuthorUserId
       };
     }
     case "tiptap": {
@@ -8230,26 +8153,31 @@ var extractTextMentionNotificationData = async ({
         editor: "tiptap",
         mentionNodeWithContext,
         createdAt: mentionCreatedAt,
-        userId: mentionAuthorUserId
+        userId,
+        createdBy: mentionAuthorUserId
       };
     }
   }
 };
-var prepareTextMentionNotificationEmailBaseData = async ({
-  client,
-  event,
-  options = {}
-}) => {
+async function prepareTextMentionNotificationEmail(client, event, options, elements, callerName) {
   const { roomId, mentionId } = event.data;
-  const roomInfo = options.resolveRoomInfo ? await options.resolveRoomInfo({ roomId }) : void 0;
-  const resolvedRoomInfo = {
-    ...roomInfo,
-    name: roomInfo?.name ?? roomId
-  };
   const data = await extractTextMentionNotificationData({ client, event });
   if (data === null) {
     return null;
   }
+  const roomInfo = options.resolveRoomInfo ? await options.resolveRoomInfo({ roomId: event.data.roomId }) : void 0;
+  const resolvedRoomInfo = {
+    ...roomInfo,
+    name: roomInfo?.name ?? event.data.roomId
+  };
+  const batchUsersResolver = createBatchUsersResolver({
+    resolveUsers: options.resolveUsers,
+    callerName
+  });
+  const authorsInfoPromise = resolveAuthorsInfo({
+    userIds: [data.createdBy],
+    resolveUsers: batchUsersResolver.resolveUsers
+  });
   let textEditorNodes = [];
   switch (data.editor) {
     case "lexical": {
@@ -8267,113 +8195,156 @@ var prepareTextMentionNotificationEmailBaseData = async ({
       break;
     }
   }
-  return {
-    mention: {
-      id: mentionId,
-      roomId,
-      textEditorNodes,
-      createdAt: data.createdAt,
-      userId: data.userId
-    },
-    roomInfo: resolvedRoomInfo
-  };
-};
-async function prepareTextMentionNotificationEmailAsReact(client, event, options = {}) {
-  const data = await prepareTextMentionNotificationEmailBaseData({
-    client,
-    event,
-    options: {
-      resolveRoomInfo: options.resolveRoomInfo
-    }
-  });
-  if (data === null) {
-    return null;
-  }
-  const { mention, roomInfo } = data;
-  const batchUsersResolver = createBatchUsersResolver({
-    resolveUsers: options.resolveUsers,
-    callerName: "prepareTextMentionNotificationEmailAsReact"
-  });
-  const authorsInfoPromise = resolveAuthorsInfo({
-    userIds: [mention.userId],
-    resolveUsers: batchUsersResolver.resolveUsers
-  });
-  const contentPromise = convertTextEditorNodesAsReact(
-    mention.textEditorNodes,
+  const contentPromise = convertMentionContent(
+    textEditorNodes,
     {
       resolveUsers: batchUsersResolver.resolveUsers,
-      components: options.components
+      elements
     }
   );
   await batchUsersResolver.resolve();
-  const [authorsInfo, reactContent] = await Promise.all([
+  const [authorsInfo, content] = await Promise.all([
     authorsInfoPromise,
     contentPromise
   ]);
-  const authorInfo = authorsInfo.get(mention.userId);
+  const authorInfo = authorsInfo.get(data.createdBy);
   return {
     mention: {
-      id: mention.id,
+      // TODO: When introducing new mention kinds (e.g. group mentions), this should be updated
+      kind: "user",
+      id: data.userId,
+      textMentionId: mentionId,
+      roomId,
       author: {
-        id: mention.userId,
-        info: authorInfo ?? { name: mention.userId }
+        id: data.createdBy,
+        info: authorInfo ?? { name: data.createdBy }
       },
-      roomId: mention.roomId,
-      reactContent,
-      createdAt: mention.createdAt
+      content,
+      createdAt: data.createdAt
     },
-    roomInfo
+    roomInfo: resolvedRoomInfo
   };
 }
-async function prepareTextMentionNotificationEmailAsHtml(client, event, options = {}) {
-  const data = await prepareTextMentionNotificationEmailBaseData({
+var baseComponents = {
+  Container: ({ children }) => /* @__PURE__ */ jsx("div", { children }),
+  Mention: ({ element, user }) => /* @__PURE__ */ jsxs("span", { "data-mention": true, children: [
+    MENTION_CHARACTER,
+    user?.name ?? element.id
+  ] }),
+  Text: ({ element }) => {
+    let children = element.text;
+    if (element.bold) {
+      children = /* @__PURE__ */ jsx("strong", { children });
+    }
+    if (element.italic) {
+      children = /* @__PURE__ */ jsx("em", { children });
+    }
+    if (element.strikethrough) {
+      children = /* @__PURE__ */ jsx("s", { children });
+    }
+    if (element.code) {
+      children = /* @__PURE__ */ jsx("code", { children });
+    }
+    return /* @__PURE__ */ jsx("span", { children });
+  }
+};
+async function prepareTextMentionNotificationEmailAsReact(client, event, options = {}) {
+  const Components = { ...baseComponents, ...options.components };
+  const data = await prepareTextMentionNotificationEmail(
     client,
     event,
-    options: {
-      resolveRoomInfo: options.resolveRoomInfo
-    }
-  });
+    {
+      resolveRoomInfo: options.resolveRoomInfo,
+      resolveUsers: options.resolveUsers
+    },
+    {
+      container: ({ children }) => /* @__PURE__ */ jsx(Components.Container, { children }, "lb-text-editor-container"),
+      mention: ({ node, user }, index) => /* @__PURE__ */ jsx(
+        Components.Mention,
+        {
+          element: node,
+          user
+        },
+        `lb-text-editor-mention-${index}`
+      ),
+      text: ({ node }, index) => /* @__PURE__ */ jsx(Components.Text, { element: node }, `lb-text-editor-text-${index}`)
+    },
+    "prepareTextMentionNotificationEmailAsReact"
+  );
   if (data === null) {
     return null;
   }
-  const { mention, roomInfo } = data;
-  const batchUsersResolver = createBatchUsersResolver({
-    resolveUsers: options.resolveUsers,
-    callerName: "prepareTextMentionNotificationEmailAsHtml"
-  });
-  const authorsInfoPromise = resolveAuthorsInfo({
-    userIds: [mention.userId],
-    resolveUsers: batchUsersResolver.resolveUsers
-  });
-  const contentPromise = convertTextEditorNodesAsHtml(mention.textEditorNodes, {
-    resolveUsers: batchUsersResolver.resolveUsers,
-    styles: options.styles
-  });
-  await batchUsersResolver.resolve();
-  const [authorsInfo, htmlContent] = await Promise.all([
-    authorsInfoPromise,
-    contentPromise
-  ]);
-  const authorInfo = authorsInfo.get(mention.userId);
-  return {
-    mention: {
-      id: mention.id,
-      author: {
-        id: mention.userId,
-        info: authorInfo ?? { name: mention.userId }
+  return data;
+}
+var baseStyles = {
+  container: {
+    fontSize: "14px"
+  },
+  strong: {
+    fontWeight: 500
+  },
+  code: {
+    fontFamily: 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace',
+    backgroundColor: "rgba(0,0,0,0.05)",
+    border: "solid 1px rgba(0,0,0,0.1)",
+    borderRadius: "4px"
+  },
+  mention: {
+    color: "blue"
+  }
+};
+async function prepareTextMentionNotificationEmailAsHtml(client, event, options = {}) {
+  const styles = { ...baseStyles, ...options.styles };
+  const data = await prepareTextMentionNotificationEmail(
+    client,
+    event,
+    {
+      resolveRoomInfo: options.resolveRoomInfo,
+      resolveUsers: options.resolveUsers
+    },
+    {
+      container: ({ children }) => {
+        const content = [
+          // prettier-ignore
+          html`<div style="${toInlineCSSString(styles.container)}">${htmlSafe(children.join(""))}</div>`
+        ];
+        return content.join("\n");
       },
-      roomId: mention.roomId,
-      htmlContent,
-      createdAt: mention.createdAt
+      mention: ({ node, user }) => {
+        return html`<span data-mention style="${toInlineCSSString(styles.mention)}">${MENTION_CHARACTER}${user?.name ? html`${user?.name}` : node.id}</span>`;
+      },
+      text: ({ node }) => {
+        let children = node.text;
+        if (!children) {
+          return html`${children}`;
+        }
+        if (node.bold) {
+          children = html`<strong style="${toInlineCSSString(styles.strong)}">${children}</strong>`;
+        }
+        if (node.italic) {
+          children = html`<em>${children}</em>`;
+        }
+        if (node.strikethrough) {
+          children = html`<s>${children}</s>`;
+        }
+        if (node.code) {
+          children = html`<code style="${toInlineCSSString(styles.code)}">${children}</code>`;
+        }
+        return html`${children}`;
+      }
     },
-    roomInfo
-  };
+    "prepareTextMentionNotificationEmailAsHtml"
+  );
+  if (data === null) {
+    return null;
+  }
+  return data;
 }
 
 // src/thread-notification.tsx
 import {
   generateCommentUrl,
-  getMentionedIdsFromCommentBody,
+  getMentionsFromCommentBody,
   html as html2,
   htmlSafe as htmlSafe2
 } from "@liveblocks/core";
@@ -8470,8 +8441,11 @@ var getLastUnreadCommentWithMention = ({
   mentionedUserId
 }) => {
   return Array.from(comments).reverse().filter((c) => c.userId !== mentionedUserId).find((c) => {
-    const mentionedUserIds = getMentionedIdsFromCommentBody(c.body);
-    return mentionedUserIds.includes(mentionedUserId);
+    const mentions = getMentionsFromCommentBody(
+      c.body,
+      (mention) => mention.kind === "user" && mention.id === mentionedUserId
+    );
+    return mentions.length > 0;
   }) ?? null;
 };
 var extractThreadNotificationData = async ({
@@ -8667,23 +8641,7 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
   if (data === null) {
     return null;
   }
-  switch (data.type) {
-    case "unreadMention": {
-      return {
-        ...data,
-        comment: { ...data.comment, htmlBody: data.comment.body }
-      };
-    }
-    case "unreadReplies": {
-      return {
-        ...data,
-        comments: data.comments.map((comment) => ({
-          ...comment,
-          htmlBody: comment.body
-        }))
-      };
-    }
-  }
+  return data;
 }
 var baseComponents2 = {
   Container: ({ children }) => /* @__PURE__ */ jsx2("div", { children }),
@@ -8751,23 +8709,7 @@ async function prepareThreadNotificationEmailAsReact(client, event, options = {}
   if (data === null) {
     return null;
   }
-  switch (data.type) {
-    case "unreadMention": {
-      return {
-        ...data,
-        comment: { ...data.comment, reactBody: data.comment.body }
-      };
-    }
-    case "unreadReplies": {
-      return {
-        ...data,
-        comments: data.comments.map((comment) => ({
-          ...comment,
-          reactBody: comment.body
-        }))
-      };
-    }
-  }
+  return data;
 }
 
 // src/index.ts