@liveblocks/react-ui/dist/primitives/Comment/index.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

import { jsx, jsxs } from 'react/jsx-runtime';
import { Slot } from '@radix-ui/react-slot';
import { forwardRef, useMemo } from 'react';
import { MENTION_CHARACTER } from '../../slate/plugins/mentions.js';
import { isCommentBodyMention, isCommentBodyLink, toAbsoluteUrl } from './utils.js';

const COMMENT_MENTION_NAME = "CommentMention";
const COMMENT_BODY_NAME = "CommentBody";
const COMMENT_LINK_NAME = "CommentLink";
const CommentMention = forwardRef(
  ({ children, asChild, ...props }, forwardedRef) => {
    const Component = asChild ? Slot : "span";
    return /* @__PURE__ */ jsx(Component, {
      ...props,
      ref: forwardedRef,
      children
    });
  }
);
const CommentLink = forwardRef(
  ({ children, asChild, ...props }, forwardedRef) => {
    const Component = asChild ? Slot : "a";
    return /* @__PURE__ */ jsx(Component, {
      target: "_blank",
      rel: "noopener noreferrer nofollow",
      ...props,
      ref: forwardedRef,
      children
    });
  }
);
const defaultBodyComponents = {
  Mention: ({ userId }) => {
    return /* @__PURE__ */ jsxs(CommentMention, {
      children: [
        MENTION_CHARACTER,
        userId
      ]
    });
  },
  Link: ({ href, children }) => {
    return /* @__PURE__ */ jsx(CommentLink, {
      href,
      children
    });
  }
};
const CommentBody = forwardRef(
  ({ body, components, style, asChild, ...props }, forwardedRef) => {
    const Component = asChild ? Slot : "div";
    const { Mention, Link } = useMemo(
      () => ({ ...defaultBodyComponents, ...components }),
      [components]
    );
    if (!body || !body?.content) {
      return null;
    }
    return /* @__PURE__ */ jsx(Component, {
      ...props,
      style: { whiteSpace: "break-spaces", ...style },
      ref: forwardedRef,
      children: body.content.map((block, index) => {
        switch (block.type) {
          case "paragraph":
            return /* @__PURE__ */ jsx("p", {
              style: { minHeight: "1lh" },
              children: block.children.map((inline, index2) => {
                if (isCommentBodyMention(inline)) {
                  return inline.id ? /* @__PURE__ */ jsx(Mention, {
                    userId: inline.id
                  }, index2) : null;
                }
                if (isCommentBodyLink(inline)) {
                  const href = toAbsoluteUrl(inline.url) ?? inline.url;
                  return /* @__PURE__ */ jsx(Link, {
                    href,
                    children: inline.text ?? inline.url
                  }, index2);
                }
                let children = inline.text;
                if (inline.bold) {
                  children = /* @__PURE__ */ jsx("strong", {
                    children
                  }, index2);
                }
                if (inline.italic) {
                  children = /* @__PURE__ */ jsx("em", {
                    children
                  }, index2);
                }
                if (inline.strikethrough) {
                  children = /* @__PURE__ */ jsx("s", {
                    children
                  }, index2);
                }
                if (inline.code) {
                  children = /* @__PURE__ */ jsx("code", {
                    children
                  }, index2);
                }
                return /* @__PURE__ */ jsx("span", {
                  children
                }, index2);
              })
            }, index);
          default:
            return null;
        }
      })
    });
  }
);
if (process.env.NODE_ENV !== "production") {
  CommentBody.displayName = COMMENT_BODY_NAME;
  CommentMention.displayName = COMMENT_MENTION_NAME;
  CommentLink.displayName = COMMENT_LINK_NAME;
}

export { CommentBody as Body, CommentLink as Link, CommentMention as Mention };
//# sourceMappingURL=index.js.map