@udus/notion-renderer
Version:
27 lines (26 loc) • 2.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isFullUser } from "@notionhq/client";
import { DateComponent } from "../Common/Date.js";
import { Icon } from "../Common/Icon.js";
import { useMapper } from "../hooks.js";
export const Mention = ({ richText: richTextItem }) => {
const { Link } = useMapper();
switch (richTextItem.mention.type) {
case "database":
return (_jsx("span", { className: "notion-database-mention-rich-text", children: _jsxs(Link, { prefix: "/", link: richTextItem.mention.database.id, children: [richTextItem.mention.database.database && (_jsx(Icon, { icon: richTextItem.mention.database.database?.icon })), richTextItem.plain_text] }) }));
case "date":
return (_jsx("span", { className: "notion-date-mention-rich-text", children: _jsx(DateComponent, { date: richTextItem.mention.date }) }));
case "link_preview":
return (_jsx("a", { href: richTextItem.mention.link_preview.url, className: "notion-link-preview-mention-rich-text", children: richTextItem.plain_text }));
case "page":
return (_jsx("span", { className: "notion-page-mention-rich-text", children: _jsxs(Link, { link: richTextItem.mention.page.id, children: [richTextItem.mention.page.page && (_jsx("span", { className: "notion-page-mention-icon", children: _jsx(Icon, { icon: richTextItem.mention.page.page?.icon }) })), _jsx("span", { className: "notion-page-mention-title", children: richTextItem.plain_text })] }) }));
case "template_mention":
console.warn(`${richTextItem.mention.type} is not supported.`);
return null;
case "user":
return (_jsxs("span", { className: "notion-user-mention-rich-text", children: [isFullUser(richTextItem.mention.user) ? (_jsx("img", { className: "notion-user-mention-rich-text-avatar", src: richTextItem.mention.user.avatar_url ?? undefined, alt: "user avater" })) : ("@"), richTextItem.plain_text.replace("@", "")] }));
default:
console.error(`unknown mention type.`);
return null;
}
};