ipikuka / remark-flexible-containers

Remark plugin to add custom containers with customizable properties in markdown
MIT License
16 stars 0 forks source link

Without a type and a title feature not working #6

Open JoinChang opened 4 months ago

JoinChang commented 4 months ago

This feature is not working properly: https://github.com/ipikuka/remark-flexible-containers?tab=readme-ov-file#without-a-type-and-a-title

Browser console: image

Markdown file:

:::
手动创建错误成绩,或是通过其他方式导入了错误成绩,均会导致查分器计算出的 Best 50 与玩家 DX Rating 不一致。
:::

Source code:

const Content = ({ markdown }: { markdown: string }) => {
  const navigate = useNavigate();

  return (
    <Markdown
      remarkPlugins={[remarkGfm, remarkFlexibleContainers]}
      rehypePlugins={[
        rehypeSlug,
        [rehypeAutolinkHeadings, {
          behavior: 'wrap',
          properties: {
            className: classes.sectionHeading,
          },
        }]
      ]}
      components={{
...
        div({ className, children, ...props }) {
          const classesName = className ? className.split(" ") : [];

          if (classesName.includes("remark-container")) {
            let icon = <IconInfoCircle />;
            let color = "blue";
            if (classesName.includes("warning")) {
              icon = <IconAlertCircle />;
              color = "yellow";
            }
            if (classesName.includes("danger")) {
              icon = <IconAlertCircle />;
              color = "red";
            }

            const childrenArray = React.Children.toArray(children);
            const titleChild = childrenArray.find(
              child => React.isValidElement(child) && child.props.className?.includes('remark-container-title')
            ) as React.ReactElement;

            return <Alert className={classes.alert} radius="md" variant="light" color={color} title={titleChild?.props.children} icon={icon}>
              {childrenArray.filter(
                (child) => !React.isValidElement(child) || !child.props.className?.includes('remark-container-title')
              )}
            </Alert>
          }
          return <div className={className} {...props}>{children}</div>;
        },
...
      }}
    >
      {markdown}
    </Markdown>
  )
}

Expect result: image

talatkuyuk commented 4 months ago

Thanks for reporting the issue, I will take care it.