chore: use remark-github-blockquote-alert plugin. #258

Author: jaywcjlove

core/README.md

@@ -617,9 +617,6 @@ import React from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 
 const source = `> 
-> 
-> Useful information that users should know, even when skimming content.
-
 > 
 > [!NOTE]
 > Useful information that users should know, even when skimming content.

core/package.json

@@ -66,7 +66,7 @@
     "rehype-rewrite": "~4.0.0",
     "rehype-slug": "~6.0.0",
     "remark-gfm": "~4.0.0",
-    "remark-github-beta-blockquote-admonitions": "^3.1.1",
+    "remark-github-blockquote-alert": "^1.0.0",
     "unist-util-visit": "^5.0.0"
   }
 }

core/src/plugins/remarkAlert.ts

@@ -3,8 +3,8 @@ import ReactMarkdown, { type UrlTransform } from 'react-markdown';
 import { type PluggableList } from 'unified';
 import gfm from 'remark-gfm';
 import raw from 'rehype-raw';
+import { remarkAlert } from 'remark-github-blockquote-alert';
 import { useCopied } from './plugins/useCopied';
-import { remarkAlert } from './plugins/remarkAlert';
 import { type MarkdownPreviewProps, type MarkdownPreviewRef } from './Props';
 import './styles/markdown.less';
 
@@ -34,7 +34,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
   useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
   const cls = `${prefixCls || ''} ${className || ''}`;
   useCopied(mdp);
-  const rehypePlugins: PluggableList = [[remarkAlert], ...(other.rehypePlugins || [])];
+  const rehypePlugins: PluggableList = [...(other.rehypePlugins || [])];
   const customProps: MarkdownPreviewProps = {
     allowElement: (element, index, parent) => {
       if (other.allowElement) {
@@ -46,7 +46,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
   if (skipHtml) {
     rehypePlugins.push(raw);
   }
-  const remarkPlugins = [...(other.remarkPlugins || []), gfm];
+  const remarkPlugins = [remarkAlert, ...(other.remarkPlugins || []), gfm];
   const wrapperProps = { ...warpperElement, ...wrapperElement };
   return (
     <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...wrapperProps} className={cls} style={style}>

core/src/preview.tsx

@@ -1080,6 +1080,9 @@ body[data-color-mode*='light'] {
       display: flex;
       align-items: center;
       line-height: 1;
+      font-weight: 600;
+      font-family: initial;
+      font-size: 14px;
       svg.octicon {
         margin-right: var(--base-size-8, 8px) !important;
       }