@alauda/doom
Version:
Doctor Doom making docs.
23 lines (22 loc) • 1.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import BananaSlug from 'github-slugger';
import { Children, useMemo } from 'react';
import { X } from './_X.js';
import { useUid } from './_context.js';
// TODO: use context to simplify the usage of `slugger`
export const HeadingTitle = ({ slug, slugger, level, children, }) => {
const uid = useUid();
const HeadingComponents = useMemo(() => {
return [null, X.h1, X.h2, X.h3, X.h4, X.h5, X.h6];
}, []);
const HeadingComponent = HeadingComponents[level];
const slugFromChildren = useMemo(() =>
// eslint-disable-next-line @eslint-react/no-children-to-array
Children.toArray(children)
.filter((it) => typeof it === 'string')
.join(''), [children]);
const id = useMemo(() => [uid, slug || slugger?.slug(slugFromChildren)]
.filter(Boolean)
.join('-') || undefined, [uid, slug, slugger, slugFromChildren]);
return (_jsxs(HeadingComponent, { id: id, children: [children, _jsx(X.a, { className: "header-anchor", href: `#${id}`, "aria-hidden": true, children: "#" })] }));
};