1
1
import React , { useImperativeHandle } from 'react' ;
2
2
import ReactMarkdown , { Options } from 'react-markdown' ;
3
+ import { Root , Element , ElementContent } from 'hast' ;
3
4
import gfm from 'remark-gfm' ;
4
5
import slug from 'rehype-slug' ;
5
6
import headings from 'rehype-autolink-headings'
@@ -10,35 +11,36 @@ import rehypeRewrite from 'rehype-rewrite';
10
11
import './styles/markdown.less' ;
11
12
import './styles/markdowncolor.less' ;
12
13
13
- const rehypeRewriteHandle = ( node : any , index : number , parent : any ) => {
14
- if ( node . type === 'element' && parent . type === 'root' && / h ( 1 | 2 | 3 | 4 | 5 | 6 ) / . test ( node . tagName ) ) {
15
- const child = node . children && node . children [ 0 ] ;
14
+ const octiconLink : Element = {
15
+ type : 'element' ,
16
+ tagName : 'svg' ,
17
+ properties : {
18
+ class : 'octicon octicon-link' ,
19
+ viewBox : '0 0 16 16' ,
20
+ version : '1.1' ,
21
+ width : '16' ,
22
+ height : '16' ,
23
+ ariaHidden : 'true' ,
24
+ } ,
25
+ children : [
26
+ {
27
+ type : 'element' ,
28
+ tagName : 'path' ,
29
+ children : [ ] ,
30
+ properties : {
31
+ fillRule : 'evenodd' ,
32
+ d : 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z' ,
33
+ }
34
+ }
35
+ ]
36
+ }
37
+
38
+ const rehypeRewriteHandle = ( node : ElementContent , index : number | null , parent : Root | Element | null ) => {
39
+ if ( node . type === 'element' && parent && parent . type === 'root' && / h ( 1 | 2 | 3 | 4 | 5 | 6 ) / . test ( node . tagName ) ) {
40
+ const child = node . children && node . children [ 0 ] as Element ;
16
41
if ( child && child . properties && child . properties . ariaHidden === 'true' ) {
17
42
child . properties = { class : 'anchor' , ...child . properties } ;
18
- child . children = [
19
- {
20
- type : 'element' ,
21
- tagName : 'svg' ,
22
- properties : {
23
- class : 'octicon octicon-link' ,
24
- viewBox : '0 0 16 16' ,
25
- version : '1.1' ,
26
- width : '16' ,
27
- height : '16' ,
28
- ariaHidden : 'true' ,
29
- } ,
30
- children : [
31
- {
32
- type : 'element' ,
33
- tagName : 'path' ,
34
- properties : {
35
- fillRule : 'evenodd' ,
36
- d : 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z' ,
37
- }
38
- }
39
- ]
40
- }
41
- ] ;
43
+ child . children = [ octiconLink ] ;
42
44
}
43
45
}
44
46
}
@@ -66,7 +68,7 @@ export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props
66
68
< div ref = { mdp } onScroll = { onScroll } onMouseOver = { onMouseOver } { ...warpperElement } className = { cls } style = { style } >
67
69
< ReactMarkdown
68
70
{ ...other }
69
- rehypePlugins = { [ [ rehypePrism , { ignoreMissing : true } ] , slug , headings , [ rehypeRewrite as any , rehypeRewriteHandle ] , rehypeRaw , ...( other . rehypePlugins || [ ] ) ] }
71
+ rehypePlugins = { [ [ rehypePrism , { ignoreMissing : true } ] , slug , headings , [ rehypeRewrite , rehypeRewriteHandle ] , rehypeRaw , ...( other . rehypePlugins || [ ] ) ] }
70
72
remarkPlugins = { [ ...( other . remarkPlugins || [ ] ) , gfm ] }
71
73
children = { source || '' }
72
74
/>
0 commit comments