@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 { MENTION_CHARACTER, isCommentBodyMention, isCommentBodyLink, sanitizeUrl } from '@liveblocks/core';
import { Slot } from '@radix-ui/react-slot';
import { forwardRef, useMemo } from 'react';

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: ({ mention }) => {
    return /* @__PURE__ */ jsxs(CommentMention, { children: [
      MENTION_CHARACTER,
      mention.id
    ] });
  },
  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)) {
                  const { type: _, ...mention } = inline;
                  return mention.id ? /* @__PURE__ */ jsx(Mention, { mention }, index2) : null;
                }
                if (isCommentBodyLink(inline)) {
                  const href = sanitizeUrl(inline.url);
                  if (href === null) {
                    return /* @__PURE__ */ jsx("span", { children: inline.text ?? inline.url }, index2);
                  }
                  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