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

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.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var core = require('@liveblocks/core');
var reactSlot = require('@radix-ui/react-slot');
var react = require('react');

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

exports.Body = CommentBody;
exports.Link = CommentLink;
exports.Mention = CommentMention;
//# sourceMappingURL=index.cjs.map