@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
JavaScript
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
;