我是如何在bytemd中实现自定义目录的

学习中-。-

已于 2024-06-24 19:42:52 修改

阅读量605

点赞数 10

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2024-06-24 19:36:50 首次发布

本文链接：https://blog.csdn.net/qq_39373532/article/details/139936247

介绍

接着上文说完，实现了在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: