介绍
接着上文说完，实现了在markdown编辑器中插入视频的能力，接下来还需要继续优化 markdown文档的阅读体验，比如 再加个目录
熟悉markdown语法的朋友可能会说，直接在编辑时添加 @toc 标签，可以在文章顶部自动生成目录，但是这并不是我们想要的效果。我们想要什么效果呢，就和掘金这种效果一样(🤓️)。找了一圈没有看到 bytemd有自带的ToC组件，于是决定自行实现目录效果。
目录主要是展示的时候用，所以只需要处理查看页的相关逻辑。写之前也有参考bytemd自带预览视图的目录效果，不过不太好直接复用，因为实际上我们的目录还需要 - 1. 响应点击定位到具体的片段、2. 自定义样式效果 （其实主要原因是 项目开了es严格检查，直接copy过来的目录代码要改的东西太多。。。）
UI层
我们先实现目录的UI组件
export interface Heading {id: string,text: string,level: number
}interface TocProps {hast: Heading[];currentBlockIndex: number;onTocClick: (clickIndex: number) => void;
}
const Toc: React.FC<TocProps> = ({ hast, currentBlockIndex, onTocClick}) => {const [items, setItems] = useState<Heading[]>([]);const [minLevel, setMinLevel] = useState(6);const [currentHeadingIndex, setCurrentHeadingIndex] = useState(0);useEffect(() => {let newMinLevel = 6;setCurrentHeadingIndex(currentBlockIndex);setItems(hast);hast.forEach((item, index) => {newMinLevel = Math.min(newMinLevel, item.level);})setMinLevel(newMinLevel);}, [hast, currentBlockIndex]);const handleClick = (index: number) => {onTocClick(index);};return (<div className={`bytemd-toc`}><h2 style={{marginBottom: '0.5em', fontSize: '16px'}}>目录</h2><div className={styles.tocDivider}/><ul>{items.map((item, index) => (<likey={index}className={`bytemd-toc-${item.level} ${currentHeadingIndex === index ? 'bytemd-toc-active' : ''} ${item.level === minLevel ? 'bytemd-toc-first' : ''}`}style={{paddingLeft: `${(item.level - minLevel) * 16 + 8}px`}}onClick={() => handleClick(index)}onKeyDown={(e) => {if (['Enter', 'Space'].includes(e.code)) {handleClick(index); // 监听目录项的点击}}}tabIndex={0} // Make it focusable>{item.text}</li>))}</ul></div>);
};export default Toc;
目录其实就是循环添加<li>标签,当遇到level小一级的，就添加一个缩进；并处理目录项的选中与未选中的样式。
数据层
实现完目录的UI效果后，接下来就是获取目录数据了。因为文章内容是基于markdown语法编写的，所以渲染到页面上时，标题和正文会由不同的标签来区分，我们只需要将其中的<h>标签过滤出来，就能获取到整个文章的目录结构了。
const extractHeadings = () => {if (viewerRef && viewerRef.current) {const headingElements = Array.from(viewerRef.current!.querySelectorAll('h1, h2, h3, h4, h5, h6'));addIdsToHeadings(headingElements)const headingData = headingElements.map((heading) => ({id: heading.id,text: heading.textContent || "",level: parseInt(heading.tagName.replace('H', ''), 10),}));setHeadings(headingData);}
};
function addIdsToHeadings(headingElements: Element[]) {const ids = new Set(); // 用于存储已经生成的ID，确保唯一性let count = 1;headingElements.forEach(heading => {let slug = generateSlug(heading.textContent);let uniqueSlug = slug;// 如果生成的ID已经存在，添加一个计数器来使其唯一while (ids.has(uniqueSlug)) {uniqueSlug = `${slug}-${count++}`;}ids.add(uniqueSlug);heading.id = uniqueSlug;});
}
交互层
然后再处理目录项的点击和滚动事件，点击某一项时页面要滚动到具体的位置（需要根据当前的内容高度动态计算）；滚动到某一区域时对应的目录项也要展示被选中的状态
// 处理目录项点击事件
const handleTocClick = (index: number) => {if (viewerRef.current && headings.length > index) {const node = document.getElementById(headings[index].id)if (node == null) {return}// 获取元素当前的位置const elementPosition = node.getBoundingClientRect().top;// 获取当前视窗的滚动位置const currentScrollPosition = scrollableDivRef.current?.scrollTop || 0;// 计算目标位置const targetScrollPosition = currentScrollPosition + elementPosition - OFFSET_TOP;console.log("elementPosition ", elementPosition, "currentScrollPosition ", currentScrollPosition, "targetScrollPosition ", targetScrollPosition)// 滚动到目标位置scrollableDivRef.current?.scrollTo({top: targetScrollPosition,behavior: 'smooth' // 可选，平滑滚动});setTimeout(() => {setCurrentBlockIndex(index)}, 100)}
};const handleScroll = throttle(() => {if (isFromClickRef.current) {return;}if (viewerRef.current) {const headings = viewerRef.current.querySelectorAll('h1, h2, h3, h4, h5, h6');let lastPassedHeadingIndex = 0;for (let i = 0; i < headings.length; i++) {const heading = headings[i];const {top} = heading.getBoundingClientRect();if (top < window.innerHeight * 0.3) {lastPassedHeadingIndex = i;} else {break;}}setCurrentBlockIndex(lastPassedHeadingIndex);}
}, 100);
最后，在需要的位置添加ToC组件即可完成目录的展示啦
<Tochast={headings}currentBlockIndex={currentBlockIndex}onTocClick={handleTocClick}
/>
题外话
也许是由于初始选中组件的原因，整个markdown的开发过程并不算顺利，拓展能力几乎没有，需要自行添加。
同时也还遇到了 其中缩放组件 mediumZoom() 会跟随页面的渲染而重复初始化创建overlay层，导致预览失败。这里也提供一个常用的解决方案：使用useMemo对组件进行处理，使其复用，避免了 mediumZoom()的多次初始化
const viewerComponent = useMemo(() => {return <div ref={viewerRef}><Viewerplugins={plugins}value={articleData.content}/></div>
}, [articleData]);
)
