UNPKG

@liveblocks/react-ui

Version:

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.

125 lines (121 loc) 4.01 kB
'use strict'; var jsxRuntime = require('react/jsx-runtime'); var reactSlot = require('@radix-ui/react-slot'); var react = require('react'); var mentions = require('../../slate/plugins/mentions.cjs'); var utils = require('./utils.cjs'); 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: ({ userId }) => { return /* @__PURE__ */ jsxRuntime.jsxs(CommentMention, { children: [ mentions.MENTION_CHARACTER, userId ] }); }, 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 (utils.isCommentBodyMention(inline)) { return inline.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, { userId: inline.id }, index2) : null; } if (utils.isCommentBodyLink(inline)) { const href = utils.toAbsoluteUrl(inline.url) ?? inline.url; 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