feat: support for github alert. #258

core/README.md

@@ -21,6 +21,7 @@ React component preview markdown text in web browser. The minimal amount of CSS
 - 🍭 Support automatic code block highlight.
 - 🐝 Support for defining styles via comment.
 - ⛳️ Support for [GFM footnotes](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/)
+- ⛳️ Support for [Github Alert](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)
 
 ## Quick Start
 
@@ -609,6 +610,42 @@ Output:
 <p>Good!</p>
 ```
 
+### Support for Github Alerts
+
+```jsx mdx:preview&checkered=0
+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.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+
+
+`;
+
+export default function Demo() {
+  return (
+    <MarkdownPreview source={source} />
+  )
+}
+```
+
 ## Support dark-mode/night-mode
 
 By default, the [`dark-mode`](https://github.com/jaywcjlove/dark-mode/) is automatically switched according to the system. If you need to switch manually, just set the `data-color-mode="dark"` parameter for body. 

core/package.json

@@ -66,6 +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",
     "unist-util-visit": "^5.0.0"
   }
 }

core/src/Props.tsx

@@ -1,6 +1,6 @@
 import { type Options } from 'react-markdown';
 import { type RehypeRewriteOptions } from 'rehype-rewrite';
-import { PluggableList } from 'unified';
+import { type PluggableList } from 'unified';
 
 export interface MarkdownPreviewProps extends Omit<Options, 'children'> {
   prefixCls?: string;

core/src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import MarkdownPreview from './preview';
 import rehypePrism from 'rehype-prism-plus';
-import { PluggableList } from 'unified';
+import type { PluggableList } from 'unified';
 import rehypeRewrite from 'rehype-rewrite';
 import rehypeAttrs from 'rehype-attr';
 import rehypeRaw from 'rehype-raw';
+import MarkdownPreview from './preview';
 import { reservedMeta } from './plugins/reservedMeta';
 import { retrieveMeta } from './plugins/retrieveMeta';
 import { rehypeRewriteHandle, defaultRehypePlugins } from './rehypePlugins';

core/src/nodes/copy.ts

@@ -1,4 +1,4 @@
-import { Element } from 'hast';
+import type { Element } from 'hast';
 
 export function copyElement(str: string = ''): Element {
   return {

core/src/nodes/octiconLink.ts

@@ -1,4 +1,4 @@
-import { Element } from 'hast';
+import type { Element } from 'hast';
 
 export const octiconLink: Element = {
   type: 'element',

core/src/nohighlight.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import MarkdownPreview from './preview';
-import { PluggableList } from 'unified';
+import { type PluggableList } from 'unified';
 import rehypeRewrite from 'rehype-rewrite';
-import { reservedMeta } from './plugins/reservedMeta';
-import { retrieveMeta } from './plugins/retrieveMeta';
 import rehypeAttrs from 'rehype-attr';
 import rehypeRaw from 'rehype-raw';
+import { reservedMeta } from './plugins/reservedMeta';
+import { retrieveMeta } from './plugins/retrieveMeta';
 import { rehypeRewriteHandle, defaultRehypePlugins } from './rehypePlugins';
 import type { MarkdownPreviewProps, MarkdownPreviewRef } from './Props';
 

core/src/plugins/remarkAlert.ts

@@ -0,0 +1,109 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Root, Element, ElementContent } from 'hast';
+
+const alertRegex = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)]/i;
+
+/**
+ * Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.
+ * On GitHub, they are displayed with distinctive colors and icons to indicate the significance of the content.
+ * https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
+ */
+export const remarkAlert: Plugin<[], Root> = () => {
+  return (tree) => {
+    visit(tree, 'element', (node: Element, index, parent) => {
+      if (node.type === 'element' && node.tagName === 'blockquote') {
+        let isNext = true;
+        let alertNode = '';
+        let children = [...node.children].map((item) => {
+          if (isNext && item.type == 'element' && item.tagName == 'p') {
+            const firstNode = item.children[0];
+            const text = firstNode.type === 'text' ? firstNode.value : '';
+            const match = text.match(alertRegex);
+            if (match) {
+              isNext = false;
+              alertNode = match[1].toLocaleLowerCase();
+              if (text.includes('\n')) {
+                item.children[0] = {
+                  type: 'text',
+                  value: text.replace(alertRegex, '').replace(/^\n+/, ''),
+                };
+              }
+              if (!text.includes('\n')) {
+                const itemChild: ElementContent[] = [];
+                item.children.forEach((item, idx) => {
+                  if (idx == 0) return;
+                  if (idx == 1 && item.type === 'element' && item.tagName === 'br') {
+                    return;
+                  }
+                  itemChild.push(item);
+                });
+                item.children = [...itemChild];
+              }
+            }
+          }
+          return item;
+        });
+        node.children = [...children];
+        if (!!alertNode) {
+          node.tagName = 'div';
+          node.properties.className = ['markdown-alert', `markdown-alert-${alertNode}`];
+          const title: Element = {
+            type: 'element',
+            tagName: 'p',
+            properties: {
+              className: ['markdown-alert-title'],
+              dir: 'auto',
+            },
+            children: [
+              {
+                type: 'text',
+                value: alertNode.toLocaleUpperCase(),
+              },
+            ],
+          };
+          title.children.unshift(alertIcon(alertNode as IconType));
+          node.children.unshift(title);
+        }
+      }
+    });
+  };
+};
+
+type IconType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+
+let pathData: Record<IconType, string> = {
+  note: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z',
+  tip: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z',
+  important:
+    'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z',
+  warning:
+    'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z',
+  caution:
+    'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z',
+};
+
+export function alertIcon(type: IconType): Element {
+  let pathD = pathData[type] ?? '';
+  return {
+    type: 'element',
+    tagName: 'svg',
+    properties: {
+      className: ['octicon'],
+      viewBox: '0 0 16 16',
+      width: '16',
+      height: '16',
+      ariaHidden: 'true',
+    },
+    children: [
+      {
+        type: 'element',
+        properties: {
+          d: pathD,
+        },
+        tagName: 'path',
+        children: [],
+      },
+    ],
+  };
+}

core/src/plugins/reservedMeta.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'unified';
+import type { Plugin } from 'unified';
 import { Root, RootContent } from 'hast';
 import { visit } from 'unist-util-visit';
 

core/src/plugins/retrieveMeta.ts

@@ -1,5 +1,5 @@
-import { Plugin } from 'unified';
-import { Root, RootContent } from 'hast';
+import type { Plugin } from 'unified';
+import type { Root, RootContent } from 'hast';
 import { visit } from 'unist-util-visit';
 
 export interface RetrieveMetaOptions {}

core/src/preview.tsx

@@ -1,9 +1,10 @@
 import React, { useImperativeHandle } from 'react';
-import ReactMarkdown, { UrlTransform } from 'react-markdown';
-import { PluggableList } from 'unified';
+import ReactMarkdown, { type UrlTransform } from 'react-markdown';
+import { type PluggableList } from 'unified';
 import gfm from 'remark-gfm';
 import raw from 'rehype-raw';
 import { useCopied } from './plugins/useCopied';
+import { remarkAlert } from './plugins/remarkAlert';
 import { type MarkdownPreviewProps, type MarkdownPreviewRef } from './Props';
 import './styles/markdown.less';
 
@@ -33,8 +34,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
   useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
   const cls = `${prefixCls || ''} ${className || ''}`;
   useCopied(mdp);
-
-  const rehypePlugins: PluggableList = [...(other.rehypePlugins || [])];
+  const rehypePlugins: PluggableList = [[remarkAlert], ...(other.rehypePlugins || [])];
   const customProps: MarkdownPreviewProps = {
     allowElement: (element, index, parent) => {
       if (other.allowElement) {

core/src/rehypePlugins.tsx

@@ -1,11 +1,11 @@
-import { PluggableList } from 'unified';
+import type { PluggableList } from 'unified';
 import slug from 'rehype-slug';
 import headings from 'rehype-autolink-headings';
 import rehypeIgnore from 'rehype-ignore';
-import { getCodeString, RehypeRewriteOptions } from 'rehype-rewrite';
+import { getCodeString, type RehypeRewriteOptions } from 'rehype-rewrite';
+import type { Root, Element, RootContent } from 'hast';
 import { octiconLink } from './nodes/octiconLink';
 import { copyElement } from './nodes/copy';
-import { Root, Element, RootContent } from 'hast';
 
 export const rehypeRewriteHandle =
   (disableCopy: boolean, rewrite?: RehypeRewriteOptions['rewrite']) =>

core/src/styles/markdown.less

@@ -44,6 +44,13 @@
     --color-accent-emphasis: #1f6feb;
     --color-attention-subtle: rgba(187, 128, 9, 0.15);
     --color-danger-fg: #f85149;
+    --color-danger-emphasis: #da3633;
+    --color-attention-fg: #d29922;
+    --color-attention-emphasis: #9e6a03;
+    --color-done-fg: #a371f7;
+    --color-done-emphasis: #8957e5;
+    --color-success-fg: #3fb950;
+    --color-success-emphasis: #238636;
     --color-copied-active-bg: #2e9b33;
   }
 }
@@ -93,7 +100,14 @@
     --color-accent-fg: #0969da;
     --color-accent-emphasis: #0969da;
     --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
+    --color-danger-fg: #d1242f;
+    --color-danger-emphasis: #cf222e;
+    --color-attention-fg: #9a6700;
+    --color-attention-emphasis: #9a6700;
+    --color-done-fg: #8250df;
+    --color-done-emphasis: #8250df;
+    --color-success-fg: #1a7f37;
+    --color-success-emphasis: #1f883d;
     --color-copied-active-bg: #2e9b33;
   }
 }
