@liveblocks/emails 2.21.0 → 2.22.0

package/dist/index.js

@@ -3,7 +3,7 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/emails";
-var PKG_VERSION = "2.21.0";
+var PKG_VERSION = "2.22.0";
 var PKG_FORMAT = "esm";
 
 // ../../node_modules/lib0/map.js
@@ -7368,6 +7368,9 @@ var isString = (value) => {
 var isMentionNodeAttributeId = (value) => {
   return isString(value) && value.startsWith("in_");
 };
+var exists = (input) => {
+  return input !== null && input !== void 0;
+};
 
 // src/lexical-editor.ts
 function createSerializedLexicalMapNode(item) {
@@ -8370,51 +8373,20 @@ async function prepareTextMentionNotificationEmailAsHtml(client, event, options
 // src/thread-notification.tsx
 import {
   generateCommentUrl,
-  getMentionedIdsFromCommentBody
+  getMentionedIdsFromCommentBody,
+  html as html2,
+  htmlSafe as htmlSafe2
 } from "@liveblocks/core";
 
 // src/comment-body.tsx
 import {
-  html as html2,
-  htmlSafe as htmlSafe2,
   isCommentBodyLink,
   isCommentBodyMention,
   isCommentBodyText,
   resolveUsersInCommentBody,
-  stringifyCommentBody,
   toAbsoluteUrl
 } from "@liveblocks/core";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var baseComponents2 = {
-  Container: ({ children }) => /* @__PURE__ */ jsx2("div", { children }),
-  Paragraph: ({ children }) => /* @__PURE__ */ jsx2("p", { children }),
-  Text: ({ element }) => {
-    let children = element.text;
-    if (element.bold) {
-      children = /* @__PURE__ */ jsx2("strong", { children });
-    }
-    if (element.italic) {
-      children = /* @__PURE__ */ jsx2("em", { children });
-    }
-    if (element.strikethrough) {
-      children = /* @__PURE__ */ jsx2("s", { children });
-    }
-    if (element.code) {
-      children = /* @__PURE__ */ jsx2("code", { children });
-    }
-    return /* @__PURE__ */ jsx2("span", { children });
-  },
-  Link: ({ element, href }) => /* @__PURE__ */ jsx2("a", { href, target: "_blank", rel: "noopener noreferrer", children: element.text ?? element.url }),
-  Mention: ({ element, user }) => /* @__PURE__ */ jsxs2("span", { "data-mention": true, children: [
-    MENTION_CHARACTER,
-    user?.name ?? element.id
-  ] })
-};
-async function convertCommentBodyAsReact(body, options) {
-  const Components = {
-    ...baseComponents2,
-    ...options?.components
-  };
+async function convertCommentBody(body, options) {
   const resolvedUsers = await resolveUsersInCommentBody(
     body,
     options?.resolveUsers
@@ -8424,38 +8396,30 @@ async function convertCommentBodyAsReact(body, options) {
       case "paragraph": {
         const children = block.children.map((inline, inlineIndex) => {
           if (isCommentBodyMention(inline)) {
-            return inline.id ? /* @__PURE__ */ jsx2(
-              Components.Mention,
+            return options.elements.mention(
               {
                 element: inline,
                 user: resolvedUsers.get(inline.id)
               },
-              `lb-comment-body-mention-${inlineIndex}`
-            ) : null;
+              inlineIndex
+            );
           }
           if (isCommentBodyLink(inline)) {
             const href = toAbsoluteUrl(inline.url) ?? inline.url;
-            return /* @__PURE__ */ jsx2(
-              Components.Link,
-              {
-                element: inline,
-                href
-              },
-              `lb-comment-body-link-${inlineIndex}`
+            return options.elements.link(
+              { element: inline, href },
+              inlineIndex
             );
           }
           if (isCommentBodyText(inline)) {
-            return /* @__PURE__ */ jsx2(
-              Components.Text,
-              {
-                element: inline
-              },
-              `lb-comment-body-text-${inlineIndex}`
-            );
+            return options.elements.text({ element: inline }, inlineIndex);
           }
           return null;
-        });
-        return /* @__PURE__ */ jsx2(Components.Paragraph, { children }, `lb-comment-body-paragraph-${index}`);
+        }).filter(exists);
+        return options.elements.paragraph(
+          { element: block, children },
+          index
+        );
       }
       default:
         console.warn(
@@ -8463,68 +8427,8 @@ async function convertCommentBodyAsReact(body, options) {
         );
         return null;
     }
-  });
-  return /* @__PURE__ */ jsx2(Components.Container, { children: blocks }, "lb-comment-body-container");
-}
-var baseStyles2 = {
-  paragraph: {
-    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"
-  },
-  link: {
-    textDecoration: "underline"
-  }
-};
-async function convertCommentBodyAsHtml(body, options) {
-  const styles = { ...baseStyles2, ...options?.styles };
-  const htmlBody = await stringifyCommentBody(body, {
-    format: "html",
-    resolveUsers: options?.resolveUsers,
-    elements: {
-      // NOTE: using prettier-ignore to preserve template strings
-      paragraph: ({ children }) => (
-        // prettier-ignore
-        children ? html2`<p style="${toInlineCSSString(styles.paragraph)}">${htmlSafe2(children)}</p>` : children
-      ),
-      text: ({ element }) => {
-        let children = element.text;
-        if (!children) {
-          return html2`${children}`;
-        }
-        if (element.bold) {
-          children = html2`<strong style="${toInlineCSSString(styles.strong)}">${children}</strong>`;
-        }
-        if (element.italic) {
-          children = html2`<em>${children}</em>`;
-        }
-        if (element.strikethrough) {
-          children = html2`<s>${children}</s>`;
-        }
-        if (element.code) {
-          children = html2`<code style="${toInlineCSSString(styles.code)}">${children}</code>`;
-        }
-        return html2`${children}`;
-      },
-      link: ({ element, href }) => {
-        return html2`<a href="${href}" target="_blank" rel="noopener noreferrer" style="${toInlineCSSString(styles.link)}">${element.text ? html2`${element.text}` : element.url}</a>`;
-      },
-      mention: ({ element, user }) => {
-        return html2`<span data-mention style="${toInlineCSSString(styles.mention)}">${MENTION_CHARACTER}${user?.name ? html2`${user?.name}` : element.id}</span>`;
-      }
-    }
-  });
-  return htmlBody;
+  }).filter(exists);
+  return options.elements.container({ children: blocks });
 }
 
 // src/comment-with-body.ts
@@ -8542,6 +8446,7 @@ function filterCommentsWithBody(comments) {
 }
 
 // src/thread-notification.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var getUnreadComments = ({
   comments,
   inboxNotification,
@@ -8595,72 +8500,19 @@ var extractThreadNotificationData = async ({
     comments: unreadComments
   };
 };
-var makeCommentEmailBaseData = ({
-  roomInfo,
-  comment
-}) => {
-  const url = roomInfo?.url ? generateCommentUrl({
-    roomUrl: roomInfo?.url,
-    commentId: comment.id
-  }) : void 0;
-  return {
-    id: comment.id,
-    userId: comment.userId,
-    threadId: comment.threadId,
-    roomId: comment.roomId,
-    createdAt: comment.createdAt,
-    url,
-    rawBody: comment.body
-  };
-};
-var prepareThreadNotificationEmailBaseData = async ({
-  client,
-  event,
-  options = {}
-}) => {
-  const { roomId } = event.data;
-  const roomInfo = options.resolveRoomInfo ? await options.resolveRoomInfo({ roomId }) : void 0;
-  const resolvedRoomInfo = {
-    ...roomInfo,
-    name: roomInfo?.name ?? roomId
-  };
+async function prepareThreadNotificationEmail(client, event, options, elements, callerName) {
   const data = await extractThreadNotificationData({ client, event });
   if (data === null) {
     return null;
   }
-  switch (data.type) {
-    case "unreadMention":
-      return {
-        type: "unreadMention",
-        comment: makeCommentEmailBaseData({
-          roomInfo,
-          comment: data.comment
-        }),
-        roomInfo: resolvedRoomInfo
-      };
-    case "unreadReplies": {
-      return {
-        type: "unreadReplies",
-        comments: data.comments.map(
-          (comment) => makeCommentEmailBaseData({ roomInfo, comment })
-        ),
-        roomInfo: resolvedRoomInfo
-      };
-    }
-  }
-};
-async function prepareThreadNotificationEmailAsHtml(client, event, options = {}) {
-  const data = await prepareThreadNotificationEmailBaseData({
-    client,
-    event,
-    options: { resolveRoomInfo: options.resolveRoomInfo }
-  });
-  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: "prepareThreadNotificationEmailAsHtml"
+    callerName
   });
   switch (data.type) {
     case "unreadMention": {
@@ -8669,16 +8521,20 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
         userIds: [comment.userId],
         resolveUsers: batchUsersResolver.resolveUsers
       });
-      const commentBodyPromise = convertCommentBodyAsHtml(comment.rawBody, {
+      const commentBodyPromise = convertCommentBody(comment.body, {
         resolveUsers: batchUsersResolver.resolveUsers,
-        styles: options.styles
+        elements
       });
       await batchUsersResolver.resolve();
-      const [authorsInfo, commentBodyHtml] = await Promise.all([
+      const [authorsInfo, commentBody] = await Promise.all([
         authorsInfoPromise,
         commentBodyPromise
       ]);
       const authorInfo = authorsInfo.get(comment.userId);
+      const url = roomInfo?.url ? generateCommentUrl({
+        roomUrl: roomInfo?.url,
+        commentId: comment.id
+      }) : void 0;
       return {
         type: "unreadMention",
         comment: {
@@ -8690,10 +8546,10 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
             info: authorInfo ?? { name: comment.userId }
           },
           createdAt: comment.createdAt,
-          url: comment.url,
-          htmlBody: commentBodyHtml
+          url,
+          body: commentBody
         },
-        roomInfo: data.roomInfo
+        roomInfo: resolvedRoomInfo
       };
     }
     case "unreadReplies": {
@@ -8703,9 +8559,9 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
         resolveUsers: batchUsersResolver.resolveUsers
       });
       const commentBodiesPromises = comments.map(
-        (c) => convertCommentBodyAsHtml(c.rawBody, {
+        (c) => convertCommentBody(c.body, {
           resolveUsers: batchUsersResolver.resolveUsers,
-          styles: options.styles
+          elements
         })
       );
       await batchUsersResolver.resolve();
@@ -8717,7 +8573,11 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
         type: "unreadReplies",
         comments: comments.map((comment, index) => {
           const authorInfo = authorsInfo.get(comment.userId);
-          const commentBodyHtml = commentBodies[index];
+          const commentBody = commentBodies[index];
+          const url = roomInfo?.url ? generateCommentUrl({
+            roomUrl: roomInfo?.url,
+            commentId: comment.id
+          }) : void 0;
           return {
             id: comment.id,
             threadId: comment.threadId,
@@ -8727,98 +8587,179 @@ async function prepareThreadNotificationEmailAsHtml(client, event, options = {})
               info: authorInfo ?? { name: comment.userId }
             },
             createdAt: comment.createdAt,
-            url: comment.url,
-            htmlBody: commentBodyHtml ?? ""
+            url,
+            body: commentBody
           };
         }),
-        roomInfo: data.roomInfo
+        roomInfo: resolvedRoomInfo
       };
     }
   }
 }
-async function prepareThreadNotificationEmailAsReact(client, event, options = {}) {
-  const data = await prepareThreadNotificationEmailBaseData({
+var baseStyles2 = {
+  paragraph: {
+    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"
+  },
+  link: {
+    textDecoration: "underline"
+  }
+};
+async function prepareThreadNotificationEmailAsHtml(client, event, options = {}) {
+  const styles = { ...baseStyles2, ...options?.styles };
+  const data = await prepareThreadNotificationEmail(
     client,
     event,
-    options: { resolveRoomInfo: options.resolveRoomInfo }
-  });
+    {
+      resolveUsers: options.resolveUsers,
+      resolveRoomInfo: options.resolveRoomInfo
+    },
+    {
+      container: ({ children }) => children.join("\n"),
+      paragraph: ({ children }) => {
+        const unsafe = children.join("");
+        return unsafe ? html2`<p style="${toInlineCSSString(styles.paragraph)}">${htmlSafe2(unsafe)}</p>` : unsafe;
+      },
+      text: ({ element }) => {
+        let children = element.text;
+        if (!children) {
+          return html2`${children}`;
+        }
+        if (element.bold) {
+          children = html2`<strong style="${toInlineCSSString(styles.strong)}">${children}</strong>`;
+        }
+        if (element.italic) {
+          children = html2`<em>${children}</em>`;
+        }
+        if (element.strikethrough) {
+          children = html2`<s>${children}</s>`;
+        }
+        if (element.code) {
+          children = html2`<code style="${toInlineCSSString(styles.code)}">${children}</code>`;
+        }
+        return html2`${children}`;
+      },
+      link: ({ element, href }) => {
+        return html2`<a href="${href}" target="_blank" rel="noopener noreferrer" style="${toInlineCSSString(styles.link)}">${element.text ? html2`${element.text}` : element.url}</a>`;
+      },
+      mention: ({ element, user }) => {
+        return html2`<span data-mention style="${toInlineCSSString(styles.mention)}">${MENTION_CHARACTER}${user?.name ? html2`${user?.name}` : element.id}</span>`;
+      }
+    },
+    "prepareThreadNotificationEmailAsHtml"
+  );
   if (data === null) {
     return null;
   }
-  const batchUsersResolver = createBatchUsersResolver({
-    resolveUsers: options.resolveUsers,
-    callerName: "prepareThreadNotificationEmailAsReact"
-  });
   switch (data.type) {
     case "unreadMention": {
-      const { comment } = data;
-      const authorsInfoPromise = resolveAuthorsInfo({
-        userIds: [comment.userId],
-        resolveUsers: batchUsersResolver.resolveUsers
-      });
-      const commentBodyPromise = convertCommentBodyAsReact(comment.rawBody, {
-        resolveUsers: batchUsersResolver.resolveUsers,
-        components: options.components
-      });
-      await batchUsersResolver.resolve();
-      const [authorsInfo, commentBodyReact] = await Promise.all([
-        authorsInfoPromise,
-        commentBodyPromise
-      ]);
-      const authorInfo = authorsInfo.get(comment.userId);
       return {
-        type: "unreadMention",
-        comment: {
-          id: comment.id,
-          threadId: comment.threadId,
-          roomId: comment.roomId,
-          author: {
-            id: comment.userId,
-            info: authorInfo ?? { name: comment.userId }
-          },
-          createdAt: comment.createdAt,
-          url: comment.url,
-          reactBody: commentBodyReact
+        ...data,
+        comment: { ...data.comment, htmlBody: data.comment.body }
+      };
+    }
+    case "unreadReplies": {
+      return {
+        ...data,
+        comments: data.comments.map((comment) => ({
+          ...comment,
+          htmlBody: comment.body
+        }))
+      };
+    }
+  }
+}
+var baseComponents2 = {
+  Container: ({ children }) => /* @__PURE__ */ jsx2("div", { children }),
+  Paragraph: ({ children }) => /* @__PURE__ */ jsx2("p", { children }),
+  Text: ({ element }) => {
+    let children = element.text;
+    if (element.bold) {
+      children = /* @__PURE__ */ jsx2("strong", { children });
+    }
+    if (element.italic) {
+      children = /* @__PURE__ */ jsx2("em", { children });
+    }
+    if (element.strikethrough) {
+      children = /* @__PURE__ */ jsx2("s", { children });
+    }
+    if (element.code) {
+      children = /* @__PURE__ */ jsx2("code", { children });
+    }
+    return /* @__PURE__ */ jsx2("span", { children });
+  },
+  Link: ({ element, href }) => /* @__PURE__ */ jsx2("a", { href, target: "_blank", rel: "noopener noreferrer", children: element.text ?? element.url }),
+  Mention: ({ element, user }) => /* @__PURE__ */ jsxs2("span", { "data-mention": true, children: [
+    MENTION_CHARACTER,
+    user?.name ?? element.id
+  ] })
+};
+async function prepareThreadNotificationEmailAsReact(client, event, options = {}) {
+  const Components = { ...baseComponents2, ...options?.components };
+  const data = await prepareThreadNotificationEmail(
+    client,
+    event,
+    {
+      resolveUsers: options.resolveUsers,
+      resolveRoomInfo: options.resolveRoomInfo
+    },
+    {
+      container: ({ children }) => /* @__PURE__ */ jsx2(Components.Container, { children }, "lb-comment-body-container"),
+      paragraph: ({ children }, index) => /* @__PURE__ */ jsx2(Components.Paragraph, { children }, `lb-comment-body-paragraph-${index}`),
+      text: ({ element }, index) => /* @__PURE__ */ jsx2(
+        Components.Text,
+        {
+          element
+        },
+        `lb-comment-body-text-${index}`
+      ),
+      link: ({ element, href }, index) => /* @__PURE__ */ jsx2(
+        Components.Link,
+        {
+          element,
+          href
+        },
+        `lb-comment-body-link-${index}`
+      ),
+      mention: ({ element, user }, index) => element.id ? /* @__PURE__ */ jsx2(
+        Components.Mention,
+        {
+          element,
+          user
         },
-        roomInfo: data.roomInfo
+        `lb-comment-body-mention-${index}`
+      ) : null
+    },
+    "prepareThreadNotificationEmailAsReact"
+  );
+  if (data === null) {
+    return null;
+  }
+  switch (data.type) {
+    case "unreadMention": {
+      return {
+        ...data,
+        comment: { ...data.comment, reactBody: data.comment.body }
       };
     }
     case "unreadReplies": {
-      const { comments } = data;
-      const authorsInfoPromise = resolveAuthorsInfo({
-        userIds: comments.map((c) => c.userId),
-        resolveUsers: batchUsersResolver.resolveUsers
-      });
-      const commentBodiesPromises = comments.map(
-        (c) => convertCommentBodyAsReact(c.rawBody, {
-          resolveUsers: batchUsersResolver.resolveUsers,
-          components: options.components
-        })
-      );
-      await batchUsersResolver.resolve();
-      const [authorsInfo, ...commentBodies] = await Promise.all([
-        authorsInfoPromise,
-        ...commentBodiesPromises
-      ]);
       return {
-        type: "unreadReplies",
-        comments: comments.map((comment, index) => {
-          const authorInfo = authorsInfo.get(comment.userId);
-          const commentBodyReact = commentBodies[index];
-          return {
-            id: comment.id,
-            threadId: comment.threadId,
-            roomId: comment.roomId,
-            author: {
-              id: comment.userId,
-              info: authorInfo ?? { name: comment.userId }
-            },
-            createdAt: comment.createdAt,
-            url: comment.url,
-            reactBody: commentBodyReact ?? null
-          };
-        }),
-        roomInfo: data.roomInfo
+        ...data,
+        comments: data.comments.map((comment) => ({
+          ...comment,
+          reactBody: comment.body
+        }))
       };
     }
   }