@@ -1053,6 +1067,56 @@ body[data-color-mode*='light'] {
   }
 }
 
+.wmde-markdown {
+  .markdown-alert {
+    padding: 0.5rem 1em;
+    color: inherit;
+    margin-bottom: 16px;
+    border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
+    > :last-child {
+      margin-bottom: 0 !important;
+    }
+    .markdown-alert-title {
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      svg.octicon {
+        margin-right: var(--base-size-8, 8px) !important;
+      }
+    }
+    &.markdown-alert-note {
+      border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+      .markdown-alert-title {
+        color: var(--fgColor-accent, var(--color-accent-fg));
+      }
+    }
+    &.markdown-alert-tip {
+      border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
+      .markdown-alert-title {
+        color: var(--fgColor-success, var(--color-success-fg));
+      }
+    }
+    &.markdown-alert-important {
+      border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
+      .markdown-alert-title {
+        color: var(--fgColor-done, var(--color-done-fg));
+      }
+    }
+    &.markdown-alert-warning {
+      border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+      .markdown-alert-title {
+        color: var(--fgColor-attention, var(--color-attention-fg));
+      }
+    }
+    &.markdown-alert-caution {
+      border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
+      .markdown-alert-title {
+        color: var(--fgColor-danger, var(--color-danger-fg));
+      }
+    }
+  }
+}
+
 .wmde-markdown {
   .highlight-line {
     background-color: var(--color-neutral-muted);